✨ feat(提货详情): 已完成提货详情

src/pages/takeDelivery/components/ItemList/index.tsx

@@ -27,21 +27,21 @@ const ItemList:FC<PropsType> = (props) => {
     })
   }
 
-  const { fetchData, state } = TakeGoodsOrderAudit()
+  const { fetchData } = TakeGoodsOrderAudit()
 
   // 确认审核
   const handleAudit = (id: number) => {
     Taro.showModal({
-      content: '确认要审核吗？',
+      content: '确认要提货吗？',
       confirmColor: '#337FFF',
       success: async (res) => {
         if (res.confirm) {
           const res = await fetchData({ id })
           if (res.success) {
-            Taro.showToast({ title: '审核成功', icon: 'success' })
+            Taro.showToast({ title: '提货成功', icon: 'success' })
             onSuccess?.()
           }else{
-            Taro.showToast({ title: '审核失败', icon: 'error' })
+            Taro.showToast({ title: '操作失败', icon: 'error' })
           }
         }
       },
@@ -53,10 +53,10 @@ const ItemList:FC<PropsType> = (props) => {
       <View className={styles.topBar}>
         <View className={styles.topBar__orderNo}>
           <View>单号：{itemData?.take_goods_order_no}</View>
-          {itemData?.take_goods_status === 0 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>}
+          {itemData?.take_goods_status === 0 && (
-          {itemData?.take_goods_status === 1 && (
+            <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>
-            <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>
           )}
+          {itemData?.take_goods_status === 1 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>}
         </View>
         <Text className={styles.topBar__orderType}>{itemData?.take_goods_order_type_name}</Text>
       </View>
@@ -66,17 +66,18 @@ const ItemList:FC<PropsType> = (props) => {
           <View className={styles.content__row__left}>货品信息：</View>
           <View className={styles.content__row__right}>
             <SaleModeTag saleMode={itemData.sale_mode} size='small' customClassName={styles.tag}></SaleModeTag>
+            {/* TODO: 面料字段、颜色字段 */}
             {itemData.delivery_product_nums}种面料，{itemData.delivery_product_color_nums}种颜色，共
             {itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.take_roll}条` : `${formatMeterDiv(itemData?.take_meters)}米`}
           </View>
         </View>
         <View className={styles.content__row}>
           <View className={styles.content__row__left}>供应信息：</View>
-          <View className={styles.content__row__right}>{itemData?.delivery_address || '空'}</View>
+          <View className={styles.content__row__right}>{itemData?.supplier_name || '空'}</View>
         </View>
         <View className={styles.content__row}>
           <View className={styles.content__row__left}>创建时间：</View>
-          <View className={styles.content__row__right}>{formatDateTime(itemData?.create_time) || '空'}</View>
+          <View className={styles.content__row__right}>{formatDateTime(itemData?.take_goods_order_create_time) || '空'}</View>
         </View>
       </View>
       <View className={styles.bottomBar}>

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

@@ -0,0 +1,48 @@
+.order_popup{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 0;
+    .order_popup_title{
+        color: $font_size_big;
+        font-weight: 700;
+        color: #000000;
+        padding-bottom: 20px;
+    }               
+    .order_popup_input{
+        width: 100%;
+        padding: 0 25px;
+        box-sizing: border-box;
+        margin-top: 43px;
+        position: relative;
+        .descDataNum{
+            position: absolute;
+            right: 40px;
+            bottom: 10px;
+            height: 39px;
+            font-size: $font_size_medium;
+            color: $color_font_two;
+        }
+        textarea{
+            background-color: #f3f3f3;
+            border-radius: 10px;
+            width: 100%;
+            height: 313px;
+            padding: 20px;
+            padding-bottom: 50px;
+            box-sizing: border-box;
+            font-size: $font_size;
+            border: 2px solid #e6e6e6;
+        }
+    }
+    .order_save_address{
+        height: 82px;
+        background: #007aff;
+        border-radius: 40px;
+        width: 668px;
+        text-align: center;
+        line-height: 82px;
+        color: #fff;
+        margin-top: 60px;
+    }       
+}

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

@@ -0,0 +1,43 @@
+import Popup from "@/components/popup"
+import { Textarea, View } from "@tarojs/components"
+import { useCallback, useEffect, useState } from "react"
+import styles  from './index.module.scss'
+
+type Param = {
+    onBlur?: (val:any) => void
+    onSave?: (val: string) => void
+    defaultValue?: string
+}
+export default ({onBlur, onSave, defaultValue = ''}:Param) => {
+    const [descData, setDescData] = useState({
+        number: 0,
+        value: '',
+        count: 200
+    })
+
+    useEffect(() => {
+        getDesc(defaultValue)
+    }, [defaultValue])
+
+    const getDesc = (value) => {
+        let res = value
+        if(value.length > descData.count) {
+            res = value.slice(0, descData.count)
+        }
+        setDescData({...descData, number:res.length, value: res})
+    }
+
+    const setSave = () => {
+        onSave?.(descData.value)
+    }
+    return (
+        <View className={styles.order_popup}>
+            <View className={styles.order_popup_title}>编辑备注</View>
+            <View className={styles.order_popup_input}>
+                <Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
+                <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
+            </View>
+            <View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
+        </View>
+    )
+}

src/pages/takeDeliveryDetail/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '提货',
+  navigationBarTitleText: '提货详情',
 }

src/pages/takeDeliveryDetail/index.module.scss

@@ -29,7 +29,7 @@ page {
     margin: 0 24px;
     display: flex;
     flex-flow: row nowrap;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     padding-top: 24px;
     padding-bottom: calc(20px + constant(safe-area-inset-bottom));

src/pages/takeDeliveryDetail/index.tsx

@@ -1,4 +1,4 @@
-import { TakeGoodsOrder, TakeGoodsOrderAudit, DeliveryNoticeOrderUpload, TakeGoodsOrderRefuse } from '@/api'
+import { TakeGoodsOrder, TakeGoodsOrderAudit, TakeGoodsOrderRefuse } from '@/api'
 import { formatDateTime, formatMeterDiv, formatWeightDiv } from '@/common/format'
 import Cell from '@/components/cell'
 import Divider from '@/components/divider'
@@ -12,6 +12,8 @@ import { useRouter } from '@tarojs/taro'
 import { alert } from '@/common/common'
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import Popup from '@/components/popup'
+import Remark from '../takeDelivery/components/remark'
 
 const TakeDeliveryDetail: FC = () => {
   const router = useRouter()
@@ -27,14 +29,16 @@ const TakeDeliveryDetail: FC = () => {
     })
     console.log('res==>', res.data)
     setDetailInfo(res.data)
+    // 动态设置标题
+    Taro.setNavigationBarTitle({
+      title: res.data.take_goods_order_type_name,
+    })
   }
 
   useEffect(() => {
     getData()
   }, [])
 
-  const { fetchData: uploadData } = DeliveryNoticeOrderUpload()
-
   const { fetchData: FetchAudit } = TakeGoodsOrderAudit()
 
   const DetailItem = useMemo(() => {
@@ -78,39 +82,63 @@ const TakeDeliveryDetail: FC = () => {
     console.log('imageList===>', imageList)
     setReadyToUploadList((prev) => [...prev, ...imageList])
   }
+
+  const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
+
+  const [showRemarkModal, setShowRemarkModal] = useState(false)
+
+  const handleRefuseOrder = async (remark: string) => {
+    const res = await refuseOrder({
+      id: Number(router.params.id),
+      remark: remark,
+    })
+    if (res.success) {
+      alert.success('拒收成功')
+      getData()
+    } else {
+      alert.error('该操作失败')
+    }
+  }
+
+  const onRemarkSave = async (remark: string) => {
+    handleRefuseOrder(remark)
+
+  }
+
   // 拒收
-  const handleRefuse = useCallback(async () => {}, [])
+  const handleRefuse = useCallback(() => {
+    setShowRemarkModal(true)
+  }, [])
+
+  
 
   // 审核
   const handleAudit = useCallback(() => {
     Taro.showModal({
       confirmColor: '#337FFF',
-      title: '确定审核？',
+      title: '确定要提货？',
       success: async function (res) {
         if (res.confirm) {
           const res = await FetchAudit({ id: Number(router.params.id) })
           if (res.success) {
-            alert.success('审核成功')
+            alert.success('提货成功')
             getData()
           } else {
-            alert.error('审核失败')
+            alert.error('请求失败')
           }
-        } else if (res.cancel) {
-          console.log('用户点击取消')
         }
       },
     })
   }, [readyToUploadList])
 
-  const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
+  // 底部按钮栏
-  const { fetchData: auditOrder } = TakeGoodsOrderAudit()
-
   const BottomBar = useMemo(() => {
-    if (detailInfo?.take_goods_order_type === 0) {
+    
+    if (detailInfo?.take_goods_order_type !== 0) {
       // 采购提货
       return (
         <View className={styles.bottomBar}>
-          <NormalButton type='primary' plain round onClick={handleAudit}>
+          <NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '100%' }}>
             确认提货
           </NormalButton>
         </View>
@@ -118,11 +146,11 @@ const TakeDeliveryDetail: FC = () => {
     } else {
       // 退货提货
       return (
-        <View className={styles.bottomBar}>
+        <View className={styles.bottomBar} style={{ justifyContent: 'space-between' }}>
-          <NormalButton type='primary' round onClick={handleRefuse}>
+          <NormalButton type='primary' round onClick={handleRefuse} customStyles={{ width: '25%' }}>
             拒收
           </NormalButton>
-          <NormalButton type='primary' plain round onClick={handleAudit}>
+          <NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '25%' }}>
             确认提货
           </NormalButton>
         </View>
@@ -176,13 +204,18 @@ const TakeDeliveryDetail: FC = () => {
             <Cell title='提货时间：' desc={formatDateTime(detailInfo?.audit_time)}></Cell>
           </View>
         </LayoutBlock>
-        <LayoutBlock circle>
+        {detailInfo?.take_goods_order_type !== 0 && (
-          <View className={styles.orderInfoTop}>备注信息</View>
+          <LayoutBlock circle>
-          <Divider direction='horizontal' customClassName={styles.divider}></Divider>
+            <View className={styles.orderInfoTop}>备注信息</View>
-          <View className='orderInfoDetail'>{detailInfo?.remark}</View>
+            <Divider direction='horizontal' customClassName={styles.divider}></Divider>
-        </LayoutBlock>
+            <View className='orderInfoDetail'>{detailInfo?.remark}</View>
+          </LayoutBlock>
+        )}
       </View>
       {detailInfo?.take_goods_status === 0 && BottomBar}
+      <Popup show={showRemarkModal} showTitle={false} onClose={() => setShowRemarkModal(false)}>
+        <Remark onSave={onRemarkSave} defaultValue={detailInfo?.remark} />
+      </Popup>
     </View>
   )
 }