✨ feat(ID1000873): 商城用户剪样（A4）

【商城用户剪样（A4）】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000873

project.private.config.json

@@ -320,7 +320,28 @@
         {
           "name": "色卡详情",
           "pathName": "pages/getColorCard/colorCardDetail/index",
-          "query": "id=5",
+          "query": "id=20",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "领取剪样",
+          "pathName": "pages/sampleCutting/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "添加剪样",
+          "pathName": "pages/sampleCutting/sampleCuttingList/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "剪样详情",
+          "pathName": "pages/sampleCutting/sampleCuttingDetail/index",
+          "query": "id=1",
           "launchMode": "default",
           "scene": null
         }

src/api/colorCard/colorCardOrder.ts

@@ -6,7 +6,7 @@ import { useRequest } from '@/use/useHttp'
  */
 export const GetColorCardOrderList = () => {
   return useRequest({
-    url: '/v2/mp/colorCardOrder/list',
+    url: '/v1/mp/colorCardOrder/list',
     method: 'get',
   })
 }
@@ -17,7 +17,7 @@ export const GetColorCardOrderList = () => {
  */
 export const GetColorCardOrderDetail = () => {
   return useRequest({
-    url: '/v2/mp/colorCardOrder',
+    url: '/v1/mp/colorCardOrder',
     method: 'get',
   })
 }
@@ -28,7 +28,7 @@ export const GetColorCardOrderDetail = () => {
  */
 export const SubmitColorCardOrder = () => {
   return useRequest({
-    url: '/v2/mp/colorCardOrder/submit',
+    url: '/v1/mp/colorCardOrder/submit',
     method: 'post',
   })
 }
@@ -39,7 +39,7 @@ export const SubmitColorCardOrder = () => {
  */
 export const GetCanAddCardList = () => {
   return useRequest({
-    url: '/v2/mp/colorCardOrder/canAddCard',
+    url: '/v1/mp/colorCardOrder/canAddCard',
     method: 'post',
   })
 }
@@ -50,7 +50,7 @@ export const GetCanAddCardList = () => {
  */
 export const CancelColorCardOrder = () => {
   return useRequest({
-    url: '/v2/mp/colorCardOrder/cancel',
+    url: '/v1/mp/colorCardOrder/cancel',
     method: 'post',
   })
 }

src/api/colorCard/enum.ts

@@ -0,0 +1,13 @@
+
+import { useRequest } from '@/use/useHttp'
+
+/**
+ *  获取剪样订单列表
+ * @returns
+ */
+export const EnumColorCardStatus = () => {
+  return useRequest({
+    url: '/v1/mp/colorCardOrder/enum/auditStatus',
+    method: 'get',
+  })
+}

src/api/colorCard/index.ts

@@ -5,3 +5,6 @@ export {
   GetCanAddCardList,
   CancelColorCardOrder,
 } from './colorCardOrder'
+export {
+  EnumColorCardStatus,
+} from './enum'

src/api/sampleCutting/enum.ts

@@ -0,0 +1,13 @@
+
+import { useRequest } from '@/use/useHttp'
+
+/**
+ *  获取剪样订单列表
+ * @returns
+ */
+export const EnumCutSampleOrderStatus = () => {
+  return useRequest({
+    url: '/v1/mp/cutSampleOrder/status',
+    method: 'get',
+  })
+}

src/api/sampleCutting/index.ts

@@ -0,0 +1,11 @@
+export {
+  GetCutSampleOrderList,
+  GetCutSampleOrderProducts,
+  SubmitCutSampleOrder,
+  GetCutSampleOrderDetail,
+  CancelCutSampleOrder,
+  GetCutSampleOrderColorList,
+} from './sampleCutting'
+export {
+  EnumCutSampleOrderStatus,
+} from './enum'

src/api/sampleCutting/sampleCutting.ts

@@ -0,0 +1,67 @@
+import { useRequest } from '@/use/useHttp'
+
+/**
+ *  获取剪样订单列表
+ * @returns
+ */
+export const GetCutSampleOrderList = () => {
+  return useRequest({
+    url: '/v1/mp/cutSampleOrder/list',
+    method: 'get',
+  })
+}
+
+/**
+ *  搜索剪样面料
+ * @returns
+ */
+export const GetCutSampleOrderProducts = () => {
+  return useRequest({
+    url: '/v1/mp/cutSampleOrder/products',
+    method: 'get',
+  })
+}
+
+/**
+ *  剪样提交订单
+ * @returns
+ */
+export const SubmitCutSampleOrder = () => {
+  return useRequest({
+    url: '/v1/mp/cutSampleOrder/submit',
+    method: 'post',
+  })
+}
+
+/**
+ *  获取剪样订单详情
+ * @returns
+ */
+export const GetCutSampleOrderDetail = () => {
+  return useRequest({
+    url: '/v1/mp/cutSampleOrder/detail',
+    method: 'get',
+  })
+}
+
+/**
+ *  取消剪样订单
+ * @returns
+ */
+export const CancelCutSampleOrder = () => {
+  return useRequest({
+    url: '/v1/mp/cutSampleOrder/cancel',
+    method: 'put',
+  })
+}
+
+/**
+ *  取消剪样订单
+ * @returns
+ */
+export const GetCutSampleOrderColorList = () => {
+  return useRequest({
+    url: '/v1/mp/product/color/absorb/list',
+    method: 'get',
+  })
+}

src/app.config.ts

@@ -36,6 +36,10 @@ export default defineAppConfig({
     'custom-wrapper': '/custom-wrapper',
   },
   subPackages: [
+    {
+      root: 'pages/sampleCutting',
+      pages: ['index', 'addSampleCutting/index', 'sampleCuttingList/index', 'sampleCuttingDetail/index'],
+    },
     {
       root: 'pages/getColorCard',
       pages: ['index', 'addColorCard/index', 'colorCardList/index', 'colorCardDetail/index'],

src/components/LabAndImg2/index.module.scss

@@ -0,0 +1,35 @@
+.labAndImg_main {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  // border: 1px #eee solid;
+  display: flex;
+  justify-content: center;
+  .boxColor {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    // border: 1px solid #818181;
+    box-sizing: border-box;
+  }
+  .labAndImg_image {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+  }
+  .labAndImg_name {
+    position: absolute;
+    margin: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 80%;
+    text-align: center;
+    font-size: 24px;
+    border-radius: 50px;
+    padding: 7px;
+    background-color: #fff;
+    @include common_ellipsis;
+  }
+}

src/components/LabAndImg2/index.tsx

@@ -0,0 +1,81 @@
+import { Image, View } from '@tarojs/components'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import LabAndImgShow from '../LabAndImgShow'
+import styles from './index.module.scss'
+import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
+
+// 该组件宽高为100%需调整外层元素宽高
+interface Param {
+  value: {
+    texture_url?: string // 纹理图路径
+    lab?: { l: number; a: number; b: number } // lab
+    rgb?: { r: number; g: number; b: number } // rgb
+    title?: string
+  }
+  customImageStyle?: React.CSSProperties
+  showStatus?: true | false
+  onClick?: (val: Param['value']) => void
+  round?: boolean
+  name?: string
+}
+const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {} }: Param) => {
+  const [imgs, setImgs] = useState<string>('')
+
+  // lab是否都是0
+  const rgbStyle = useMemo(() => {
+    if (value?.lab && (value?.lab.l || value?.lab.a || value?.lab.b)) {
+      return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
+    }
+    else {
+      return null
+    }
+  }, [value])
+
+  useEffect(() => {
+    if (value?.texture_url) {
+      const imgs = value.texture_url.split(',').map((item) => {
+        return formatImgUrl(item)
+      })
+      setImgs(() => imgs[0])
+    }
+  }, [value])
+
+  const [labAndImgShow, setLabAndImgShow] = useState(false)
+  const closeLabAndImgShow = useCallback(() => {
+    setLabAndImgShow(false)
+  }, [])
+
+  const onShowLabAndImg = (e) => {
+    onClick?.(value)
+    if (!showStatus) { return false }
+    setLabAndImgShow(true)
+  }
+
+  const checkLoad = (val) => {
+    setImgs(() => formatImgUrl(''))
+  }
+
+  return (
+    <>
+      <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={onShowLabAndImg}>
+        {value.texture_url && (
+          <Image
+            lazyLoad
+            mode="aspectFill"
+            src={imgs}
+            onError={e => checkLoad(e)}
+            className={styles.labAndImg_image}
+            style={{ borderRadius: round ? '50%' : '', ...customImageStyle }}
+          ></Image>
+        )}
+        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
+        {!value.texture_url && !rgbStyle && (
+          <Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} lazyLoad></Image>
+        )}
+        {name && <View className={styles.labAndImg_name}>{name}</View>}
+      </View>
+      <LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
+    </>
+  )
+}
+export default memo(LabAndImg)

src/components/SelectColorCardStatus/index.module.scss

@@ -0,0 +1,20 @@
+.grid {
+  padding: 24px 40px;
+  display: grid;
+  grid-gap: 24px 24px;
+  grid-template-columns: 1fr 1fr;
+}
+.tab_bar {
+  position: relative;
+  z-index: 99;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: white;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.button {
+  padding: 0 60px;
+}

src/components/SelectColorCardStatus/index.tsx

@@ -0,0 +1,78 @@
+import { View } from '@tarojs/components'
+import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import DropDownItem from '../dropDown-item'
+import FilterButton from '../filterButton'
+import styles from './index.module.scss'
+import { EnumColorCardStatus } from '@/api/colorCard'
+
+type ChangedValue = string | number
+
+interface SelectSaleTypeProps {
+  onChange?: (value: ChangedValue) => void
+  onCloseOverlay?: () => void
+  defaultValue?: ChangedValue
+}
+
+interface EnumList {
+  id: number
+  code: string
+  name: string
+}
+// 色卡订单状态
+const SelectColorCardStatus = (props: SelectSaleTypeProps, ref) => {
+  const selectName = '色卡订单状态'
+  const { onChange, defaultValue = 0 } = props
+  console.log(props)
+  const { fetchData } = EnumColorCardStatus()
+  const [enumList, setEnumList] = useState<EnumList[]>([])
+
+  const getData = async() => {
+    const res = await fetchData()
+    setEnumList([{ id: 0, code: '', name: '全部记录' }, ...res.data.list])
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)
+
+  const handleClick = (value: ChangedValue) => {
+    setCurrentValue(value)
+    onChange?.(value)
+  }
+
+  const dropDownRef = useRef<any>(null)
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: dropDownRef.current.show,
+        showPopup: dropDownRef.current.showPopup,
+        closePopup: dropDownRef.current.closePopup,
+      }
+    },
+    [dropDownRef.current],
+  )
+
+  return (
+    <View className={styles.tab_bar}>
+      {!!enumList.length
+          && enumList.map((item: EnumList, key) => {
+            // 1 申请中 2 已完成
+            if ([1, 2, 0].includes(item.id)) {
+              return (
+                <FilterButton round customClassName={styles.button} key={key} size="small" isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
+                  {item.name}
+                </FilterButton>
+              )
+            }
+            else {
+              return null
+            }
+          })}
+    </View>
+  )
+}
+export default memo(forwardRef(SelectColorCardStatus))

src/components/SelectSampleCuttingStatus/index.module.scss

@@ -0,0 +1,20 @@
+.grid {
+  padding: 24px 40px;
+  display: grid;
+  grid-gap: 24px 24px;
+  grid-template-columns: 1fr 1fr;
+}
+.tab_bar {
+  position: relative;
+  z-index: 99;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: white;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.button {
+  padding: 0 60px;
+}

src/components/SelectSampleCuttingStatus/index.tsx

@@ -0,0 +1,78 @@
+import { View } from '@tarojs/components'
+import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import DropDownItem from '../dropDown-item'
+import FilterButton from '../filterButton'
+import styles from './index.module.scss'
+import { EnumCutSampleOrderStatus } from '@/api/sampleCutting'
+
+type ChangedValue = string | number
+
+interface SelectSaleTypeProps {
+  onChange?: (value: ChangedValue) => void
+  onCloseOverlay?: () => void
+  defaultValue?: ChangedValue
+}
+
+interface EnumList {
+  id: number
+  code: string
+  name: string
+}
+// 剪样订单状态
+const SelectSampleCuttingStatus = (props: SelectSaleTypeProps, ref) => {
+  const selectName = '剪样订单状态'
+  const { onChange, defaultValue = 0 } = props
+  console.log(props)
+  const { fetchData } = EnumCutSampleOrderStatus()
+  const [enumList, setEnumList] = useState<EnumList[]>([])
+
+  const getData = async() => {
+    const res = await fetchData()
+    setEnumList([{ id: 0, code: '', name: '全部记录' }, ...res.data.list])
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)
+
+  const handleClick = (value: ChangedValue) => {
+    setCurrentValue(value)
+    onChange?.(value)
+  }
+
+  const dropDownRef = useRef<any>(null)
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: dropDownRef.current.show,
+        showPopup: dropDownRef.current.showPopup,
+        closePopup: dropDownRef.current.closePopup,
+      }
+    },
+    [dropDownRef.current],
+  )
+
+  return (
+    <View className={styles.tab_bar}>
+      {!!enumList.length
+          && enumList.map((item: EnumList, key) => {
+            // 5 申请中 6 已完成
+            if ([5, 6, 0].includes(item.id)) {
+              return (
+                <FilterButton round customClassName={styles.button} key={key} size="small" isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
+                  {item.name}
+                </FilterButton>
+              )
+            }
+            else {
+              return null
+            }
+          })}
+    </View>
+  )
+}
+export default memo(forwardRef(SelectSampleCuttingStatus))

src/pages/getColorCard/colorCardDetail/index.tsx

@@ -8,7 +8,7 @@ import AddressDetailBox from '@/pages/orderDetails/components/addressDetailBox'
 import LabAndImg from '@/components/LabAndImg'
 import Tag from '@/components/tag'
 import Cell from '@/components/cell'
-import { formatDateTime, formatRemoveHashTag } from '@/common/format'
+import { formatDateTime, formatRemoveHashTag, formatUrl } from '@/common/format'
 import NormalButton from '@/components/normalButton'
 import Steps from '@/components/steps'
 import Step from '@/components/steps/components/step'
@@ -83,163 +83,151 @@ const ColorCardDetail = () => {
     getData()
   }, [])
 
-  return <MoveBtn showList={['businessManager']}>
+  return <View className={styles.main} >
-    <View className={styles.main} >
+    <View className={styles.context}>
-      <View className={styles.context}>
+      <LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
-        <LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
+        <View className={styles.orderProcess}>订单进程</View>
-          <View className={styles.orderProcess}>订单进程</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
-          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.orderProcessBottom}>
-          <View className={styles.orderProcessBottom}>
+          <Steps current={order.order_status === 1 ? 1 : 0} direction="vertical" customStyle={{ padding: '0' }}>
-            <Steps current={order.order_status === 1 ? 0 : 1} direction="vertical" customStyle={{ padding: '0' }}>
+            {/*
-              {/*
                  申请中 -> 已完成 2
                  申请中 -> 已取消 4
                  申请中 -> 已拒绝 3
             */}
-              <Step
+            {
-                title={
+              order.order_progress?.map((item, index) => {
+                return <Step key={index} status={item.order_status === 3 ? 'error' : undefined} title={
                   <View className={styles['step-title']}>
-                    <Text className={styles['step-status']}>申请中</Text>
+                    <Text className={styles['step-status']}>{item.order_status_name}</Text>
-                    <Text>{formatDateTime(order?.order_progress?.[0].audit_time)}</Text>
+                    <Text>{formatDateTime(item.audit_time)}</Text>
                   </View>
-                }
+                } description={
-              />
+                  <>
-              {/* order.order_status === 1 申请中 */}
+                    {
-              {
+                      item.audit_remark && <View>{item.audit_remark}</View>
-                order.order_status !== 1
+                    }
-                  ? <Step status={order.order_status === 3 ? 'error' : undefined} title={
+                    {
-                    <View className={styles['step-title']}>
+                      item.delivery_appendix_url
-                      <Text className={styles['step-status']}>{order?.order_progress?.[1].order_status_name}</Text>
+                          && <View className={styles.attachment}>
-                      <Text>{formatDateTime(order?.order_progress?.[1].audit_time)}</Text>
-                    </View>
-                  } description={
-                    <>
-                      {
-                        order?.order_progress?.[1].audit_remark ? <View>{formatDateTime(order?.order_progress?.[1].audit_remark)}</View> : null
-                      }
-                      {
-                        order?.order_progress?.[1].delivery_appendix_url
-                          ? <View className={styles.attachment}>
                             {
-                              order?.order_progress?.[1].delivery_appendix_url?.map((url, index) => {
+                              item.delivery_appendix_url?.map((url, index) => {
                                 return <View className={styles['step-url-container']} key={index}>
-                                  <Image className={styles['step-url']} src={url} lazyLoad mode="aspectFill" />
+                                  <Image className={styles['step-url']} src={formatUrl(url)} lazyLoad mode="aspectFill" />
                                 </View>
                               })
                             }
                           </View>
-                          : null
+                    }
-                      }
+                  </>
-                    </>
+                }
-                  }
+                />
-                  />
+              })
-                  : <Step title="已完成" />
-              }
-
-            </Steps>
-          </View>
-        </LayoutBlock>
-        <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
-          <View className={styles.customerTop}>客户信息</View>
-          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
-          <View className={styles.customerBottom}>
-            <Text>{order?.purchaser_name}</Text>
-            <Text>{order?.purchaser_phone}</Text>
-            <Text></Text>
-          </View>
-        </LayoutBlock>
-        <LayoutBlock circle>
-          <View className={styles.address_box}>
-
-            <View className={styles.address_box_left}>
-              <View className={styles.cirle}>
-                <IconFont name="icon-dizhi1" size={60}></IconFont>
-              </View>
-            </View>
-            <View className={styles.address_box_right}>
-              <View className={styles.address}>{order?.address}</View>
-              <Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
-              <View className={styles.bottom}>
-                <View className={styles.leftbottom}>
-                  <View className={styles.name}>{order.target_user_name}</View>
-                  <View className={styles.phone}>{order.target_user_phone}</View>
-                </View>
-                <View className={styles.reatName}>{order.shipment_mode_name}</View>
-              </View>
-            </View>
-          </View>
-        </LayoutBlock>
-        {/* 色卡信息 */}
-        <LayoutBlock customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
-          <View className={styles.colorCardTop}>色卡信息</View>
-          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
-          {
-            order.color_card_info?.map((item) => {
-              return (
-                <View className={styles.colorCardBottom} key={item.id}>
-                  <View style={{ minWidth: '24%' }}>
-                    <View className={styles.leftCont}>
-                      <LabAndImg value={labAndImgObj(item)} />
-                    </View>
-                  </View>
-                  <View className={styles.rightCont}>
-                    <View className={styles.rightCont__container}>
-                      <View className={styles.rightCont__left}>
-                        <View className={styles.rightCont__top}>
-                          {item.name}
-                        </View>
-                        <View className={styles.rightCont__bottom}>
-                          {
-                            item.affiliation_product?.map((product_color, index) => {
-                              return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
-                            })
-                          }
-                        </View>
-                      </View>
-                      <View className={styles.rightCont__right}>
-                    x{item.count}本
-                      </View>
-                    </View>
-                    <Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
-                  </View>
-                </View>
-              )
-            })
-          }
-          <View className={styles.paymentMethod}>快递到付</View>
-        </LayoutBlock>
-        <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
-          <View className={styles.orderInfoTop}>订单信息</View>
-          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
-          <View className={styles.orderInfoDetail}>
-            <Cell title="订单编号：" desc={
-              <>
-                <Text className={styles.orderInfoDetail__desc}>{order.order_no}</Text>
-                <Tag type="primary" onClick={() => handleCopy(order.order_no)}>复制</Tag>
-              </>
             }
-            ></Cell>
-            <Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
-            <Cell title="业务员：" desc={order.sale_user_name}></Cell>
-          </View>
-        </LayoutBlock>
-        <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
-          <View className={styles.orderInfoTop}>备注信息</View>
-          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
-          <View className={styles.remark}>{order?.remark || '暂无备注信息'}</View>
-        </LayoutBlock>
-      </View>
-      <View className={styles.bottomBar}>
-        {
-          order.order_status === 1
-            ? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
-          取消订单
-            </NormalButton>
-            : null
-        }
 
-      </View>
+          </Steps>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
+        <View className={styles.customerTop}>客户信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.customerBottom}>
+          <Text>{order?.purchaser_name}</Text>
+          <Text>{order?.purchaser_phone}</Text>
+          <Text></Text>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.address_box}>
+
+          <View className={styles.address_box_left}>
+            <View className={styles.cirle}>
+              <IconFont name="icon-dizhi1" size={60}></IconFont>
+            </View>
+          </View>
+          <View className={styles.address_box_right}>
+            <View className={styles.address}>{order?.address}</View>
+            <Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
+            <View className={styles.bottom}>
+              <View className={styles.leftbottom}>
+                <View className={styles.name}>{order.target_user_name}</View>
+                <View className={styles.phone}>{order.target_user_phone}</View>
+              </View>
+              <View className={styles.reatName}>{order.shipment_mode_name}</View>
+            </View>
+          </View>
+        </View>
+      </LayoutBlock>
+      {/* 色卡信息 */}
+      <LayoutBlock customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
+        <View className={styles.colorCardTop}>色卡信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        {
+          order.color_card_info?.map((item) => {
+            return (
+              <View className={styles.colorCardBottom} key={item.id}>
+                <View style={{ minWidth: '24%' }}>
+                  <View className={styles.leftCont}>
+                    <LabAndImg value={labAndImgObj(item)} />
+                  </View>
+                </View>
+                <View className={styles.rightCont}>
+                  <View className={styles.rightCont__container}>
+                    <View className={styles.rightCont__left}>
+                      <View className={styles.rightCont__top}>
+                        {item.name}
+                      </View>
+                      <View className={styles.rightCont__bottom}>
+                        {
+                          item.affiliation_product?.map((product_color, index) => {
+                            return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
+                          })
+                        }
+                      </View>
+                    </View>
+                    <View className={styles.rightCont__right}>
+                    x{item.count}本
+                    </View>
+                  </View>
+                  <Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
+                </View>
+              </View>
+            )
+          })
+        }
+        <View className={styles.paymentMethod}>快递到付</View>
+      </LayoutBlock>
+      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
+        <View className={styles.orderInfoTop}>订单信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.orderInfoDetail}>
+          <Cell title="订单编号：" desc={
+            <>
+              <Text className={styles.orderInfoDetail__desc}>{order.order_no}</Text>
+              <Tag type="primary" onClick={() => handleCopy(order.order_no)}>复制</Tag>
+            </>
+          }
+          ></Cell>
+          <Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
+          <Cell title="业务员：" desc={order.sale_user_name}></Cell>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
+        <View className={styles.orderInfoTop}>备注信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.remark}>{order?.remark || '暂无备注信息'}</View>
+      </LayoutBlock>
     </View>
-  </MoveBtn>
+    <View className={styles.bottomBar}>
+      {
+        order.order_status === 1
+          ? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
+          取消订单
+          </NormalButton>
+          : null
+      }
+
+    </View>
+  </View>
 }
 export default ColorCardDetail

src/pages/getColorCard/index.tsx

@@ -8,12 +8,11 @@ import Search from '@/components/search'
 import NormalButton from '@/components/normalButton'
 import InfiniteScroll from '@/components/infiniteScroll'
 import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
-import FilterButton from '@/components/filterButton'
 import { alert, goLink } from '@/common/common'
 import { CancelColorCardOrder, GetColorCardOrderList } from '@/api/colorCard'
-import IconFont from '@/components/iconfont/iconfont'
 import Empty from '@/components/empty'
 import { COLOR_CARD_LIST_EMPTY_IMAGE } from '@/common/constant'
+import SelectColorCardStatus from '@/components/SelectColorCardStatus'
 
 const GetColorCard = () => {
   const { fetchData, state } = GetColorCardOrderList()
@@ -23,6 +22,7 @@ const GetColorCard = () => {
       return alert.error(res.msg)
     }
     setColorList({ list: res.data.list, total: res.data.total })
+    setRefresherTriggeredStatus(false)
   }
 
   // status 1 申请中  2 已完成
@@ -68,24 +68,9 @@ const GetColorCard = () => {
     setSearchField(e => ({ ...e, name: value }))
   }, 300)
 
-  const FilterOptions = [
+  const handleClickFilter = (value) => {
-    {
+    if (searchField.status === value) { return }
-      key: 0,
+    setSearchField(e => ({ ...e, status: value }))
-      label: '全部记录',
-    },
-    {
-      key: 1,
-      label: '申请中',
-    },
-    {
-      key: 2,
-      label: '已完成',
-    },
-  ]
-
-  const handleClickFilter = (item: typeof FilterOptions[number]) => {
-    if (searchField.status === item.key) { return }
-    setSearchField(e => ({ ...e, status: item.key }))
   }
 
   useEffect(() => {
@@ -127,13 +112,7 @@ const GetColorCard = () => {
     <View className={styles.search}>
       <Search placeholder="请输入客户或业务员" showBtn={false} changeOnSearch={getSearchData} />
     </View>
-    <View className={styles.tab_bar}>
+    <SelectColorCardStatus onChange={handleClickFilter} />
-      {
-        FilterOptions.map((item, index) => {
-          return <FilterButton key={index} isActive={searchField.status === item.key} round customClassName={styles.button} size="small" onClick={() => handleClickFilter(item)}>{item.label}</FilterButton>
-        })
-      }
-    </View>
     <View className={styles.color_card_list}>
       <InfiniteScroll
         emptySlot={<Empty picUrl={COLOR_CARD_LIST_EMPTY_IMAGE} text="还没有领取过色卡" />}

src/pages/sampleCutting/addSampleCutting/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '领取剪样',
+}

src/pages/sampleCutting/addSampleCutting/index.module.scss

@@ -0,0 +1,132 @@
+page {
+  background: #f7f7f7;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.layoutBlock {
+  padding: 24px 34px;
+}
+.main {
+  background-color: $color_bg_one;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+}
+.context {
+  flex: 1 1 auto;
+  height: 100%;
+  overflow-y: scroll;
+}
+.addButton {
+  margin-left: 24px;
+  margin-right: 24px;
+  margin-top: 24px;
+}
+.customerTop {
+  color: #333333;
+  font-size: 28px;
+}
+.customerBottom {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  color: #9b9b9b;
+  font-size: 28px;
+}
+
+.colorCardTop {
+  font-size: 28px;
+}
+.colorCardBottom {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  overflow: hidden;
+  margin-bottom: 24px;
+  .leftCont {
+    width: 134px;
+    height: 134px;
+    border-radius: 8px;
+    margin-right: 24px;
+  }
+  .rightCont {
+    flex: 1 1 auto;
+    overflow: hidden;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    &__top {
+      font-size: 28px;
+      @include common_ellipsis(1);
+    }
+    &__bottom {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      width: 100%;
+      align-items: flex-end;
+    }
+    &__left {
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+    &__right {
+      width: 30%;
+    }
+  }
+}
+.paymentMethod {
+  text-align: right;
+  font-size: 28px;
+  color: #f64861;
+}
+
+.remarkTop {
+  display: flex;
+  justify-content: space-between;
+  .remarkTitle {
+    font-size: 28px;
+    font-weight: 500;
+    color: #393939;
+  }
+  .remarkTag {
+    display: flex;
+    flex-flow: row nowrap;
+    font-size: 24px;
+    color: #626262;
+  }
+}
+
+.remarkBottom {
+  .remarkContent {
+    font-size: 28px;
+    color: #999999;
+  }
+}
+
+.bottomBar {
+  .bottomTotal {
+    color: #aeaeae;
+    font-size: 24px;
+  }
+  position: relative;
+  z-index: 99;
+  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 24px;
+  background-color: white;
+  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+}
+.bottomBar__button {
+  font-size: 28px;
+}

src/pages/sampleCutting/addSampleCutting/index.tsx

@@ -0,0 +1,434 @@
+import { Text, View } from '@tarojs/components'
+import Taro, { useDidShow, useUnload } from '@tarojs/taro'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { SampleCuttingCache } from '../sampleCuttingList'
+import styles from './index.module.scss'
+import LayoutBlock from '@/components/layoutBlock'
+import NormalButton from '@/components/normalButton'
+import Divider from '@/components/divider'
+import IconFont from '@/components/iconfont/iconfont'
+import LabAndImg from '@/components/LabAndImg'
+import Counter from '@/components/counter'
+import { alert, goLink } from '@/common/common'
+import { ClientListApi } from '@/api/order'
+import AddressDetailBox from '@/pages/orderDetails/components/addressDetailBox'
+import Popup from '@/components/popup'
+import Remark from '@/pages/orderDetails/components/remark'
+import { formatRemoveHashTag } from '@/common/format'
+import { SubmitCutSampleOrder } from '@/api/sampleCutting'
+
+const AddColorCard = () => {
+  // 获取选择的客户
+  const pages = Taro.getCurrentPages()
+  const currPage = pages[pages.length - 1] // 获取当前页面
+  const [addressInfo, setAddressInfo] = useState<any>({})
+
+  // 获取客户
+  const [clientList, setClientList] = useState<any[]>([])
+  const { fetchData: fetchClientData } = ClientListApi()
+
+  const [order, setOrder] = useState<SampleCuttingCache[]>([])
+
+  useDidShow(() => {
+    const sampleCuttingCache = Taro.getStorageSync('sampleCuttingCache')
+    if (sampleCuttingCache) {
+      console.log('sampleCuttingCache', JSON.parse(sampleCuttingCache))
+      setOrder(JSON.parse(sampleCuttingCache))
+    }
+  })
+
+  const [clientInfo, setClientInfo] = useState({
+    clientId: -1,
+    clientName: '',
+    clientPhone: '',
+  })
+
+  const getClient = async() => {
+    const res = await fetchClientData({
+      page: 1, size: 10,
+    })
+    if (!res.success) {
+      return alert.error(res.msg)
+    }
+    currPage.data.clientId = res.data.list.length > 0 ? res.data.list[0]?.id : -1
+    currPage.data.clientName = res.data.list.length > 0 ? res.data.list[0]?.name : ''
+    currPage.data.clientPhone = res.data.list.length > 0 ? res.data.list[0]?.phone : ''
+    const {
+      clientId,
+      clientName,
+      clientPhone,
+    } = currPage.data
+    setClientInfo({
+      clientId,
+      clientName,
+      clientPhone,
+    })
+    setClientList([...res.data.list])
+  }
+
+  useEffect(() => {
+    getClient()
+  }, [])
+
+  useUnload(() => {
+    Taro.removeStorageSync('sampleCuttingCache')
+  })
+
+  // 选择客户
+  const handleSelectCustomer = () => {
+    goLink(`/pages/customerPage/index?clientId=${clientInfo?.clientId}`)
+  }
+  // 添加剪样
+  const handleAddColorCard = () => {
+    Taro.setStorageSync('sampleCuttingCache', JSON.stringify(order))
+
+    goLink('/pages/sampleCutting/sampleCuttingList/index', { isGoBack: true, isAddSampleCutIdList: order.map(item => item.product_id) })
+  }
+
+  const { fetchData } = SubmitCutSampleOrder()
+  // 提交订单
+  const handleSubmitOrder = async() => {
+    if (!addressInfo.address_id) {
+      Taro.showToast({
+        title: '请选择地址',
+        icon: 'none',
+        duration: 2000,
+      })
+      return
+    }
+    if (!clientInfo.clientId) {
+      Taro.showToast({
+        title: '请选择客户',
+        icon: 'none',
+        duration: 2000,
+      })
+      return
+    }
+    const productColorList: any[] = []
+    order.forEach((item) => {
+      item.multipleSelection.forEach((mul) => {
+        productColorList.push({
+          product_color_id: mul.product_color_id,
+          color_num: mul.count,
+        })
+      })
+    })
+    // 请求数据
+    const res = await fetchData({
+      address_id: addressInfo.address_id,
+      cut_sample_order_product_color_list: productColorList,
+      purchaser_id: clientInfo.clientId,
+      remark,
+      shipment_mode: 2, // 物流
+    })
+    if (res.success) {
+      Taro.showToast({
+        title: '提交成功',
+        icon: 'success',
+        duration: 2000,
+      })
+      Taro.removeStorageSync('sampleCuttingCache')
+      setTimeout(() => {
+        goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: res.data.id }, 'redirectTo')
+      }, 2000)
+    }
+  }
+
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
+  }, [])
+
+  const getInputValue = () => {
+
+  }
+
+  const deleteColorCard = (productId: number, colorId: number) => {
+    setOrder((prev) => {
+      let newOlder: SampleCuttingCache[] = []
+      const targetProductIndex = prev.findIndex(item => item.product_id === productId)
+
+      if (prev[targetProductIndex].multipleSelection.length === 1) {
+        if (prev.length === 1) {
+          alert.none('最后一个剪样不能删除')
+          return prev
+        }
+        prev.splice(targetProductIndex, 1)
+        newOlder = [...prev]
+      }
+      else {
+        newOlder = prev.map((item) => {
+          if (item.product_id === productId) {
+            item.multipleSelection = item.multipleSelection.filter(mul => mul.product_color_id !== colorId)
+          }
+          return item
+        })
+      }
+      Taro.setStorageSync('sampleCuttingCache', JSON.stringify(newOlder))
+      return newOlder
+    })
+  }
+
+  const handleCountChange = (value: number, productId: number, colorId: number) => {
+    console.log('value', value)
+    if (order.length === 1 && value === 0) {
+      Taro.showToast({
+        title: '最后一个剪样不能删除',
+        icon: 'none',
+        duration: 2000,
+      })
+      return
+    }
+    if (value === 0) {
+      Taro.showModal({
+        content: '确认删除所选剪样？',
+        confirmText: '删除',
+        confirmColor: '#337fff',
+        success(res) {
+          if (res.confirm) {
+            deleteColorCard(productId, colorId)
+          }
+        },
+      })
+      return
+    }
+    setOrder((prev) => {
+      const newOlder = prev.map((item) => {
+        if (item.product_id === productId) {
+          item.multipleSelection = item.multipleSelection.map((mul) => {
+            if (mul.product_color_id === colorId) {
+              mul.count = value
+            }
+            return mul
+          })
+        }
+        return item
+      })
+      Taro.setStorageSync('sampleCuttingCache', JSON.stringify(newOlder))
+      return newOlder
+    })
+  }
+
+  const handSelect = () => {
+    goLink(`/pages/addressManager/index?purchaser_id=${clientInfo.clientId}`)
+  }
+  // 接受选择客户页面传递过来的数据
+  useDidShow(() => {
+    // 判断是否有跳转选择客户
+    if (currPage.data?.clientId && currPage.data?.clientId !== '') {
+      setClientInfo({
+        clientId: currPage.data?.clientId,
+        clientName: currPage.data?.clientName,
+        clientPhone: currPage.data?.clientPhone,
+      })
+    }
+    // 默认客户
+    if (currPage.data?.clientId == null) {
+      setClientInfo(() => {
+        return {
+          clientId: clientList.length > 0 ? clientList[0]?.id : -1,
+          clientName: clientList.length > 0 ? clientList[0]?.name : '',
+          clientPhone: clientList.length > 0 ? clientList[0]?.phone : '',
+        }
+      })
+    }
+  })
+
+  const initAddressInfo = () => {
+    setAddressInfo(val => ({
+      ...val,
+      province_name: '',
+      address_id: '',
+      city_name: '',
+      address_detail: '',
+      district_name: '',
+      target_user_name: '',
+      purchaser_phone: '',
+    }))
+  }
+
+  useDidShow(() => {
+    // 获取选择的地址
+    console.log('addressObj', currPage.data?.addressObj, clientInfo.clientId, currPage.data?.clientId)
+    if (!currPage.data?.addressObj) { return initAddressInfo() }
+    const {
+      purchaser_id,
+      province_name,
+      id,
+      city_name,
+      address_detail,
+      district_name,
+      name,
+      phone,
+    } = currPage.data?.addressObj
+    if (purchaser_id === currPage.data?.clientId) {
+      setAddressInfo(val => ({
+        ...val,
+        province_name: province_name || '',
+        address_id: id || '',
+        city_name: city_name || '',
+        address_detail: address_detail || '',
+        district_name: district_name || '',
+        target_user_name: name || '',
+        purchaser_phone: phone || '',
+      }))
+    }
+    else {
+      initAddressInfo()
+    }
+    const selectId = id
+    const obj = currPage?.data?.ids?.filter((item) => { return item == selectId })
+    console.log('ids', currPage?.data?.ids)
+    if (currPage?.data?.ids && obj.length === 0) {
+      initAddressInfo()
+    }
+  })
+
+  // 备注操作
+  const [showDesc, setShowDesc] = useState(false)
+  const [remark, setRemark] = useState('')
+  const handleShowDesc = () => {
+    setShowDesc(true)
+  }
+
+  const getRemark = useCallback((value: string) => {
+    setShowDesc(false)
+    console.log('remark', value)
+    setRemark(value)
+  }, [])
+
+  const totalColorNumber = useMemo(() => {
+    return order.reduce((prev, curr) => {
+      return prev + curr.multipleSelection.length
+    }, 0)
+  }, [order])
+
+  const totalColorCount = useMemo(() => {
+    return order.reduce((prev, curr) => {
+      return prev + curr.multipleSelection.reduce((subPrev, subCurr) => {
+        return subPrev + subCurr.count
+      }, 0)
+    }, 0)
+  }, [order])
+
+  return <View className={styles.main}>
+    <View className={styles.context}>
+      {/* 客户信息 */}
+      <LayoutBlock circle onClick={handleSelectCustomer} customStyle={{ marginTop: '12px' }} customClassName={styles.layoutBlock}>
+        <View className={styles.customerTop}>
+          <View>客户信息</View>
+        </View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.customerBottom}>
+          {
+            clientInfo.clientId !== -1
+              ? (<>
+                <Text style={{ color: '#333333' }}>
+                  {clientInfo.clientName}
+                </Text>
+                <Text style={{ color: '#333333' }}>
+                  {clientInfo.clientPhone}
+                </Text>
+              </>
+              )
+              : <View>选择领取客户</View>
+          }
+          <IconFont name="icon-chakanquanbukehu" color="#444444" size={32}></IconFont>
+        </View>
+      </LayoutBlock>
+      {
+        clientInfo.clientId !== -1 && <AddressDetailBox
+          showBtn={false}
+          showWhatFont="物流"
+          navSelect={handSelect}
+          obj={addressInfo}
+          receivingStatus={2}
+          icon={<IconFont name="icon-dizhi1" size={60}></IconFont>}
+        ></AddressDetailBox>
+      }
+
+      <NormalButton customClassName={styles.addButton} circle onClick={handleAddColorCard} plain size="normal" type="primary">添加剪样</NormalButton>
+      {
+        order.map((item, index) => {
+          return <LayoutBlock key={index} customStyle={{ marginTop: '12px' }} circle customClassName={styles.layoutBlock}>
+            <View className={styles.colorCardTop}>{item.product_code_and_name}</View>
+            <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+            {
+              item.multipleSelection.map((mul) => {
+                return (
+                  <View className={styles.colorCardBottom} key={mul.product_color_id}>
+                    <View style={{ minWidth: '24%' }}>
+                      <View className={styles.leftCont}>
+                        <LabAndImg value={labAndImgObj(mul)} />
+                      </View>
+                    </View>
+                    <View className={styles.rightCont}>
+                      <View className={styles.rightCont__top}>
+                        {`#${formatRemoveHashTag(mul.product_color_code)} ${mul.product_color_name}`}
+                      </View>
+                      <View className={styles.rightCont__bottom}>
+                        <View className={styles.rightCont__left}>
+                          {/* {
+                          item.affiliation_product.map((product_color, index) => {
+                            return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color.code)}</Tag>
+                          })
+                        } */}
+                        </View>
+                        <View className={styles.rightCont__right}>
+                          <Counter
+                            onBlue={getInputValue}
+                            defaultNum={mul?.count || 1}
+                            onChange={e => handleCountChange(e, item.product_id, mul.product_color_id)}
+                            onClickBtn={getInputValue}
+                            unit="份"
+                            minNum={0}
+                            maxNum={999}
+                          />
+                        </View>
+                      </View>
+                      <Divider direction="horizontal" customStyles={{ margin: '12px 0 0 ' }}></Divider>
+                    </View>
+                  </View>
+                )
+              })
+            }
+            <View className={styles.paymentMethod}>快递到付</View>
+          </LayoutBlock>
+        })
+      }
+
+      {/* 备注信息 */}
+      <LayoutBlock circle customClassName={styles.layoutBlock} onClick={handleShowDesc}>
+        <View className={styles.remarkTop}>
+          <View className={styles.remarkTitle}>备注信息</View>
+          <View className={styles.remarkTag}>
+            <Text>填写/修改备注</Text>
+            <IconFont name="icon-chakanquanbukehu" color="#444444" size={32}></IconFont>
+          </View>
+        </View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.remarkBottom}>
+          <View className={styles.remarkContent}>{ remark || '尚未备注信息' }</View>
+        </View>
+      </LayoutBlock>
+
+    </View>
+    <View className={styles.bottomBar}>
+      <View className={styles.bottomTotal}>
+        当前共 {order.length} 种面料, {totalColorNumber || 0} 种色号，共 {totalColorCount || 0} 份
+      </View>
+      <NormalButton
+        customClassName={styles.bottomBar__button}
+        type="primary"
+        round
+        onClick={handleSubmitOrder}
+      >
+        提交订单
+      </NormalButton>
+
+    </View>
+    <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
+      <Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} />
+    </Popup>
+  </View>
+}
+export default AddColorCard

src/pages/sampleCutting/components/itemList/index.module.scss

@@ -0,0 +1,138 @@
+.topItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .orderNo {
+    font-size: 28px;
+    font-weight: 550;
+    color: #000000;
+  }
+
+  .status {
+    font-size: 28px;
+    font-weight: 550;
+    color: #0d7cff;
+  }
+}
+.flexBox {
+  display: flex;
+  align-items: center;
+  .pussName {
+    margin-right: 10px;
+    font-size: 28px;
+    font-weight: 500;
+    color: #666666;
+  }
+  .tag {
+    background-color: #e3ecff;
+    border-color: transparent;
+    color: #337fff;
+  }
+}
+
+.contBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+  .leftCont {
+    width: 134px;
+    height: 134px;
+    border-radius: 8px;
+    position: relative;
+  }
+
+  .rightCont {
+    width: calc(100% - 134px);
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    margin-left: 24px;
+    justify-content: space-between;
+    .rightTop {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+
+      .productName {
+        width: 70%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 8px;
+        font-size: 28px;
+        color: #000000;
+      }
+
+      .shipMode {
+        width: 25%;
+        font-size: 28px;
+        color: #000000;
+        text-align: right;
+      }
+    }
+
+    .colorsBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 24px;
+      .colorName {
+        flex: 1 1 auto;
+        color: #797979;
+        @include common_ellipsis(1);
+      }
+      .colorCount {
+        color: #797979;
+      }
+    }
+  }
+}
+
+.lineOne {
+  // width: 638px;
+  margin-right: 32px;
+  height: 1px;
+  background: #e7e7e7;
+  // opacity: 0.1;
+  margin-left: 32px;
+  margin-top: 24px;
+}
+
+.bottomMsg {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  .msgLeft {
+    font-size: 24px;
+    font-weight: 400;
+    color: #a1a1a1;
+  }
+
+  .msgRight {
+    font-size: 24px;
+    font-weight: 400;
+    color: #a1a1a1;
+  }
+}
+.paymentMethod {
+  display: flex;
+  justify-content: flex-end;
+  .msgRightOne {
+    font-size: 28px;
+    font-weight: 500;
+    color: #f64861;
+    align-self: flex-end;
+  }
+}
+
+.bottomBox {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 32px;
+}

src/pages/sampleCutting/components/itemList/index.tsx

@@ -0,0 +1,99 @@
+import type { ITouchEvent } from '@tarojs/components'
+import { ScrollView, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+import BottomBtns from '@/components/BottomBtns'
+import { formatHashTag, formatPriceDiv } from '@/common/format'
+import LabAndImg from '@/components/LabAndImg'
+import NormalButton from '@/components/normalButton'
+import Divider from '@/components/divider'
+import Tag from '@/components/tag'
+import LayoutBlock from '@/components/layoutBlock'
+import { goLink } from '@/common/common'
+
+interface PropsType {
+  data?: any
+  cancel?: (e: ITouchEvent) => void
+}
+const ItemList = (props: PropsType) => {
+  const { data, cancel } = props
+
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
+  }, [])
+  // 进入详情页
+  const navTo = () => {
+    goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: data.order_id })
+  }
+
+  return (
+    <LayoutBlock onClick={navTo} circle>
+      <View className={styles.topItem}>
+        <View className={styles.orderNo}>单号：{data.order_no}</View>
+        <View className={styles.status}>{data.mp_cut_sample_audit_status_name}</View>
+      </View>
+      <View className={styles.flexBox}>
+        <View className={styles.pussName}>{data.purchaser_name}</View>
+        {
+          data.sale_user_name && <Tag type="primary" size="normal" circle customClassName={styles.tag} plain>
+            {data.sale_user_name}
+          </Tag>
+        }
+      </View>
+      <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+      <View className={styles.contBox}>
+        <View style={{ minWidth: '24%' }}>
+          <View className={styles.leftCont}>
+            <LabAndImg value={labAndImgObj(data.cut_sample_order_product_list[0])} />
+          </View>
+        </View>
+
+        <View className={styles.rightCont}>
+          <View className={styles.rightTop}>
+            <View className={styles.productName}>{data.cut_sample_order_product_list[0].name}</View>
+            <View className={styles.shipMode}>{data.shipment_mode_name}</View>
+          </View>
+          {
+            data.cut_sample_order_product_list[0].product_colors?.map((item, index) => {
+              if (index < 2) {
+                return <View className={styles.colorsBox} key={index}>
+                  <View className={styles.colorName}>{formatHashTag(item.code, item.name)}</View>
+                  <View className={styles.colorCount}>x{item.color_num || 0}份</View>
+                </View>
+              }
+              else {
+                return null
+              }
+            })
+          }
+        </View>
+      </View>
+      <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+      <View className={styles.bottomMsg}>
+        <View className={styles.msgLeft}>剪样信息：</View>
+        <View className={styles.msgRight}>{data?.total_fabrics || 0} 种面料，{data?.total_colors || 0} 种剪样，共 {data?.total_number || 0} 份</View>
+      </View>
+      <View className={styles.paymentMethod}>
+        <View className={styles.msgRightOne}>快递到付</View>
+      </View>
+      <View className={styles.bottomBox}>
+        {
+          data.order_status === 1 && <NormalButton
+            customStyles={{ fontSize: '14px' }}
+            type="info"
+            size="normal"
+            round
+            plain
+            onClick={cancel}
+          >
+          取消订单
+          </NormalButton>
+        }
+
+      </View>
+    </LayoutBlock>
+  )
+}
+export default memo(ItemList)

src/pages/sampleCutting/components/productColorPopup/index.tsx

@@ -0,0 +1,4 @@
+const ProductColorPopup = (props) => {
+
+}
+export default ProductColorPopup

src/pages/sampleCutting/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '领取剪样',
+}

src/pages/sampleCutting/index.module.scss

@@ -0,0 +1,66 @@
+page {
+  background: #f7f7f7;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.main {
+  background-color: $color_bg_one;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+
+  .search {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    box-sizing: border-box;
+    align-items: center;
+    background-color: #fff;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .tab_bar{
+    position: relative;
+    z-index: 99;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+  .color_card_list{
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: hidden;
+    .order_item{
+      margin: 20px 0;
+    }
+  }
+  .bottomBar {
+    position: relative;
+    z-index: 99;
+    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+    flex: none;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 24px;
+    background-color: white;
+    padding-bottom: calc(20px + constant(safe-area-inset-bottom));
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  }
+}
+.tab_bar .button{
+  padding: 0 60px;
+}
+.bottomBar__button{
+  width: 100%;
+  font-size: 28px;
+}

src/pages/sampleCutting/index.tsx

@@ -0,0 +1,164 @@
+import type { ITouchEvent } from '@tarojs/components'
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import ItemList from './components/itemList'
+import Search from '@/components/search'
+import NormalButton from '@/components/normalButton'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
+import FilterButton from '@/components/filterButton'
+import { alert, goLink } from '@/common/common'
+import Empty from '@/components/empty'
+import { COLOR_CARD_LIST_EMPTY_IMAGE } from '@/common/constant'
+import { CancelCutSampleOrder, GetCutSampleOrderList } from '@/api/sampleCutting'
+import SelectSampleCuttingStatus from '@/components/SelectSampleCuttingStatus'
+
+const GetSampleCutting = () => {
+  const { fetchData, state } = GetCutSampleOrderList()
+  const getData = async() => {
+    const res = await fetchData(getFilterData(searchField))
+    if (!res.success) {
+      return alert.error(res.msg)
+    }
+    setSampleCuttingList({ list: res.data.list, total: res.data.total })
+    setRefresherTriggeredStatus(false)
+  }
+
+  // status 1 申请中  2 已完成
+  // 页码和页数
+  const [searchField, setSearchField] = useState<{ purchaser_and_sale_user?: string; mp_cut_sample_audit_status?: number; page: number; size: number }>({
+    purchaser_and_sale_user: '',
+    mp_cut_sample_audit_status: 0,
+    page: 1,
+    size: 10,
+  })
+  const [sampleCuttingList, setSampleCuttingList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+
+  // 列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  // 数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: sampleCuttingList.list, total: sampleCuttingList.total, status: state.loading! })
+  }, [sampleCuttingList, state.loading])
+  // 筛选参数
+  // 上拉加载数据
+  const pageNum = useRef({ size: searchField.size, page: searchField.page })
+
+  const getRefresherRefresh = async() => {
+    pageNum.current.size = 1
+    setRefresherTriggeredStatus(true)
+    setSearchField(val => ({ ...val, size: 10 }))
+  }
+  const getScrollToLower = useCallback(() => {
+    if (sampleCuttingList.list.length < sampleCuttingList.total) {
+      pageNum.current.page++
+      const size = pageNum.current.size * pageNum.current.page
+      setSearchField({ ...searchField, size })
+    }
+  }, [sampleCuttingList])
+
+  // 领取剪样
+  const getSampleCutting = () => {
+    goLink('/pages/sampleCutting/sampleCuttingList/index')
+  }
+
+  // 搜索
+  const getSearchData = debounce((value: string) => {
+    setSearchField(e => ({ ...e, purchaser_and_sale_user: value }))
+  }, 300)
+
+  const FilterOptions = [
+    {
+      key: 0,
+      label: '全部记录',
+    },
+    {
+      key: 5,
+      label: '申请中',
+    },
+    {
+      key: 6,
+      label: '已完成',
+    },
+  ]
+
+  const handleClickFilter = (value) => {
+    if (searchField.mp_cut_sample_audit_status === value) { return }
+    setSearchField(e => ({ ...e, mp_cut_sample_audit_status: value }))
+  }
+
+  useEffect(() => {
+    getData()
+  }, [searchField])
+
+  const { fetchData: cancelOrderApi } = CancelCutSampleOrder()
+
+  const cancelOrder = async(id: number) => {
+    const res = await cancelOrderApi({ id })
+    if (res.success) {
+      getData()
+    }
+  }
+
+  // 取消订单
+  const handleCancel = (e: ITouchEvent, id: number) => {
+    e.stopPropagation()
+    Taro.showModal({
+      content: '确定取消该订单？',
+      confirmColor: '#337fff',
+      confirmText: '确认',
+      success: (res) => {
+        if (res.confirm) {
+          cancelOrder(id)
+          console.log('用户点击确定')
+        }
+      },
+    })
+  }
+
+  // 监听选择的类型
+  // useEffect(() => {
+  //   setSearchObj(search)
+  //   if (search.goodsId) { getGoodList() }
+  // }, [search])
+
+  return <View className={styles.main}>
+    <View className={styles.search}>
+      <Search placeholder="请输入客户或业务员" showBtn={false} changeOnSearch={getSearchData} />
+    </View>
+    <SelectSampleCuttingStatus onChange={handleClickFilter} />
+    <View className={styles.color_card_list}>
+      <InfiniteScroll
+        emptySlot={<Empty picUrl={COLOR_CARD_LIST_EMPTY_IMAGE} text="还没有领取过剪样" />}
+        statusMore={statusMore}
+        selfonScrollToLower={getScrollToLower}
+        refresherEnabled
+        refresherTriggered={refresherTriggeredStatus}
+        selfOnRefresherRefresh={getRefresherRefresh}
+        safeAreaInsetBottom={false}
+      >
+        {sampleCuttingList?.list?.map((item, index) => {
+          return (
+            <View key={item.order_id} className={styles.order_item}>
+              <ItemList data={item} key={index} cancel={e => handleCancel(e, item.order_id)}></ItemList>
+            </View>
+          )
+        })}
+      </InfiniteScroll>
+    </View>
+    <View className={styles.bottomBar}>
+      <NormalButton
+        customClassName={styles.bottomBar__button}
+        type="primary"
+        round
+        onClick={getSampleCutting}
+      >
+          领取剪样
+      </NormalButton>
+    </View>
+  </View>
+}
+
+export default GetSampleCutting

src/pages/sampleCutting/sampleCuttingDetail/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '剪样订单详情',
+}

src/pages/sampleCutting/sampleCuttingDetail/index.module.scss

@@ -0,0 +1,203 @@
+page {
+  background: #f7f7f7;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.main {
+  background-color: $color_bg_one;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+  .context {
+    flex: 1 1 auto;
+    height: 100%;
+    overflow-y: scroll;
+  }
+  .orderProcess {
+    font-size: 28px;
+  }
+  .orderInfoTop {
+    font-size: 28px;
+    color: $color_font_one;
+  }
+  .customerTop {
+    color: #333333;
+    font-size: 28px;
+  }
+  .customerBottom {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    color: #343434;
+    font-size: 28px;
+  }
+
+  .colorCardTop {
+    font-size: 28px;
+  }
+  .colorCardBottom {
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    overflow: hidden;
+    margin-bottom: 24px;
+    .leftCont {
+      width: 134px;
+      height: 134px;
+      border-radius: 8px;
+      margin-right: 24px;
+    }
+    .rightCont {
+      flex: 1 1 auto;
+      overflow: hidden;
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-between;
+      &__top {
+        font-size: 28px;
+        @include common_ellipsis(1);
+      }
+      &__bottom {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        width: 100%;
+      }
+      &__container {
+        display: flex;
+        flex-flow: row nowrap;
+      }
+      &__left {
+        flex: 1 1 auto;
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+      }
+      &__right {
+        font-size: 28px;
+      }
+    }
+  }
+  .paymentMethod {
+    text-align: right;
+    font-size: 28px;
+    color: #f64861;
+  }
+}
+.address_box {
+  display: flex;
+  .address_box_left {
+    margin-right: 24px;
+    .cirle {
+      border-radius: 50%;
+      width: 64px;
+      height: 64px;
+      background: #4a7fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .address_box_right {
+    flex: 1 1 auto;
+    .address {
+      height: 78px;
+      font-size: 28px;
+      font-weight: 500;
+      @include common_ellipsis(2);
+      color: #000000;
+      margin-right: 41px;
+      display: flex;
+      align-items: center;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; /*这里设置几行*/
+      overflow: hidden;
+    }
+    .bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .reatName {
+        font-size: 28px;
+        font-weight: 500;
+        color: #337fff;
+        margin-right: 32px;
+      }
+      .leftbottom {
+        display: flex;
+        align-items: center;
+        .name {
+          line-height: 34px;
+          width: 84px;
+          height: 34px;
+          @include common_ellipsis();
+          font-size: 28px;
+          font-weight: 400;
+          color: #343434;
+          margin-right: 16px;
+        }
+
+        .phone {
+          height: 34px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #343434;
+        }
+      }
+    }
+  }
+}
+
+.bottomBar {
+  position: relative;
+  z-index: 99;
+  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 24px;
+  background-color: white;
+  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+}
+.bottomBar__button {
+  font-size: 28px;
+}
+.remark {
+  font-size: 28px;
+  color: #9b9b9b;
+}
+
+.step-title {
+  display: flex;
+  flex-flow: row nowrap;
+  font-size: 28px;
+  align-items: center;
+}
+.step-status {
+  font-weight: 550;
+  color: #393939;
+  margin-right: 40px;
+}
+.attachment{
+  display: flex;
+  flex-flow: row nowrap;
+  .step-url-container {
+    margin-right: 16px;
+    width: 128px;
+    height: 128px;
+  }
+  .step-url {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+  }
+}

src/pages/sampleCutting/sampleCuttingDetail/index.tsx

@@ -0,0 +1,233 @@
+import { Image, Text, View } from '@tarojs/components'
+import Taro, { useRouter } from '@tarojs/taro'
+import { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import LayoutBlock from '@/components/layoutBlock'
+import Divider from '@/components/divider'
+import LabAndImg from '@/components/LabAndImg'
+import Tag from '@/components/tag'
+import Cell from '@/components/cell'
+import { formatDateTime, formatHashTag, formatRemoveHashTag, formatUrl } from '@/common/format'
+import NormalButton from '@/components/normalButton'
+import Steps from '@/components/steps'
+import Step from '@/components/steps/components/step'
+import { alert } from '@/common/common'
+import IconFont from '@/components/iconfont/iconfont'
+import { CancelCutSampleOrder, GetCutSampleOrderDetail } from '@/api/sampleCutting'
+
+const SampleCuttingDetail = () => {
+  const { fetchData } = GetCutSampleOrderDetail()
+
+  const router = useRouter()
+
+  const getData = async() => {
+    console.log('id', router.params.id)
+    const res = await fetchData({ id: Number(router.params.id) })
+    if (!res.success) {
+      return alert.error(res.msg)
+    }
+    setOrder(res.data)
+  }
+
+  const [order, setOrder] = useState<any>({})
+
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
+  }, [])
+  // 复制
+  const handleCopy = (data: string) => {
+    Taro.setClipboardData({
+      data,
+      success() {
+        Taro.showToast({
+          title: '复制成功',
+        })
+      },
+    })
+  }
+
+  const { fetchData: cancelOrderApi } = CancelCutSampleOrder()
+
+  const cancelOrder = async(id: number) => {
+    const res = await cancelOrderApi({ id })
+    if (res.success) {
+      getData()
+      alert.success('取消成功')
+    }
+    else {
+      alert.error(res.msg)
+    }
+  }
+
+  // 取消订单
+  const handleCancel = () => {
+    Taro.showModal({
+      content: '确定取消该订单？',
+      confirmColor: '#337fff',
+      confirmText: '确认',
+      success: (res) => {
+        if (res.confirm) {
+          cancelOrder(Number(router.params.id))
+          console.log('用户点击确定')
+        }
+      },
+    })
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  return <View className={styles.main} >
+    <View className={styles.context}>
+      <LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
+        <View className={styles.orderProcess}>订单进程</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.orderProcessBottom}>
+          <Steps current={order.order_form?.[0].order_status === 5 ? 1 : 0} direction="vertical" customStyle={{ padding: '0' }}>
+            {/*
+                 申请中5 -> 已完成 6
+                 申请中5 -> 已取消 3
+                 申请中5 -> 已拒绝 4
+            */}
+            {
+              order.order_form?.map((item, index) => {
+                return <Step key={index} status={item.order_status === 4 ? 'error' : undefined} title={
+                  <View className={styles['step-title']}>
+                    <Text className={styles['step-status']}>{item.order_status_name}</Text>
+                    <Text>{formatDateTime(item.order_time)}</Text>
+                  </View>
+                } description={
+                  <>
+                    {
+                      item.audit_remark && <View>{item.audit_remark}</View>
+                    }
+                    {
+                      item.delivery_appendix_url
+                          && <View className={styles.attachment}>
+                            {
+                              item.delivery_appendix_url?.map((url, index) => {
+                                return <View className={styles['step-url-container']} key={index}>
+                                  <Image className={styles['step-url']} src={formatUrl(url)} lazyLoad mode="aspectFill" />
+                                </View>
+                              })
+                            }
+                          </View>
+                    }
+                  </>
+                }
+                />
+              })
+            }
+
+          </Steps>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
+        <View className={styles.customerTop}>客户信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.customerBottom}>
+          <Text>{order?.purchaser_name}</Text>
+          <Text>{order?.phone}</Text>
+          {/* 占位作用勿删除 */}
+          <Text></Text>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.address_box}>
+
+          <View className={styles.address_box_left}>
+            <View className={styles.cirle}>
+              <IconFont name="icon-dizhi1" size={60}></IconFont>
+            </View>
+          </View>
+          <View className={styles.address_box_right}>
+            <View className={styles.address}>{order?.province_name}{order?.city_name}{order?.district_name}{order?.address_detail}</View>
+            <Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
+            <View className={styles.bottom}>
+              <View className={styles.leftbottom}>
+                <View className={styles.name}>{order.target_user_name}</View>
+                <View className={styles.phone}>{order.target_user_phone}</View>
+              </View>
+              <View className={styles.reatName}>{order.shipment_mode_name}</View>
+            </View>
+          </View>
+        </View>
+      </LayoutBlock>
+      {
+        order.cut_sample_order_product_list?.map((item, index) => {
+          return <LayoutBlock key={index} customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
+            <View className={styles.colorCardTop}>{formatHashTag(item.code, item.name)}</View>
+            <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+            {
+              item.product_colors?.map((mul) => {
+                return (
+                  <View className={styles.colorCardBottom} key={mul.product_color_id}>
+                    <View style={{ minWidth: '24%' }}>
+                      <View className={styles.leftCont}>
+                        <LabAndImg value={labAndImgObj(mul)} />
+                      </View>
+                    </View>
+                    <View className={styles.rightCont}>
+                      <View className={styles.rightCont__container}>
+                        <View className={styles.rightCont__left}>
+                          <View className={styles.rightCont__top}>
+                            {`#${formatRemoveHashTag(mul.code)} ${mul.name}`}
+                          </View>
+                          <View className={styles.rightCont__bottom}>
+                            {/* {
+                              item.affiliation_product?.map((product_color, index) => {
+                                return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
+                              })
+                            } */}
+                          </View>
+                        </View>
+                        <View className={styles.rightCont__right}>
+                    x{mul.color_num}份
+                        </View>
+                      </View>
+                      <Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
+                    </View>
+                  </View>
+                )
+              })
+            }
+            <View className={styles.paymentMethod}>快递到付</View>
+          </LayoutBlock>
+        })
+      }
+
+      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
+        <View className={styles.orderInfoTop}>订单信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.orderInfoDetail}>
+          <Cell title="订单编号：" desc={
+            <>
+              <Text className={styles.orderInfoDetail__desc}>{order?.order_no}</Text>
+              <Tag type="primary" onClick={() => handleCopy(order?.order_no)}>复制</Tag>
+            </>
+          }
+          ></Cell>
+          <Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
+          <Cell title="业务员：" desc={order?.sale_user_name}></Cell>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
+        <View className={styles.orderInfoTop}>备注信息</View>
+        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+        <View className={styles.remark}>{order?.order_remark || '暂无备注信息'}</View>
+      </LayoutBlock>
+    </View>
+    <View className={styles.bottomBar}>
+      {
+        order.order_form?.[0].order_status === 5
+          ? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
+          取消订单
+          </NormalButton>
+          : null
+      }
+
+    </View>
+  </View>
+}
+export default SampleCuttingDetail

src/pages/sampleCutting/sampleCuttingList/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '添加剪样',
+}

src/pages/sampleCutting/sampleCuttingList/index.module.scss

@@ -0,0 +1,186 @@
+page {
+  background: #f7f7f7;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.main {
+  background-color: $color_bg_one;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+}
+.search {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  &__cancel {
+    margin: 0 32px;
+    color: #727272;
+    font-size: 28px;
+  }
+}
+
+.context {
+  flex: 1 1 auto;
+  height: 100%;
+  overflow: hidden;
+  background-color: white;
+}
+
+.bottomBar {
+  position: relative;
+  z-index: 99;
+  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 24px;
+  background-color: white;
+  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+}
+.bottomBar__button {
+  width: 100%;
+  font-size: 28px;
+}
+
+.colorCard {
+  padding: 24px 0;
+  border-bottom: 1px solid #f6f6f6;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  &__image {
+    width: 144px;
+    height: 144px;
+    border-radius: 8px;
+    margin-right: 24px;
+    overflow: hidden;
+    position: relative;
+  }
+  &__title {
+    font-size: 28px;
+    color: #383838;
+  }
+  &__code {
+    font-size: 24px;
+    color: #b3b3b3;
+  }
+  &__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+  .addButton {
+    width: 30%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+.imageTag {
+  width: 50%;
+  background-color: #000;
+  box-sizing: border-box;
+  position: absolute;
+  padding: 7px;
+  bottom: 0px;
+  right: 0px;
+  opacity: 0.55;
+  color: #ffffff;
+  text-align: center;
+  font-size: 22px;
+  z-index: 1;
+  border-top-left-radius: 16px;
+  transform: perspective(1em) scale(1, 1.1) rotateX(5deg);
+  /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
+  transform-origin: bottom right;
+}
+
+.collection_con {
+  display: flex;
+  flex-flow: column nowrap;
+  max-height: 75vh;
+
+  .header {
+    padding: 32px 48px;
+    .title {
+      font-size: 32px;
+      @include common_ellipsis;
+      color: #3d3d3d;
+      font-weight: 500;
+    }
+    .sub_title {
+      font-size: 28px;
+      color: #b6b6b6;
+      margin-top: 8px;
+    }
+  }
+  .productList {
+    flex: 1 1 auto;
+    overflow-y: scroll;
+    margin-top: 30px;
+    padding: 0 48px;
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    justify-content: space-between;
+    .item {
+      width: 100%;
+      margin-bottom: 28px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      box-sizing: border-box;
+      .item_color {
+        box-sizing: border-box;
+        width: 136px;
+        height: 136px;
+        border-radius: 50%;
+      }
+      .item_name {
+        text-align: center;
+        margin-top: 10px;
+        font-size: 24px;
+        color: #666666;
+
+        @include common_ellipsis;
+      }
+    }
+  }
+}
+.popup_bottom {
+  padding: 12px;
+  padding-bottom: 0;
+}
+.productColorActive {
+  border: 4px solid $color_main;
+  position: relative;
+  .activeIcon {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    border: 4px solid white;
+    background-color: $color_main;
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    border: 2px solid $color_main;
+    border-radius: 50%;
+    z-index: 99;
+  }
+}

src/pages/sampleCutting/sampleCuttingList/index.tsx

@@ -0,0 +1,355 @@
+import { ScrollView, Text, View } from '@tarojs/components'
+import Taro, { useDidShow, useRouter, useUnload } from '@tarojs/taro'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+import Search from '@/components/search'
+import NormalButton from '@/components/normalButton'
+import LabAndImg from '@/components/LabAndImg2'
+import Tag from '@/components/tag'
+import MCheckbox from '@/components/checkbox'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
+import { alert, goLink } from '@/common/common'
+import { formatHashTag, formatRemoveHashTag } from '@/common/format'
+import Popup from '@/components/popup'
+import IconFont from '@/components/iconfont/iconfont'
+import { GetCutSampleOrderColorList, GetCutSampleOrderProducts } from '@/api/sampleCutting'
+
+export interface SampleCuttingCache {
+  product_id: number
+  product_code_and_name: string
+  multipleSelection: {
+    product_color_id: number
+    product_color_code: string
+    product_color_name: string
+    lab: {
+      l: number
+      a: number
+      b: number
+    }
+    rgb: {
+      r: number
+      g: number
+      b: number
+    }
+    texture_url: string
+    count: number
+  }[]
+}
+const SampleCuttingList = () => {
+  const router = useRouter()
+  const isAdd = router?.params?.isAddSampleCutIdList
+
+  const { fetchData, state } = GetCutSampleOrderProducts()
+
+  const [orderList, setOrderList] = useState<{ list: any[]; total: number }>({
+    list: [],
+    total: 0,
+  })
+  const multipleSelection = useRef<SampleCuttingCache[]>([])
+  // 搜索
+  const getSearchData = debounce((value: string) => {
+    console.log('search', value)
+    setSearchField(val => ({ ...val, product_code_and_name: value }))
+  }, 300)
+  // 取消
+  const handleCancel = () => {
+    Taro.navigateBack()
+  }
+
+  // redirectTo 会触发 onLoad 事件
+  let isRedirect = false
+  // 确认
+  const handleSubmit = () => {
+    Taro.setStorageSync('sampleCuttingCache', JSON.stringify(multipleSelection.current))
+    if (router?.params.isGoBack) {
+      isRedirect = true
+      Taro.navigateBack({
+        delta: 1,
+      })
+    }
+    else {
+      isRedirect = true
+      // 携带id跳转
+      goLink('/pages/sampleCutting/addSampleCutting/index', null, 'redirectTo')
+    }
+  }
+
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
+  }, [])
+  // 页码和页数
+  const [searchField, setSearchField] = useState<{ product_code_and_name?: string; product_ids?: string; page: number; size: number }>({
+    product_code_and_name: '',
+    product_ids: '',
+    page: 1,
+    size: 10,
+  })
+
+  const getData = async() => {
+    console.log('searchField==>', searchField)
+    const res = await fetchData(getFilterData(searchField))
+    if (!res.success) {
+      return alert.error(res.msg)
+    }
+    setOrderList({ list: res.data.list, total: res.data.total })
+  }
+
+  useEffect(() => {
+    getData()
+  }, [searchField])
+
+  useDidShow(() => {
+    const cache = Taro.getStorageSync('sampleCuttingCache')
+    if (cache) {
+      multipleSelection.current = JSON.parse(cache) as SampleCuttingCache[]
+    }
+
+    if (isAdd) {
+      console.log('isAdd', isAdd)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      setSearchField(val => ({ ...val, product_ids: isAdd }))
+    }
+  })
+
+  // 上拉加载数据
+  const pageNum = useRef({ size: searchField.size, page: searchField.page })
+  // 列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  // 下拉刷新
+  const getRefresherRefresh = async() => {
+    pageNum.current.size = 1
+    setRefresherTriggeredStatus(true)
+    setSearchField(val => ({ ...val, size: 10 }))
+  }
+  // 数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: orderList.list, total: orderList.total, status: state.loading! })
+  }, [orderList, state.loading])
+
+  const getScrollToLower = useCallback(() => {
+    if (orderList.list.length < orderList.total) {
+      pageNum.current.page++
+      const size = pageNum.current.size * pageNum.current.page
+      setSearchField({ ...searchField, size })
+    }
+  }, [orderList])
+
+  const { fetchData: getColorList } = GetCutSampleOrderColorList()
+  const currentSelect = useRef<any>({})
+  const handleClickAddButton = async(item: any) => {
+    currentSelect.current = item
+    const res = await getColorList({ id: item.id })
+    if (res.success) {
+      setProductList(res.data.list)
+      const index = multipleSelection.current.findIndex(val => val.product_id === item.id)
+      if (index !== -1) {
+        setProductMultipleSelection(multipleSelection.current[index].multipleSelection)
+      }
+      else {
+        setProductMultipleSelection([])
+      }
+      setShow(true)
+    }
+    else {
+      return alert.error(res.msg)
+    }
+  }
+
+  useUnload(() => {
+    console.log('onUnload', isRedirect)
+    if (!isRedirect) {
+      Taro.removeStorageSync('sampleCuttingCache')
+    }
+  })
+
+  const [show, setShow] = useState(false)
+
+  const onClose = () => {
+    setShow(false)
+    setProductMultipleSelection([])
+  }
+
+  const [productList, setProductList] = useState<any[]>([])
+  // 点击产品颜色
+  const handleClickProductColor = (item: any) => {
+    const index = productMultipleSelection.findIndex(val => val.product_color_id === item.product_color_id)
+    console.log(index, productMultipleSelection)
+    if (index !== -1) {
+      setProductMultipleSelection((prev) => {
+        prev.splice(index, 1)
+        return [...prev]
+      })
+    }
+    else {
+      setProductMultipleSelection(prev => [...prev, {
+        product_color_id: item.product_color_id,
+        product_color_code: item.product_color_code,
+        product_color_name: item.product_color_name,
+        lab: item.lab,
+        rgb: item.rgb,
+        texture_url: item.texture_url,
+        count: 1,
+      }])
+    }
+  }
+
+  const handleClose = () => {
+    onClose()
+  }
+  const handleAddProduct = () => {
+    const index = multipleSelection.current.findIndex(mul => mul.product_id === currentSelect.current.id)
+    if (index !== -1) {
+      multipleSelection.current[index].multipleSelection = productMultipleSelection
+    }
+    else {
+      multipleSelection.current.push({
+        product_id: currentSelect.current.id,
+        product_code_and_name: formatHashTag(currentSelect.current.code, currentSelect.current.name) as string,
+        multipleSelection: productMultipleSelection,
+      })
+    }
+    onClose()
+  }
+  const [productMultipleSelection, setProductMultipleSelection] = useState<SampleCuttingCache['multipleSelection']>([])
+
+  return <View className={styles.main}>
+    <View className={styles.search}>
+      <Search placeholder="请输入搜索面料剪样" showBtn={false} changeOnSearch={getSearchData} >
+        <View className={styles.search__cancel} onClick={handleCancel}>取消</View>
+      </Search>
+    </View>
+    <View className={styles.context}>
+      <InfiniteScroll
+        statusMore={statusMore}
+        selfonScrollToLower={getScrollToLower}
+        refresherEnabled
+        refresherTriggered={refresherTriggeredStatus}
+        selfOnRefresherRefresh={getRefresherRefresh}
+        safeAreaInsetBottom={false}
+      >
+        {
+          orderList.list.map((item) => {
+            return <View key={item.id} style={{ padding: '0 16px', backgroundColor: 'white' }}>
+              <View className={styles.colorCard}>
+                <View style={{ minWidth: '24%' }}>
+                  <View className={styles.colorCard__image}>
+                    <LabAndImg value={labAndImgObj(item)} />
+                    {
+                      item.is_multiple_product ? <View className={styles.imageTag}>24色</View> : null
+                    }
+                  </View>
+                </View>
+                <View className={styles.colorCard__content}>
+                  <View className={styles.colorCard__title}>{formatHashTag(item.code, item.name)}</View>
+                  <View className={styles.colorCard__code}>
+                    <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} size="small" circle>{item.width}</Tag>
+                    <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} size="small" circle>{item.weight_density}</Tag>
+                  </View>
+                  <View className={styles.colorCard__code}>
+                    {item.component}
+                  </View>
+                </View>
+                <View className={styles.addButton}>
+                  <NormalButton
+                    type="primary"
+                    size="small"
+                    customStyles={{ padding: '0 40rpx' }}
+                    plain
+                    round
+                    onClick={() => handleClickAddButton(item)}
+                  >
+                    {
+                      isAdd?.includes(item.id) || multipleSelection.current.some(mul => mul.product_id === item.id) ? '继续添加' : '添加'
+                    }
+                  </NormalButton>
+                  {/* <MCheckbox
+                    disabled={isAdd?.includes(item.id)}
+                    status={isAdd?.includes(item.id) || item.status}
+                    onSelect={() => onSelect(item)}
+                    onClose={() => onUnSelect(item)}
+                  /> */}
+                </View>
+              </View>
+            </View>
+          })
+        }
+      </InfiniteScroll>
+
+    </View>
+    <View className={styles.bottomBar}>
+      <NormalButton
+        customClassName={styles.bottomBar__button}
+        type="primary"
+        round
+        disabled={multipleSelection.current.length === 0}
+        onClick={handleSubmit}
+      >
+        {
+          multipleSelection.current.length ? `确认（已选 ${multipleSelection.current.length} 个）` : '确认'
+        }
+      </NormalButton>
+
+    </View>
+    <Popup show={show} onClose={onClose} showTitle={false}>
+      <View className={styles.collection_con}>
+        <View className={styles.header}>
+          <View className={styles.title}>{formatHashTag(currentSelect.current.code, currentSelect.current.name)}( {productList.length} )</View>
+          <View className={styles.sub_title}>
+            剪样大小为A4，大约22cm*30cm
+          </View>
+        </View>
+        <View className={styles.productList}>
+          {
+            productList.map((item, index) => {
+              const isChecked = productMultipleSelection.some(mul => mul.product_color_id === item.product_color_id)
+              return <View key={index} className={styles.item} onClick={() => handleClickProductColor(item)}>
+                <View className={classNames(styles.item_color, isChecked ? styles.productColorActive : null)}>
+                  {
+                    isChecked
+                      ? <View className={styles.activeIcon}>
+                        <IconFont name="icon-lujing" size={20} color="white"></IconFont>
+                      </View>
+                      : null
+                  }
+                  <LabAndImg
+                    value={item}
+                    round
+                    name={formatRemoveHashTag(item.product_color_code)}
+                  />
+                </View>
+                <View className={styles.item_name}>{item.product_color_name}</View>
+              </View>
+            })
+          }
+        </View>
+
+      </View>
+      <View className={classNames(styles.bottomBar, styles.popup_bottom)}>
+        <NormalButton
+          customClassName={styles.bottomBar__button}
+          type="primary"
+          round
+          plain
+          customStyles={{ width: '48%' }}
+          onClick={handleClose}
+        >
+          取消
+        </NormalButton>
+        <NormalButton
+          customClassName={styles.bottomBar__button}
+          type="primary"
+          round
+          customStyles={{ width: '48%' }}
+          disabled={productMultipleSelection.length === 0}
+          onClick={handleAddProduct}
+        >
+          领取剪样（{productMultipleSelection.length}）
+        </NormalButton>
+
+      </View>
+    </Popup>
+  </View>
+}
+export default SampleCuttingList

src/pages/user/index.tsx

@@ -85,6 +85,12 @@ const feature: IconCardType[] = [
     path: '/pages/getColorCard/index',
     jurisdiction: 'receive_color_card_page',
   },
+  {
+    iconName: 'icon-lingquseka',
+    name: '领取剪样',
+    path: '/pages/sampleCutting/index',
+    jurisdiction: 'receive_color_card_page',
+  },
 ]
 
 const fabric: IconCardType[] = [