✨ feat(领取剪样对接):

src/api/colorCard.ts

@@ -65,3 +65,14 @@ export const GetColorCardOrderDetailApi = () => {
     method: 'get',
   })
 }
+
+/**
+ *  获取该面料是否绑定色卡
+ * @returns
+ */
+export const GetColorCardOrderByProductApi = () => {
+  return request({
+    url: '/v1/mall/product/colorCard',
+    method: 'get',
+  })
+}

src/api/cutSample.ts

@@ -0,0 +1,78 @@
+import { useRequest as request } from '@/use/useHttp'
+
+/**
+ *  获取所有剪样订单列表
+ * @returns
+ */
+export const GetCutSampleOrderListApi = () => {
+  return request({
+    url: '/v1/mall/cutSampleOrder/list',
+    method: 'post',
+  })
+}
+
+/**
+ *  获取剪样订单状态列表
+ * @returns
+ */
+export const GetCutSampleOrderStatusApi = () => {
+  return request({
+    url: '/v1/mall/cutSampleOrder/status',
+    method: 'get',
+  })
+}
+
+/**
+ *  取消订单
+ * @returns
+ */
+export const ColorCardOrderCancelApi = () => {
+  return request({
+    url: '/v1/mall/colorCardOrder/cancel',
+    method: 'post',
+  })
+}
+
+/**
+ *  提交色卡
+ * @returns
+ */
+export const SubmitColorCardApi = () => {
+  return request({
+    url: '/v1/mall/colorCardOrder/submit',
+    method: 'post',
+  })
+}
+
+/**
+ *  获取色卡订单列表
+ * @returns
+ */
+export const GetColorCardOrderApi = () => {
+  return request({
+    url: '/v1/mall/colorCardOrder/list',
+    method: 'get',
+  })
+}
+
+/**
+ *  获取色卡订单详情
+ * @returns
+ */
+export const GetColorCardOrderDetailApi = () => {
+  return request({
+    url: '/v1/mall/colorCardOrder',
+    method: 'get',
+  })
+}
+
+/**
+ *  获取该面料是否绑定色卡
+ * @returns
+ */
+export const GetColorCardOrderByProductApi = () => {
+  return request({
+    url: '/v1/mall/product/colorCard',
+    method: 'get',
+  })
+}

src/app.config.ts

@@ -236,5 +236,11 @@ export default {
         'index',
       ],
     },
+    {
+      root: 'pages/cutSampleListOrder',
+      pages: [
+        'index',
+      ],
+    },
   ],
 }

src/common/constant.ts

@@ -1,4 +1,4 @@
-export const BASE_URL = CURRENT_BASE_URL
+// export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@@ -14,7 +14,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
 // export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷
-// export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
+export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
 
 // CDN
 // 生成密钥

src/components/popupSelectColor/index.module.scss

@@ -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;
+    }
+  }
+}

src/components/popupSelectColor/index.tsx

@@ -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>
+})

src/pages/colorCardClipping/components/colorCardList/index.tsx

@@ -34,9 +34,9 @@ export default () => {
     getColorCardOrder()
   }, [searchData])
 
-  useDidShow(() => {
+  useEffect(() => {
     getColorCardOrderStatus()
-  })
+  }, [])
 
   // 获取状态列表
   const [statusList, setStatusList] = useState<{ id: 0|1|2; name: string }[]>([])

src/pages/colorCardClipping/components/cutSampleList/index.module.scss

@@ -0,0 +1,67 @@
+.btn_list {
+  height: 116px;
+  background: #ffffff;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px;
+  .btn_item {
+    width: 224px;
+    height: 68px;
+    text-align: center;
+    line-height: 68px;
+    font-size: 28px;
+    border-radius: 68px;
+    background-color: #e9e9e9ff;
+    color: rgba(0, 0, 0, 0.6);
+    box-sizing: border-box;
+  }
+  .select_ed {
+    background-color: #337fff1a;
+    border: 1px solid #337fffff;
+    color: #337fffff;
+  }
+}
+.con {
+  height: calc(100vh - 376px);
+  display: flex;
+  .kong_image {
+    width: 410px;
+    height: 268px;
+    text-align: center;
+    image {
+      width: 100%;
+      height: 100%;
+      margin-bottom: 37px;
+    }
+    text {
+      font-size: 28px;
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+  .con_list {
+    width: 100%;
+    padding: 0 24px;
+  }
+}
+.get_card_btn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 24px 66px 24px;
+  box-sizing: border-box;
+  background-color: #fff;
+  box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
+  text {
+    display: inline-block;
+    width: 702px;
+    height: 80px;
+    background: #4581ff;
+    border-radius: 40px;
+    color: #fff;
+    text-align: center;
+    line-height: 80px;
+  }
+}

src/pages/colorCardClipping/components/cutSampleList/index.tsx

@@ -0,0 +1,128 @@
+import { Image, Text, View } from '@tarojs/components'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import type { ParamItem } from '../productItem'
+import ProductItem from '../productItem'
+import styles from './index.module.scss'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { alert, goLink } from '@/common/common'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
+import kong from '@/styles/image/kong.png'
+import { GetCutSampleOrderListApi, GetCutSampleOrderStatusApi } from '@/api/cutSample'
+
+export default () => {
+  const [searchData, setSearchData] = useState<{ status?: number; page: number; size: number }>({
+    status: 0,
+    page: 1,
+    size: 10,
+  })
+
+  const [orderData, setOrderData] = useState<{ list: ParamItem[]; total: number }>({
+    list: [],
+    total: 0,
+  })
+
+  const { fetchData: fetchDataOrder, state: OrderState } = GetCutSampleOrderListApi()
+  const getColorCardOrder = async() => {
+    const res = await fetchDataOrder(getFilterData(searchData))
+    setRefresherTriggeredStatus(false)
+    setOrderData(() => res.data)
+  }
+
+  useEffect(() => {
+    getColorCardOrder()
+  }, [searchData])
+
+  useDidShow(() => {
+    getColorCardOrderStatus()
+  })
+
+  // 获取状态列表
+  const [statusList, setStatusList] = useState<{ id: 0|1|2; name: string }[]>([])
+  const { fetchData: fetchDataStatus } = GetCutSampleOrderStatusApi()
+  const getColorCardOrderStatus = async() => {
+    const res = await fetchDataStatus()
+    setStatusList([{ id: 0, name: '全部记录' }, ...res.data.list])
+  }
+
+  // 上拉加载数据
+  const pageNum = useRef({ size: searchData.size, page: searchData.page })
+  const getScrolltolower = useCallback(() => {
+    if (orderData.list.length < orderData.total) {
+      pageNum.current.page++
+      const size = pageNum.current.size * pageNum.current.page
+      setSearchData(e => ({ ...e, size }))
+    }
+  }, [orderData])
+
+  // 数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: orderData?.list, total: orderData?.total, status: OrderState.loading })
+  }, [orderData, OrderState])
+
+  // 列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  const getRefresherRefresh = async() => {
+    pageNum.current.page = 1
+    setRefresherTriggeredStatus(true)
+    setSearchData(val => ({ ...val, size: 10 }))
+  }
+
+  const changeStatus = (index: number) => {
+    pageNum.current.page = 1
+    setSearchData(e => ({ ...e, status: index, page: 1, size: 10 }))
+  }
+
+  // 取消订单
+  // const { fetchData: fetchDataCancel } = ColorCardOrderCancelApi()
+  // const onCancel = async(id: number) => {
+  //   Taro.showModal({
+  //     title: '确定取消订单？',
+  //     async success(res) {
+  //       if (res.confirm) {
+  //         const res = await fetchDataCancel({ id })
+  //         if (res.success) {
+  //           alert.success('取消成功')
+  //           getColorCardOrder()
+  //         }
+  //       }
+  //       else if (res.cancel) {
+  //         console.log('用户点击取消')
+  //       }
+  //     },
+  //   })
+  // }
+
+  return <>
+    <View className={styles.btn_list}>
+      {statusList.map(item => <View key={item.id} onClick={() => changeStatus(item.id)} className={classNames(styles.btn_item, searchData.status === item.id && styles.select_ed)}>{item.name}</View>)}
+    </View>
+    <View className={styles.con}>
+      {false && <View className={styles.kong_image}>
+        <Image src={kong}></Image>
+        <Text>还没有领取过色卡</Text>
+      </View>}
+      <View className={styles.con_list}>
+        <InfiniteScroll
+          statusMore={statusMore}
+          refresherEnabled
+          selfonScrollToLower={getScrolltolower}
+          refresherTriggered={refresherTriggeredStatus}
+          selfOnRefresherRefresh={getRefresherRefresh}
+        >
+          {orderData.list?.map((item) => {
+            return (
+              <View key={item.id} className={styles.order_item_con}>
+                <ProductItem value={item} onCancel={onCancel} />
+              </View>
+            )
+          })}
+        </InfiniteScroll>
+      </View>
+    </View>
+    <View className={styles.get_card_btn} onClick={() => goLink('/pages/cutSampleList/index')}>
+      <Text>领取剪样</Text>
+    </View>
+  </>
+}

src/pages/colorCardClipping/index.tsx

@@ -6,6 +6,7 @@ import styles from './index.module.scss'
 import type { ParamItem } from './components/productItem'
 import ProductItem from './components/productItem'
 import ColorCardList from './components/colorCardList'
+import CutSampleList from './components/cutSampleList'
 import SelectList from '@/components/selectList'
 import kong from '@/styles/image/kong.png'
 import InfiniteScroll from '@/components/infiniteScroll'
@@ -22,6 +23,6 @@ export default () => {
 
   return <View className={styles.main}>
     <SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />
-    <ColorCardList />
+    {selectIndex == 1 ? <ColorCardList /> : <CutSampleList />}
   </View>
 }

src/pages/colorCardOrder/index.tsx

@@ -10,6 +10,8 @@ import Remark from './components/remark'
 import { alert, goLink } from '@/common/common'
 import { SubmitColorCardApi } from '@/api/colorCard'
 import { getFilterData } from '@/common/util'
+import { UseSubscriptionMessage } from '@/use/useCommon'
+import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
 
 export interface submitData {
   address_id: number
@@ -76,6 +78,10 @@ export default () => {
     computeCount(list)
   }, [list])
 
+  // 订阅消息
+  const { ColorCard } = SUBSCRIPTION_MESSAGE_SCENE
+  const { openSubscriptionMessage } = UseSubscriptionMessage()
+
   const { fetchData: submitFetchData } = SubmitColorCardApi()
   const onSubmitData = async() => {
     submitData.current.color_card_infos = []
@@ -86,6 +92,7 @@ export default () => {
       })
     })
     if (!submitData.current.address_id) { return alert.none('请选择收货地址') }
+    await openSubscriptionMessage({ scenes: ColorCard.value })
     const res = await submitFetchData(getFilterData(submitData.current))
     if (res.success) {
       alert.success('提交成功')

src/pages/cutSampleListOrder/components/address/index.module.scss

@@ -0,0 +1,39 @@
+.address_con {
+  display: flex;
+  padding: 32px;
+  background-color: #ffffffff;
+  border-radius: 16px;
+  .message {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-left: 24px;
+    .info_address {
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding-bottom: 16px;
+      .address_name {
+        color: rgba(0, 0, 0, 0.8);
+        width: 461px;
+      }
+    }
+    .info_phone {
+      display: flex;
+      padding-top: 32px;
+      justify-content: space-between;
+      font-size: 28px;
+      color: rgba(0, 0, 0, 0.8);
+      text {
+        display: flex;
+        align-items: center;
+        &:nth-child(2) {
+          color: #337fffff;
+        }
+      }
+    }
+  }
+}

src/pages/cutSampleListOrder/components/address/index.tsx

@@ -0,0 +1,69 @@
+import { Text, View } from '@tarojs/components'
+import { useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import IconFont from '@/components/iconfont/iconfont'
+import SelectAddress from '@/components/selectAddress'
+
+export interface AddressItem {
+  id: number
+  address_title?: string
+  address_name?: string
+  address_phone?: string
+}
+interface Param {
+  onSelect: (val: AddressItem) => void
+  defaultValue?: AddressItem
+}
+
+export default (props: Param) => {
+  const { defaultValue } = props
+  const [data, setData] = useState({
+    id: 0,
+    address_title: '',
+    address_name: '',
+    address_phone: '',
+    address_mode: '物流',
+  })
+
+  useEffect(() => {
+    setData(e => ({
+      ...e,
+      id: e.id,
+      address_title: defaultValue?.address_title || '',
+      address_name: defaultValue?.address_name || '',
+      address_phone: defaultValue?.address_phone || '',
+    }))
+  }, [defaultValue])
+
+  const [showList, setShowList] = useState(false)
+  const getAddress = (e) => {
+    props.onSelect({
+      id: e.id,
+      address_title: e.province_name + e.district_name + e.city_name + e.address_detail,
+      address_name: e.name,
+      address_phone: e.phone,
+    })
+    setData(val => ({
+      ...val,
+      address_title: e.province_name + e.district_name + e.city_name + e.address_detail,
+      address_name: e.name,
+      address_phone: e.phone,
+    }))
+  }
+  return <>
+    <View className={styles.address_con} onClick={() => setShowList(true)}>
+      <IconFont name="icon-dizhiguanli" size={50} />
+      <View className={styles.message}>
+        <View className={styles.info_address}>
+          <View className={styles.address_name}>{data.address_title || '请选择收货地址'}</View>
+          <IconFont name="icon-rukou" color="#979797FF" />
+        </View>
+        <View className={styles.info_phone}>
+          <Text>{`${data.address_name}  ${data.address_phone}`}</Text>
+          <Text>{data.address_mode}</Text>
+        </View>
+      </View>
+    </View>
+    <SelectAddress show={showList} onClose={() => setShowList(false)} onSelect={getAddress} />
+  </>
+}

src/pages/cutSampleListOrder/components/productCard/index.module.scss

@@ -0,0 +1,27 @@
+.card_item {
+  height: 140px;
+  display: flex;
+  padding-top: 24px;
+  color: rgba(0, 0, 0, 0.8);
+
+  .img {
+    width: 108px;
+    height: 108px;
+  }
+  .name_count {
+    width: 100%;
+    margin-left: 42px;
+    flex: 1;
+    font-size: 28px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    .btns {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+    }
+    .count_btn {
+      margin-top: 27px;
+      width: 170px;
+    }
+  }
+}

src/pages/cutSampleListOrder/components/remark/index.module.scss

@@ -0,0 +1,25 @@
+.remarks {
+  height: 165px;
+  background: #ffffff;
+  border-radius: 16px;
+  margin-top: 24px;
+  padding: 0 32px;
+  font-size: 28px;
+  .remarks_header {
+    display: flex;
+    height: 80px;
+    line-height: 80px;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    text {
+      &:nth-child(2) {
+        color: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+  .remarks_message {
+    height: 82px;
+    line-height: 82px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+}

src/pages/cutSampleListOrder/components/remark/index.tsx

@@ -0,0 +1,33 @@
+import { Text, View } from '@tarojs/components'
+import { useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import Remark from '@/components/remark'
+
+interface Param {
+  onSave?: (val: string) => void
+  defaultValue: string
+}
+export default (props: Param) => {
+  const [showRemark, setShowRemark] = useState(false)
+  const [data, setData] = useState('')
+  const getOnSave = (e: string) => {
+    setData(e)
+    props.onSave?.(e)
+    setShowRemark(false)
+  }
+  useEffect(() => {
+    setData(props.defaultValue)
+  }, [props.defaultValue])
+  return <>
+    <View className={styles.remarks} onClick={() => setShowRemark(true)}>
+      <View className={styles.remarks_header}>
+        <Text>备注信息</Text>
+        <Text>填写/修改备注</Text>
+      </View>
+      <View className={styles.remarks_message}>
+        <Text>{data || '尚未备注信息'}</Text>
+      </View>
+    </View>
+    <Remark show={showRemark} onSave={getOnSave} onClose={() => setShowRemark(false)} />
+  </>
+}

src/pages/cutSampleListOrder/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '领取色卡',
+  enableShareAppMessage: true,
+}

src/pages/cutSampleListOrder/index.module.scss

@@ -0,0 +1,75 @@
+.main {
+  min-height: 100vh;
+  background-color: #f7f7f7ff;
+  padding: 24px;
+  padding-bottom: 180px;
+  .add_card_btn {
+    height: 82px;
+    background: #ffffff;
+    border-radius: 16px;
+    border: 1px solid #337fff;
+    text-align: center;
+    line-height: 82px;
+    color: #337fff;
+    margin-top: 24px;
+  }
+  .card_con {
+    background-color: #ffffff;
+    padding: 0 24px;
+    margin-top: 24px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    .card_header {
+      height: 82px;
+      font-size: 28px;
+      color: rgba(0, 0, 0, 0.8);
+      font-weight: 500;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      line-height: 82px;
+    }
+    .card_list {
+      .express_btn {
+        font-size: 28px;
+        color: #f64861;
+        width: 100%;
+        text-align: right;
+        padding: 32px 0 24px 0;
+      }
+    }
+  }
+
+  .order_btn {
+    position: fixed;
+    height: 162px;
+    background: #ffffff;
+    box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    padding: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    .btn_con {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100px;
+    }
+    text {
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.4);
+      margin-left: 15px;
+    }
+    .btn {
+      width: 293px;
+      height: 80px;
+      background: #4581ff;
+      border-radius: 40px;
+      text-align: center;
+      line-height: 80px;
+      color: #fff;
+    }
+  }
+}

src/pages/cutSampleListOrder/index.tsx

@@ -0,0 +1,127 @@
+import { Text, View } from '@tarojs/components'
+import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import type { AddressItem } from './components/address'
+import Address from './components/address'
+import type { ParamItem } from './components/productCard'
+import ProductCard from './components/productCard'
+import Remark from './components/remark'
+import { alert, goLink } from '@/common/common'
+import { SubmitColorCardApi } from '@/api/colorCard'
+import { getFilterData } from '@/common/util'
+import { UseSubscriptionMessage } from '@/use/useCommon'
+import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
+
+export interface submitData {
+  address_id: number
+  color_card_infos: { count: number; id: number }[]
+  remark: string
+}
+export default () => {
+  const submitData = useRef<submitData>({
+    address_id: 0,
+    color_card_infos: [],
+    remark: '',
+  })
+
+  const [addressInfo, setAddressInfo] = useState<AddressItem>()
+  const getAddress = (e) => {
+    submitData.current.address_id = e.id
+    setAddressInfo(() => e)
+  }
+  const [list, setList] = useState<ParamItem[]>([])
+  useDidShow(() => {
+    const list = Taro.getStorageSync('cutSample') ? JSON.parse(Taro.getStorageSync('cutSample')) : []
+    const info = Taro.getStorageSync('colorCardOther') ? JSON.parse(Taro.getStorageSync('colorCardOther')) : {}
+    setList(() => list)
+    computeCount(list)
+    setAddressInfo(info.address)
+    setRemarkData(info.remark)
+    submitData.current.address_id = info?.address?.id || 0
+    Taro.removeStorageSync('colorCard')
+    Taro.removeStorageSync('colorCardOther')
+  })
+
+  const onAddCard = () => {
+    Taro.setStorageSync('cutSample', JSON.stringify(list))
+    Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark }))
+    Taro.navigateTo({
+      url: '/pages/colorCardList/index',
+    })
+  }
+
+  const onDelData = useCallback((id) => {
+    if (list.length === 1) { return alert.none('不能删除最后一个色卡') }
+    const res = list?.filter((item) => {
+      return item.id != id
+    })
+    computeCount(res)
+    setList(() => res)
+  }, [list])
+
+  // 计算总数
+  const [numText, setNumText] = useState('')
+  const computeCount = (list) => {
+    let res = 0
+    list.map(item => res += item.count)
+    setNumText(() => `当前共 ${list.length} 种色卡, 共 ${res} 本`)
+  }
+
+  const onChangeNum = useCallback((val: { id: number; count: number }) => {
+    list?.map((item) => {
+      if (item.id == val.id) {
+        item.count = val.count
+      }
+    })
+    setList(() => list)
+    computeCount(list)
+  }, [list])
+
+  // 订阅消息
+  const { ColorCard } = SUBSCRIPTION_MESSAGE_SCENE
+  const { openSubscriptionMessage } = UseSubscriptionMessage()
+
+  const { fetchData: submitFetchData } = SubmitColorCardApi()
+  const onSubmitData = async() => {
+    submitData.current.color_card_infos = []
+    list?.map((item) => {
+      submitData.current.color_card_infos.push({
+        count: item.count || 0,
+        id: item.id,
+      })
+    })
+    if (!submitData.current.address_id) { return alert.none('请选择收货地址') }
+    await openSubscriptionMessage({ scenes: ColorCard.value })
+    const res = await submitFetchData(getFilterData(submitData.current))
+    if (res.success) {
+      alert.success('提交成功')
+      goLink('/pages/colorCardOrderDetail/index', { id: res.data.id })
+    }
+  }
+
+  const [remarkData, setRemarkData] = useState('')
+  const onRemark = (e) => {
+    submitData.current.remark = e
+    setRemarkData(e)
+  }
+
+  return <View className={styles.main}>
+    <Address onSelect={getAddress} defaultValue={addressInfo} />
+    <View className={styles.add_card_btn} onClick={onAddCard}>添加色卡</View>
+    <View className={styles.card_con}>
+      <View className={styles.card_header}>色卡信息</View>
+      <View className={styles.card_list}>
+        {list?.map(item => <ProductCard key={item.id} value={item} onDelData={onDelData} onChangeNum={onChangeNum} />)}
+        <View className={styles.express_btn}>快递到付</View>
+      </View>
+    </View>
+    <Remark onSave={onRemark} defaultValue={remarkData} />
+    <View className={styles.order_btn}>
+      <View className={styles.btn_con} onClick={onSubmitData}>
+        <Text>{numText}</Text>
+        <View className={styles.btn}>提交订单</View>
+      </View>
+    </View>
+  </View>
+}

src/pages/details/index.module.scss

@@ -169,13 +169,19 @@
     padding-bottom: env(safe-area-inset-bottom);
     .icon_btn {
       display: flex;
-      padding: 0 20px 0 50px;
+      flex: 1;
+      justify-content: space-between;
+      padding-left: 24px;
+      padding-right: 30px;
+      // padding: 0 20px 0 50px;
     }
     .buy_cart {
-      width: 150px;
       color: $color_font_three;
       text-align: center;
       position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
       .text {
         font-size: $font_size_min;
         color: #333333;
@@ -189,14 +195,14 @@
         font-size: 23px;
         background-color: red;
         color: #fff;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 6px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 3px;
         border-radius: 72px;
         min-width: 25px;
         text-align: center;
         top: 0;
-        right: 20px;
+        right: 0px;
       }
     }
     .customer_service {
@@ -214,12 +220,14 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 297px;
-      height: 100%;
-      background-color: $color_main;
       font-size: $font_size;
       color: #fff;
       position: relative;
+      width: 350px;
+      height: 80px;
+      background: #4581ff;
+      border-radius: 40px;
+      margin-right: 24px;
     }
   }
   .wxBtn {

src/pages/details/index.tsx

@@ -1,4 +1,4 @@
-import { Button, RichText, Text, View } from '@tarojs/components'
+import { Button, Icon, RichText, Text, View } from '@tarojs/components'
 import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
 import classnames from 'classnames'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -24,6 +24,8 @@ import Dialog from '@/components/Dialog'
 import NormalButton from '@/components/normalButton'
 import IconFont from '@/components/iconfont/iconfont'
 import LabAndImgShow from '@/components/LabAndImgShow'
+import PopupSelectColor from '@/components/popupSelectColor'
+import { GetColorCardOrderByProductApi } from '@/api/colorCard'
 
 interface item { title: string; img: string; url: string; id: number }
 
@@ -233,6 +235,23 @@ const Details = (props: Params) => {
     setRecommendStatus(true)
   }, [])
 
+  const { fetchData: colorCardFetchData } = GetColorCardOrderByProductApi()
+  const getColorCardData = async() => {
+    const res = await colorCardFetchData({ product_id: productInfo.id })
+    if (res.data) {
+      res.data.count = 1
+      Taro.setStorageSync('colorCard', JSON.stringify([res.data]))
+      Taro.navigateTo({
+        url: '/pages/colorCardOrder/index',
+      })
+    }
+  }
+
+  const [showColorSelect, setShowColorSelect] = useState(false)
+  const openColorSelect = () => {
+    setShowColorSelect(true)
+  }
+
   return (
     <MoveBtn showList={['customer']}>
       <View className={styles.main}>
@@ -323,7 +342,7 @@ const Details = (props: Params) => {
         </View>
         <View className={styles.product_buy}>
           <View className={styles.icon_btn}>
-            <View className={styles.customer_service}>
+            {/* <View className={styles.customer_service}>
               <View className={classnames('iconfont icon-kefu', styles.miconfont)}></View>
               <View className={styles.text}>
               询货/咨询
@@ -336,12 +355,21 @@ const Details = (props: Params) => {
                   sendMessagePath={`/pages/details/index?id=${productInfo.id}`}
                 ></Button>
               </View>
-            </View>
+            </View> */}
             <View className={styles.buy_cart} onClick={() => goLink('/pages/shopCar/index', {}, 'switchTab')}>
               <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
               <View className={styles.text}>购物车</View>
               {commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
             </View>
+            <View className={styles.buy_cart} onClick={getColorCardData}>
+              <IconFont name="icon-lingseka" size={50} />
+              <View className={styles.text}>领取色卡</View>
+            </View>
+            <View className={styles.buy_cart} onClick={openColorSelect}>
+              <IconFont name="icon-lingjianyang" size={50} />
+              <View className={styles.text}>领取剪样</View>
+            </View>
+
           </View>
 
           {(!userInfo.adminUserInfo?.is_authorize_phone && (
@@ -395,6 +423,7 @@ const Details = (props: Params) => {
             </View>
           </View>
         </Dialog>
+        <PopupSelectColor show={showColorSelect} product_id={productInfo.id} onClose={() => setShowColorSelect(false)} />
         <View className="common_safe_area_y"></View>
       </View>
     </MoveBtn>