🦄 refactor:订单详情静态界面

2022-09-08 16:19:37 +08:00
parent caf7066663
commit 2ae58233f4
19 changed files with 1456 additions and 6 deletions
@@ -0,0 +1,74 @@
+import { formatImgUrl } from "@/common/fotmat";
+import { Image, Text, View } from "@tarojs/components";
+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/useCommon";
+import { ORDER_STATUS, PAYMENT_METHOD } 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: number, //支付方式
+        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])
+
+
+    return (
+        <View className={styles.advance_main}> 
+            <View className={styles.time_con}>
+                <View className={styles.times}>
+                    <Text className={styles.text}>剩</Text>
+                    <Text className={styles.num}>{showTime.HH}</Text>
+                    <Text className={styles.separate}>:</Text>
+                    <Text className={styles.num}>{showTime.MM}</Text>
+                    <Text className={styles.separate}>:</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")}/>
+            </View>
+            <View className={styles.refresh} onClick={() => onRefresh?.()}>
+                <Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
+                <Text className={classnames(styles.refresh_text)}>刷新</Text>
+            </View>
+        </View>
+    )
+})