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

剪板流程-倒计时完成

Browse Source
This commit is contained in:
czm 2022-06-14 20:31:34 +08:00
parent b31fc6842d
commit 21447c6a67
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -10,7 +10,8 @@ type List = {
status: string, status: string,
time: string, time: string,
tag: string, tag: string,
desc: string desc: string,
expire_time: string
} }
type Param = { type Param = {
@ -19,13 +20,12 @@ type Param = {
logistics_details:List[], //订单状态列表 logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式 payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
status: number, //订单状态 status: number, //订单状态
expire_time: number
} }
} }
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0, expire_time:0}, onRefresh}:Param) => { export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
const [showMore, setShowMore] = useState(false) const [showMore, setShowMore] = useState(false)
const changeMore = () => { const changeMore = () => {
@ -46,23 +46,24 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
//倒计时 //倒计时
const [showTime, setShowTime] = useState('')
const timeObj:any = useRef() const timeObj:any = useRef()
useEffect(() => { useEffect(() => {
if(orderInfo.expire_time) { if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
let expire_time = orderInfo.logistics_details[0].expire_time
timeObj.current = setInterval(() => { timeObj.current = setInterval(() => {
count_down() count_down(expire_time)
}, 1000) }, 1000)
} }
return () => { return () => {
clearInterval(timeObj.current) clearInterval(timeObj.current)
} }
}, [orderInfo.expire_time]) }, [orderInfo])
const count_down = () => { const count_down = (time) => {
var startData = dayjs(); var startData = dayjs();
var endDate = dayjs(orderInfo.expire_time); var endDate = dayjs(time);
console.log('endDate::', endDate.format('YYYY-MM-DD HH:mm'))
var _dd = endDate.diff(startData,'day'); var _dd = endDate.diff(startData,'day');
var _hh = endDate.diff(startData,'hour'); var _hh = endDate.diff(startData,'hour');
var _mm = endDate.diff(startData,'minute'); var _mm = endDate.diff(startData,'minute');
@ -71,7 +72,7 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
var hh = _hh - (_dd*24); var hh = _hh - (_dd*24);
var mm = _mm - (_hh*60); var mm = _mm - (_hh*60);
var ss = _ss - (_mm*60); var ss = _ss - (_mm*60);
console.log(`${_dd} ${hh} ${mm} ${ss}`) setShowTime(() => ` ${hh}:${mm}:${ss}`)
} }
return ( return (
@ -88,7 +89,7 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat
</View> </View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text> <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)&&<View className={styles.pay_time}>
剩<Text>23:58:55</Text>支付关闭，订单自动取消 剩<Text>{showTime}</Text>支付关闭，订单自动取消
</View>} </View>}
</View>)} </View>)}
</View> </View>

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

@ -190,7 +190,7 @@ import styles from './index.module.scss'
return ( return (
<View className={styles.order_main}> <View className={styles.order_main}>
<OrderState orderInfo={{logistics_details:orderDetail?.logistics_details, payment_method: orderDetail?.payment_method, status:orderDetail?.status, expire_time:orderDetail?.expire_time}}/> <OrderState orderInfo={{logistics_details:orderDetail?.logistics_details, payment_method: orderDetail?.payment_method, status:orderDetail?.status}}/>
<View > <View >
<AddressInfoDetail orderInfo={addressInfoDetailData} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} /> <AddressInfoDetail orderInfo={addressInfoDetailData} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} />
</View> </View>