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

src/pages/order/index.tsx

@@ -15,6 +15,7 @@ import ShopCart from "@/components/shopCart";
 import { Text, Textarea, View } from "@tarojs/components"
 import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
 import classnames from "classnames";
+import dayjs from "dayjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import AddressInfoDetail from "./components/addressInfoDetail";
 import AdvanceOrderState from "./components/advanceOrderState";
@@ -191,7 +192,7 @@ import styles  from './index.module.scss'
     }, [orderDetail])
 
     //订单状态枚举
-    const {SaleOrderStatusCancel} = ORDER_STATUS
+    const {SaleOrderStatusCancel, SaleorderstatusWaitingPrePayment} = ORDER_STATUS
 
     //刷新页面
     const refresh = useCallback(() => {
@@ -250,8 +251,8 @@ import styles  from './index.module.scss'
 
     return (
         <View className={styles.order_main}>
-            <OrderState orderInfo={orderDetail} onRefresh={refresh}/>
-            {/* <AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh}/> */}
+            {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value)&&<OrderState orderInfo={orderDetail}/>||
+            <AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh}/>}
             <View>
                 <AddressInfoDetail orderInfo={defaultAddress} onLogistics={getLogistics} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} />
             </View>