xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

剪板流程-倒计时

Browse Source
This commit is contained in:
czm 2022-06-15 11:05:51 +08:00
parent 21447c6a67
commit cc7bcfe83c
4 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/pages/order/components/orderState/index.tsx
View File

@ -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>}
</>
)
})
})
//倒计时
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>
</>
)
}

5
src/pages/order/index.module.scss
View File

@ -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;

2
src/pages/order/index.tsx
View File

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

1
src/pages/salesAfter/components/orderState/index.module.scss
View File

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