Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/EShop into dev

config/dev.js

@@ -22,10 +22,10 @@ module.exports = {
             args: [
               {
                 terserOptions: {
-                  compress: true, // 默认使用terser压缩
+                  // compress: true, // 默认使用terser压缩
-                  // compress: {
+                  compress: {
-                  //   drop_console: true, // 去掉打印
+                    drop_console: false, // 去掉打印
-                  // }, // 默认使用terser压缩
+                  }, // 默认使用terser压缩
                   // mangle: false,
                   keep_classnames: true, // 不改变class名称
                   keep_fnames: true, // 不改变函数名称

config/pre.js

@@ -24,7 +24,7 @@ module.exports = {
                 terserOptions: {
                   // compress: true, // 默认使用terser压缩
                   compress: {
-                    // drop_console: true, // 去掉打印
+                    drop_console: false, // 去掉打印
                   }, // 默认使用terser压缩
                   // mangle: false,
                   keep_classnames: true, // 不改变class名称

src/components/checkbox/index.module.scss

@@ -37,7 +37,7 @@
   }
 }
 .checkbox_main_no_selected {
-  border: 0 !important;
+  border-color: #c2c2c2;
 }
 .checkbox_item {
   display: flex;
@@ -45,7 +45,7 @@
   justify-content: center;
 }
 .no_checkbox_item {
-  border: 0 !important;
+  border-color: #c2c2c2;
   background-color: #dddddd !important;
 }
 .checkbox_item_select {

src/components/checkbox/index.tsx

@@ -44,6 +44,7 @@ const Checkbox = (props: params, ref) => {
   })
 
   const onSelectEven = () => {
+    console.log('disabled', disabled)
     if (disabled) { return false }
     const res = !selected
     if (res) {

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/colorCardClipping/components/productItem/index.module.scss

@@ -49,6 +49,22 @@
           }
         }
       }
+      .item_con_tag {
+        display: flex;
+        flex-flow: row wrap;
+        margin-top: 8px;
+        padding-left: 24px;
+        .tag {
+          box-sizing: border-box;
+          background-color: #e4ecfe;
+          color: $color_main;
+          padding: 4px 8px;
+          margin-right: 8px;
+          font-size: 22px;
+          margin-bottom: 10px;
+          border-radius: 10px;
+        }
+      }
       .item_con_count {
         text-align: right;
         color: rgba(0, 0, 0, 0.6);

src/pages/colorCardClipping/components/productItem/index.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import { goLink } from '@/common/common'
+import { formatRemoveHashTag } from '@/common/fotmat'
 
 interface color_card_info {
   count: number
@@ -10,6 +11,7 @@ interface color_card_info {
   name: string
   rgb: { r: number; g: number; b: number }
   texture_url: string
+  affiliation_product: any[]
 }
 
 export interface ParamItem {
@@ -62,6 +64,14 @@ export default (props: Param) => {
           <Text>{card_one?.name}</Text>
           <Text>{value.shipment_mode_name}</Text>
         </View>
+        <View className={styles.item_con_tag}>
+          {
+            value.color_card_info?.[0]?.affiliation_product?.map((item) => {
+              return <View className={styles.tag} key={item.id}>{formatRemoveHashTag(item.code)}</View>
+            })
+          }
+          <View></View>
+        </View>
         <Text className={styles.item_con_count}>x{card_one?.count}本</Text>
       </View>
 

src/pages/colorCardList/components/productItem/index.tsx

@@ -3,6 +3,7 @@ import { memo, useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import Checkbox from '@/components/checkbox'
+import { alert } from '@/common/common'
 
 interface ProductItemParamType {
   code: string
@@ -19,13 +20,22 @@ export interface ParamType {
   is_add: boolean
   onSelect?: (val: ParamType, status: boolean) => void
   count?: number
+  selectList?: any[]
 }
 
+// 限制5个
+const limit = 5
+
 export default memo((props: ParamType) => {
-  const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props
+  const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb, selectList } = props
   const [checkStatus, setCheckStatus] = useState(false)
   const changeSelect = () => {
+    console.log('isDisabled', isDisabled)
     if (props.is_add) { return false }
+    if (isDisabled) {
+      alert.none('每次最多申请5种面料')
+      return false
+    }
     setCheckStatus(!checkStatus)
     props.onSelect?.(props, !checkStatus)
   }
@@ -38,6 +48,20 @@ export default memo((props: ParamType) => {
     props.onSelect?.(props, false)
     setCheckStatus(false)
   }
+
+  const isDisabled = useMemo(() => {
+    const set = new Set(selectList?.map(item => item.id))
+    if (selectList) {
+      if (set.has(props.id)) {
+        return false
+      }
+      return set.size >= limit
+    }
+    else {
+      return false
+    }
+  }, [selectList])
+
   const labAndImgObj = useMemo(
     () => {
       return { lab: props.lab, rgb: props.rgb, texture_url: props.texture_url }
@@ -56,7 +80,7 @@ export default memo((props: ParamType) => {
       </View>
     </View>
     <View className={styles.checkBox} onClick={e => e.stopPropagation()}>
-      <Checkbox status={props.is_add ? true : checkStatus} disabled={props.is_add} onSelect={onSelect} onClose={onClose} />
+      <Checkbox status={props.is_add ? true : checkStatus} disabled={props.is_add || isDisabled} onSelect={onSelect} onClose={onClose} />
     </View>
   </View>
 })

src/pages/colorCardList/index.tsx

@@ -100,16 +100,22 @@ export default () => {
       })
     }
   }
+  // 多选
+  const multipleSelection = useRef<any[]>([])
 
   const onSelectData = (val, status) => {
+    console.log('onSelectData', val, status)
+    console.log('selectList', selectList)
     if (status) {
+      multipleSelection.current.push(val)
       setSelectList(e => [val, ...e])
     }
     else {
       const res = selectList?.filter((item) => {
         return val.id != item.id
       })
-      setSelectList(e => res)
+      multipleSelection.current = res
+      setSelectList(res)
     }
   }
 
@@ -129,14 +135,14 @@ export default () => {
         {colorCardData.list?.map((item) => {
           return (
             <View className={styles.get_card_list} key={item.id}>
-              <ProductItem {...item} onSelect={onSelectData} />
+              <ProductItem selectList={selectList} {...item} onSelect={onSelectData} />
             </View>
           )
         })}
       </InfiniteScroll>
     </View>
     <View className={styles.get_card_btn} onClick={onSubmit}>
-      <Text className={classNames(selectList.length > 0 ? styles.selected : '')}>确认</Text>
+      <Text className={classNames(multipleSelection.current.length > 0 ? styles.selected : '')}>确认</Text>
     </View>
   </View>
 }

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,5 @@
 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}>