662 lines
25 KiB
TypeScript
662 lines
25 KiB
TypeScript
import { View, Input, Button, Image, Text, Textarea } from '@tarojs/components'
|
||
import { useCallback, useEffect, useMemo, useRef, useState, ReactNode, memo } from 'react'
|
||
import styles from "./index.module.scss"
|
||
import classnames from "classnames";
|
||
import Taro, { faceVerifyForPay, useDidShow, useRouter } from '@tarojs/taro'
|
||
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
|
||
import {
|
||
mpsaleOrder,
|
||
mpenumreturnOrderreturnReason,
|
||
mpenumreturnExplain,
|
||
mpenumreturngoodsStatus,
|
||
mpreturnApplyOrder
|
||
} from "@/api/order"
|
||
import Popup from '@/components/popup'
|
||
import UploadImage from '@/components/uploadImage'
|
||
|
||
export default () => {
|
||
|
||
const router = useRouter()
|
||
useDidShow(() => {
|
||
getDetail()
|
||
})
|
||
const { fetchData: infoFetch } = mpsaleOrder()
|
||
const [infoObj, setInfoObj] = useState<any>({})
|
||
const [ListArr, setListArr] = useState<any[]>([])
|
||
//获取订单详情
|
||
const getDetail = async () => {
|
||
Taro.showLoading({
|
||
title: '请稍等...',
|
||
mask: true
|
||
})
|
||
const res = await infoFetch({ id: router.params.orderId })
|
||
if (res.data) {
|
||
res.data.av_return_product.forEach(item => {
|
||
item.av_product_color.map(it => {
|
||
it.isTui = false
|
||
it.nums = 1
|
||
})
|
||
return item
|
||
})
|
||
setListArr(res.data.av_return_product)
|
||
setInfoObj(res.data)
|
||
Taro.hideLoading()
|
||
}
|
||
}
|
||
|
||
//点击退货
|
||
const handTui = (val) => {
|
||
let res = ListArr
|
||
res.forEach(item => {
|
||
item.av_product_color?.map(it => {
|
||
if (it.sale_order_detail_id == val.sale_order_detail_id) {
|
||
it.isTui = true
|
||
}
|
||
return it
|
||
})
|
||
|
||
})
|
||
setListArr([...res])
|
||
|
||
}
|
||
//点击取消退货
|
||
const handCancel = (val) => {
|
||
ListArr.forEach(item => {
|
||
item.av_product_color.map(it => {
|
||
if (it.sale_order_detail_id === val.sale_order_detail_id) {
|
||
it.isTui = false
|
||
}
|
||
return it
|
||
})
|
||
})
|
||
setListArr([...ListArr])
|
||
}
|
||
|
||
//点击减
|
||
const handReduce = (val) => {
|
||
ListArr.forEach(item => {
|
||
item.av_product_color.map(it => {
|
||
if (it.sale_order_detail_id === val.sale_order_detail_id) {
|
||
if (val.nums === 1) {
|
||
// it.isTui = false
|
||
it.nums = 1
|
||
} else {
|
||
it.nums--
|
||
}
|
||
}
|
||
return it
|
||
})
|
||
})
|
||
setListArr([...ListArr])
|
||
}
|
||
|
||
const onInputEven = (e, val) => {
|
||
ListArr.forEach(item => {
|
||
item.av_product_color.map(it => {
|
||
if (it.sale_order_detail_id === val.sale_order_detail_id) {
|
||
if (Number(e.detail.value) < 1) {
|
||
it.nums = ''
|
||
} else {
|
||
it.nums = Number(e.detail.value)
|
||
}
|
||
if (Number(e.detail.value) > it.roll) {
|
||
it.nums = 1
|
||
}
|
||
}
|
||
return it
|
||
})
|
||
})
|
||
setListArr([...ListArr])
|
||
}
|
||
|
||
|
||
const onBlur = (e, val) => {
|
||
ListArr.forEach(item => {
|
||
item.av_product_color.map(it => {
|
||
if (it.sale_order_detail_id === val.sale_order_detail_id) {
|
||
if (Number(e.detail.value) < 1 || e.detail.value == '') {
|
||
it.isTui = false
|
||
it.nums = 1
|
||
} else {
|
||
it.nums = Number(e.detail.value)
|
||
}
|
||
if (Number(e.detail.value) > it.roll) {
|
||
it.nums = 1
|
||
}
|
||
}
|
||
return it
|
||
})
|
||
})
|
||
setListArr([...ListArr])
|
||
}
|
||
|
||
//点击加
|
||
const handAdd = (val) => {
|
||
ListArr.forEach(item => {
|
||
item.av_product_color.map(it => {
|
||
if (it.sale_order_detail_id === val.sale_order_detail_id) {
|
||
if (it.nums < it.roll) {
|
||
it.nums++
|
||
} else {
|
||
return
|
||
}
|
||
}
|
||
return it
|
||
})
|
||
})
|
||
setListArr([...ListArr])
|
||
}
|
||
|
||
const totalNums = useMemo(() => {
|
||
const arr: any[] = []
|
||
ListArr.forEach(item => {
|
||
item.av_product_color.forEach(it => {
|
||
if (it.isTui) {
|
||
arr.push(it)
|
||
}
|
||
})
|
||
})
|
||
return arr.length
|
||
}, [ListArr])
|
||
|
||
|
||
//获取图片列表
|
||
const picUrl = useRef([])
|
||
const getImageList = useCallback((list) => {
|
||
picUrl.current = list
|
||
}, [])
|
||
|
||
|
||
|
||
|
||
//筛选内容展示
|
||
const [showPopup, setshowPopup] = useState(false)
|
||
|
||
useEffect(() => {
|
||
getReason()
|
||
getReasonTwo()
|
||
}, [])
|
||
|
||
|
||
|
||
const queryRef = useRef(
|
||
{
|
||
return_reason: 1,//退货原因
|
||
return_explain: '',//退货理由
|
||
reasonName: '请选择',
|
||
reasonNameTwo: '请选择',
|
||
GoodStatus: '',
|
||
GoodStatusName: "请选择"
|
||
}
|
||
)
|
||
const [Query, setQuery] = useState<any>({
|
||
// reason_describe: '',//描述说明
|
||
return_reason: 1,//退货原因
|
||
reasonName: '请选择',
|
||
reasonNameTwo: '请选择',
|
||
return_explain: '',//退货理由
|
||
GoodStatus: '',
|
||
GoodStatusName: "请选择"
|
||
// goods_status: '',//货物状况
|
||
// fabric_piece_accessory_url:[],//退货图片
|
||
// sale_order_id:infoObj.id,//详情id
|
||
})
|
||
|
||
//判断是否允许提交
|
||
const isDisabled = useMemo(() => {
|
||
console.log(Query, 8888)
|
||
if (Query.GoodStatus !== '' &&
|
||
Query.return_explain !== '' &&
|
||
totalNums > 0 &&
|
||
Query.GoodStatus !== ''
|
||
) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}, [Query])
|
||
|
||
///获取退货原因
|
||
const { fetchData: resonFetch } = mpenumreturnOrderreturnReason()
|
||
const [ReasonList, setReasonList] = useState<any[]>([])
|
||
const getReason = async () => {
|
||
const res = await resonFetch()
|
||
if (res.data) {
|
||
setReasonList(res.data.list)
|
||
}
|
||
}
|
||
|
||
//获取退货原因2
|
||
const { fetchData: resonTwoFetch } = mpenumreturnExplain()
|
||
const [ReasonListTwo, setReasonListTwo] = useState<any[]>([])
|
||
const getReasonTwo = async () => {
|
||
const res = await resonTwoFetch({ return_reason: queryRef.current.return_reason })
|
||
if (res.data) {
|
||
setReasonListTwo(res.data.list)
|
||
}
|
||
}
|
||
|
||
//选择退货原因
|
||
const handReasonOne = (item) => {
|
||
ReasonList.map(it => {
|
||
if (it.id === item.id) {
|
||
it.default = true
|
||
} else {
|
||
it.default = false
|
||
}
|
||
return it
|
||
})
|
||
setQuery((val) => ({ ...val, return_reason: item.id, return_explain: '' }))
|
||
queryRef.current.return_reason = item.id
|
||
// queryRef.current.reasonName = item.name
|
||
setReasonList([...ReasonList])
|
||
getReasonTwo()
|
||
}
|
||
|
||
//选择退货理由
|
||
const handReasonTwo = (item) => {
|
||
ReasonListTwo.map(it => {
|
||
if (it.id === item.id) {
|
||
it.default = true
|
||
} else {
|
||
it.default = false
|
||
}
|
||
return it
|
||
})
|
||
setReasonListTwo([...ReasonListTwo])
|
||
// queryRef.current.reasonNameTwo = item.name
|
||
setQuery((val) => ({ ...val, return_explain: item.id }))
|
||
|
||
// queryRef.current.return_explain = item.id
|
||
}
|
||
|
||
//重置
|
||
const handReset = () => {
|
||
queryRef.current.return_reason = 1
|
||
queryRef.current.return_explain = ''
|
||
queryRef.current.reasonName = '请选择'
|
||
queryRef.current.reasonNameTwo = '请选择'
|
||
setQuery((val) => ({ ...val, return_reason: 1, return_explain: '', reasonName: '请选择', reasonNameTwo: '请选择' }))
|
||
getReasonTwo()
|
||
const arrOne = resetArr(ReasonList)
|
||
setReasonList([...arrOne])
|
||
const arrTwo = resetArr(ReasonListTwo)
|
||
setReasonListTwo([...arrTwo])
|
||
}
|
||
|
||
//数组重置
|
||
const resetArr = (arr) => {
|
||
arr.map(it => {
|
||
it.default = false
|
||
return it
|
||
})
|
||
return arr
|
||
}
|
||
|
||
//判断选择原因
|
||
const selectIsDisabled = useMemo(() => {
|
||
if (Query.return_explain !== '') {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}, [Query])
|
||
|
||
|
||
//确认选择退货原因
|
||
const handSlect = () => {
|
||
const resOne = ReasonList.filter(item => {
|
||
return item.default
|
||
})
|
||
queryRef.current.return_reason = resOne[0].id
|
||
queryRef.current.reasonName = resOne[0].name
|
||
const resTwo = ReasonListTwo.filter(item => {
|
||
return item.default
|
||
})
|
||
queryRef.current.return_explain = resTwo[0].id
|
||
queryRef.current.reasonNameTwo = resTwo[0].name
|
||
setQuery((val) => ({
|
||
...val,
|
||
reasonName: queryRef.current.reasonName,
|
||
reasonNameTwo: queryRef.current.reasonNameTwo
|
||
}))
|
||
setshowPopup(false)
|
||
}
|
||
|
||
//货物情况
|
||
const [DescPopup, setDescPopup] = useState(false)
|
||
const { fetchData: statusFetch } = mpenumreturngoodsStatus()
|
||
const [GoodStatusList, setGoodStatusList] = useState<any[]>([])
|
||
useEffect(() => {
|
||
getGoodStatus()
|
||
}, [])
|
||
const getGoodStatus = async () => {
|
||
const res = await statusFetch()
|
||
if (res.data) {
|
||
setGoodStatusList(res.data.list)
|
||
}
|
||
}
|
||
|
||
const handStatus = (item) => {
|
||
GoodStatusList.map(it => {
|
||
if (it.id === item.id) {
|
||
it.default = true
|
||
} else {
|
||
it.default = false
|
||
}
|
||
return it
|
||
})
|
||
setQuery((val) => ({ ...val, GoodStatus: item.id }))
|
||
setGoodStatusList([...GoodStatusList])
|
||
}
|
||
|
||
//判断状态是否有选
|
||
const StatusIsDisabled = useMemo(() => {
|
||
if (Query.GoodStatus !== '') {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}, [Query])
|
||
|
||
//重置货物状态
|
||
const handResetStatus = () => {
|
||
const arr = resetArr(GoodStatusList)
|
||
setGoodStatusList([...arr])
|
||
queryRef.current.GoodStatus = ''
|
||
queryRef.current.GoodStatusName = '请选择'
|
||
setQuery((val) => ({ ...val, GoodStatus: '', GoodStatusName: '请选择' }))
|
||
}
|
||
|
||
//确认选择货物状况
|
||
const handSlectStatus = () => {
|
||
const res = GoodStatusList.filter(item => {
|
||
return item.default
|
||
})
|
||
queryRef.current.GoodStatus = res[0].id
|
||
queryRef.current.GoodStatusName = res[0].name
|
||
setQuery((val) => ({ ...val, GoodStatus: queryRef.current.GoodStatus, GoodStatusName: queryRef.current.GoodStatusName }))
|
||
setDescPopup(false)
|
||
}
|
||
|
||
//取消返回
|
||
const handCancl = () => {
|
||
Taro.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
|
||
//确认退货
|
||
const { fetchData: sureFetch } = mpreturnApplyOrder()
|
||
const handSure = () => {
|
||
const arr: any = [];
|
||
ListArr.forEach((item) => {
|
||
item.av_product_color.forEach((it) => {
|
||
if (it.isTui) {
|
||
arr.push({
|
||
product_color_id: it.sale_mode == 0 ? it.product_color_id : '',
|
||
product_id: it.sale_mode == 0 ? it.product_id : '',
|
||
product_roll: it.sale_mode == 0 ? it.nums : 0,
|
||
sale_order_detail_id: it.sale_order_detail_id,
|
||
});
|
||
}
|
||
|
||
});
|
||
});
|
||
const query = {
|
||
reason_describe: TextareaValue,
|
||
fabric_piece_accessory_url: picUrl.current,
|
||
goods_status: Query.GoodStatus,
|
||
return_reason: Query.return_reason,
|
||
return_explain: Query.return_explain,
|
||
roll: 0,
|
||
roll_list: arr,
|
||
sale_order_id: Number(infoObj.id),
|
||
}
|
||
|
||
Taro.showModal({
|
||
content: "确认退货吗？",
|
||
confirmText: "确认",
|
||
cancelText: "取消",
|
||
success: async function (res) {
|
||
if (res.confirm) {
|
||
Taro.showLoading({
|
||
title: '请稍等...',
|
||
mask: true
|
||
})
|
||
const res = await sureFetch(query)
|
||
if (res?.msg === 'success') {
|
||
Taro.showToast({
|
||
title: '成功'
|
||
})
|
||
Taro.hideLoading()
|
||
handCancl()
|
||
} else {
|
||
Taro.hideLoading()
|
||
Taro.showToast({
|
||
title: res?.msg,
|
||
icon: 'error'
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
useEffect(() => {
|
||
setQuery(Query)
|
||
}, [Query])
|
||
|
||
//备注信息
|
||
const [TextareaValue, setTextareaValue] = useState('')
|
||
const getDesc = (e) => {
|
||
setTextareaValue(e)
|
||
}
|
||
return (
|
||
<View className={styles.main}>
|
||
<View className={styles.bgBox}>
|
||
<GoodsItem
|
||
list={ListArr}
|
||
obj={infoObj}
|
||
handTui={(item) => handTui(item)}
|
||
handCancel={(item) => handCancel(item)}
|
||
onBlur={(e, item) => onBlur(e, item)}
|
||
handReduce={(item) => handReduce(item)}
|
||
handAdd={(item) => handAdd(item)}
|
||
onInputEven={(e, item) => onInputEven(e, item)}
|
||
></GoodsItem>
|
||
<View className={styles.hasSelect}>汇总：已选{totalNums}种商品</View>
|
||
</View>
|
||
<View className={styles.resonBig}>
|
||
<View className={styles.reasonItem} onClick={() => { setshowPopup(true) }}>
|
||
<View className={styles.reasonLeft}>
|
||
<View className={styles.reasonFont}>退货原因</View>
|
||
<Text className={styles.xing}>*</Text>
|
||
{
|
||
queryRef.current.reasonName === '请选择' && <View className={styles.selectFont}>请选择</View>
|
||
}
|
||
{
|
||
queryRef.current.reasonName !== '请选择' && <View className={styles.selectFont}>{Query.reasonName}/{Query.reasonNameTwo}</View>
|
||
}
|
||
</View>
|
||
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
|
||
</View>
|
||
<View className={styles.reasonItem} onClick={() => { setDescPopup?.(true) }}>
|
||
<View className={styles.reasonLeft}>
|
||
<View className={styles.reasonFont}>货物情况</View>
|
||
<Text className={styles.xing}>*</Text>
|
||
{
|
||
queryRef.current.GoodStatusName === '请选择' && <View className={styles.selectFont}>请选择</View>
|
||
}
|
||
{
|
||
queryRef.current.GoodStatusName !== '请选择' && <View className={styles.selectFont}>{Query.GoodStatusName}</View>
|
||
}
|
||
</View>
|
||
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
|
||
</View>
|
||
<View className={styles.picBig}>
|
||
<View className={styles.picFont}>拍照上传</View>
|
||
<UploadImage onChange={getImageList} />
|
||
</View>
|
||
</View>
|
||
<View className={styles.descBox}>
|
||
<View className={styles.title}>其他说明</View>
|
||
<View className={styles.textBox}>
|
||
<Textarea
|
||
onInput={(e) => getDesc(e.detail.value)}
|
||
value={TextareaValue}
|
||
// style='background:#f6f6f6;height:210px;padding:15rpx 24rpx 24rpx 24rpx;border-radius: 8rpx;'
|
||
placeholderStyle='font-size: 28rpx;font-weight: 400;'
|
||
placeholder={'选填/退货说明中选择时（其他问题）必填'}
|
||
></Textarea>
|
||
</View>
|
||
</View>
|
||
<View className={styles.safeBox}>
|
||
<View className={styles.bottomBox}>
|
||
|
||
<Button className={styles.resetBox} onClick={() => { handCancl() }}> 取消</Button >
|
||
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认退货</Button >
|
||
</View>
|
||
</View>
|
||
<Popup title={'筛选情况'} show={showPopup} onClose={() => { setshowPopup?.(false) }}>
|
||
<View className={styles.popupBox}>
|
||
<View className={styles.thirdBox}>
|
||
<View className={styles.thirdTopfont}>退货原因</View>
|
||
<View className={styles.flexModebox}>
|
||
{
|
||
ReasonList.map((item, index) => {
|
||
return (
|
||
<View onClick={() => { handReasonOne(item) }} className={classnames(item.default ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
|
||
)
|
||
})
|
||
}
|
||
</View>
|
||
</View>
|
||
<View className={styles.thirdBox}>
|
||
<View className={styles.thirdTopfont}>退货理由</View>
|
||
<View className={styles.flexModebox}>
|
||
{
|
||
ReasonListTwo.map((item, index) => {
|
||
return (
|
||
<View onClick={() => { handReasonTwo(item) }} className={classnames(item.default ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
|
||
)
|
||
})
|
||
}
|
||
</View>
|
||
</View>
|
||
<View style={{ height: '100rpx' }}></View>
|
||
<View className={styles.bottomBox1}>
|
||
|
||
<Button className={styles.resetBox1} onClick={() => { handReset() }}> 重置</Button >
|
||
<Button className={classnames(selectIsDisabled ? styles.button1 : styles.activeButton1)} disabled={selectIsDisabled} onClick={() => handSlect()}> 确认</Button >
|
||
</View>
|
||
</View>
|
||
</Popup>
|
||
<Popup title={'筛选说明'} show={DescPopup} onClose={() => { setDescPopup?.(false) }}>
|
||
<View className={styles.popupBox}>
|
||
<View className={styles.thirdBox}>
|
||
<View className={styles.thirdTopfont}>货物情况</View>
|
||
<View className={styles.flexModebox}>
|
||
{
|
||
GoodStatusList.map((item, index) => {
|
||
return (
|
||
<View onClick={() => { handStatus(item) }} className={classnames(item.default ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
|
||
)
|
||
})
|
||
}
|
||
</View>
|
||
</View>
|
||
<View className={styles.safeBoxs} ></View>
|
||
<View className={styles.bottomBox1}>
|
||
|
||
<Button className={styles.resetBox1} onClick={() => { handResetStatus() }}> 重置</Button >
|
||
<Button className={classnames(StatusIsDisabled ? styles.button1 : styles.activeButton1)} disabled={StatusIsDisabled} onClick={() => handSlectStatus()}> 确认</Button >
|
||
</View>
|
||
</View>
|
||
</Popup>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
//产品商品元素
|
||
interface PropGoods {
|
||
list: any[],
|
||
obj: {
|
||
sale_mode?: number | string
|
||
},
|
||
handTui?: (any) => void,
|
||
handCancel?: (any) => void,
|
||
onBlur?: (e: any, obj: any) => void,
|
||
onInputEven?: (e: any, obj: any) => void,
|
||
handReduce?: (any) => void,
|
||
handAdd?: (any) => void,
|
||
}
|
||
const GoodsItem = memo((porps: PropGoods) => {
|
||
const { list = [], obj = {}, handTui, handCancel, onBlur, handReduce, handAdd, onInputEven } = porps
|
||
// const [value, setValue] = useState<any>({ count: 1 })
|
||
// const onInputEven = (e) => {
|
||
// let res = Number(e.detail.value)
|
||
// if (res < 1) {
|
||
// setValue({ count: 1 })
|
||
// } else {
|
||
// setValue({ count: res })
|
||
// }
|
||
// }
|
||
|
||
return (
|
||
<>
|
||
{
|
||
list.map((item, index) => {
|
||
return (
|
||
<View className={styles.goodsBox} key={index}>
|
||
<View className={styles.goodsProduct}>{item.product_code}# {item.product_name}</View>
|
||
<View className={styles.goodsLine}></View>
|
||
{
|
||
item.av_product_color.map((it, inx) => {
|
||
return (
|
||
<View className={styles.itemGoods} key={inx}>
|
||
<View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View>
|
||
<View className={styles.itemRight}>
|
||
<View className={styles.item_right_top}>
|
||
<View className={styles.itemName}>{it.product_color_code} {it.product_color_name}</View>
|
||
</View>
|
||
<View className={styles.item_right_Bottom}>
|
||
<View className={styles.itemMoney}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View>
|
||
{
|
||
!it.isTui && <View className={styles.btn} onClick={() => handTui?.(it)}>退货</View>
|
||
}
|
||
{
|
||
(it.sale_mode != 0 && it.isTui) && <View className={styles.btnOne} onClick={() => handCancel?.(it)}>已选择退货</View>
|
||
}
|
||
{
|
||
(it.sale_mode == 0 && it.isTui) && <View className={styles.inputBox} >
|
||
<View className={styles.redceBox} onClick={() => handReduce?.(it)}>
|
||
<View className={styles.reduce}></View>
|
||
</View>
|
||
<View className={styles.inputBig}>
|
||
<Input type={'number'} value={it.nums} onInput={(e) => onInputEven?.(e, it)} maxlength={it.roll} onBlur={(e) => onBlur?.(e, it)}></Input>
|
||
</View>
|
||
<View className={styles.addBox} onClick={() => handAdd?.(it)}>
|
||
+
|
||
</View>
|
||
</View>
|
||
}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
</>
|
||
|
||
)
|
||
}) |