剪板流程

package-lock.json

@@ -14,13 +14,15 @@
         "@tarojs/runtime": "3.3.10",
         "@tarojs/taro": "3.3.10",
         "big.js": "^6.1.1",
+        "dayjs": "^1.11.3",
         "qs": "^6.10.3",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
         "react-redux": "^8.0.1",
         "redux": "^4.2.0",
         "redux-logger": "^3.0.6",
-        "redux-thunk": "^2.4.1"
+        "redux-thunk": "^2.4.1",
+        "tarojs": "^2.1.1"
       },
       "devDependencies": {
         "@babel/core": "^7.8.0",
@@ -7594,6 +7596,11 @@
         "whatwg-url": "^7.0.0"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.3.tgz",
+      "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -18794,6 +18801,11 @@
         "postcss-value-parser": "^3.3.0"
       }
     },
+    "node_modules/tarojs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tarojs/-/tarojs-2.1.1.tgz",
+      "integrity": "sha512-5wJ2fuiA6Fk/9zr76ZPrsJAe6UXI66gHbtwOWaxjrJZetRurfxDZUUw6wkSZB/ZxAhVhWlv9PMuNc7DlB+rtsA=="
+    },
     "node_modules/terser": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
@@ -26469,6 +26481,11 @@
         "whatwg-url": "^7.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.3.tgz",
+      "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -34649,6 +34666,11 @@
         "postcss-value-parser": "^3.3.0"
       }
     },
+    "tarojs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tarojs/-/tarojs-2.1.1.tgz",
+      "integrity": "sha512-5wJ2fuiA6Fk/9zr76ZPrsJAe6UXI66gHbtwOWaxjrJZetRurfxDZUUw6wkSZB/ZxAhVhWlv9PMuNc7DlB+rtsA=="
+    },
     "terser": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",

package.json

@@ -41,6 +41,7 @@
     "@tarojs/runtime": "3.3.10",
     "@tarojs/taro": "3.3.10",
     "big.js": "^6.1.1",
+    "dayjs": "^1.11.3",
     "qs": "^6.10.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

src/common/enum.ts

@@ -17,13 +17,14 @@ export const ORDER_STATUS = {
 
 //售后单状态枚举
 export const AFTER_ORDER_STATUS = {
-    SaleOrderStatusBooking  : {value:0, label:'申请中'},
+    ReturnStageApplying                  : {value:0, label:'申请中'}, // 申请中
-    SaleOrderStatusArranging : {value:1, label:'退货中'},
+    ReturnStageWaitCheck                 : {value:1, label:'退货中'}, // 退货中
-    SaleOrderStatusArranged : {value:2, label:'待验布'},
+    ReturnStageChecked                   : {value:2, label:'待验布'}, // 待验布
-    SaleOrderStatusWaitingPayment : {value:7, label:'退款中'},
+    ReturnStageReturned                  : {value:3, label:'已退款'}, // 已退款
-    SaleOrderStatusWaitingDelivery : {value:3, label:'已退款'},
+    ReturnStageCancel                    : {value:4, label:'已取消'}, // 已取消
-    SaleOrderStatusWaitingReceipt : {value:8, label:'已取消'}, 
+    ReturnStageQualityCheckPendingRefund : {value:5, label:'待退款'}, // 待退款-质检
-    SaleOrderStatusAlreadyReceipt : {value:9, label:'已拒绝'},
+    ReturnStageServiceOrderPendingRefund : {value:6, label:'待退款'}, // 待退款
+    ReturnStageRejected                  : {value:7, label:'已拒绝'}, // 已拒绝
 }
 
 //支付方式

src/pages/details/index.tsx

@@ -167,7 +167,7 @@ export default (props:Params) => {
         </View>
       </View>
       <View className={styles.product_color}>
-        <View className={styles.title}>色号 (10)</View>
+        <View className={styles.title}>色号 ({productInfo?.product_color_list?.length})</View>
           <View className={styles.list}>
               {productInfo?.product_color_list?.map(item => {
                 return <View className={styles.item} onClick={() => getColorItem(item)}>

src/pages/order/components/orderState/index.module.scss

@@ -127,6 +127,9 @@
         right: 20px;
         display: flex;
         color: #707070;
+        display: flex;
+        align-items: center;
+        
         .mconfont{
             font-size: 30px;
         }

src/pages/order/components/orderState/index.tsx

@@ -1,9 +1,10 @@
 import { Image, Text, View } from "@tarojs/components"
-import { memo, useMemo, useState } from "react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
 import styles  from './index.module.scss'
 import classnames from "classnames";
 import { formatDateTime, formatImgUrl } from "@/common/fotmat";
 import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
+import * as dayjs from 'dayjs'
 
 type List = {
     status: string,
@@ -17,21 +18,22 @@ type Param = {
     orderInfo?: {
         logistics_details:List[], //订单状态列表
         payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
-        status: number //订单状态
+        status: number, //订单状态
+        expire_time: number 
     }
 }
 
 
 
-export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
+export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0, delivery_time:0}, onRefresh}:Param) => {
     
     const [showMore, setShowMore] = useState(false)
     const changeMore = () => {
         setShowMore(() => !showMore)
     }
     const dataList = useMemo(() => {
-        return orderInfo?.logistics_details?.reverse()||[]
+        return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
-    }, [orderInfo])
+    }, [orderInfo.logistics_details])
 
     //订单状态枚举
     const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
@@ -42,10 +44,35 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
         PaymentMethodCashOnDelivery,
     } = PAYMENT_METHOD
 
-    //倒计时
-    const count_down = useMemo(() => {
 
-    }, [orderInfo])
+    //倒计时
+    const timeObj:any = useRef()
+    useEffect(() => {
+        if(orderInfo.expire_time) {
+            timeObj.current = setInterval(() => {
+                count_down()
+            }, 1000)
+        }
+        return () => {
+            clearInterval(timeObj.current)
+        }
+    }, [orderInfo.expire_time])
+
+    
+    const count_down = () => {
+        var startData = dayjs();
+        var endDate = dayjs(orderInfo.expire_time);
+        console.log('endDate::', endDate.format('YYYY-MM-DD HH:mm'))
+        var _dd = endDate.diff(startData,'day');
+        var _hh = endDate.diff(startData,'hour');
+        var _mm = endDate.diff(startData,'minute');
+        var _ss = endDate.diff(startData,'second');
+        // 转换
+        var hh = _hh - (_dd*24);
+        var mm = _mm - (_hh*60);
+        var ss = _ss - (_mm*60);
+        console.log(`${_dd} ${hh} ${mm} ${ss}`)
+    }
 
     return (
         <>
@@ -73,10 +100,10 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
                     {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
                     {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
                 </View>
-                <View className={styles.refresh} onClick={onRefresh}>
+                {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.refresh} onClick={onRefresh}>
                     <Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
                     <Text className={classnames(styles.refresh_text)}>刷新</Text>
-                </View>
+                </View>}
             </View>}
         </>
     )

src/pages/order/components/payment/index.tsx

@@ -121,6 +121,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
 
      //是否显示七天账期
      const show_account_payment = useMemo(() => {
+         console.log('orderInfo?.status::',orderInfo)
         //支付方式是账期支付,不显示
         if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false
         //支付方式是货到付款,不显示

src/pages/order/index.tsx

@@ -190,7 +190,7 @@ import styles  from './index.module.scss'
 
     return (
         <View className={styles.order_main}>
-            <OrderState orderInfo={{logistics_details:orderDetail?.logistics_details, payment_method: orderDetail?.payment_method, status:orderDetail?.status}}/>
+            <OrderState orderInfo={{logistics_details:orderDetail?.logistics_details, payment_method: orderDetail?.payment_method, status:orderDetail?.status, expire_time:orderDetail?.expire_time}}/>
             <View >
                 <AddressInfoDetail orderInfo={addressInfoDetailData}  onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} />
             </View>

src/pages/orderList/index.tsx

@@ -96,12 +96,17 @@ export default () => {
 
   //监听点击的按钮
   const clickOrderBtn = useCallback(({status, orderInfo}) => {
-    console.log('status:::', status)
     if(status == 1 || status == 6) {
       getOrderList()
     } else if(status == 2) {
       //去支付
-      setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
+      console.log('orderInfo::',orderInfo)
+      setPayOrderInfo({
+        should_collect_order_id: orderInfo.should_collect_order_id,//应付单id
+        pre_collect_order_id: orderInfo.pre_collect_order_id, //预付单id
+        status: orderInfo.status, //订单状态
+        payment_method: orderInfo.payment_method //支付方式
+      })
       toPay()
     }
   }, [orderData])