剪板流程-倒计时

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

@@ -44,37 +44,13 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
         PaymentMethodCashOnDelivery,
     } = PAYMENT_METHOD
 
-
+    //获取预付款最后时间
-    //倒计时
+    const endTime = useMemo(() => {
-    const [showTime, setShowTime] = useState('')
-    const timeObj:any = useRef()
-    useEffect(() => {
         if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
-            let  expire_time = orderInfo.logistics_details[0].expire_time
+            return orderInfo.logistics_details[0].expire_time
-            timeObj.current = setInterval(() => {
+        } 
-                count_down(expire_time)
+        return ''
-            }, 1000)
-        }
-        return () => {
-            clearInterval(timeObj.current)
-        }
     }, [orderInfo])
-
-    
-    const count_down = (time) => {
-        var startData = dayjs();
-        var endDate = dayjs(time);
-        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);
-        setShowTime(() => ` ${hh}:${mm}:${ss}`)
-    }
-
     return (
         <>
             {(dataList?.length > 0)&&<View className={styles.order_flow_state}>
@@ -85,12 +61,9 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
                         <View className={styles.order_status_content}>
                             <View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
                             <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
-                            {/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
                         </View>
                         <Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
-                        {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.pay_time}>
+                        {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<CountDown endTime={endTime}/>}
-                            剩<Text>{showTime}</Text>支付关闭，订单自动取消
-                        </View>}
                     </View>)}
                 </View>
                 {(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@@ -108,4 +81,47 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
             </View>}
         </>
     )
-})
+})
+
+//倒计时
+const CountDown = ({endTime = ''}:{endTime:string}) => {
+    const [showTime, setShowTime] = useState('')
+    const timeObj:any = useRef()
+    useEffect(() => {
+        if(endTime) {
+            clearInterval(timeObj.current)
+            timeObj.current = setInterval(() => {
+                count_down()
+            }, 1000)
+        }
+        return () => {
+            clearInterval(timeObj.current)
+        }
+    }, [endTime])
+    const count_down = () => {
+        var startData = dayjs();
+        var endDate = dayjs(endTime);
+        if(startData >= endDate) clearInterval(timeObj.current)
+        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);
+        // 格式化
+        var DD =  ('00'+_dd).slice(-2);
+        var HH =  ('00'+hh).slice(-2);
+        var MM =  ('00'+mm).slice(-2);
+        var SS =  ('00'+ss).slice(-2);
+        setShowTime(() => ` ${HH}:${MM}:${SS}`)
+    }
+    return (
+        <>
+            <View className={styles.pay_time}>
+                剩<Text>{showTime||'00:00:00'}</Text>支付关闭，订单自动取消
+            </View>
+        </>
+    )
+}

src/pages/order/index.module.scss

@@ -62,18 +62,15 @@
             color: $color_font_two;
         }
     }
-    .submit_order{
+    .submit_order_con{
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
-        align-items: center;
         background-color: #fff;
         box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
         padding: 20px 20px;
         box-sizing: border-box;
-        // padding-bottom: constant(safe-area-inset-bottom);
-        // padding-bottom: env(safe-area-inset-bottom);
         .order_btn {
             width: 152px;
             height: 72px;

src/pages/order/index.tsx

@@ -218,7 +218,7 @@ import styles  from './index.module.scss'
                 }
                 <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
             </View>
-            {(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
+            {(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order_con}>
                 <OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
                 <View className="common_safe_area_y"></View>
             </View> }       

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

@@ -15,7 +15,6 @@
     }
     .order_status_item{
         position: relative;
-        padding-left: 50px;
         &:nth-last-child(n+2) {
             padding-bottom: 30px;
         }