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

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