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

优化底部按钮

Browse Source
This commit is contained in:
cheng
2022-07-14 17:59:22 +08:00
parent da7c834198
commit ed9f9420db
14 changed files with 99 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/orderBtns/index.tsx
+76 -60
View File
@@ -20,7 +20,7 @@ type Param = {
sale_mode: number, //订单类型
av_return_roll?: number, //可退数量
}|null,
},
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}
@@ -48,91 +48,108 @@ export default memo(({orderInfo, onClick}:Param) => {
} = SALE_MODE
//注册按钮
const orderBtnsList = useRef([
type orderBtnsListParams = {id: number, label: string, validatarFunc: (val: typeof orderInfo) => any}
const orderBtnsList = useRef<orderBtnsListParams[]>([
{
id: 1,
value: [
SaleorderstatusWaitingPrePayment.value,
SaleOrderStatusBooking.value,
SaleOrderStatusArranging.value,
SaleOrderStatusArranged.value,
SaleOrderStatusWaitingPayment.value,
SaleOrderStatusTaking.value,
SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货, 提货中
label: '取消订单',
validatarFunc: (orderInfo) => {
//在待发货之前没有付过款
let orderStatus = [
SaleorderstatusWaitingPrePayment.value,
SaleOrderStatusBooking.value,
SaleOrderStatusArranging.value,
SaleOrderStatusArranged.value,
SaleOrderStatusWaitingPayment.value,
SaleOrderStatusTaking.value,
SaleOrderStatusWaitingDelivery.value
]
return orderInfo.actual_amount == 0 && orderStatus.includes(orderInfo.status)
}
},
{
id: 3,
value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中
label: '申请退款'
label: '申请退款',
validatarFunc: (orderInfo) => {
//大货在待发货付过款
let orderStatus = [
SaleOrderStatusWaitingDelivery.value,
SaleOrderStatusTaking.value
]
return orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && orderInfo.av_return_roll && orderStatus.includes(orderInfo.status)
}
},
// {
// id: 4,
// value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
// label: '查看物流'
// },
{
id: 5,
value: [SaleOrderStatusAlreadyReceipt.value], //申请退货按钮对应：已收货
label: '申请退货'
label: '申请退货',
validatarFunc: (orderInfo) => {
let orderStatus = [
SaleOrderStatusAlreadyReceipt.value,
]
return orderInfo&&orderStatus.includes(orderInfo.status)
}
},
{
id: 6,
value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货
label: '确认收货'
label: '确认收货',
validatarFunc: (orderInfo) => {
let orderStatus = [
SaleOrderStatusWaitingReceipt.value
]
return orderStatus.includes(orderInfo.status)
}
},
{
id: 7,
value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款
label: '再次购买'
label: '再次购买',
validatarFunc: () => {
return true
}
},
{
id: 8,
value: [SaleOrderStatusBooking.value], //按钮对应： 待接单
label: '退款'
label: '退款',
validatarFunc: (orderInfo) => {
//散剪和剪板在待接单时付过款
let orderStatus = [
SaleOrderStatusBooking.value
]
return orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && orderStatus.includes(orderInfo.status)
}
},
{
id: 9,
value: [SaleOrderStatusRefund.value], //售后记录按钮：已退款
label: '售后记录'
label: '售后记录',
validatarFunc: (orderInfo) => {
let orderStatus = [
SaleOrderStatusRefund.value
]
return orderInfo&&orderStatus.includes(orderInfo.status)
}
},
{
id: 2,
value: [SaleOrderStatusTaking.value, SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
label: '去付款'
},
])
//判断是否显示该按钮
const orderBtnsShow = (item) => {
if(orderInfo) {
if(item.id == 1) {
//取消订单按钮
return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款
} else if (item.id == 2) {
//去付款按钮
return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示
} else if(item.id == 3 ) {
//申请退款, 只有大货才有
return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && orderInfo.av_return_roll && item.value.includes(orderInfo.status)) //大货在待发货付过款
} else if( item.id == 8) {
//退款按钮（直接退款不用申请）, 只有散剪和剪板有
return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款
} else if (item.id == 7) {
return true //再次购买按钮一直存在
} else {
//其他按钮
return item.value.includes(orderInfo.status)
label: '去付款',
validatarFunc: (orderInfo) => {
//只要没有付完款就显示
let orderStatus = [
SaleOrderStatusTaking.value,
SaleorderstatusWaitingPrePayment.value,
SaleOrderStatusWaitingPayment.value,
SaleOrderStatusWaitingDelivery.value,
SaleOrderStatusWaitingReceipt.value,
SaleOrderStatusAlreadyReceipt.value,
SaleOrderStatusComplete.value
]
return orderInfo.wait_pay_amount != 0 && orderStatus.includes(orderInfo.status)
}
}
}
},
])
//显示的按钮数组
const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => {
const orderBtnsShowList: orderBtnsListParams[] = useMemo(() => {
return orderBtnsList.current.filter(item => {
return orderBtnsShow(item)
return item.validatarFunc(orderInfo)
})
}, [orderInfo])
@@ -257,7 +274,7 @@ export default memo(({orderInfo, onClick}:Param) => {
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
})}
</View>
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
</View>}
</View>}
@@ -266,7 +283,6 @@ export default memo(({orderInfo, onClick}:Param) => {
(index < 3)&&<View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
)}
</View>
</View>
)
})