✨ feat(ID1000944): 【面料优选】面料详情页购物体验优化

【【面料优选】面料详情页购物体验优化】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000944

.eslintrc

@@ -18,4 +18,4 @@
     "array-callback-return": 0,
     "react/prop-types": 0
   }
-}
+}

src/common/constant.ts

@@ -1,19 +1,13 @@
-export const BASE_URL = CURRENT_BASE_URL
+// export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
-// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
 // export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
-// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
+export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
-// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
-// export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
-// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
 // export const BASE_URL = 'https://dev.zzfzyc.com/lymarket' // 开发环境
 // export const BASE_URL = 'https://www.zzfzyc.com/lymarket' // 正式环境
-// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
-// export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷
 // export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
 
 // CDN

src/common/format.ts

@@ -1,185 +1,208 @@
-import { IMG_CND_Prefix } from './constant'
+import { IMG_CND_Prefix } from './constant'
-
+
-/**
+/**
- * 移除井号
+ * 移除井号
- * @param {String} val code 编码
+ * @param {String} val code 编码
- * @returns
+ * @returns
- */
+ */
-export const formatRemoveHashTag = (val = '') => {
+export const formatRemoveHashTag = (val = '') => {
-  // console.log('移除标签',val,val.endsWith("#"));
+  // console.log('移除标签',val,val.endsWith("#"));
-  return val.endsWith('#') ? val.replace('#', '') : val
+  return val.endsWith('#') ? val.replace('#', '') : val
-}
+}
-
+
-/**
+/**
- * 格式化编码+名称显示方式
+ * 格式化编码+名称显示方式
- * @param {String} code 编码
+ * @param {String} code 编码
- * @param {String} name 名称
+ * @param {String} name 名称
- * @param {*} mode 模式 both:code + 名称 name: 仅显示名称
+ * @param {*} mode 模式 both:code + 名称 name: 仅显示名称
- * @returns
+ * @returns
- */
+ */
-export const formatHashTag = (code = '', name = '', mode = 'both') => {
+export const formatHashTag = (code = '', name = '', mode = 'both') => {
-  if (mode == 'both') {
+  if (mode == 'both') {
-    return `${formatRemoveHashTag(code)}# ${name}`
+    return `${formatRemoveHashTag(code)}# ${name}`
-  }
+  }
-  else if (mode == 'name') {
+  else if (mode == 'name') {
-    return `${name}`
+    return `${name}`
-  }
+  }
-}
+}
-
+
-const Digit = 10 * 10
+const Digit = 10 * 10
-/**
+
- *  精度
+/**
- * @param {*} num
+ *  精度
- * @param {*} precision
+ * @param {*} num
- * @returns
+ * @param {*} precision
- */
+ * @returns
-export const strip = (num, precision = 12) => {
+ */
-  return +parseFloat(num.toPrecision(precision))
+export const strip = (num, precision = 12) => {
-}
+  return +parseFloat(num.toPrecision(precision))
-/**
+}
- *
+/**
- * @param {千位分割付} number
+ *
- * @returns
+ * @param {千位分割付} number
- */
+ * @returns
-export const numberWithCommas = ({ number = 0, digit = 2 }) => {
+ */
-  if (!Number.isNaN(Number(number))) {
+export const numberWithCommas = ({ number = 0, digit = 2 }) => {
-    // return parseFloat(number).toFixed(digit).replace(/^\B(?<!\.\d*)(?=(\d{3})+(?!\d))$/g, ",");
+  if (!Number.isNaN(Number(number))) {
-    return parseFloat(number).toLocaleString('zh', { minimumFractionDigits: digit })
+    // return parseFloat(number).toFixed(digit).replace(/^\B(?<!\.\d*)(?=(\d{3})+(?!\d))$/g, ",");
-  }
+    return parseFloat(number as unknown as string).toLocaleString('zh', { minimumFractionDigits: digit })
-  else {
+  }
-    return 0.0
+  else {
-  }
+    return 0.0
-}
+  }
-/**
+}
- * 重量 进退位 单位
+/**
- */
+ * 重量 进退位 单位
-export const weightDigit = 1000
+ */
-
+export const weightDigit = 1000
-/**
+
- * 除以
+/**
- * @param {*} val
+ * 厘米进退位单位
- * @param {*} digit
+ */
- * @param {*} priceStatus //是否显示千位分割
+export const meterDigit = 100
- * @returns
+
- */
+/**
-export const formatPriceDiv = (val, digit = Digit, priceStatus = false) => {
+ * 除以
-  const res = strip(Number(val / digit)) || 0
+ * @param {*} val
-  return priceStatus ? numberWithCommas({ number: res }) : res
+ * @param {*} digit
-}
+ * @param {*} priceStatus //是否显示千位分割
-/**
+ * @returns
- * 乘以
+ */
- * @param {*} val
+export const formatPriceDiv = (val, digit = Digit, priceStatus = false) => {
- * @param {*} digit
+  const res = strip(Number(val / digit)) || 0
- * @returns
+  return priceStatus ? numberWithCommas({ number: res }) : res
- */
+}
-export const formatPriceMul = (val, digit = Digit) => {
+/**
-  return strip(Number(val * digit)) || 0
+ * 乘以
-}
+ * @param {*} val
-
+ * @param {*} digit
-/**
+ * @returns
- * 格式化重量单位 (乘以)
+ */
- * @param {Number} val
+export const formatPriceMul = (val, digit = Digit) => {
- * @returns
+  return strip(Number(val * digit)) || 0
- */
+}
-export const formatWeightMul = (val, digit = weightDigit) => {
+
-  return strip(Number(val * digit)) || 0
+/**
-}
+ * 格式化长度 (乘以)
-
+ * @param {Number} val
-/**
+ * @returns
- * 格式化重量单位 (除以)
+ */
- * @param {*} val
+export const formatMeterMul = (val, digit = meterDigit) => {
- */
+  return strip(Number(val * digit)) || 0
-export const formatWeightDiv = (val, digit = weightDigit) => {
+}
-  return strip(Number(val / digit)) || 0
+
-}
+/**
-
+ * 格式化长度 (除以)
-export const formatDateTime = (val, fmt = 'YYYY-MM-DD HH:mm:ss') => {
+ * @param {*} val
-  if (val) {
+ */
-    const time = new Date(val)
+export const formatMeterDiv = (val, digit = meterDigit) => {
-    const Y = time.getFullYear()
+  return strip(Number(val / digit)) || 0
-    const M = time.getMonth() + 1
+}
-    const d = time.getDate()
+
-    const h = time.getHours()
+/**
-    const m = time.getMinutes()
+ * 格式化重量单位 (乘以)
-    const s = time.getSeconds()
+ * @param {Number} val
-
+ * @returns
-    fmt = fmt
+ */
-      .replace('YYYY', Y)
+export const formatWeightMul = (val, digit = weightDigit) => {
-      .replace('MM', M.toString().padStart(2, '0'))
+  return strip(Number(val * digit)) || 0
-      .replace('DD', d.toString().padStart(2, '0'))
+}
-      .replace('HH', h.toString().padStart(2, '0'))
+
-      .replace('mm', m.toString().padStart(2, '0'))
+/**
-      .replace('ss', s.toString().padStart(2, '0'))
+ * 格式化重量单位 (除以)
-
+ * @param {*} val
-    return fmt
+ */
-  }
+export const formatWeightDiv = (val, digit = weightDigit) => {
-  else {
+  return strip(Number(val / digit)) || 0
-    return val
+}
-  }
+
-}
+export const formatDateTime = (val, fmt = 'YYYY-MM-DD HH:mm:ss') => {
-
+  if (val) {
-/**
+    const time = new Date(val)
- * 数值保留两位小数
+    const Y = time.getFullYear()
- * @param {*} x
+    const M = time.getMonth() + 1
- * @returns
+    const d = time.getDate()
- */
+    const h = time.getHours()
-export const toDecimal2 = (x) => {
+    const m = time.getMinutes()
-  let f = parseFloat(x)
+    const s = time.getSeconds()
-  if (Number.isNaN(f)) {
+
-    return 0
+    fmt = fmt
-  }
+      .replace('YYYY', String(Y))
-  f = `${f}`
+      .replace('MM', M.toString().padStart(2, '0'))
-  const index = f.lastIndexOf('.')
+      .replace('DD', d.toString().padStart(2, '0'))
-  if (index >= 0) {
+      .replace('HH', h.toString().padStart(2, '0'))
-    const decimal = f.substring(index + 1)
+      .replace('mm', m.toString().padStart(2, '0'))
-    if (decimal.length == 1) {
+      .replace('ss', s.toString().padStart(2, '0'))
-      f = `${f.substring(0, index + 1) + decimal}0`
+
-    }
+    return fmt
-    else {
+  }
-      f = f.substring(0, index + 1) + decimal.substring(0, 2)
+  else {
-    }
+    return val
-  }
+  }
-  return f
+}
-}
+
-/**
+/**
- * 转换金额单位
+ * 数值保留两位小数
- * @param {*} num 金额 / 数值
+ * @param {*} x
- * @param {*} digit 转换单位
+ * @returns
- * @returns
+ */
- */
+export const toDecimal2 = (x) => {
-export const formatMillionYuan = (num, digit = 10000) => {
+  let f = String(parseFloat(x))
-  return num / digit > 1 ? { num: toDecimal2(num / digit), million: true } : { num, million: false }
+  if (Number.isNaN(f)) {
-}
+    return 0
-/**
+  }
- * 格式化图片路径
+  f = `${f}`
- * @param {*} url
+  const index = f.lastIndexOf('.')
- * @status true|false
+  if (index >= 0) {
- * @returns
+    const decimal = f.substring(index + 1)
- */
+    if (decimal.length == 1) {
-export const formatImgUrl = (url, suffix = '!w200') => {
+      f = `${f.substring(0, index + 1) + decimal}0`
-  if (url) {
+    }
-    return url.includes('http') ? url + suffix : IMG_CND_Prefix + url + suffix
+    else {
-  }
+      f = f.substring(0, index + 1) + decimal.substring(0, 2)
-  else {
+    }
-    return `${IMG_CND_Prefix}/mall/no_img.png`
+  }
-  }
+  return f
-}
+}
-
+/**
-/**
+ * 转换金额单位
- *
+ * @param {*} num 金额 / 数值
- * @param {纹理图} imgurl
+ * @param {*} digit 转换单位
- * @param {rgb} rgb
+ * @returns
- * @param {} suffix
+ */
- * @returns 1 有纹理图，2 有rgb 3默认图
+export const formatMillionYuan = (num, digit = 10000) => {
- */
+  return num / digit > 1 ? { num: toDecimal2(num / digit), million: true } : { num, million: false }
-export const isLabImage = (imgurl, rgb, suffix = '!w200') => {
+}
-  if (imgurl) {
+/**
-    return { status: 1, value: `${IMG_CND_Prefix}/${imgurl}${suffix}` }
+ * 格式化图片路径
-  }
+ * @param {*} url
-  else if (rgb.r != 0 || rgb.g != 0 || rgb.b != 0) {
+ * @status true|false
-    return { status: 2, value: rgb }
+ * @returns
-  }
+ */
-  else {
+export const formatImgUrl = (url, suffix = '!w200') => {
-    return { status: 3, value: `${IMG_CND_Prefix}/mall/no_img.png` }
+  if (url) {
-  }
+    return url.includes('http') ? url + suffix : IMG_CND_Prefix + url + suffix
-}
+  }
+  else {
+    return `${IMG_CND_Prefix}/mall/no_img.png`
+  }
+}
+
+/**
+ *
+ * @param {纹理图} imgurl
+ * @param {rgb} rgb
+ * @param {} suffix
+ * @returns 1 有纹理图，2 有rgb 3默认图
+ */
+export const isLabImage = (imgurl, rgb, suffix = '!w200') => {
+  if (imgurl) {
+    return { status: 1, value: `${IMG_CND_Prefix}/${imgurl}${suffix}` }
+  }
+  else if (rgb.r != 0 || rgb.g != 0 || rgb.b != 0) {
+    return { status: 2, value: rgb }
+  }
+  else {
+    return { status: 3, value: `${IMG_CND_Prefix}/mall/no_img.png` }
+  }
+}

src/common/util.ts

@@ -1,6 +1,6 @@
 import type { SelectorQuery } from '@tarojs/taro'
 import Taro, { useDidShow, useLaunch, useLoad, useRouter, useShareAppMessage } from '@tarojs/taro'
-import { formatImgUrl } from './fotmat'
+import { formatImgUrl } from './format'
 import { analysisShortCodeApi, bindInvitationUser, getUserInfo } from './shortCode/index'
 import { InvitationWay, invitationWay } from './enum'
 import { isEmptyObject } from './common'
@@ -231,7 +231,3 @@ function analysisScene(scene: string, split = ';') {
   })
   return sceneObj
 }
-
-function handleBindInvitationUser() {
-
-}

src/components/LabAndImg/index.tsx

@@ -1,9 +1,9 @@
 import { Image, View } from '@tarojs/components'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import LabAndImgShow from '../LabAndImgShow'
 import styles from './index.module.scss'
 import Preview from '@/pages/details/components/preview'
-import { formatImgUrl, formatRemoveHashTag } from '@/common/fotmat'
+import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
 
 // 该组件宽高为100%需调整外层元素宽高
 interface Param {
@@ -14,22 +14,25 @@ interface Param {
     title?: string
   }
   customImageStyle?: React.CSSProperties
-  showStatus?: true | false
+  showStatus?: boolean
   onClick?: (val: Param['value']) => void
   round?: boolean
   name?: string
   suffix?: string
 }
 const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {}, suffix = '!w200' }: Param) => {
+  const _value = useRef(value)
+  const _first = useRef(true)
   // lab是否都是0
   const rgbStyle = useMemo(() => {
+    const value = _value.current
     if (value?.lab && (value?.lab.l || value?.lab.a || value?.lab.b)) {
       return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
     }
     else {
       return null
     }
-  }, [value])
+  }, [_value.current])
 
   // useEffect(() => {
   //   if (value?.texture_url) {
@@ -41,6 +44,8 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '
   // }, [value])
 
   const img = useMemo(() => {
+    console.log('useMemo', _value.current)
+    const value = _value.current
     if (value?.texture_url) {
       const imgs = value.texture_url.split(',').map((item) => {
         return formatImgUrl(item, suffix)
@@ -50,7 +55,7 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '
     else {
       return ''
     }
-  }, [value])
+  }, [_value.current, suffix])
 
   const [labAndImgShow, setLabAndImgShow] = useState(false)
   const closeLabAndImgShow = useCallback(() => {
@@ -58,35 +63,38 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '
   }, [])
 
   const onShowLabAndImg = () => {
-    onClick?.(value)
+    onClick?.(_value.current)
     if (!showStatus) { return false }
     setLabAndImgShow(true)
   }
 
-  const checkLoad = (val) => {
+  const [_, setForceUpdate] = useState({})
-    // setImgs(() => formatImgUrl(''))
+
+  const checkLoad = () => {
+    _value.current = { ..._value.current, texture_url: '' }
+    setForceUpdate({})
   }
 
   return (
     <>
       <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={onShowLabAndImg}>
-        {value.texture_url && (
+        {_value.current.texture_url && (
           <Image
             lazyLoad
             mode="aspectFill"
             src={img}
-            onError={e => checkLoad(e)}
+            onError={checkLoad}
             className={styles.labAndImg_image}
             style={{ borderRadius: round ? '50%' : '', ...customImageStyle }}
           ></Image>
         )}
-        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
+        {!_value.current.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
-        {!value.texture_url && !rgbStyle && (
+        {!_value.current.texture_url && !rgbStyle && (
           <Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} lazyLoad></Image>
         )}
         {name && <View className={styles.labAndImg_name}>{name}</View>}
       </View>
-      <LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
+      <LabAndImgShow suffix={suffix} value={_value.current} show={labAndImgShow} onClose={closeLabAndImgShow} />
     </>
   )
 }

src/components/LabAndImgShow/index.module.scss

@@ -8,7 +8,7 @@
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    z-index: 9999;
+    z-index: 99999;
     .con{
         display: flex;
         justify-content: center;
@@ -42,4 +42,4 @@
             @include common_ellipsis(1);
         }
     }
-}
+}

src/components/LabAndImgShow/index.tsx

@@ -1,8 +1,8 @@
-import { View } from '@tarojs/components'
+import { Image, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 
 export interface colorParams {
   value?: {
@@ -11,11 +11,13 @@ export interface colorParams {
     rgb?: { r: number; g: number; b: number } // rgb
     title?: string // 标题
   }
-  show?: false | true
+  show?: boolean
   onClose?: () => void
   showNumber?: number // 图片显示张数，0不限制
+  suffix?: string
 }
-const LabAndImgShow = ({ value, show = false, onClose, showNumber = 1 }: colorParams) => {
+const LabAndImgShow = (props: colorParams) => {
+  const { value, show = false, onClose, showNumber = 1, suffix = '!w200' } = props
   // 显示颜色
   const [labShow, setLabShow] = useState(false)
   // lab是否都是0
@@ -33,23 +35,46 @@ const LabAndImgShow = ({ value, show = false, onClose, showNumber = 1 }: colorPa
     onClose?.()
     let res: string[] = []
     if (value?.texture_url) {
-      res = value?.texture_url?.split(',').map((item) => {
+      res = value?.texture_url?.split(',').map(item => formatImgUrl(item, suffix))
-        return formatImgUrl(item)
-      })
     }
+    console.log('res==>', res)
     const n_res = showNumber == 0 ? res : res?.splice(0, showNumber)
+    console.log('第一张图片', n_res[0])
     Taro.previewImage({
       current: n_res[0],
       urls: n_res,
     })
   }
+  const [reload, setReload] = useState(false)
+  // 检测图片是否加载成功
+  const checkLoad = () => {
+    console.log('图片加载失败')
+    setReload(true)
+  }
+
+  const onLoad = () => {
+    setReload(false)
+  }
   useEffect(() => {
-    if (show && rgbStyle) { setLabShow(() => true) }
+    if (reload) {
-    if (show && value?.texture_url) { onShowImage() }
+      if (show && rgbStyle) {
-    if (!show) { setLabShow(() => false) }
+        setLabShow(true)
+        return
+      }
+    }
+    if (show && value?.texture_url) {
+      onShowImage()
+    }
+    else if (show && rgbStyle) {
+      setLabShow(true)
+    }
+  }, [show, reload])
+
+  useEffect(() => {
+    if (!show) { setLabShow(false) }
   }, [show])
   return (
-    <>
+    <View>
       {labShow && (
         <View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
           <View className={styles.con}>
@@ -58,7 +83,16 @@ const LabAndImgShow = ({ value, show = false, onClose, showNumber = 1 }: colorPa
           </View>
         </View>
       )}
-    </>
+      {
+        value?.texture_url && <Image
+          src={formatImgUrl(value?.texture_url)}
+          onError={checkLoad}
+          onLoad={onLoad}
+          style={{ position: 'absolute', top: '9999', width: '0', height: '0' }}
+        ></Image>
+      }
+
+    </View>
   )
 }
 

src/components/amountShow/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import { memo, useCallback } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import { numberWithCommas } from '@/common/fotmat'
+import { numberWithCommas } from '@/common/format'
 
 interface Param {
   number: number // 数字

src/components/banner/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { goLink } from '@/common/common'
 import { GetBannerList } from '@/api/banner'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 
 interface item { title: string; img: string; url: string; id: number }
 

src/components/bindSalesmanPopup/index.tsx

@@ -1,7 +1,7 @@
 import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import styles from './index.module.scss'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 import { goLink } from '@/common/common'
 
 interface params {

src/components/moveBtn copy/index.tsx

@@ -9,7 +9,7 @@ import { GetShoppingCartApi } from '@/api/shopCart'
 import useCommonData from '@/use/useCommonData'
 import { useSelector } from '@/reducers/hooks'
 import { alert } from '@/common/common'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 
 type ShowStatus = 'shop'|'customer'|'order'
 interface param {

src/components/moveBtn/index.tsx

@@ -10,7 +10,7 @@ import { GetShoppingCartApi } from '@/api/shopCart'
 import useCommonData from '@/use/useCommonData'
 import { useSelector } from '@/reducers/hooks'
 import { alert } from '@/common/common'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 import { ORDER_STATUS } from '@/common/enum'
 import IconFont from '@/components/iconfont/iconfont'
 import { IMG_CND_Prefix } from '@/common/constant'

src/components/popupSelectColor/index.tsx

@@ -7,7 +7,7 @@ import Popup from '@/components/popup'
 import LabAndImg from '@/components/LabAndImg'
 import IconFont from '@/components/iconfont/iconfont'
 import { GetProductDetailApi } from '@/api/material'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 import colorItem from '@/pages/codeList/components/colorItem'
 import { alert, goLink } from '@/common/common'
 

src/components/product/index.tsx

@@ -7,7 +7,7 @@ import IconFont from '../iconfont/iconfont'
 import Tag from '../tag'
 import styles from './index.module.scss'
 import { goLink } from '@/common/common'
-import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
 
 interface Params {
   desStatus?: true | false

src/components/shopCart/components/productItem/index.tsx

@@ -1,4 +1,4 @@
-import { CustomWrapper, View } from '@tarojs/components'
+import { CustomWrapper, Text, View } from '@tarojs/components'
 import { memo, useCallback, useMemo } from 'react'
 import classnames from 'classnames'
 import Big from 'big.js'
@@ -6,7 +6,7 @@ import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
 import Counter from '@/components/counter'
 import LabAndImg from '@/components/LabAndImg'
-import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
 import type { saleModeType } from '@/common/enum'
 
 interface param {
@@ -71,9 +71,9 @@ const ProductItem = (props: param) => {
         <View className={styles.product_item_name_header}>
           <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
           <View className={styles.price}>
-            <text>￥</text>
+            <Text>￥</Text>
             {formatPirce(item.sale_price)}
-            <text>/{item.eunit}</text>
+            <Text>/{item.eunit}</Text>
           </View>
         </View>
         <View className={styles.count}>

src/components/shopCart/index copy.tsx

@@ -13,7 +13,7 @@ import LoadingCard from '@/components/loadingCard'
 import InfiniteScroll from '@/components/infiniteScroll'
 import { alert, goLink } from '@/common/common'
 import { DelShoppingCartApi, GetShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
-import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
 import { setParam } from '@/common/system'
 import { debounce, throttle } from '@/common/util'
 import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from '@/api/user'

src/components/shopCart/index.tsx

@@ -1,4 +1,4 @@
-import { Image, ScrollView, View } from '@tarojs/components'
+import { Image, ScrollView, Text, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import classnames from 'classnames'
 import { Ref, useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react'
@@ -16,7 +16,7 @@ import LoadingCard from '@/components/loadingCard'
 import InfiniteScroll from '@/components/infiniteScroll'
 import { alert, goLink, retrieval } from '@/common/common'
 import { DelShoppingCartApi, GetShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
-import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
 import { setParam } from '@/common/system'
 import { debounce, throttle } from '@/common/util'
 import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from '@/api/user'
@@ -404,7 +404,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
               </View>
               <View className={styles.price_con}>
                 <View className={styles.price_real}>
-                  <text>￥</text>
+                  <Text>￥</Text>
                   {estimatePrice.price}
                 </View>
                 <View className={styles.price_forecast}>预估金额</View>

src/components/uploadImage/index.tsx

@@ -5,7 +5,7 @@ import { memo, useEffect, useState } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
 import useUploadCDNImg from '@/use/useUploadImage'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 
 // 图片列表
 interface ImageParam {

src/components/viewCodeList/index.tsx

@@ -3,7 +3,7 @@ import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
 import { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
+import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
 import { PAY_H5_CODE_URL } from '@/common/constant'
 import { GetCodePic } from '@/api/onlinePay'
 

src/pages/activityIncome/index.tsx

@@ -7,7 +7,7 @@ import styles from './index.module.scss'
 import IconFont from '@/components/iconfont/iconfont'
 import { alert } from '@/common/common'
 import { GetRebateDetail } from '@/api/user'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import Divider from '@/components/divider'
 
 export default () => {

src/pages/applyAfterSales/components/cutKindList/index.tsx

@@ -2,7 +2,7 @@ import { Image, Text, View } from '@tarojs/components'
 import type { FC } from 'react'
 import { memo, useCallback } from 'react'
 import styles from './index.module.scss'
-import { formatHashTag, formatImgUrl } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl } from '@/common/format'
 import Counter from '@/components/counter'
 import MCheckbox from '@/components/checkbox'
 

src/pages/applyAfterSales/components/kindList/index.tsx

@@ -2,7 +2,7 @@ import { Image, Text, View } from '@tarojs/components'
 import type { FC } from 'react'
 import { memo, useCallback } from 'react'
 import styles from './index.module.scss'
-import { formatHashTag, formatImgUrl } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl } from '@/common/format'
 import Counter from '@/components/counter'
 import MCheckbox from '@/components/checkbox'
 

src/pages/codeList/components/colorItem/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import { useMemo } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
-import { formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatPriceDiv, formatWeightDiv } from '@/common/format'
 import { goLink } from '@/common/common'
 
 interface Param {

src/pages/codeSetting/components/main/index.tsx

@@ -11,7 +11,7 @@ import ColorSetting from '../colorSetting'
 import styles from './index.module.scss'
 import SelectList from '@/components/selectList'
 import { CreateCustomCodeApi, CustomPrintCalculationApi, DeleteCustomCodeApi, GetCustomCodeDetailApi, GetCustomCodeInitApi, UpdateCustomCodeApi } from '@/api/codeManage'
-import { formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatPriceDiv, formatWeightDiv } from '@/common/format'
 import { useCurrenCode } from '@/context/ContextCodeSetting'
 import { alert } from '@/common/common'
 import LoadingCard from '@/components/loadingCard'

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

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import IconFont from '@/components/iconfont/iconfont'
-import { formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatPriceDiv, formatWeightDiv } from '@/common/format'
 import PopupModal from '@/components/popupModal'
 import { useCurrenCode } from '@/context/ContextCodeSetting'
 import type { adjustType } from '@/common/enum'

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

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
 import { goLink } from '@/common/common'
-import { formatHashTag, formatImgUrl } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl } from '@/common/format'
 import LabAndImg from '@/components/LabAndImg'
 import MCheckbox from '@/components/checkbox'
 import Divider from '@/components/divider'

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import { goLink } from '@/common/common'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 
 interface order_product_item {
   code: string

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

@@ -3,7 +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'
+import { formatRemoveHashTag } from '@/common/format'
 
 interface color_card_info {
   count: number

src/pages/colorCardOrderDetail/components/orderInfo/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import Taro, { setClipboardData } from '@tarojs/taro'
 import { memo } from 'react'
 import styles from './index.module.scss'
-import { formatDateTime } from '@/common/fotmat'
+import { formatDateTime } from '@/common/format'
 
 export interface OrderInfoParam {
   order_no?: string

src/pages/colorCardOrderDetail/components/orderState/index.tsx

@@ -3,7 +3,7 @@ import Taro from '@tarojs/taro'
 import { memo } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import { formatDateTime, formatImgUrl } from '@/common/fotmat'
+import { formatDateTime, formatImgUrl } from '@/common/format'
 
 export interface orderStateItem {
   audit_remark: string

src/pages/creditLine/index.tsx

@@ -6,7 +6,7 @@ import AddressList from '@/components/AddressList'
 import { creditInfoApi } from '@/api/creditLine'
 import './index.scss'
 import { useSelector } from '@/reducers/hooks'
-import { formatDateTime, formatPriceDiv } from '@/common/fotmat'
+import { formatDateTime, formatPriceDiv } from '@/common/format'
 import Message from '@/components/Message'
 import useLogin from '@/use/useLogin'
 

src/pages/creditUsed/index.tsx

@@ -5,7 +5,7 @@ import './index.scss'
 import classnames from 'classnames'
 import { creditListApi } from '@/api/creditLine'
 import InfiniteScrollPaging from '@/components/InfiniteScrollPaging'
-import { formatDateTime, formatPriceDiv, toDecimal2 } from '@/common/fotmat'
+import { formatDateTime, formatPriceDiv, toDecimal2 } from '@/common/format'
 import { dataLoadingStatus, getFilterData } from '@/common/util'
 import useLogin from '@/use/useLogin'
 

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

@@ -4,7 +4,7 @@ import PopupSelectColor from '../popupSelectColor'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import Checkbox from '@/components/checkbox'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 
 interface ProductItemParamType {
   code: string

src/pages/cutSampleListOrder/components/productCard/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import styles from './index.module.scss'
 import Counter from '@/components/counter'
 import LabAndImg from '@/components/LabAndImg'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 import { alert } from '@/common/common'
 
 interface ProductItemParamType {

src/pages/cutSampleListOrder/index.tsx

@@ -12,7 +12,7 @@ import { SubmitColorCardApi } from '@/api/colorCard'
 import { getFilterData } from '@/common/util'
 import { UseSubscriptionMessage } from '@/use/useCommon'
 import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 import { submitCutSampleOrderApi } from '@/api/cutSample'
 import { addressListApi } from '@/api/addressManager'
 import NavBar from '@/components/navBar'

src/pages/cutSampleListOrderDetail/components/orderInfo/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import Taro, { setClipboardData } from '@tarojs/taro'
 import { memo } from 'react'
 import styles from './index.module.scss'
-import { formatDateTime } from '@/common/fotmat'
+import { formatDateTime } from '@/common/format'
 
 export interface OrderInfoParam {
   order_no?: string

src/pages/cutSampleListOrderDetail/components/orderState/index.tsx

@@ -3,7 +3,7 @@ import Taro from '@tarojs/taro'
 import { memo } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import { formatDateTime, formatImgUrl } from '@/common/fotmat'
+import { formatDateTime, formatImgUrl } from '@/common/format'
 
 export interface orderStateItem {
   audit_remark: string

src/pages/cutSampleListOrderDetail/components/productCard/index.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import styles from './index.module.scss'
 import Counter from '@/components/counter'
 import LabAndImg from '@/components/LabAndImg'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 
 export interface ProductParam {
   code: string

src/pages/depositBeforehand/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 import classNames from 'classnames'
 import styles from './index.module.scss'
 import { depositInfoApi } from '@/api/deposit'
-import { formatPriceDiv, toDecimal2 } from '@/common/fotmat'
+import { formatPriceDiv, toDecimal2 } from '@/common/format'
 import Message from '@/components/Message'
 import useLogin from '@/use/useLogin'
 import Dialog from '@/components/Dialog'

src/pages/depositList/index.tsx

@@ -5,7 +5,7 @@ import InfiniteScrollPaging from '@/components/InfiniteScrollPaging'
 import AddressList from '@/components/AddressList'
 import { depositListApi } from '@/api/deposit'
 import './index.scss'
-import { formatDateTime, formatPriceDiv } from '@/common/fotmat'
+import { formatDateTime, formatPriceDiv } from '@/common/format'
 import useLogin from '@/use/useLogin'
 
 const DepositList = () => {

src/pages/details/components/orderCount/context.tsx

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react'
+
+type shopCart = Record<number, {
+  id: number
+  count: number
+  show: boolean
+}>
+const defaultValue = {
+  shopCart: {} as shopCart,
+}
+const ShopCartContext = React.createContext(defaultValue)
+
+export const useShopCartContext = () => {
+  const ctx = useContext(ShopCartContext)
+  if (!ctx) {
+    throw new Error('没有获取到shop cart context')
+  }
+  return ctx
+}
+
+export default ShopCartContext

src/pages/details/components/orderCount/index.module.scss

@@ -2,7 +2,7 @@
   .popup_con {
     height: 80vh;
     display: flex;
-    flex-direction: column;
+    flex-flow: column nowrap;
   }
   .header {
     color: $color_font_one;
@@ -121,13 +121,15 @@
     }
   }
   .product_color_con {
-    flex: 1;
+    flex: 1 1 auto;
-    height: 0;
+    overflow: scroll;
-    margin-bottom: calc(150px - env(safe-area-inset-bottom));
+    height: 100%;
   }
   .color_con {
+    overflow: hidden;
+    height: 100%;
     .virtual_list {
-      padding-bottom: 300px;
+      height: 100%;
     }
     .item {
       display: flex;
@@ -213,24 +215,34 @@
   }
   .buy_btn {
     width: 100%;
-    height: 150px;
+    padding: 0 20px;
-    padding: 0 40px;
+    position: relative;
+    z-index: 99;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
     box-sizing: border-box;
-    position: fixed;
-    bottom: 0;
     font-size: $font_size_medium;
     color: $color_font_two;
     background-color: #fff;
     box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    .count {
+      flex: 1 1 auto;
+    }
+    .button {
+      display: flex;
+    }
     .buy_btn_con {
+      width: 100%;
+      padding-top: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: 151px;
     }
     .add_cart {
+      margin-left: 10px;
       width: 200px;
       height: 90px;
       font-size: $font_size_big;
@@ -240,7 +252,15 @@
       border-radius: 50px;
       color: #fff;
       border: 0;
-      // background: linear-gradient(38deg, #5cabff, #7cbcfc 100%, #99ccff 100%);
     }
   }
 }
+.noList {
+  margin: 100px 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #707070;
+  font-size: 26px;
+}

src/pages/details/components/orderCount/index.tsx

@@ -1,8 +1,8 @@
-import { Text, View } from '@tarojs/components'
+import { CustomWrapper, ScrollView, Text, View } from '@tarojs/components'
 import Taro, { useRouter } from '@tarojs/taro'
 import Big from 'big.js'
 import classnames from 'classnames'
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react'
 import VirtualList from '@tarojs/components/virtual-list'
 import GuidePopup from '../guidePopup/index'
 import styles from './index.module.scss'
@@ -14,7 +14,7 @@ import { useSelector } from '@/reducers/hooks'
 import { GetColorList } from '@/api/materialColor'
 import { AddShoppingCartApi, MallsaleOrderadd } from '@/api/shopCart'
 import UseLogin from '@/use/useLogin'
-import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatHashTag, formatMeterMul, formatPriceDiv, formatWeightDiv } from '@/common/format'
 import { getFilterData } from '@/common/util'
 import LabAndImg from '@/components/LabAndImg'
 import useCommonData from '@/use/useCommonData'
@@ -25,9 +25,165 @@ import OrganizationNameModal from '@/components/organizationNameModal'
 import useLogin from '@/use/useLogin'
 import { companyDetailApi, companyUpdateApi } from '@/api/company'
 import NormalButton from '@/components/normalButton'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { ENUM_SALE_MODE } from '@/common/enum'
+
+const selectList = [
+  { id: 0, step: 1, digits: 0, maxNum: 100000, defaultNum: 1, title: '大货', unit: '条', eunit: 'kg', priceField: 'bulk_price', originalPrice: 'last_bulk_price' },
+  { id: 1, step: 1, digits: 2, maxNum: 9.99, defaultNum: 1, title: '剪板', unit: '米', eunit: 'm', priceField: 'length_cut_price', originalPrice: 'last_length_cut_price' },
+  {
+    id: 2,
+    step: 1,
+    digits: 2,
+    minNum: 3,
+    maxNum: 100000,
+    defaultNum: 3,
+    returnZero: true,
+    title: '散剪',
+    unit: '米',
+    eunit: 'kg',
+    priceField: 'weight_cut_price',
+    originalPrice: 'last_weight_cut_price',
+  },
+]
+
+interface ScrollListProps {
+  list: any[]
+  getLabAndImg: (item: any) => void
+  formatPrice: (item: any) => React.ReactNode
+  onAdd: (item: any) => void
+  getInputValue: (num: number, item: any) => void
+  selectIndex: number
+}
+const ScrollList = (props: ScrollListProps) => {
+  const { list, getLabAndImg, formatPrice, onAdd, getInputValue, selectIndex } = props
+  return <View className={styles.color_con}>
+    <ScrollView
+      className={styles.virtual_list}
+      scrollY
+    >
+      {
+        list.map((item, key) => {
+          return <RowsWithMemo
+            key={key}
+            item={item}
+            getLabAndImg={getLabAndImg}
+            formatPrice={formatPrice}
+            onAdd={onAdd}
+            getInputValue={getInputValue}
+            selectIndex={selectIndex}
+          ></RowsWithMemo>
+        })
+      }
+    </ScrollView>
+  </View>
+}
+
+interface RowsProps {
+  item: any
+  getLabAndImg: (item: any) => void
+  formatPrice: (item: any) => React.ReactNode
+  onAdd: (item: any) => void
+  getInputValue: (num: number, item: any) => void
+  selectIndex: number
+}
+const Rows = (props: RowsProps) => {
+  const {
+    item,
+    getLabAndImg,
+    formatPrice,
+    onAdd,
+    getInputValue,
+    selectIndex,
+  } = props
+  console.log('row Rerender', item)
+  return (
+    <>
+      {item
+        ? <ColorItem key={item.id} getLabAndImg={getLabAndImg} formatPrice={formatPrice} onAdd={onAdd} getInputValue={getInputValue} selectIndex={selectIndex} item={item} />
+        : <View className={styles.item}>没有显示出来</View>}
+    </>
+  )
+}
+// 虚拟滚动
+const RowsWithMemo = memo(Rows)
+
+interface ColorItemProps {
+  formatPrice: (item: any) => React.ReactNode
+  onAdd: (item: any) => void
+  getInputValue: (num: number, item: any) => void
+  getLabAndImg: (item: any) => void
+  selectIndex: number
+  item: any
+}
+const ColorItem = memo((props: ColorItemProps) => {
+  console.log('ColorItem Rerender')
+  const { formatPrice, onAdd, getInputValue, selectIndex, item, getLabAndImg } = props
+  const selectIndexRef = useRef(selectIndex)
+  const baseInfo = selectList[selectIndex]
+
+  const onAddClick = () => {
+    setShowCounter(true)
+    onAdd(item)
+  }
+
+  useEffect(() => {
+    if (selectIndexRef.current !== selectIndex) {
+      setShowCounter(false)
+      selectIndexRef.current = selectIndex
+    }
+  }, [selectIndex])
+
+  const onGetInputValue = (num) => {
+    getInputValue(num, item)
+    if (num == 0) {
+      setShowCounter(false)
+    }
+  }
+
+  const [showCounter, setShowCounter] = useState(false)
+
+  return <View className={styles.item} key={item.id}>
+    <View className={styles.item_color}>
+      <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={false} onClick={getLabAndImg} />
+    </View>
+    <View className={styles.item_con}>
+      <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+      {/* {selectIndex == 0 && <View className={styles.weight_error}>空差：{formatWeightDiv(item.weight_error)}kg</View>} */}
+      <View className={styles.flexBox}>
+        {/* {(selectIndex === 0 && item.bulk_price !== item.last_bulk_price) && <View className={styles.numone}>{formatOriginalPrice(item)}</View>} */}
+        <View className={styles.num}>{formatPrice(item)}</View>
+      </View>
+
+    </View>
+    <View className={styles.btn_con}>
+      {!showCounter
+        ? (
+          <View className={styles.btn} onClick={onAddClick}>
+            添加
+          </View>
+        )
+        : (
+          <View className={styles.btn_count}>
+            <Counter
+              onBlue={onGetInputValue}
+              defaultNum={item.count}
+              step={baseInfo.step}
+              digits={baseInfo.digits}
+              onClickBtn={onGetInputValue}
+              unit={baseInfo.unit}
+              minNum={baseInfo.minNum}
+              maxNum={baseInfo.maxNum}
+              returnZero={baseInfo.returnZero}
+            />
+          </View>
+        )}
+    </View>
+  </View>
+})
 
 interface param {
-  show?: true | false
+  show?: boolean
   onClose?: () => void
   title?: string
   productId?: number
@@ -36,26 +192,9 @@ interface param {
   recom_title?: string
 }
 const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first_login = true, recommendStatus = false, recom_title = '' }: param) => {
+  console.log('OrderCount Rerender')
   const { adminUserInfo } = useSelector(state => state.userInfo)
 
-  const [selectList, _] = useState([
-    { id: 0, step: 1, digits: 0, maxNum: 100000, defaultNum: 1, title: '大货', unit: '条', eunit: 'kg', priceField: 'bulk_price', originalPrice: 'last_bulk_price' },
-    { id: 1, step: 1, digits: 2, maxNum: 9.99, defaultNum: 1, title: '剪板', unit: '米', eunit: 'm', priceField: 'length_cut_price', originalPrice: 'last_length_cut_price' },
-    {
-      id: 2,
-      step: 1,
-      digits: 2,
-      minNum: 3,
-      maxNum: 100000,
-      defaultNum: 3,
-      returnZero: true,
-      title: '散剪',
-      unit: '米',
-      eunit: 'kg',
-      priceField: 'weight_cut_price',
-      originalPrice: 'last_weight_cut_price',
-    },
-  ])
   const [selectIndex, setSelectIndex] = useState(0)
 
   // 获取面料颜色列表
@@ -67,22 +206,25 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
   const initList = useCallback((list) => {
     const newList = list.map((item) => {
       item.count = 0
-      item.show = false
+      // item.show = false
       return item
     })
     return newList
   }, [])
   const getColorList = async() => {
     const { data } = await colorFetchData(getFilterData(condition.current))
-    const lists = initList(data.list)
+
-    setList(() => [...lists])
+    startTransition(() => {
+      setList(data.list)
+    })
+    setTempList(initList(data.list))
   }
   const [showPopup, setShowPopup] = useState(false)
 
   const selectProduct = (index: number) => {
     condition.current.code_or_name = null
     getColorList()
-    setSelectIndex(() => index)
+    setSelectIndex(index)
   }
 
   // 卸载数据
@@ -105,37 +247,66 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
     kindCount: 0,
     color_list: [],
   })
+
+  const [tempList, setTempList] = useState(list)
+
   useEffect(() => {
+    console.log('tempList.current')
     let sumCount = 0
     let kindCount = 0
     const color_list: any[] = []
     let color_list_info = {}
-    list.forEach((item) => {
+    tempList.forEach((item) => {
       if (item.count > 0) {
         sumCount = Big(sumCount).add(item.count).toNumber()
         kindCount++
-        color_list_info = selectIndex == 0 ? { product_color_id: item.id, roll: item.count, sale_price: formatPriceDiv(item.bulk_price) } : { product_color_id: item.id, length: item.count * 100, sale_price: selectIndex == 1 ? formatPriceDiv(item.length_cut_price) : formatPriceDiv(item.weight_cut_price) }
+        color_list_info = selectIndex === ENUM_SALE_MODE.SALE_MODE_BULK
+          ? {
+            product_color_id: item.id,
+            roll: item.count,
+            sale_price: formatPriceDiv(item.bulk_price),
+          }
+          : {
+            product_color_id: item.id,
+            length: formatMeterMul(item.count),
+            sale_price: selectIndex == 1 ? formatPriceDiv(item.length_cut_price) : formatPriceDiv(item.weight_cut_price),
+          }
         color_list.push(color_list_info)
       }
     })
-    setSelectCount({ ...selectCount, sumCount, kindCount, color_list })
+    console.log(sumCount, kindCount, color_list)
-  }, [list])
+    setSelectCount({ sumCount, kindCount, color_list })
+  }, [tempList])
 
   // 计数组件
   const getInputValue = useCallback(
     (num, item) => {
-      item.count = parseFloat(num)
+      console.log('getInputValue', item)
-      if (num == 0) { item.show = false }
+      setTempList(prev =>
-      setList(() => [...list])
+        prev.map((listItem) => {
+          if (item.id === listItem.id) {
+            listItem.count = parseFloat(num)
+          }
+          return listItem
+        }))
+      // item.count = parseFloat(num)
+      // if (num == 0) { item.show = false }
+      // setList([...list])
     },
-    [list],
+    [],
   )
 
-  const onAdd = (item) => {
+  const onAdd = useCallback((item) => {
-    item.show = true
+    // item.show = true
-    item.count = selectList[selectIndex].defaultNum
+    setTempList(prev => prev.map((listItem) => {
-    setList(list => [...list])
+      if (item.id === listItem.id) {
-  }
+        listItem.count = selectList[selectIndex].defaultNum
+      }
+      return listItem
+    }))
+    console.log('onAdd', item)
+    // setList(list => [...list])
+  }, [])
 
   // 搜索显示与隐藏
   const [searchShow, setSearchShow] = useState(false)
@@ -287,99 +458,54 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
     [selectIndex],
   )
 
-  const formatOriginalPrice = useCallback(
+  // const formatOriginalPrice = useCallback(
-    (item) => {
+  //   (item) => {
-      if (selectIndex === 1 || selectIndex === 2) { return }
+  //     if (selectIndex === 1 || selectIndex === 2) { return }
-      const price = Number(formatPriceDiv(item[selectList[selectIndex].originalPrice]))
+  //     const price = Number(formatPriceDiv(item[selectList[selectIndex].originalPrice]))
-      return (
+  //     return (
-        <View className={styles.priceText}>
+  //       <View className={styles.priceText}>
-          <Text>¥</Text>
+  //         <Text>¥</Text>
-          {price}
+  //         {price}
-          <Text> /{selectList[selectIndex].eunit}</Text>
+  //         <Text> /{selectList[selectIndex].eunit}</Text>
-        </View>
+  //       </View>
-      )
+  //     )
-    },
+  //   },
-    [selectIndex],
+  //   [selectIndex],
-  )
+  // )
 
   // 显示图片弹窗
   const [showLabImage, setShowLabImage] = useState(false)
   const [labImageValue, setLabImageValue] = useState()
   const getLabAndImg = useCallback((val) => {
-    setShowLabImage(() => true)
+    setShowLabImage(true)
     setLabImageValue(val)
   }, [])
   const closeLabImgShow = useCallback(() => {
-    setShowLabImage(() => false)
+    setShowLabImage(false)
   }, [])
-  const Rows = ({ id, index, style, data }: any) => {
-    const item = data[index]
-    console.log(item, 6666)
-    return (
-      <>
-        {(item && (
-          <View className={styles.item} key={item.id}>
-            <View className={styles.item_color}>
-              <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={false} onClick={getLabAndImg} />
-            </View>
-            <View className={styles.item_con}>
-              <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
-              {/* {selectIndex == 0 && <View className={styles.weight_error}>空差：{formatWeightDiv(item.weight_error)}kg</View>} */}
-              <View className={styles.flexBox}>
-                {/* {(selectIndex === 0 && item.bulk_price !== item.last_bulk_price) && <View className={styles.numone}>{formatOriginalPrice(item)}</View>} */}
-                <View className={styles.num}>{formatPrice(item)}</View>
-              </View>
 
-            </View>
+  const [isPending, startTransition] = useTransition()
-            <View className={styles.btn_con}>
-              {(!item.show && (
-                <View className={styles.btn} onClick={() => onAdd(item)}>
-                  添加
-                </View>
-              )) || (
-                <View className={styles.btn_count}>
-                  <Counter
-                    onBlue={num => getInputValue(num, item)}
-                    defaultNum={item.count}
-                    step={selectList[selectIndex].step}
-                    digits={selectList[selectIndex].digits}
-                    onClickBtn={num => getInputValue(num, item)}
-                    unit={selectList[selectIndex].unit}
-                    minNum={selectList[selectIndex].minNum}
-                    maxNum={selectList[selectIndex].maxNum}
-                    returnZero={selectList[selectIndex].returnZero}
-                  />
-                </View>
-              )}
-            </View>
-          </View>
-        )) || <View className={styles.item}></View>}
-      </>
-    )
-  }
-  // 虚拟滚动
-  const RowsWithMemo = memo(Rows)
 
-  const [virtualHeight, setVirtualheight] = useState(400)
+  // const [virtualHeight, setVirtualheight] = useState(400)
-  const getHeight = () => {
+  // const getHeight = () => {
-    const query = Taro.createSelectorQuery()
+  //   const query = Taro.createSelectorQuery()
-    query
+  //   query
-      .select('#product_color_con')
+  //     .select('#product_color_con')
-      .boundingClientRect((rect) => {
+  //     .boundingClientRect((rect) => {
-        console.log('rect::', rect)
+  //       console.log('rect::', rect)
-        const clientHeight = rect.height
+  //       const clientHeight = rect.height
-        setVirtualheight(() => clientHeight)
+  //       setVirtualheight(clientHeight)
-      })
+  //     })
-      .exec()
+  //     .exec()
-  }
+  // }
-  useEffect(() => {
+  // useEffect(() => {
-    if (!show) { return }
+  //   if (!show) { return }
-    setTimeout(() => {
+  //   setTimeout(() => {
-      Taro.nextTick(() => {
+  //     Taro.nextTick(() => {
-        getHeight()
+  //       getHeight()
-      })
+  //     })
-    }, 100)
+  //   }, 100)
-  }, [show])
+  // }, [show])
 
   const [showGuidePopup, setshowGuidePopup] = useState(true)
 
@@ -411,7 +537,7 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
 
   return (
     <View className={styles.shop_cart_main}>
-      <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
+      <Popup safeAreaInsetBottom={false} showTitle={false} show={showPopup} onClose={() => closePopup()}>
         <View className={styles.popup_con}>
           <View className={styles.header}>
             <View className={styles.header_title} onClick={onNavigator}>
@@ -456,26 +582,36 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
             </View>
             {!searchShow && <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
           </View>
-
           <View className={styles.product_color_con} id="product_color_con">
-            {list.length <= 0 && colorState.loading && <LoadingCard />}
+            {/* <CustomWrapper> */}
-            {list.length > 0 && !colorState.loading && (
+            {
-              <View className={styles.color_con}>
+              isPending
-                <VirtualList
+                ? <View className={styles.noList} style={{ margin: '60rpx 0' }}>
-                  className={styles.virtual_list}
+                  <LoadingCard />
-                  height={virtualHeight} /* 列表的高度 */
+                </View>
-                  width="100%" /* 列表的宽度 */
+                : <ScrollList list={list} getLabAndImg={getLabAndImg} selectIndex={selectIndex} formatPrice={formatPrice} onAdd={onAdd} getInputValue={getInputValue} />
-                  itemData={list} /* 渲染列表的数据 */
+            }
-                  itemCount={searchShow ? list.length + 1 : list.length} /*  渲染列表的长度 */
+
-                  itemSize={100} /* 列表单项的高度  */
+            {/* {list.length <= 0 && colorState.loading && <LoadingCard />}
-                  overscanCount={1}
+              {list.length > 0 && !colorState.loading && (
-                >
+                <View className={styles.color_con}>
-                  {RowsWithMemo}
+                  <VirtualList
-                </VirtualList>
+                    className={styles.virtual_list}
-                <View className="common_safe_area_y"></View>
+                    height={virtualHeight}
-              </View>
+                    width="100%"
-            )}
+                    itemData={list}
-            {list.length <= 0 && !colorState.loading && <View className={styles.noData}>暂无此商品</View>}
+                    itemCount={searchShow ? list.length + 1 : list.length}
+                    itemSize={100}
+                    overscanCount={10}
+                  >
+                    {RowsWithMemo}
+                  </VirtualList>
+                  <View className="common_safe_area_y"></View>
+                </View>
+              )}
+              {list.length <= 0 && !colorState.loading && <View className={styles.noData}>暂无此商品</View>} */}
+
+            {/* </CustomWrapper> */}
           </View>
           <View className={styles.buy_btn}>
             <View className={styles.buy_btn_con}>
@@ -483,12 +619,14 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
                 当前已选{selectCount.kindCount}种，共{selectCount.sumCount}
                 {selectList[selectIndex].unit}
               </View>
-              <NormalButton circle customClassName={styles.add_cart} round disabled={!selectCount.kindCount} onClick={() => addShopCart()}>加入购物车</NormalButton>
+              <View className={styles.button}>
-              <NormalButton circle customClassName={styles.add_cart} round disabled={!selectCount.kindCount} onClick={() => handShopBuy()}>立即购买</NormalButton>
+                <NormalButton circle customClassName={styles.add_cart} round disabled={!selectCount.kindCount} onClick={() => addShopCart()}>加入购物车</NormalButton>
+                <NormalButton circle customClassName={styles.add_cart} round disabled={!selectCount.kindCount} onClick={() => handShopBuy()}>立即购买</NormalButton>
+
+              </View>
             </View>
           </View>
         </View>
-        {/* <View className='common_safe_area_y'></View> */}
       </Popup>
       {
         showGuidePopup && showPopup && <GuidePopup closePopup={() => setshowGuidePopup(false)}></GuidePopup>

src/pages/details/components/recommend/index.module.scss

@@ -1,6 +1,5 @@
 .recommend {
   background-color: #fff;
-  margin-top: 16px;
   border-radius: 16px;
   padding: 24px;
   box-sizing: border-box;

src/pages/details/components/recommend/index.tsx

@@ -5,7 +5,7 @@ import { memo, useCallback, useMemo } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import IconFont from '@/components/iconfont/iconfont'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 import useLogin from '@/use/useLogin'
 import { alert } from '@/common/common'
 

src/pages/details/components/swiper/index.tsx

@@ -2,7 +2,7 @@ import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 
 interface item { title: string; img: string; url: string; id: number }
 interface params {

src/pages/details/index.module.scss

@@ -123,7 +123,7 @@ page {
     }
 
     .product_color {
-      margin: 20px;
+      margin: 0 20px;
       background-color: #fff;
       padding: 30px 20px 0;
       color: $color_font_one;
@@ -280,11 +280,9 @@ page {
       padding-top: 30px;
       // padding-bottom: 30px;
       // width: 100%;
-      margin: 20px;
+      margin: 0 20px;
       border-radius: 16px;
       background-color: #fff;
-      margin-top: 25px;
-      margin-bottom: 25px;
       .title {
         margin-left: 25px;
         color: rgba(0, 0, 0, 0.8);
@@ -330,7 +328,6 @@ page {
   }
   .product_buy {
     position: relative;
-    z-index: 9999;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -340,7 +337,7 @@ page {
     background-color: #fff;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
-    z-index: 9999;
+    z-index: 999;
     .icon_btn {
       display: flex;
       flex: 1;

src/pages/details/index.tsx

@@ -9,7 +9,7 @@ import FeaturePopup from './components/feature'
 import Recommend from './components/recommend'
 import ScrollViewX from './components/scrollViewX'
 import ShopCart from '@/components/shopCart'
-import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat'
+import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag } from '@/common/format'
 import { GetProductDetailApi, MallCherryestimate_catevideolist, MallCherryestimate_catevideoview } from '@/api/material'
 import useLogin from '@/use/useLogin'
 import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share'
@@ -344,11 +344,26 @@ const Details = (props: Params) => {
     }
   }
 
+  const labAndImgValue = useMemo(() => {
+    return { lab: currentDialogDetail.current!.lab, rgb: currentDialogDetail.current!.rgb, texture_url: currentDialogDetail.current!.texture_url, title: currentDialogDetail.current!.code }
+  }, [currentDialogDetail.current])
+
   // 控制浮窗的视频是否被其他的视频影响
   const [showVideoPlay, setshowVideoPlay] = useState(true)
 
   const [showFloatVideo, setshowFloatVideo] = useState(false)
 
+  const [showLabImage, setShowLabImage] = useState(false)
+
+  const closeLabImgShow = () => {
+    setShowLabImage(false)
+  }
+
+  const handleShowLabAndImg = () => {
+    console.log('handleShowLabAndImg')
+    setShowLabImage(true)
+  }
+
   return (
     <MoveBtn showList={['order']} playVideo={showVideoPlay} floatVideoFile={floatUrl} showFloatVideo={showFloatVideo}>
       <View className={styles.main}>
@@ -467,7 +482,7 @@ const Details = (props: Params) => {
           </View>
           }
           {!!productInfo?.product_screw_id
-            && <View style={{ margin: '20rpx' }}>
+            && <View style={{ margin: '0 20rpx' }}>
               <Recommend onClick={openProduct} data={recommendData} />
             </View>}
           <View className={styles.product_color}>
@@ -550,8 +565,10 @@ const Details = (props: Params) => {
               <View className={styles.productColorDialog_img}>
                 <LabAndImg
                   customImageStyle={{ borderRadius: '0' }}
-                  suffix="!w800"
+                  showStatus={false}
-                  value={{ lab: currentDialogDetail.current!.lab, rgb: currentDialogDetail.current!.rgb, texture_url: currentDialogDetail.current!.texture_url, title: currentDialogDetail.current!.code }}
+                  suffix="!w400"
+                  value={labAndImgValue}
+                  onClick={handleShowLabAndImg}
                 />
               </View>
               <View className={styles.productColorDialog_info}>
@@ -582,6 +599,7 @@ const Details = (props: Params) => {
           </View>
         </Dialog>
         <PopupSelectColor onSelected={onCutSampleList} show={showColorSelect} product_id={productInfo.id} onClose={() => setShowColorSelect(false)} />
+        <LabAndImgShow suffix="!w400" value={labAndImgValue} show={showLabImage} onClose={closeLabImgShow} />
       </View>
     </MoveBtn>
   )

src/pages/index/components/guessULikeList/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import { useCallback } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
-import { formatHashTag, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv, formatRemoveHashTag } from '@/common/format'
 import { goLink } from '@/common/common'
 import Tag from '@/components/tag'
 import IconFont from '@/components/iconfont/iconfont'

src/pages/inviteCode/index.tsx

@@ -12,7 +12,7 @@ import Table from '@/components/table'
 import type { InviteCodePopupRef } from '@/components/inviteCodePopup'
 import InviteCodePopup from '@/components/inviteCodePopup'
 import { GetInvitationRecordList } from '@/api/share'
-import { formatDateTime } from '@/common/fotmat'
+import { formatDateTime } from '@/common/format'
 
 // 获取业务员信息
 interface Param { inviter_id: number; inviter_name: string; phone: string }

src/pages/inviteCode/inviteFriends/index.tsx

@@ -17,7 +17,7 @@ import InviteCodePopup from '@/components/inviteCodePopup'
 import { GetInvitationRecordList } from '@/api/share'
 import InfiniteScroll from '@/components/infiniteScroll'
 import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
-import { formatDateTime } from '@/common/fotmat'
+import { formatDateTime } from '@/common/format'
 import IconFont from '@/components/iconfont/iconfont'
 
 const InviteCord = () => {

src/pages/order/comfirm.tsx

@@ -10,7 +10,7 @@ import AddressInfoDetail from './components/addressInfoDetail'
 import { getParam } from '@/common/system'
 import { alert, goLink } from '@/common/common'
 import Popup from '@/components/popup'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import { SaleOrderApi, SaleOrderPreViewApi } from '@/api/order'
 import { SubscriptionMessageApi } from '@/api/user'
 import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'

src/pages/order/components/advanceOrderState/index.tsx

@@ -3,7 +3,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
 import dayjs from 'dayjs'
 import styles from './index.module.scss'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 import { useTimeCountDown } from '@/use/useCommon'
 import { ORDER_STATUS, PAYMENT_METHOD } from '@/common/enum'
 

src/pages/order/components/kindList/index copy.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import { memo, useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { ORDER_STATUS } from '@/common/enum'
-import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/format'
 import EstimatedAmount from '@/components/estimatedAmount'
 import LabAndImg from '@/components/LabAndImg'
 
@@ -28,7 +28,7 @@ interface Param {
   comfirm?: boolean // 是否是确认订单页面使用
 }
 
-export default memo(({ order, comfirm = false }: Param) => {
+export default memo(({ order, comfirm = false }: Param) => {
   const {
     SaleOrderStatusBooking, // 待接单
     SaleOrderStatusArranging, // 配布中
@@ -203,4 +203,4 @@ export default memo(({ order, comfirm = false }: Param) => {
       </View>
     </>
   )
-})
+})

src/pages/order/components/kindList/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import { memo, useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { ENUM_SALE_MODE, ORDER_STATUS } from '@/common/enum'
-import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/format'
 import EstimatedAmount from '@/components/estimatedAmount'
 import LabAndImg from '@/components/LabAndImg'
 import IconFont from '@/components/iconfont/iconfont'

src/pages/order/components/orderState/index.tsx

@@ -4,7 +4,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
 import * as dayjs from 'dayjs'
 import styles from './index.module.scss'
-import { formatDateTime, formatImgUrl } from '@/common/fotmat'
+import { formatDateTime, formatImgUrl } from '@/common/format'
 import { ORDER_STATUS, PAYMENT_METHOD } from '@/common/enum'
 
 interface List {

src/pages/order/components/payment/index.tsx

@@ -8,7 +8,7 @@ import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
 import Popup from '@/components/popup'
 import { GetOrderPayApi, GetPrepayOrderPayApi, SubmitOrderPayApi, SubmitPrepayOrderPayApi, SubmitTradeOrderPayApi } from '@/api/orderPay'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import { alert } from '@/common/common'
 import { ORDER_STATUS, PAYMENT_METHOD, SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
 import { UseSubscriptionMessage } from '@/use/useCommon'

src/pages/order/components/returnRecord/index.tsx

@@ -5,7 +5,7 @@ import OrderStatusTag from '../orderStatusTag'
 import styles from './index.module.scss'
 import { GetSaleOrderListApi, ReturnRecordApi } from '@/api/salesAfterOrder'
 import { goLink } from '@/common/common'
-import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv } from '@/common/format'
 import { dataLoadingStatus, getFilterData } from '@/common/util'
 import InfiniteScroll from '@/components/infiniteScroll'
 import LabAndImg from '@/components/LabAndImg'

src/pages/order/components/scanPay/index.tsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import { alert } from '@/common/common'
-import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
+import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
 import useCheckAuthorize from '@/use/useCheckAuthorize'
 import { GetPayCode } from '@/api/onlinePay'
 import LoadingCard from '@/components/loadingCard'

src/pages/order/components/scanPayCheck/index.module.scss

@@ -9,7 +9,6 @@ $top: 170px;
       position: absolute;
       left: 20px;
       top: 27px;
-      font-size: 37px;
       color: $color_font_three;
       z-index: 99;
     }

src/pages/order/components/scanPayCheck/index.tsx

@@ -5,13 +5,14 @@ import classnames from 'classnames'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import { alert } from '@/common/common'
-import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
+import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
 import useCheckAuthorize from '@/use/useCheckAuthorize'
 import { GetPayCode } from '@/api/onlinePay'
 import LoadingCard from '@/components/loadingCard'
 import CodeSelect from '@/components/codeSelect'
 import ViewCodeList from '@/components/viewCodeList'
 import { ENUM_SALE_MODE } from '@/common/enum'
+import IconFont from '@/components/iconfont/iconfont'
 
 interface Param {
   show?: true | false
@@ -196,7 +197,9 @@ const ScanPayCheck = ({ show = true, onClose, company, orderInfo }: Param) => {
     <View className={styles.scanPay_main}>
       <Popup show={show} showTitle={false} onClose={onClose}>
         <View className={styles.scanPay_con}>
-          <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+          <View className={styles.miconfont_title} onClick={onClose}>
+            <IconFont name="icon-rukou" size={37} color="#707070"></IconFont>
+          </View>
           <View className={styles.title}>查看销售码单</View>
           <View className={styles.scanPay_list}>
             {(state.loading && <LoadingCard />) || (

src/pages/order/index.module.scss

@@ -80,7 +80,7 @@ page {
   }
   .submit_order_con {
     position: relative;
-    z-index: 9999;
+    z-index: 999;
     width: 100%;
     background-color: #fff;
     box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);

src/pages/order/index.tsx

@@ -18,7 +18,7 @@ import ShopCart from '@/components/shopCart'
 import SearchInput from '@/components/searchInput'
 import Popup from '@/components/popup'
 import OrderBtns from '@/components/orderBtns'
-import { formatDateTime, formatImgUrl } from '@/common/fotmat'
+import { formatDateTime, formatImgUrl } from '@/common/format'
 import { ORDER_STATUS } from '@/common/enum'
 import { alert, goLink } from '@/common/common'
 import { SubscriptionMessageApi } from '@/api/user'

src/pages/order/orderList/components/order/index.tsx

@@ -5,7 +5,7 @@ import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { goLink } from '@/common/common'
 import { ORDER_STATUS } from '@/common/enum'
-import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
 import LabAndImg from '@/components/LabAndImg'
 import OrderBtns from '@/components/orderBtns'
 import Payment from '@/pages/order/components/payment'

src/pages/order/speedComfirm.tsx

@@ -10,7 +10,7 @@ import AddressInfoDetail from './components/addressInfoDetail'
 import { getParam } from '@/common/system'
 import { alert, goLink } from '@/common/common'
 import Popup from '@/components/popup'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import { SaleOrderApi, SaleOrderPreViewApi } from '@/api/order'
 import { SubscriptionMessageApi } from '@/api/user'
 import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'

src/pages/salesAfter/components/applyRecord/index.tsx

@@ -3,7 +3,7 @@ import Taro from '@tarojs/taro'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { SaleOrderOrderDetailApi } from '@/api/salesAfterOrder'
-import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/format'
 import LabAndImg from '@/components/LabAndImg'
 import Popup from '@/components/popup'
 

src/pages/salesAfter/components/kindList/index.tsx

@@ -3,7 +3,7 @@ import { memo, useCallback, useMemo } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
 import { AFTER_ORDER_STATUS, ORDER_STATUS, REFUND_STATUS } from '@/common/enum'
-import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/format'
 import EstimatedAmount from '@/components/estimatedAmount'
 import LabAndImg from '@/components/LabAndImg'
 

src/pages/salesAfter/components/orderState/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
 import { memo, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import { formatDateTime } from '@/common/fotmat'
+import { formatDateTime } from '@/common/format'
 import { ORDER_STATUS } from '@/common/enum'
 
 interface List {
@@ -22,7 +22,7 @@ interface Param {
   }
 }
 
-export default memo(({ orderInfo = { logistics_details: [], payment_method: 0, status: 0 }, onRefresh }: Param) => {
+export default memo(({ orderInfo = { logistics_details: [], payment_method: 0, status: 0 }, onRefresh }: Param) => {
   const [showMore, setShowMore] = useState(false)
   const changeMore = () => {
     setShowMore(() => !showMore)

src/pages/salesAfter/components/payment/index.tsx

@@ -8,9 +8,9 @@ import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
 import Popup from '@/components/popup'
 import { GetOrderPayApi, SubmitOrderPayApi } from '@/api/orderPay'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import { alert } from '@/common/common'
-import type { PAYMENT_METHOD_PARAM } from '@/common/enum'
+import type { PAYMENT_METHOD_PARAM } from '@/common/enum'
 import { PAYMENT_METHOD } from '@/common/enum'
 
 interface Param {
@@ -26,7 +26,7 @@ interface OrderInfo {
 }
 
 type PayStatus = 1|2|3|4|5|null // 1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款
-export default memo(({ show = false, onClose, orderInfo, onSubmitSuccess }: Param) => {
+export default memo(({ show = false, onClose, orderInfo, onSubmitSuccess }: Param) => {
   // 提交参数
   const [submitData, setSubmitData] = useState<{ id: number; payment_method: PayStatus }>({
     id: 0,
@@ -83,7 +83,7 @@ export default memo(({ show = false, onClose, orderInfo, onSubmitSuccess }: Para
     if (res.success) {
       alert.success('支付成功')
       onSubmitSuccess?.()
-    }
+    }
     else {
       alert.none(res.msg)
     }
@@ -182,4 +182,4 @@ export default memo(({ show = false, onClose, orderInfo, onSubmitSuccess }: Para
     </View>
 
   )
-})
+})

src/pages/salesAfter/components/returnPayCheck/index.tsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import { alert } from '@/common/common'
-import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
+import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
 import useCheckAuthorize from '@/use/useCheckAuthorize'
 import { GetReturnPayCode } from '@/api/onlinePay'
 import LoadingCard from '@/components/loadingCard'

src/pages/salesAfter/components/scanPay/index.tsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import { alert } from '@/common/common'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 import useCheckAuthorize from '@/use/useCheckAuthorize'
 import { GetPayCode } from '@/api/onlinePay'
 import LoadingCard from '@/components/loadingCard'

src/pages/salesAfter/index.tsx

@@ -13,7 +13,7 @@ import styles from './index.module.scss'
 import useLogin from '@/use/useLogin'
 import SearchInput from '@/components/searchInput'
 import AfterOrderBtns from '@/components/afterOrderBtns'
-import { formatDateTime, formatImgUrl } from '@/common/fotmat'
+import { formatDateTime, formatImgUrl } from '@/common/format'
 import { AFTER_ORDER_STATUS } from '@/common/enum'
 import { SaleOrderOrderDetailApi } from '@/api/salesAfterOrder'
 import MoveBtn from '@/components/moveBtn'

src/pages/salesAfter/salesAfterList/components/order/index.tsx

@@ -5,7 +5,7 @@ import OrderStatusTag from '../orderStatusTag'
 import styles from './index.module.scss'
 import { goLink } from '@/common/common'
 import { AFTER_ORDER_STATUS, REFUND_STATUS_ORDER } from '@/common/enum'
-import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
 import AfterOrderBtns from '@/components/afterOrderBtns'
 import LabAndImg from '@/components/LabAndImg'
 import { useSelector } from '@/reducers/hooks'

src/pages/searchList/hightSearchList.tsx

@@ -15,7 +15,7 @@ import { useBluetooth } from '@/use/contextBlueTooth'
 import { toRgb } from '@/common/bluetooth/color/colorSpace'
 import { GetLabProductApi } from '@/api/material'
 import { dataLoadingStatus, getFilterData } from '@/common/util'
-import { formatHashTag, formatImgUrl } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl } from '@/common/format'
 import useLogin from '@/use/useLogin'
 import { goLink } from '@/common/common'
 import LabAndImg from '@/components/LabAndImg'

src/pages/searchList/searchList.tsx

@@ -10,7 +10,7 @@ import InfiniteScroll from '@/components/infiniteScroll'
 import type { SortBtnRef, SortParam } from '@/components/sortBtn'
 import SortBtn from '@/components/sortBtn'
 import { goLink } from '@/common/common'
-import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv } from '@/common/format'
 import { dataLoadingStatus, getFilterData } from '@/common/util'
 import useLogin from '@/use/useLogin'
 import LabAndImg from '@/components/LabAndImg'

src/pages/shopCar/components/bottomBtn/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
 import type { StateType } from '@/context/ContextShop'
 import { useCurrenShop } from '@/context/ContextShop'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import type { saleModeType } from '@/common/enum'
 
 interface ParamType {

src/pages/shopCar/components/productBlock/index.tsx

@@ -7,7 +7,7 @@ import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
 import type { ProductType } from '@/context/ContextShop'
 import { useCurrenShop } from '@/context/ContextShop'
-import { formatHashTag } from '@/common/fotmat'
+import { formatHashTag } from '@/common/format'
 import type { saleModeType } from '@/common/enum'
 
 interface ParamType {

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

@@ -9,7 +9,7 @@ import LabAndImg from '@/components/LabAndImg'
 import Counter from '@/components/counter'
 import type { ColorType } from '@/context/ContextShop'
 import { useCurrenShop } from '@/context/ContextShop'
-import { formatPriceDiv } from '@/common/fotmat'
+import { formatPriceDiv } from '@/common/format'
 import { DelShoppingCartApi, GetShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
 import { debounce } from '@/common/util'
 import { SALE_MODE_SETTING } from '@/common/enum'

src/pages/shopCar/components/recommendProductItem/index.tsx

@@ -5,7 +5,7 @@ import RecommendProduct from '../recommendProduct'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import Counter from '@/components/counter'
-import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv } from '@/common/format'
 import { debounce } from '@/common/util'
 import type { listType } from '@/common/enum'
 import { SALE_MODE_SETTING, saleModeType } from '@/common/enum'

src/pages/user/index.tsx

@@ -6,7 +6,7 @@ import styles from './index.module.scss'
 import Customer from './components/customer'
 import { useSelector } from '@/reducers/hooks'
 import { alert, goLink } from '@/common/common'
-import { formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { formatImgUrl, formatPriceDiv } from '@/common/format'
 import { userassets, userorderStatistics } from '@/api/mine'
 import useLogin from '@/use/useLogin'
 import IconFont from '@/components/iconfont/iconfont'

src/pages/userEdit/index.tsx

@@ -14,7 +14,7 @@ import useUploadCDNImg from '@/use/useUploadImage'
 import { IMG_CND_Prefix } from '@/common/constant'
 import useUserInfo from '@/use/useUserInfo'
 import IconFont from '@/components/iconfont/iconfont'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 
 // 列表
 const UserEditList = memo((props: any) => {

src/use/useLogin.ts

@@ -6,7 +6,7 @@ import type { InvitationWay } from '@/common/enum'
 import { SHARE_SCENE } from '@/common/enum'
 import { GetShortCodeApi, PrepareCreateInvitationInfoApi } from '@/api/share'
 import { IMG_CND_Prefix } from '@/common/constant'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 import { bindInvitationUser } from '@/common/shortCode'
 import { isEmptyObject } from '@/common/common'