dev

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

@@ -45,4 +45,20 @@
             height: 100%;
         }
     }
+    .refresh{
+        position: absolute;
+        top: 23px;
+        right: 20px;
+        display: flex;
+        color: #dddddd;
+        display: flex;
+        align-items: center;
+        
+        .mconfont{
+            font-size: 36px;
+        }
+        .refresh_text{
+            font-size: 25px;
+        }
+    }
 }

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

@@ -1,25 +1,74 @@
 import { formatImgUrl } from "@/common/fotmat";
 import { Image, Text, View } from "@tarojs/components";
-import { memo } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import classnames from "classnames";
 import styles  from './index.module.scss'
+import dayjs from "dayjs";
+import { useTimeCountDown } from "@/use/useCommonData";
+import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
+
+type List = {
+    status: string,
+    time: string,
+    tag: string,
+    desc: string,
+    expire_time: string
+}
+
+type Param = {
+    onRefresh?: () => void,
+    orderInfo?: {
+        logistics_details:List[], //订单状态列表
+        payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
+        status: number, //订单状态
+    }
+}
+
+
+export default memo(({orderInfo, onRefresh}:Param) => {
+
+    const {showTime, onStart, timeStatus} = useTimeCountDown()
+
+    //订单状态枚举
+    const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
+
+    //获取预付款最后时间
+    const endTime = useMemo(() => {
+        if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
+            return orderInfo.logistics_details[0].expire_time
+        } 
+        return ''
+    }, [orderInfo])
+
+    useEffect(() => {
+        if(endTime) onStart(endTime)
+    }, [endTime])
+
+    useEffect(() => {
+       if(timeStatus == 2) onRefresh?.()
+    }, [timeStatus])
+
 
-export default memo(() => {
     return (
         <View className={styles.advance_main}> 
             <View className={styles.time_con}>
                 <View className={styles.times}>
                     <Text className={styles.text}>剩</Text>
-                    <Text className={styles.num}>23</Text>
+                    <Text className={styles.num}>{showTime.HH}</Text>
                     <Text className={styles.separate}>:</Text>
-                    <Text className={styles.num}>58</Text>
+                    <Text className={styles.num}>{showTime.MM}</Text>
                     <Text className={styles.separate}>:</Text>
-                    <Text className={styles.num}>55</Text>
+                    <Text className={styles.num}>{showTime.SS}</Text>
                 </View>
                 <Text>支付关闭，订单自动取消</Text>
             </View>
             <View className={styles.cardIcon}>
                 <Image className={styles.image} src={formatImgUrl("/mall/my_cart.png", true)}/>
             </View>
+            <View className={styles.refresh} onClick={() => onRefresh?.()}>
+                <Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
+                <Text className={classnames(styles.refresh_text)}>刷新</Text>
+            </View>
         </View>
     )
 })