✨ feat(颜色取样|取色查找|样品对比): 移植内部版相关功能

src/components/LabAndImg/index.tsx

@@ -1,4 +1,4 @@
-import { formatImgUrl, formatRemoveHashTag } from '@/common/fotmat'
+import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
 import Preview from '@/pages/details/components/preview'
 import { Image, View } from '@tarojs/components'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'

src/components/LabAndImgShow/index.tsx

@@ -1,65 +1,64 @@
-import { formatImgUrl } from "@/common/fotmat"
-import { View } from "@tarojs/components"
-import { useEffect, useMemo, useState } from "react"
+import { formatImgUrl } from '@/common/format'
+import { View } from '@tarojs/components'
+import { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import Taro from '@tarojs/taro'
 
-
 export type colorParams = {
-    value?: { 
-        texture_url?: string, //纹理图路径
-        lab?: {l:number, a:number, b:number}, //lab
-        rgb?: {r:number, g:number, b:number} //rgb
-        title?: string //标题
-    },
-    show?: false|true
-    onClose?: () => void,
-    showNumber?: number, //图片显示张数，0不限制
+  value?: {
+    texture_url?: string //纹理图路径
+    lab?: { l: number; a: number; b: number } //lab
+    rgb?: { r: number; g: number; b: number } //rgb
+    title?: string //标题
+  }
+  show?: false | true
+  onClose?: () => void
+  showNumber?: number //图片显示张数，0不限制
 }
-export default ({value, show = false, onClose, showNumber = 1}: colorParams) => {
+export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) => {
+  useEffect(() => {
+    if (show && rgbStyle) setLabShow(() => true)
+    if (show && value?.texture_url) onShowImage()
+    if (!show) setLabShow(() => false)
+  }, [show])
 
-    useEffect(() => {
-        if(show&&rgbStyle) setLabShow(() => true)
-        if(show&&value?.texture_url) onShowImage()
-        if(!show) setLabShow(() => false)
-    }, [show])
-
-    //显示颜色
-    const [labShow, setLabShow] = useState(false)
-    //lab是否都是0
-    const rgbStyle = useMemo(() => {
-        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])
-
-    
-    //显示图片
-    const onShowImage = () => {
-        onClose?.()
-        let res: string[] = []
-        if(value?.texture_url) {
-            res = value?.texture_url?.split(',').map(item => {
-                return formatImgUrl(item)
-            })
-        }
-        let n_res = showNumber == 0? res : res?.splice(0, showNumber)
-        Taro.previewImage({
-            current: n_res[0], 
-            urls: n_res  
-        })
+  //显示颜色
+  const [labShow, setLabShow] = useState(false)
+  //lab是否都是0
+  const rgbStyle = useMemo(() => {
+    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])
 
-    return (
-        <>
-            {labShow&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
-                <View className={styles.con}>
-                    <View className={styles.rgb} style={rgbStyle!}></View>
-                    <View className={styles.name}>{value?.title}</View>
-                </View>
-            </View>}
-        </>
-    )
-}
+  //显示图片
+  const onShowImage = () => {
+    onClose?.()
+    let res: string[] = []
+    if (value?.texture_url) {
+      res = value?.texture_url?.split(',').map((item) => {
+        return formatImgUrl(item)
+      })
+    }
+    let n_res = showNumber == 0 ? res : res?.splice(0, showNumber)
+    Taro.previewImage({
+      current: n_res[0],
+      urls: n_res,
+    })
+  }
+
+  return (
+    <>
+      {labShow && (
+        <View className={styles.main} catch-move='true' onClick={() => onClose?.()}>
+          <View className={styles.con}>
+            <View className={styles.rgb} style={rgbStyle!}></View>
+            <View className={styles.name}>{value?.title}</View>
+          </View>
+        </View>
+      )}
+    </>
+  )
+}

src/components/amountShow/index.tsx

@@ -1,29 +1,25 @@
-import { Text, View } from "@tarojs/components";
-import { memo, useCallback } from "react";
-import styles  from './index.module.scss'
-import classnames from "classnames";
-import { numberWithCommas } from "@/common/fotmat";
+import { Text, View } from '@tarojs/components'
+import { memo, useCallback } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import { numberWithCommas } from '@/common/format'
 
 type Param = {
-    number: number, //数字
-    status: 0|1|2 //0 小型，1中型，2大
+  number: number //数字
+  status: 0 | 1 | 2 //0 小型，1中型，2大
 }
-export default memo(({number = 0, status = 1}:Param) => {
-    const priceDom = useCallback(() => {
-        let res = number.toFixed(2).split('.')
-        let int_num  = parseInt(res[0]) + ''
-        let decimals_num = res[1]
-        return (
-            <>
-                <Text className={styles.price_text}>¥</Text>
-                <Text className={styles.price_text}>{numberWithCommas({number:int_num, digit:0})}</Text>
-                <Text className={styles.price_text}>.{decimals_num}</Text>
-            </>
-        )
-    }, [number])
+export default memo(({ number = 0, status = 1 }: Param) => {
+  const priceDom = useCallback(() => {
+    let res = number.toFixed(2).split('.')
+    let int_num = parseInt(res[0]) + ''
+    let decimals_num = res[1]
     return (
-        <View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
-            {priceDom()}
-        </View>
+      <>
+        <Text className={styles.price_text}>¥</Text>
+        <Text className={styles.price_text}>{numberWithCommas({ number: int_num, digit: 0 })}</Text>
+        <Text className={styles.price_text}>.{decimals_num}</Text>
+      </>
     )
-})
+  }, [number])
+  return <View className={classnames(styles.order_price_num, status == 1 && styles.emphasis_num, status == 2 && styles.emphasis_num_big)}>{priceDom()}</View>
+})

src/components/banner/index.tsx

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

src/components/bindSalesmanPopup/index.tsx

@@ -1,51 +1,56 @@
-import { Image, Swiper, SwiperItem, Text, View } from "@tarojs/components"
-import styles  from './index.module.scss'
-import { formatImgUrl } from "@/common/fotmat"
-import Taro from "@tarojs/taro";
-import { goLink } from "@/common/common";
+import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+import { formatImgUrl } from '@/common/format'
+import Taro from '@tarojs/taro'
+import { goLink } from '@/common/common'
 
 type params = {
-    show?: true|false,
-    onClose?: () => void
+  show?: true | false
+  onClose?: () => void
 }
-export default ({show, onClose}:params) => {
-    const onCustomer = async () => {
-        let res = await Taro.showModal({
-            title: '是否拨打服务热线',
-            confirmText: '拨打',
-            content: '(0757) 8270 6695',
-            cancelText: '取消',
-        })
-        if(res.confirm) {
-            Taro.makePhoneCall({
-                phoneNumber: '(0757)82706695'
-            })
-        }
+export default ({ show, onClose }: params) => {
+  const onCustomer = async () => {
+    let res = await Taro.showModal({
+      title: '是否拨打服务热线',
+      confirmText: '拨打',
+      content: '(0757) 8270 6695',
+      cancelText: '取消',
+    })
+    if (res.confirm) {
+      Taro.makePhoneCall({
+        phoneNumber: '(0757)82706695',
+      })
     }
+  }
 
-    const onConfirm = () => {
-        onClose?.()
-        goLink('/pages/bindSalesman/index')
-    }
-    return (
-        <>
-            {show&&<View className={styles.bindSalesman_main}>
-                <View className={styles.bindSalesman_pop}>
-                    <View className={styles.bindSalesman_header}>
-                        <Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill"/>
-                    </View>
-                    <View className={styles.bindSalesman_message}>
-                        <Text>提示</Text>
-                        <Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
-                    </View>
-                    <View className={styles.bindSalesman_operation}>
-                        <View className={styles.btns} onClick={() => onConfirm()}>输入邀请码</View>
-                        <View className={styles.btns} onClick={() => onCustomer()}>联系客服</View>
-                    </View>
-                </View>
-                <View className={styles.bindSalesman_mask} onClick={onClose}></View>
-            </View>}
-        </>
-    )
-   
-}
+  const onConfirm = () => {
+    onClose?.()
+    goLink('/pages/bindSalesman/index')
+  }
+  return (
+    <>
+      {show && (
+        <View className={styles.bindSalesman_main}>
+          <View className={styles.bindSalesman_pop}>
+            <View className={styles.bindSalesman_header}>
+              <Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode='aspectFill' />
+            </View>
+            <View className={styles.bindSalesman_message}>
+              <Text>提示</Text>
+              <Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
+            </View>
+            <View className={styles.bindSalesman_operation}>
+              <View className={styles.btns} onClick={() => onConfirm()}>
+                输入邀请码
+              </View>
+              <View className={styles.btns} onClick={() => onCustomer()}>
+                联系客服
+              </View>
+            </View>
+          </View>
+          <View className={styles.bindSalesman_mask} onClick={onClose}></View>
+        </View>
+      )}
+    </>
+  )
+}

src/components/product/index.tsx

@@ -1,40 +1,47 @@
-import { Image, View } from "@tarojs/components"
-import Taro from "@tarojs/taro"
-import { goLink } from "@/common/common"
+import { Image, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { goLink } from '@/common/common'
 import styles from './index.module.scss'
-import { formatHashTag, formatImgUrl } from "@/common/fotmat"
-import LabAndImg from "../LabAndImg"
-import { useCallback, useMemo } from "react"
+import { formatHashTag, formatImgUrl } from '@/common/format'
+import LabAndImg from '../LabAndImg'
+import { useCallback, useMemo } from 'react'
 
 type Params = {
-    desStatus?: true | false,
-    productList?: any[],
-    popupShow?: (any) => void
+  desStatus?: true | false
+  productList?: any[]
+  popupShow?: (any) => void
 }
 export default ({ desStatus = true, productList = [], popupShow }: Params) => {
-
-    const labAndImgObj = useCallback((item) => {
-        return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
-    }, [productList])
-    return (
-        <View className={styles.products_list}>
-            {productList?.map(item => {
-                return <View className={styles.products_item} onClick={() => popupShow?.(item)}>
-                    <View className={styles.item_img}>
-                        <LabAndImg value={labAndImgObj(item)} />
-                        <View className={styles.num}>{item.product_color_count}色</View>
-                    </View>
-                    <View className={styles.item_con}>
-                        <View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
-                        <View className={styles.tag_list}>
-                            <View className={styles.tag}>{item.width}</View>
-                            <View className={styles.tag_g}>{item.weight_density}</View>
-                        </View>
-                        <View className={styles.introduce}>{item.component}</View>
-                        {desStatus && <View className={styles.des}>{item.describe}</View>}
-                    </View>
-                </View>
-            })}
-        </View >
-    )
+  const labAndImgObj = useCallback(
+    (item) => {
+      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
+    },
+    [productList],
+  )
+  return (
+    <View className={styles.products_list}>
+      {productList?.map((item) => {
+        return (
+          <View className={styles.products_item} onClick={() => popupShow?.(item)}>
+            <View className={styles.item_img}>
+              <LabAndImg value={labAndImgObj(item)} />
+              <View className={styles.num}>{item.product_color_count}色</View>
+            </View>
+            <View className={styles.item_con}>
+              <View className={styles.title}>
+                <text>{formatHashTag(item.code, '')} </text>
+                {item.name}
+              </View>
+              <View className={styles.tag_list}>
+                <View className={styles.tag}>{item.width}</View>
+                <View className={styles.tag_g}>{item.weight_density}</View>
+              </View>
+              <View className={styles.introduce}>{item.component}</View>
+              {desStatus && <View className={styles.des}>{item.describe}</View>}
+            </View>
+          </View>
+        )
+      })}
+    </View>
+  )
 }

src/components/selectProduct/index.module.scss

@@ -0,0 +1,82 @@
+
+.select_input{
+    width: 100%;
+}
+.stock_ipnut_des{
+    border-bottom: 1rpx solid #F0F0F0;
+    padding: 20rpx 0 10rpx 10rpx !important;
+    .con_input{
+        display: flex;
+        align-items: center;
+        display: flex;
+        .label{
+            width: 120px;
+            font-size: 27px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            padding-left: 10px;
+            color: #707070;
+            font-weight: 700;
+            border-right: 2px solid #F3F3F3 ;
+        }
+        .input_con{
+            flex:1;
+        }
+        .input_type{
+            padding-left: 50px;
+            font-size: 28px;
+            @include common_ellipsis();
+            max-width: 430px;
+        }
+        .noCon{
+            color: #cccccc;
+        }
+        .iconfont{
+            color: #cccccc;
+            font-size: 30px;
+        }
+    }
+}
+.stock_disabled{
+    background: #f7f7f7;
+    border-radius: 10px;
+    .label{
+        color: #cccccc !important;
+    }
+}
+
+.drawer {
+    top:0;
+    position:fixed;
+}
+.selectCon{
+    width:100%;
+    .selectInput{
+        width:100%;
+        padding: 0 20px 20px 20px;
+        border-bottom: 2px solid #F3F3F3;
+        box-sizing: border-box;
+    }
+    .selectList{
+        .selectList-scroll-view{
+            height: 600px;
+            padding-top: 22px;
+            .selectItem{
+                font-size: 28px;
+                color: #707070;
+                padding: 22px 30px;
+            }
+            .selected{
+                color: #3287EC;
+                font-weight: 700;
+            }
+        }
+    }
+}
+.flexBox {
+    display: flex;
+    width: 200px;
+    align-items: center;
+    justify-content: flex-end;
+}

src/components/selectProduct/index.tsx

@@ -0,0 +1,112 @@
+import styles from './index.module.scss'
+import { Image, Text, ScrollView, View } from '@tarojs/components'
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import classnames from 'classnames'
+import Search from '../search'
+import Popup from '../popup'
+import { SelectProductListApi } from '@/api/index'
+
+
+type PropsType = {
+  selectColorId: number
+  noAll?: boolean
+  onSelect?: Function
+  children?: React.ReactNode
+}
+
+const SelectProduct:FC<PropsType> = (params) => {
+  const { selectColorId, noAll, onSelect } = params
+
+  const [selectId, setSelectId] = useState(0)
+
+  useEffect(()=>{
+    setSelectId(selectColorId)
+  }, [selectColorId])
+
+  const {fetchData, state} = SelectProductListApi()
+
+  const [selectValue, setSelectValue] = useState()
+
+  const [productList, setProductList] = useState([{id:1}])
+
+  const clickEvent = () => {}
+
+  const getSelectData = (item) => {
+    setSelectId(item.id)
+    setSelectValue(changeName(item))
+    setShowPopup(false)
+    onSelect && onSelect(item)
+  }
+
+  const changeName = (item) => {
+    if (item.id) {
+      return item.code.includes('#') ? item.code + ' ' + item.name : item.code + '# ' + item.name
+    } else {
+      return item.name
+    }
+  }
+
+  useEffect(() => {
+    getProductList()
+  }, [])
+
+  const getProductList = async () => {
+    let res = await fetchData()
+    !noAll && res.data.list?.unshift({ name: '全部', id: 0 })
+    setProductList(res.data.list)
+  }
+  
+
+  const list = useMemo(() => {
+    console.log('state', state)
+    return state.data.list || [{ id: 1 }]
+  }, [productList])
+
+  const [showPopup, setShowPopup] = useState(false)
+
+  const closeEven = () => {}
+
+  //输入了搜索关键字
+  const getSearchData = useCallback((e) => {
+    // pageNum.current.page = 1
+    // setOrderData(() => ({ list: [], total: 0 }))
+    // setSearchField((val) => ({ ...val, name: e, size: 10 }))
+  }, [])
+
+  useEffect(() => {
+    setSelectId(selectColorId)
+    const res = productList.find((item) => item.id == selectColorId)
+    setSelectValue(changeName(res))
+  }, [selectColorId])
+
+  return (
+    <>
+      <View className={styles.select_input}>
+        <View className={styles.stock_ipnut_des} onClick={clickEvent}>
+          <View className={styles.con_input}>
+            <View className={styles.label}>面料名称</View>
+            <View className={styles.input_con}>
+              <View className={classnames(styles.input_type, selectValue ? '' : 'noCon')}>{selectValue ? selectValue : '请选择'}</View>
+            </View>
+            <Text className='iconfont icon-more'></Text>
+          </View>
+        </View>
+      </View>
+      <Popup title='请选择面料名称' showTitle show={showPopup} onClose={closeEven}>
+        <Search placeholder='请输入编号/面料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}></Search>
+        <View className='selectList'>
+          <ScrollView className={styles['selectList-scroll-View']} scrollY>
+            {list.map((item) => {
+              return (
+                <View key={item.id} className={classnames(styles.selectItem, selectId == item.id ? styles.selected : '')} onClick={() => getSelectData(item)}>
+                  {/* {changeName(item)} */}
+                </View>
+              )
+            })}
+          </ScrollView>
+        </View>
+      </Popup>
+    </>
+  )
+}
+export default SelectProduct

src/components/shopCart/index.tsx

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Taro from '@tarojs/taro'
 import { alert, goLink } from '@/common/common'
 import { GetShoppingCartApi, DelShoppingCartApi, 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 Counter from '../counter'

src/components/uploadImage/index.tsx

@@ -2,7 +2,7 @@ import Taro, { FC } from '@tarojs/taro'
 import { memo, useEffect, useState } from 'react'
 import useUploadCDNImg from '@/use/useUploadImage'
 import { Image, Text, View } from '@tarojs/components'
-import { formatImgUrl } from '@/common/fotmat'
+import { formatImgUrl } from '@/common/format'
 import classnames from 'classnames'
 import styles from './index.module.scss'