TestRestructureWechatLymarketDist/src/components/shoppingCart/index.tsx

import { ScrollView, View } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import VirtualList from '@tarojs/components/virtual-list'
import Divider from '../divider'
import styles from './index.module.scss'
import Search from '@/components/search'
import Popup from '@/components/popup'
import Goods from '@/components/goodsItem'
import BottomCustomer from '@/components/BottomCustomer'
import DotLoading from '@/components/dotLoading'

interface prosObj {
  showPopup?: false | true
  closePopup?: () => void
  goodList?: any[]
  typeList?: any[]
  handCheck?: (any) => void
  addNums?: (any) => void
  reduceNums?: (any) => void
  // oninputEvent?: (e: string, res: object) => void,
  getSearchData: (any) => void
  handPlus: (any) => void
  handSure: () => void
  obj?: {
    code?: string
    name?: string

  }
  modeFont: Number | string
  clientName: string
  clientId: Number
  hasBottom?: true | false // 默认不占位底部
  onBlur?: (e: string, res: object) => void
}
const ShoppingCart = (props: prosObj, ref) => {
  const {
    showPopup = false,
    closePopup,
    goodList = [],
    typeList = [],
    handCheck,
    addNums,
    reduceNums,
    // oninputEvent,
    getSearchData,
    handPlus,
    obj = {},
    modeFont = 0,
    clientName = '',
    clientId = -1,
    handSure,
    hasBottom = true,
    onBlur,
  } = props

  const SearchRef = useRef<any>()

  useImperativeHandle(ref, () => ({
    Object: props,
    typeList,
    SearchRef,
  }))

  // 判断选择的类型
  const showModefont = useMemo(() => {
    const modeObj = typeList.filter((item) => {
      return item.checked
    })
    if (modeObj[0].id === 0) {
      return '条'
    }
    else {
      return '米'
    }
  }, [typeList])

  // 已选的颜色
  const selectTotal = useMemo(() => {
    const totalArr = goodList.filter((item) => {
      return item.showInput
    })
    return totalArr.length
  }, [goodList])

  // 选择的条数或者米数
  const selectNums = useMemo(() => {
    const arr: any = []
    goodList.forEach((item) => {
      if (item.showInput) {
        arr.push(Number(item.nums))
      }
    })
    const hate = sum(arr)
    return hate
  }, [goodList])
  // onInputEven={(e, item) => oninputEvent?.(e, item)}

  function sum(arr) {
    let s = 0
    for (let i = arr.length - 1; i >= 0; i--) {
      s += arr[i]
    }
    return s
  }

  const rows = ({ id, index, style, data }: any) => {
    const item = data[index]
    return (
      <>
        <Goods
          onBlur={(e, id) => onBlur?.(e, id)}
          modeFont={(modeFont as number)}
          handPlus={item => handPlus?.(item)}
          value={item || {}}
          clickAdd={item => addNums?.(item)}
          clickReduce={(item) => { reduceNums?.(item) }}
          goodList={goodList}
        ></Goods>
      </>
    )
  }
  const Rows = memo(rows)

  return (
    <Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
      <ScrollView className={styles.scrllStyle} scrollY>
        <View className={styles.shopcartBox}>
          <View className={styles.topTitle}>
            {obj?.code}# {obj?.name}
          </View>
          <View className={styles.selectFont}>
            已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}
          </View>
          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
          <View className={styles.typeFont}>布料类型</View>
          <View className={styles.flexType}>
            {typeList.map((item, index) => {
              return (
                <View
                  onClick={() => {
                    handCheck?.(item)
                  }}
                  key={index}
                  className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}
                >
                  {item.name}
                </View>
              )
            })}
          </View>
          <View style={{ position: 'sticky', top: 0, background: 'white', zIndex: '9999' }}>
            <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
            <View className={styles.flexFonts}>
              <View className={styles.kingFont}>颜色分类({goodList?.length})</View>
              <View className={styles.danwei}>
                {modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}
              </View>
            </View>
            <View className={styles.searchBox}>
              <Search
                ref={SearchRef}
                cursorSpacing={100}
                placeholder="请输入搜索布料"
                showBtn={false}
                changeOnSearch={getSearchData}
                adjustPosition
              />
            </View>
          </View>
          {goodList.length > 0 && (
            <>
              <View className={styles.scrollviewBig}>
                <VirtualList
                  className={styles.scrollview}
                  height={300} /* 列表的高度 */
                  width="100%" /* 列表的宽度 */
                  itemData={goodList} /* 渲染列表的数据 */
                  itemCount={goodList.length + 0} /*  渲染列表的长度 */
                  itemSize={100} /* 列表单项的高度  */
                  overscanCount={1}
                >
                  {Rows}
                </VirtualList>
              </View>

              <View className={styles.kongOne}></View>
            </>
          )}
          {goodList.length === 0 && (
            <>
              <View className={styles.loading_more}>
                加载中
                <DotLoading />
              </View>
            </>
          )}
          {!hasBottom && <View style={{ height: '100rpx' }}></View>}
          {/* <View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}> */}
          <View className={styles.noBottom}>
            <BottomCustomer
              clientName={clientName}
              clientId={clientId}
              isDisabled={!(selectTotal > 0 && clientName !== '')}
              handSure={() => {
                handSure()
              }}
            ></BottomCustomer>
          </View>
        </View>
      </ScrollView>
    </Popup>
  )
}
export default memo(forwardRef(ShoppingCart))