✨ feat(颜色取样): 新增颜色取样模块

2022-10-31 19:06:14 +08:00
parent e0de46c469
commit 2811f7eb60
15 changed files with 438 additions and 249 deletions
@@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { RootPortal, View } from '@tarojs/components'
 import style from './index.module.scss'
 import classnames from 'classnames'
 import { memo, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
@@ -1,52 +1,56 @@
-import { Input, View } from "@tarojs/components";
-import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
-import styles from  './index.module.scss';
+import { Input, View } from '@tarojs/components'
+import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react'
+import IconFont from '../iconfont/iconfont'
+import styles from './index.module.scss'

 type Params = {
-    showIcon?: false|true,
-    disabled?: false|true,
-    placeholder?: string,
-    title?: string,
-    showTitle?: false|true,
-    showBorder?: false|true,
-    changeOnInput?: (string) => void,
-    clickOnInput?: () => void,
-    children?: ReactNode
-    height?: string,
-    titleStyle?: Object,
-    styleObj?: Object
-
+  showIcon?: boolean
+  disabled?: boolean
+  placeholder?: string
+  title?: string
+  showTitle?: boolean
+  showBorder?: boolean
+  changeOnInput?: (string) => void
+  clickOnInput?: () => void
+  children?: ReactNode
+  height?: string
+  titleStyle?: Object
+  styleObj?: Object
 }

 export default memo((props: Params) => {
-    let {
-        showTitle = true,
-        title = '标题', 
-        showIcon = false, 
-        disabled = false, 
-        placeholder = '请输入',
-        showBorder = true,
-        changeOnInput,
-        clickOnInput,
-        height = '80rpx',
-        titleStyle = {}
-    } = props
+  let {
+    showTitle = true,
+    title = '标题',
+    showIcon = false,
+    disabled = false,
+    placeholder = '请输入',
+    showBorder = true,
+    changeOnInput,
+    clickOnInput,
+    height = '80rpx',
+    titleStyle = {},
+  } = props

-    let stylen = useMemo(() => {
-        if(!showBorder) {
-            return { borderBottom: 0 }
-        }
-        return {}
-    }, [showBorder])
-    return (
-        <View className={styles.searchInput_main} style={{height: height, ...stylen}}>
-            {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
-            <View className={styles.searchInput_con}>
-                {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
-                    ||<>{props.children}</>
-                }
-            </View>
-            {showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
+  let stylen = useMemo(() => {
+    if (!showBorder) {
+      return { borderBottom: 0 }
+    }
+    return {}
+  }, [showBorder])
+  return (
+    <View className={styles.searchInput_main} style={{ height: height, ...stylen }}>
+      {showTitle && (
+        <View className={styles.searchInput_title} style={titleStyle}>
+          {title}
        </View>
-    )
-})
+      )}
+      <View className={styles.searchInput_con}>
+        {(!props.children && (
+          <Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
+        )) || <>{props.children}</>}
+      </View>
+      {showIcon && <IconFont customClassName={styles.icon_more_self} name='icon-chakanquanbukehu' size={36} color='#333'></IconFont>}
+    </View>
+  )
+})
@@ -1,82 +1,48 @@
+.select_input {
+  width: 100%;
+}

-.select_input{
-    width: 100%;
+.input_type {
+  width: 100%;
+  font-size: 28px;
+  @include common_ellipsis();
+  max-width: 430px;
 }
-.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;
-        }
-    }
+.noCon {
+  color: #cccccc;
 }
-.stock_disabled{
-    background: #f7f7f7;
-    border-radius: 10px;
-    .label{
-        color: #cccccc !important;
-    }
+.stock_disabled {
+  background: #f7f7f7;
+  border-radius: 10px;
+  .label {
+    color: #cccccc !important;
+  }
 }

 .drawer {
-    top:0;
-    position:fixed;
+  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 {
+    padding-top: 22px;
+    height: 50vh;
+    .selectItem {
+      font-size: 28px;
+      color: #707070;
+      padding: 22px 30px;
    }
-    .selectList{
-        .selectList-scroll-view{
-            height: 600px;
-            padding-top: 22px;
-            .selectItem{
-                font-size: 28px;
-                color: #707070;
-                padding: 22px 30px;
-            }
-            .selected{
-                color: #3287EC;
-                font-weight: 700;
-            }
-        }
+    .selected {
+      color: #3287ec;
+      font-weight: 700;
    }
+  }
 }
+
 .flexBox {
-    display: flex;
-    width: 200px;
-    align-items: center;
-    justify-content: flex-end;
+  display: flex;
+  width: 200px;
+  align-items: center;
+  justify-content: flex-end;
 }
@@ -1,11 +1,13 @@
 import styles from './index.module.scss'
-import { Image, Text, ScrollView, View } from '@tarojs/components'
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { Image, Text, ScrollView, View, RootPortal } from '@tarojs/components'
+import React, { FC, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
 import Search from '../search'
 import Popup from '../popup'
 import { SelectProductListApi } from '@/api/index'
-
+import IconFont from '../iconfont/iconfont'
+import { formatHashTag } from '@/common/format'
+import SearchInput from '../searchInput'

 type PropsType = {
  selectColorId: number
@@ -14,35 +16,51 @@ type PropsType = {
  children?: React.ReactNode
 }

-const SelectProduct:FC<PropsType> = (params) => {
+type productType = {
+  code?: string
+  default?: boolean
+  id: number
+  name: string
+}
+
+const SelectProduct = forwardRef((params: PropsType, ref) => {
  const { selectColorId, noAll, onSelect } = params

-  const [selectId, setSelectId] = useState(0)
+  const [selectId, setSelectId] = useState(selectColorId)

-  useEffect(()=>{
-    setSelectId(selectColorId)
-  }, [selectColorId])
-
-  const {fetchData, state} = SelectProductListApi()
+  const { fetchData } = SelectProductListApi()

  const [selectValue, setSelectValue] = useState()

-  const [productList, setProductList] = useState([{id:1}])
+  const [productList, setProductList] = useState<productType[]>([])

-  const clickEvent = () => {}
+  const clickEvent = () => {
+    setShowPopup(true)
+  }
+  useImperativeHandle(
+    ref,
+    () => ({
+      clickEvent,
+    }),
+    [clickEvent],
+  )
+  const originList = useRef<productType[]>([])

-  const getSelectData = (item) => {
+  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
+  const changeName = item => {
+    console.log('changeName', item)
+    if (item) {
+      if (item.id) {
+        return formatHashTag(item.code, item.name)
+      } else {
+        return item.name
+      }
    }
  }

@@ -52,54 +70,60 @@ const SelectProduct:FC<PropsType> = (params) => {

  const getProductList = async () => {
    let res = await fetchData()
-    !noAll && res.data.list?.unshift({ name: '全部', id: 0 })
-    setProductList(res.data.list)
+    // !noAll && res.data.list?.unshift({ name: '全部', id: 0 })
+    !noAll && setProductList([{ name: '全部', id: 0 }, ...res.data.list])
+    originList.current = [{ name: '全部', id: 0 }, ...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 closeEven = () => {
+    setShowPopup(false)
+  }

  //输入了搜索关键字
-  const getSearchData = useCallback((e) => {
-    // pageNum.current.page = 1
-    // setOrderData(() => ({ list: [], total: 0 }))
-    // setSearchField((val) => ({ ...val, name: e, size: 10 }))
-  }, [])
+  const getSearchData = useCallback(
+    async value => {
+      console.log('e==>', value)
+      if (value === '') {
+        setProductList([...originList.current])
+      } else {
+        const res = await fetchData({
+          code_or_name: value,
+        })
+        if (res.success) {
+          setProductList(res.data.list)
+        }
+      }
+    },
+    [originList],
+  )

  useEffect(() => {
    setSelectId(selectColorId)
-    const res = productList.find((item) => item.id == 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>
+        <SearchInput title='面料名称' showIcon={true} showBorder={false}>
+          <View onClick={clickEvent} className={classnames(styles.input_type, selectValue ? '' : 'noCon')}>
+            {selectValue ? selectValue : '请选择'}
          </View>
-        </View>
+        </SearchInput>
      </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) => {
+      <Popup title='请选择面料名称' showTitle show={showPopup} onClose={closeEven} position='bottom' customStyle={{ zIndex: 9999 }}>
+        <View style={{padding: '0 24rpx'}}>
+          <Search placeholder='请输入编号/面料' showBtn={false} changeOnSearch={getSearchData} debounceTime={350}></Search>
+        </View>
+        <View className={styles.selectList}>
+          <ScrollView className={styles['selectList-scroll-view']} scrollY>
+            {productList.map(item => {
              return (
                <View key={item.id} className={classnames(styles.selectItem, selectId == item.id ? styles.selected : '')} onClick={() => getSelectData(item)}>
-                  {/* {changeName(item)} */}
+                  {changeName(item)}
                </View>
              )
            })}
@@ -108,5 +132,5 @@ const SelectProduct:FC<PropsType> = (params) => {
      </Popup>
    </>
  )
-}
+})
 export default SelectProduct