✨ feat(领取剪样对接):

2023-02-21 20:00:55 +08:00
parent 45d49e7e28
commit dd69400dfa
21 changed files with 960 additions and 17 deletions
@@ -0,0 +1,86 @@
+.main {
+  .header {
+    display: flex;
+    flex-direction: column;
+    padding: 32px 40px;
+    box-sizing: border-box;
+    text {
+      &:nth-child(1) {
+        font-size: 32px;
+      }
+      &:nth-child(2) {
+        font-size: 28px;
+        color: rgba(0, 0, 0, 0.4);
+      }
+    }
+  }
+  .color_list {
+    padding: 0 40px;
+    .scroll_view {
+      height: 70vh;
+    }
+    .color_list_con {
+      display: grid;
+      grid-template-columns: repeat(4, auto);
+      grid-gap: 37px 40px;
+      padding-bottom: 170px;
+      justify-content: flex-start;
+    }
+    .item {
+      width: 136px;
+      .item_color {
+        width: 136px;
+        height: 136px;
+        // border: 4px solid #4581ff;
+        box-sizing: border-box;
+        border-radius: 50%;
+        position: relative;
+        .icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+      .select_color {
+        border: 4px solid #4581ff;
+      }
+      .item_name {
+        font-size: 24px;
+        color: #666666;
+        text-align: center;
+        margin-top: 10px;
+      }
+    }
+  }
+  .btns {
+    height: 162px;
+    background: #ffffff;
+    box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
+    display: flex;
+    padding: 16px 24px 0 24px;
+    justify-content: space-between;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    .cancel,
+    .submit {
+      width: 335px;
+      height: 80px;
+      border-radius: 40px;
+      border: 1px solid #087eff;
+      text-align: center;
+      line-height: 80px;
+    }
+    .cancel {
+      font-size: 28px;
+      color: #4581ff;
+    }
+    .submit {
+      font-size: 28px;
+      color: #fff;
+      background: #4581ff;
+    }
+  }
+}
@@ -0,0 +1,123 @@
+import { ScrollView, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import classNames from 'classnames'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+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 colorItem from '@/pages/codeList/components/colorItem'
+import { goLink } from '@/common/common'
+
+export interface Param {
+  show: boolean
+  product_id: number
+  onClose?: () => void
+}
+export interface ColorItem {
+  bulk_price: number
+  code: string
+  id: number
+  kind_code: string
+  kind_id: number
+  kind_name: string
+  lab: { l: number; a: number; b: number }
+  last_bulk_price: number
+  length_cut_price: number
+  name: string
+  rgb: { r: number; g: number; b: number }
+  texture_url: string
+  update_price_time: string
+  weight_cut_price: number
+  status: boolean
+  count?: number
+}
+
+export default memo((props: Param) => {
+  const { show = false, onClose, product_id } = props
+  const [colorList, setColorList] = useState<ColorItem[]>([])
+
+  const { fetchData: productFetchData } = GetProductDetailApi()
+  const getProductDetail = async() => {
+    const res = await productFetchData({ id: product_id })
+    setColorList(res.data.product_color_list || [])
+  }
+
+  useEffect(() => {
+    (show && product_id) && getProductDetail()
+  }, [show, product_id])
+
+  const colorListRef = useRef<ColorItem[]>([])
+  useEffect(() => {
+    colorListRef.current = colorList
+  }, [colorList])
+
+  const onSelect = useCallback((val: ColorItem) => {
+    colorListRef.current.map((item, index) => {
+      if (item.id === val.id) {
+        colorListRef.current[index] = { ...item, status: !item.status }
+      }
+    })
+    setColorList(() => [...colorListRef.current])
+  }, [])
+
+  const selectCount = useMemo(() => {
+    let count = 0
+    colorList.map(item => item.status && (count += 1))
+    return count
+  }, [colorList])
+
+  const onSubmit = () => {
+    const data: ColorItem[] = []
+    colorList?.map((item) => {
+      if (item.status) { data.push({ ...item, count: 1 }) }
+    })
+    Taro.setStorageSync('cutSample', JSON.stringify(data))
+    goLink('/pages/cutSampleListOrder/index')
+  }
+  return <View className={styles.main}>
+    <Popup show={show} showTitle={false} onClose={onClose}>
+      <View className={styles.header}>
+        <Text>请选择色号剪样( {colorList.length} )</Text>
+        <Text>剪样大小为A4，大约22cm*30cm</Text>
+      </View>
+      <View className={styles.color_list}>
+        <ScrollView scrollY className={styles.scroll_view}>
+          <View className={styles.color_list_con}>
+            {colorList?.map((item) => {
+              return <ColorSelectItem item={item} key={item.id} onSelect={onSelect} />
+            })}
+          </View>
+        </ScrollView>
+      </View>
+      <View className={styles.btns}>
+        <View className={styles.cancel} onClick={onClose}>取消</View>
+        <View className={styles.submit} onClick={onSubmit}>领取剪样({selectCount})</View>
+      </View>
+    </Popup>
+  </View>
+})
+
+interface ColorItemCom {
+  item: ColorItem
+  onSelect?: (val: ColorItem) => void
+}
+const ColorSelectItem = memo((props: ColorItemCom) => {
+  const { item, onSelect } = props
+  console.log('abcedef', item)
+  return <View key={item.id} className={styles.item} onClick={() => onSelect?.(item)}>
+    <View className={classNames(styles.item_color, item.status && styles.select_color)}>
+      <LabAndImg
+        value={{}}
+        round
+        name={formatHashTag(item.code)}
+      />
+      {item.status && <View className={styles.icon}>
+        <IconFont name="icon-xuanzhongyanse" size={35} />
+      </View>}
+    </View>
+    <View className={styles.item_name}>{item.name}</View>
+  </View>
+})