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

订单售后_售后详情

Browse Source
This commit is contained in:
cheng
2022-06-20 20:31:17 +08:00
parent 6e08416ba0
commit 09e61e0779
22 changed files with 802 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/salesAfter/components/orderState/index.module.scss
+35
View File
@@ -43,6 +43,7 @@
.order_status_content{
display: flex;
align-items: center;
padding: 0 30px;
.order_status_title{
color: $color_font_two;
font-size: $font_size;
@@ -74,6 +75,24 @@
.order_status_des_select{
color: $color_font_one;
}
.pay_time{
height: 56px;
background: #f6f6f6;
border-radius: 20px;
color: #3C3C3C;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-top: 20px;
text{
font-size: 28px;
color: $color_main;
padding: 0 10px;
}
}
}
.more{
width: 100%;
@@ -101,4 +120,20 @@
top: -10px;
right: -10px;
}
.refresh{
position: absolute;
top: 23px;
right: 20px;
display: flex;
color: #707070;
display: flex;
align-items: center;
.mconfont{
font-size: 30px;
}
.refresh_text{
font-size: 23px;
}
}
}
src/pages/salesAfter/components/orderState/index.tsx
+95 -26
View File
@@ -1,42 +1,59 @@
import { Image, Text, View } from "@tarojs/components"
import { memo, useMemo, useState } from "react"
import { memo, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import * as dayjs from 'dayjs'
type Param = {
list: {
status: string,
time: string,
tag: string,
desc: string
}[],
payment_method: 0|PAYMENT_METHOD_PARAM,
type List = {
status: string,
time: string,
tag: string,
desc: string,
expire_time: string
}
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
status: number, //订单状态
}
}
export default memo(({list = [], payment_method = 0}:Param) => {
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
const dataList = useMemo(() => {
return list.reverse()
}, [list])
return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
}, [orderInfo.logistics_details])
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
//获取预付款最后时间
const endTime = useMemo(() => {
if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
return orderInfo.logistics_details[0].expire_time
}
return ''
}, [orderInfo])
return (
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
@@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<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)&&<CountDown onFinish={onRefresh} endTime={endTime}/>}
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.refresh} onClick={onRefresh}>
<Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>}
</View>}
</>
)
})
})
//倒计时
const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => {
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)
onFinish?.()
setShowTime(() => '00:00:00')
return false
}
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||'--:--:--'}</Text>支付关闭，订单自动取消
</View>
</>
)
}