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

🐞 fix(通用组件):修复组件展示更多按钮

Browse Source
This commit is contained in:
Haiyi 2022-12-27 11:57:07 +08:00
parent ea46a9cf92
commit 71fdd5ff80
3 changed files with 328 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/BottomBtns/index.tsx
View File

@ -1,5 +1,6 @@
import { View } from '@tarojs/components'
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import style from './index.module.scss'
interface prosObj {
@ -158,55 +159,147 @@ const BottomBtns = (props: prosObj, ref) => {
}, [obj])
// 多的不显示别的按钮
// const currentNums = useRef<any>({ nums: 0 })
const [btnList, setbtnList] = useState<any[]>([])
const itemNums = useMemo(() => {
const arr: any[] = []
let nums = 0
if (showTake) {
nums = nums + 1
}
if (showCancel) {
nums = nums + 1
console.log('222')
arr.push({
key: 'showCancel',
label: '取消订单',
bgKind: 1,
sort: 1,
})
}
if (canBuy) {
nums = nums + 1
console.log('333')
arr.push({
key: 'canBuy',
label: '去付款',
bgKind: 2,
sort: 20,
})
}
if (showBuy) {
nums = nums + 1
console.log('444')
arr.push({
key: 'showBuy',
label: '再次购买',
bgKind: 3,
sort: 10,
})
}
if (showTake) {
nums = nums + 1
console.log('111')
arr.push({
key: 'showTake',
label: '确认收货',
bgKind: 1,
sort: 9,
})
}
if (showCodeList) {
nums = nums + 1
console.log('555')
arr.push({
key: 'showCodeList',
label: '销售码单',
bgKind: 1,
sort: 12,
})
}
if (showTuikuan) {
nums = nums + 1
console.log('666')
arr.push({
key: 'showTuikuan',
label: '申请退款',
bgKind: 3,
sort: 3,
})
}
if (showTuihuo) {
nums = nums + 1
console.log('777')
arr.push({
key: 'showTuihuo',
label: '申请退货',
bgKind: 3,
sort: 2,
})
}
console.log(arr, 'arr')
const fiterArr = arr.sort((a, b) => a.sort - b.sort)
setbtnList([...fiterArr])
return nums
}, [obj])
useImperativeHandle(ref, () => ({
itemNums,
btnList,
}))
const submitBtns = (e, key) => {
if (key === 'showTuihuo') {
handApplyGoods?.()
}
if (key === 'showTuikuan') {
handApplyMoney?.()
}
if (key === 'showCodeList') {
handShowCodeList?.()
}
if (key === 'showTake') {
handSureGoods?.()
}
if (key === 'showCancel') {
cancle?.(e)
}
if (key === 'showBuy') {
nextBuy?.(e)
}
if (key === 'canBuy') {
toPay?.(e)
}
}
return (
<View className={style.flexBox}>
{
(showTuihuo && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>申请退货</View>
(showDetail || showTuiGoods) && <>
{
btnList.map((item, index) =>
btnList.length - 3 <= index && (
<View key={index} className={classnames(item.bgKind === 1 ? style.cancle : item.bgKind === 2 ? style.toBuy : style.nextBuy)} onClick={e => submitBtns(e, item.key)}>
{item.label}
</View>
),
)
}
</>
}
{
(showTuikuan && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>申请退款</View>
!showDetail && !showTuiGoods && <>
{
showCancel && <View className={style.cancle} onClick={e => cancle?.(e)}>取消订单</View>
}
{
showBuy && <View className={style.nextBuy} onClick={e => nextBuy?.(e)}>再次购买</View>
}
{
canBuy && <View className={style.toBuy} onClick={e => toPay?.(e)}>去付款</View>
}
</>
}
{
(showCodeList && showDetail) && <View className={style.cancle} onClick={() => handShowCodeList?.()}>销售码单</View>
}
{
showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}>确认收货</View>
}
{
showCancel && <View className={style.cancle} onClick={e => cancle?.(e)}>取消订单</View>
}
{
showBuy && <View className={style.nextBuy} onClick={e => nextBuy?.(e)}>再次购买</View>
}
{
canBuy && <View className={style.toBuy} onClick={e => toPay?.(e)}>去付款</View>
}
</View>
)
}

217
src/pages/orderDetails/components/BottomApply/index.tsx
View File

@ -14,6 +14,10 @@ interface prosObj {
}
handApplyGoods?: () => void
handApplyMoney?: () => void
nextBuy?: (any) => void
handSureGoods?: (any) => void
handShowCodeList?: (any) => void
cancle?: (any) => void
goodsObj?: any
// handSureGoods?: () => void,
}
@ -29,7 +33,11 @@ const BottomApply = (props: prosObj) => {
},
handApplyGoods,
handApplyMoney,
handSureGoods,
cancle,
handShowCodeList,
goodsObj = {},
nextBuy,
// handSureGoods
} = props
@ -66,24 +74,215 @@ const BottomApply = (props: prosObj) => {
else { return false }
}, [obj])
return (
< >
// 判断显示再次购买
const showBuy = useMemo(() => {
if (
obj.sale_mode === 0
|| (obj.sale_mode === 1 && obj.status !== 10)
|| (obj.sale_mode === 2 && obj.status !== 10)
) {
return true
}
else { return false }
}, [obj])
// 判断显示确认收货
const showTake = useMemo(() => {
if (
(obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 1)
|| (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 2)
|| (obj.sale_mode === 0 && obj.status == 8 && obj.settle_mode == 3)
|| (obj.sale_mode === 1 && obj.status == 8)
|| (obj.sale_mode === 2 && obj.status == 8)
) {
return true
}
else { return false }
}, [obj])
// 判断是否显示码单
// 订单状态：待付款、待发货、待提货、待收货、已收货、已完成
const showCodeList = useMemo(() => {
if (obj.status == 3 || obj.status == 8 || obj.status == 11 || obj.status == 9 || obj.status == 4) {
return true
}
else { return false }
}, [obj])
// 判断显示取消订单
const showCancel = useMemo(() => {
if (
(obj.sale_mode === 0 && obj.status === 0)
|| (obj.sale_mode === 0 && obj.status === 1)
|| (obj.sale_mode === 0 && obj.status === 2 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status === 11 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status === 11 && obj.settle_mode == 3)
|| (obj.sale_mode === 0 && obj.status === 3 && obj.settle_mode == 3)
|| (obj.sale_mode === 1 && obj.status === 10)
|| (obj.sale_mode === 2 && obj.status === 10)
|| (obj.sale_mode === 2 && obj.status === 0 && (obj.collect_status == 1 || obj.collect_status == 2))
|| (obj.sale_mode === 2 && obj.status === 0 && obj.collect_status == 0)
|| (obj.sale_mode === 1 && obj.status === 10)
|| (obj.sale_mode === 2 && obj.status === 10)
|| (obj.sale_mode === 0 && obj.status === 13)
) {
return true
}
else { return false }
}, [obj])
// 判断显示去付款
const canBuy = useMemo(() => {
if (
(obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1)
|| (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status === 7 && obj.settle_mode == 3)
|| (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1)
|| (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 1)
|| (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 0)
|| (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 1)
|| (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 0)
|| (obj.sale_mode === 2 && obj.status === 2)
|| (obj.sale_mode === 2 && obj.status === 7)
|| (obj.sale_mode === 1 && obj.status === 10)
|| (obj.sale_mode === 2 && obj.status === 10)
) {
return true
}
else { return false }
}, [obj])
const [btnList, setbtnList] = useState<any[]>([])
useMemo(() => {
const arr: any[] = []
let nums = 0
if (showCancel) {
nums = nums + 1
arr.push({
key: 'showCancel',
label: '取消订单',
bgKind: 1,
sort: 1,
})
}
if (canBuy) {
nums = nums + 1
arr.push({
key: 'canBuy',
label: '去付款',
bgKind: 2,
sort: 20,
})
}
if (showBuy) {
nums = nums + 1
arr.push({
key: 'showBuy',
label: '再次购买',
bgKind: 3,
sort: 10,
})
}
if (showTake) {
nums = nums + 1
arr.push({
key: 'showTake',
label: '确认收货',
bgKind: 1,
sort: 9,
})
}
if (showCodeList) {
nums = nums + 1
arr.push({
key: 'showCodeList',
label: '销售码单',
bgKind: 1,
sort: 12,
})
}
if (showTuikuan) {
nums = nums + 1
arr.push({
key: 'showTuikuan',
label: '申请退款',
bgKind: 3,
sort: 3,
})
}
if (showTuihuo) {
nums = nums + 1
arr.push({
key: 'showTuihuo',
label: '申请退货',
bgKind: 3,
sort: 2,
})
}
const fiterArr = arr.sort((a, b) => a.sort - b.sort)
setbtnList([...fiterArr])
return nums
}, [obj])
const submitBtns = (e, key) => {
if (key === 'showTuihuo') {
handApplyGoods?.()
}
if (key === 'showTuikuan') {
handApplyMoney?.()
}
if (key === 'showCodeList') {
handShowCodeList?.(e)
}
if (key === 'showTake') {
handSureGoods?.(e)
}
if (key === 'showCancel') {
cancle?.(e)
}
if (key === 'showBuy') {
nextBuy?.(e)
}
// if (key === 'canBuy') {
// toPay?.(e)
// }
}
return (
<>
{/* {
showBuy && <View className={styles.title} onClick={e => nextBuy?.(e)}>再次购买</View>
}
{
showTuihuo && <View className={styles.title} onClick={() => handApplyGoods?.()}>申请退货</View>
}
{
showTuikuan && <View className={styles.tuikuan} onClick={() => handApplyMoney?.()}>申请退款</View>
showTake && <View className={styles.title} onClick={e => handSureGoods?.(e)}>确认收货</View>
}
{
showTuikuan && <View className={styles.title} onClick={() => handApplyMoney?.()}>申请退款</View>
}
{
showCodeList && <View className={styles.title} onClick={e => handShowCodeList?.(e)}>销售码单</View>
}
{/*
{
showTake && <View className={styles.tuikuan} onClick={() => handSureGoods?.()}>确认收货</View>
} */}
{
!showTuihuo && !showTuikuan && <View className={styles.title} >暂无更多</View>
!showTuihuo && !showTuikuan && !showBuy && <View className={styles.title} >暂无更多</View>
} */}
{
btnList.map((item, index) =>
index < btnList.length - 3 && (
<View key={index} className={styles.title} onClick={e => submitBtns(e, item.key)}>
{item.label}
</View>
),
)
}
</>
)

6
src/pages/orderDetails/index.tsx
View File

@ -735,7 +735,7 @@ const OrderDetails = () => {
const [showOther, setshowOther] = useState(false)
useMemo(() => {
Taro.nextTick(() => {
if (BottomBtnsRef.current?.itemNums >= 4) {
if (BottomBtnsRef.current?.btnList.length > 3) {
setshowOther(true)
return true
}
@ -874,6 +874,10 @@ const OrderDetails = () => {
goodsObj={infoObj}
handApplyGoods={() => handApplyGood?.()}
handApplyMoney={() => handApplyMoney?.()}
nextBuy={e => nextBuy?.(e, infoObj)}
handSureGoods={() => handSureGoods?.()}
handShowCodeList={() => handShowCodeList?.()}
cancle={e => cancle?.(e, infoObj)}
></BottomApply>
</View>
}