剪板流程
This commit is contained in:
@@ -1,8 +1,57 @@
|
||||
.btns_list{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
// margin-top: 30px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
.more{
|
||||
font-size: 28px;
|
||||
width: 143px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $color_font_two;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
.more_list{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
width: 226px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06);
|
||||
border-radius: 10px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
z-index:999;
|
||||
&::before{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 50px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
content: " ";
|
||||
transform: rotate(45deg);
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
|
||||
}
|
||||
.more_item{
|
||||
font-size: 28px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
&:nth-last-child(n+2) {
|
||||
border-bottom: 1PX solid #F0F0F0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more_bg{
|
||||
position:fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.scroll{
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
@@ -14,7 +63,7 @@
|
||||
}
|
||||
.btns_item{
|
||||
padding: 0 15px;
|
||||
width: 100px;
|
||||
width: 130px;
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 38px;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
|
||||
import { alert } from "@/common/common"
|
||||
import { ORDER_STATUS } from "@/common/enum"
|
||||
import { ScrollView, View } from "@tarojs/components"
|
||||
import { ScrollView, Text, View } from "@tarojs/components"
|
||||
import Taro from "@tarojs/taro"
|
||||
import { useCallback, useRef, memo, useState, useEffect } from "react"
|
||||
import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Param = {
|
||||
@@ -30,7 +30,7 @@ export default memo(({orderInfo, onClick}:Param) => {
|
||||
SaleOrderStatusAlreadyReceipt,
|
||||
SaleorderstatusWaitingPrePayment
|
||||
} = ORDER_STATUS
|
||||
//订单按钮按订单状态归类
|
||||
//订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现
|
||||
const orderBtnsList = useRef([
|
||||
{
|
||||
id: 1,
|
||||
@@ -66,12 +66,17 @@ export default memo(({orderInfo, onClick}:Param) => {
|
||||
id: 7,
|
||||
value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
|
||||
label: '再次购买'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: [SaleOrderStatusBooking.value], //按钮对应： 待接单
|
||||
label: '退款'
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
//判断是否显示该按钮
|
||||
const orderBtnsShow = useCallback((item) => {
|
||||
const orderBtnsShow = (item) => {
|
||||
if(orderInfo) {
|
||||
if(item.id == 1) {
|
||||
//取消订单按钮
|
||||
@@ -87,11 +92,19 @@ export default memo(({orderInfo, onClick}:Param) => {
|
||||
return item.value.includes(orderInfo.status)
|
||||
}
|
||||
}
|
||||
},[orderInfo])
|
||||
}
|
||||
|
||||
//显示的按钮数组
|
||||
const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter(item => {
|
||||
return orderBtnsShow(item)
|
||||
})
|
||||
}, [orderInfo])
|
||||
|
||||
|
||||
|
||||
//点击按钮操作
|
||||
const submitBtns = (val, index) => {
|
||||
clickEvent(val, index);
|
||||
(val == 1)&&cancelOrder(); //取消订单按钮
|
||||
(val == 2)&&onClick?.(2); //去付款按钮
|
||||
(val == 6)&&receiveOrder(); //确认收货
|
||||
@@ -140,28 +153,32 @@ export default memo(({orderInfo, onClick}:Param) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
//按钮点击滚动
|
||||
const [selectInfo, setSelectInfo] = useState({
|
||||
selected: -1, //当前选中的id
|
||||
tabId: '', //需要滚动到的id
|
||||
})
|
||||
const clickEvent = (id, index) => {
|
||||
console.log(id, index)
|
||||
const num = index > 0?( index - 1) : 0
|
||||
console.log('num::',orderBtnsList.current[num].id)
|
||||
setSelectInfo((e) => ({...e, tabId:orderBtnsList.current[num].id.toString(), selected: id}))
|
||||
}
|
||||
|
||||
//显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
|
||||
}, [orderBtnsShowList])
|
||||
|
||||
return (
|
||||
<View className={styles.btns_list}>
|
||||
<ScrollView scrollX scrollIntoView={`orderBtns_${selectInfo.tabId}`} scrollWithAnimation={true} className={styles.scroll}>
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsList.current.map((item, index) =>
|
||||
orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||
// <View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(true)}>更多</Text>
|
||||
{showMore&&<View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
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>}
|
||||
</View>}
|
||||
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user