From cc7bcfe83cfd33c07ad6716e1e3ef9f2d3b62713 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Wed, 15 Jun 2022 11:05:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=AA=E6=9D=BF=E6=B5=81=E7=A8=8B-=E5=80=92?=
 =?UTF-8?q?=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order/components/orderState/index.tsx     | 84 +++++++++++--------
 src/pages/order/index.module.scss             |  5 +-
 src/pages/order/index.tsx                     |  2 +-
 .../components/orderState/index.module.scss   |  1 -
 4 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx
index 60e724b..9cc4ca4 100644
--- a/src/pages/order/components/orderState/index.tsx
+++ b/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 [showTime, setShowTime] = useState('')
-    const timeObj:any = useRef()
-    useEffect(() => {
+    //获取预付款最后时间
+    const endTime = useMemo(() => {
         if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
-            let  expire_time = orderInfo.logistics_details[0].expire_time
-            timeObj.current = setInterval(() => {
-                count_down(expire_time)
-            }, 1000)
-        }
-        return () => {
-            clearInterval(timeObj.current)
-        }
+            return orderInfo.logistics_details[0].expire_time
+        } 
+        return ''
     }, [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}>
-                            剩<Text>{showTime}</Text>支付关闭，订单自动取消
-                        </View>}
+                        {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<CountDown endTime={endTime}/>}
                     </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>}
         </>
     )
-})
\ No newline at end of file
+})
+
+//倒计时
+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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss
index fdef528..55096de 100644
--- a/src/pages/order/index.module.scss
+++ b/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;
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index 3a1f520..00b52ec 100644
--- a/src/pages/order/index.tsx
+++ b/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> }       
diff --git a/src/pages/salesAfter/components/orderState/index.module.scss b/src/pages/salesAfter/components/orderState/index.module.scss
index 90dbcbb..87a2757 100644
--- a/src/pages/salesAfter/components/orderState/index.module.scss
+++ b/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;
         }