From 58b07c87eecd13a3d25c54fc97572bd8f93ba931 Mon Sep 17 00:00:00 2001 From: xuan Date: Mon, 27 Feb 2023 16:00:31 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix(ID1001354):=20=E3=80=90?= =?UTF-8?q?=E9=9D=A2=E6=96=99=E4=BC=98=E9=80=89&=E5=86=85=E9=83=A8?= =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E3=80=91=E3=80=90=E8=89=B2=E5=8D=A1?= =?UTF-8?q?=E5=89=AA=E6=A0=B7/=E9=A2=86=E5=8F=96=E8=89=B2=E5=8D=A1?= =?UTF-8?q?=E3=80=91--=E6=B7=BB=E5=8A=A0=E8=89=B2=E5=8D=A1=E5=90=8E?= =?UTF-8?q?=EF=BC=8C=E7=82=B9=E5=87=BB=E8=BF=94=E5=9B=9E=E9=94=AE=EF=BC=8C?= =?UTF-8?q?=E6=B2=A1=E5=BC=B9=E6=A1=86=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【【面料优选&内部小程序】【色卡剪样/领取色卡】--添加色卡后，点击返回键，没弹框提示】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001354 --- src/components/navBar/index.module.scss | 38 ++++++++++ src/components/navBar/index.tsx | 75 +++++++++++++++++++ src/pages/colorCardOrder/index.config.ts | 2 + src/pages/colorCardOrder/index.module.scss | 9 ++- src/pages/colorCardOrder/index.tsx | 30 +++++++- src/pages/cutSampleListOrder/index.config.ts | 2 + .../cutSampleListOrder/index.module.scss | 10 ++- src/pages/cutSampleListOrder/index.tsx | 21 ++++++ 8 files changed, 182 insertions(+), 5 deletions(-) create mode 100644 src/components/navBar/index.module.scss create mode 100644 src/components/navBar/index.tsx diff --git a/src/components/navBar/index.module.scss b/src/components/navBar/index.module.scss new file mode 100644 index 0000000..8cafbeb --- /dev/null +++ b/src/components/navBar/index.module.scss @@ -0,0 +1,38 @@ +.navBarContainer { + overflow: hidden; + background-color: #fff; + height: auto; + flex-shrink: 0; +} +.navBar { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + width: 100%; + padding: 0 24px; + box-sizing: border-box; + .left_view { + flex: 2; + } + .title { + flex: 5; + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + font-size: 36px; + font-weight: 550; + color: #000; + } + .right_view { + flex: 2; + } +} +.back { + display: flex; + align-items: center; + .iconName { + font-size: 28px; + } +} diff --git a/src/components/navBar/index.tsx b/src/components/navBar/index.tsx new file mode 100644 index 0000000..1f475fb --- /dev/null +++ b/src/components/navBar/index.tsx @@ -0,0 +1,75 @@ +import { View } from '@tarojs/components' +import Taro, { useReady } from '@tarojs/taro' +import { useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import IconFont from '@/components/iconfont/iconfont' + +interface NavBarPropsType { + children?: React.ReactNode + hasLeft?: boolean + leftSlot?: React.ReactNode + title?: string + onClickLeftIcon?: () => void +} +const NavBar = (props: NavBarPropsType) => { + const { children, hasLeft = false, title = '', leftSlot, onClickLeftIcon } = props + const handleClickLeftIcon = () => { + onClickLeftIcon?.() + } + const menuButtonRect = useRef(null) + const systemInfo = useRef(null) + const navBarExtendHeight = useRef(0) + const rpxToPx = useRef(0) + const [, setForceUpdate] = useState({}) + const [height, setHeight] = useState(0) + // 处理布局 + const handleLayout = () => { + const { statusBarHeight, system } = systemInfo.current! + const ios = !!(system.toLowerCase().search('ios') + 1) + if (ios) { + navBarExtendHeight.current = 4 // 下方扩展4像素高度 防止下方边距太小 + } + else { + navBarExtendHeight.current = 0 + } + const { top, height: menuHeight } = menuButtonRect.current! + const height = menuHeight + (top - statusBarHeight!) * 2 + statusBarHeight! // 整个navBar的高度 + console.log('height', height) + setHeight(height) + } + useEffect(() => { + systemInfo.current = Taro.getSystemInfoSync() + menuButtonRect.current = Taro.getMenuButtonBoundingClientRect() + rpxToPx.current = systemInfo.current.screenWidth / 750 + setForceUpdate({}) + handleLayout() + }, []) + + const menuHeight = useMemo(() => { + return menuButtonRect.current?.height + }, [menuButtonRect.current]) + + const menuTop = useMemo(() => { + return menuButtonRect.current?.top + }, [menuButtonRect.current]) + + return + + + {hasLeft && leftSlot + ? leftSlot + : + + 返回 + + } + + + { title || children } + {/* 占位元素 */} + + + + +} +export default NavBar diff --git a/src/pages/colorCardOrder/index.config.ts b/src/pages/colorCardOrder/index.config.ts index b6f5435..3e12077 100644 --- a/src/pages/colorCardOrder/index.config.ts +++ b/src/pages/colorCardOrder/index.config.ts @@ -1,4 +1,6 @@ export default { navigationBarTitleText: '领取色卡', enableShareAppMessage: true, + disableSwipeBack: true, + navigationStyle: 'custom', } diff --git a/src/pages/colorCardOrder/index.module.scss b/src/pages/colorCardOrder/index.module.scss index 8df6368..584fccb 100644 --- a/src/pages/colorCardOrder/index.module.scss +++ b/src/pages/colorCardOrder/index.module.scss @@ -1,9 +1,12 @@ .main { min-height: 100vh; background-color: #f7f7f7ff; - padding: 24px; padding-bottom: 180px; + .backIcon { + transform: rotate(180deg); + } .add_card_btn { + margin: 24px; height: 82px; background: #ffffff; border-radius: 16px; @@ -14,6 +17,7 @@ margin-top: 24px; } .card_con { + margin: 24px; background-color: #ffffff; padding: 0 24px; margin-top: 24px; @@ -37,6 +41,9 @@ } } } + .remark { + margin: 24px; + } .order_btn { position: fixed; diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx index 8e4fa40..f470838 100644 --- a/src/pages/colorCardOrder/index.tsx +++ b/src/pages/colorCardOrder/index.tsx @@ -14,6 +14,8 @@ import { UseSubscriptionMessage } from '@/use/useCommon' import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' import { addressListApi } from '@/api/addressManager' import MoveBtn from '@/components/moveBtn' +import IconFont from '@/components/iconfont/iconfont' +import NavBar from '@/components/navBar' export interface submitData { address_id: number @@ -136,8 +138,30 @@ export default () => { setAddressInfo(defaultInfo!) } + const onClickBack = () => { + Taro.showModal({ + content: '返回后页面数据将不回保留，确认返回？', + confirmColor: '#4a8dff', + success: ({ confirm }) => { + if (confirm) { + Taro.navigateBack({ + delta: 1, + }) + } + }, + }) + } + return -
+ + + + } title="领取色卡" + > + +
+ 添加色卡 色卡信息 @@ -146,7 +170,9 @@ export default () => { 快递到付 - + + + {numText} diff --git a/src/pages/cutSampleListOrder/index.config.ts b/src/pages/cutSampleListOrder/index.config.ts index 6d8b6a0..70da7a6 100644 --- a/src/pages/cutSampleListOrder/index.config.ts +++ b/src/pages/cutSampleListOrder/index.config.ts @@ -1,4 +1,6 @@ export default { navigationBarTitleText: '领取剪样', enableShareAppMessage: true, + disableSwipeBack: true, + navigationStyle: 'custom', } diff --git a/src/pages/cutSampleListOrder/index.module.scss b/src/pages/cutSampleListOrder/index.module.scss index 7911afd..5827fea 100644 --- a/src/pages/cutSampleListOrder/index.module.scss +++ b/src/pages/cutSampleListOrder/index.module.scss @@ -1,9 +1,12 @@ .main { min-height: 100vh; background-color: #f7f7f7ff; - padding: 24px; padding-bottom: 180px; + .backIcon { + transform: rotate(180deg); + } .add_card_btn { + margin: 24px; height: 82px; background: #ffffff; border-radius: 16px; @@ -14,6 +17,7 @@ margin-top: 24px; } .card_con { + margin: 24px; background-color: #ffffff; padding: 0 24px; margin-top: 24px; @@ -37,7 +41,9 @@ } } } - + .remark { + margin: 24px; + } .order_btn { position: fixed; height: 162px; diff --git a/src/pages/cutSampleListOrder/index.tsx b/src/pages/cutSampleListOrder/index.tsx index fb7e9ca..ddbcd84 100644 --- a/src/pages/cutSampleListOrder/index.tsx +++ b/src/pages/cutSampleListOrder/index.tsx @@ -15,6 +15,8 @@ import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' import { formatHashTag } from '@/common/fotmat' import { submitCutSampleOrderApi } from '@/api/cutSample' import { addressListApi } from '@/api/addressManager' +import NavBar from '@/components/navBar' +import IconFont from '@/components/iconfont/iconfont' export interface submitData { address_id: number @@ -196,8 +198,27 @@ export default () => { submitData.current.address_id = defaultInfo!.id || 0 setAddressInfo(defaultInfo!) } + const onClickBack = () => { + Taro.showModal({ + content: '返回后页面数据将不回保留，确认返回？', + confirmColor: '#4a8dff', + success: ({ confirm }) => { + if (confirm) { + Taro.navigateBack({ + delta: 1, + }) + } + }, + }) + } return + + + + } title="领取剪样" + >
添加剪样 {list?.map(item =>