优化底部按钮

This commit is contained in:
2022-07-14 17:59:22 +08:00
parent da7c834198
commit ed9f9420db
14 changed files with 99 additions and 598 deletions
+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>
)
})
+10 -5
View File
@@ -11,16 +11,17 @@ import { alert, goLink } from "@/common/common";
import {GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
import { debounce } from "@/common/util";
import { debounce, throttle } from "@/common/util";
import Counter from "../counter";
import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from "@/api/user";
import useCommonData from "@/use/useCommonData";
type param = {
show?: true|false,
onClose?: () => void
onClose?: () => void,
intoStatus?: 'again'|'shop',
}
export default ({show = false, onClose}: param) => {
export default ({show = false, onClose, intoStatus='shop'}: param) => {
const selectList = [
{value:0, title:'大货', unit:'条', eunit:'kg', step:1, digits:0, minNum:1, maxNum:100000, defaultNum:1},
{value:1,title:'剪板', unit:'米', eunit:'m', step:1, digits:2, minNum:0.5, maxNum:9.99, defaultNum:1},
@@ -227,7 +228,7 @@ export default ({show = false, onClose}: param) => {
//去结算
const {fetchData: useFetchData} = GetAdminUserInfoApi()
const {fetchData: applyOrderAccessFetchData} = ApplyOrderAccessApi()
const orderDetail = debounce( async () => {
const orderDetail = throttle( async () => {
let res = await useFetchData()
if(res.data.order_access_status !== 3) {
if(res.data.order_access_status == 1) applyOrderAccessFetchData()
@@ -259,7 +260,11 @@ export default ({show = false, onClose}: param) => {
let ids = selectIds.current.join('-')
setParam({ids, sale_mode:selectIndex}) //临时存储
closePopup()
goLink('/pages/order/comfirm')
if(intoStatus == "again") {
goLink('/pages/order/comfirm', {}, 'redirectTo')
} else {
goLink('/pages/order/comfirm')
}
}
}, 500)