🐞 fix(ID1001354): 【面料优选&内部小程序】【色卡剪样/领取色卡】--添加色卡后，点击返回键，没弹框提示

【【面料优选&内部小程序】【色卡剪样/领取色卡】--添加色卡后，点击返回键，没弹框提示】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001354

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;
+  }
+}

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<Taro.getMenuButtonBoundingClientRect.Rect | null>(null)
+  const systemInfo = useRef<Taro.getSystemInfoSync.Result | null>(null)
+  const navBarExtendHeight = useRef<number>(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 <View className={styles.navBarContainer} style={{ height: `${height + navBarExtendHeight.current}px` }}>
+    <View className={styles.navBar} style={{ height: `${menuHeight}px`, marginTop: `${menuTop}px` }}>
+      <View className={styles.left_view}>
+        {hasLeft && leftSlot
+          ? leftSlot
+          : <View className={styles.back} onClick={handleClickLeftIcon}>
+            <IconFont name="icon-zhankai" size={50} color="#000000" customStyle={{ transform: 'rotate(90deg)' }}></IconFont>
+            <View className={styles.iconName}>返回</View>
+          </View>
+        }
+
+      </View>
+      <View className={styles.title}>{ title || children }</View>
+      {/* 占位元素 */}
+      <View className={styles.right_view}></View>
+    </View>
+
+  </View>
+}
+export default NavBar

src/pages/colorCardOrder/index.config.ts

@@ -1,4 +1,6 @@
 export default {
   navigationBarTitleText: '领取色卡',
   enableShareAppMessage: true,
+  disableSwipeBack: true,
+  navigationStyle: 'custom',
 }

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;

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 <View className={styles.main}>
-    <Address onSelect={getAddress} defaultValue={addressInfo} />
+    <NavBar hasLeft leftSlot={
+      <View onClick={onClickBack}>
+        <IconFont customClassName={styles.backIcon} name="icon-rukou" size={48} color="#191919"></IconFont>
+      </View>
+    } title="领取色卡"
+    ></NavBar>
+    <View className={styles.remark}>
+      <Address onSelect={getAddress} defaultValue={addressInfo} />
+    </View>
     <View className={styles.add_card_btn} onClick={onAddCard}>添加色卡</View>
     <View className={styles.card_con}>
       <View className={styles.card_header}>色卡信息</View>
@@ -146,7 +170,9 @@ export default () => {
         <View className={styles.express_btn}>快递到付</View>
       </View>
     </View>
-    <Remark onSave={onRemark} defaultValue={remarkData} />
+    <View className={styles.remark}>
+      <Remark onSave={onRemark} defaultValue={remarkData} />
+    </View>
     <View className={styles.order_btn}>
       <View className={styles.btn_con} onClick={onSubmitData}>
         <Text>{numText}</Text>

src/pages/cutSampleListOrder/index.config.ts

@@ -1,4 +1,6 @@
 export default {
   navigationBarTitleText: '领取剪样',
   enableShareAppMessage: true,
+  disableSwipeBack: true,
+  navigationStyle: 'custom',
 }

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;

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 <View className={styles.main}>
+    <NavBar hasLeft leftSlot={
+      <View onClick={onClickBack}>
+        <IconFont customClassName={styles.backIcon} name="icon-rukou" size={48} color="#191919"></IconFont>
+      </View>
+    } title="领取剪样"
+    ></NavBar>
     <Address onSelect={getAddress} defaultValue={addressInfo} />
     <View className={styles.add_card_btn} onClick={onAddCard}>添加剪样</View>
     {list?.map(item => <View key={item.id} className={styles.card_con}>