387 lines
14 KiB
TypeScript
387 lines
14 KiB
TypeScript
import { View, Input, Button, Image } 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 ItemList from './components/itemList'
|
||
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
|
||
import {
|
||
mpreturnApplyOrder,
|
||
returnApplyOrdercancel,
|
||
returnApplyOrderuploadAccessory
|
||
} from "@/api/refound"
|
||
import OrderState from './components/orderState'
|
||
import AddressDetailBox from './components/addressDetailBox'
|
||
import { IMG_CND_Prefix } from "@/common/constant";
|
||
import Popup from '@/components/popup';
|
||
import UploadImage from '@/components/uploadImage'
|
||
|
||
export default () => {
|
||
const router = useRouter()
|
||
useEffect(() => {
|
||
getDetail()
|
||
}, [])
|
||
//获取详情
|
||
const { fetchData: detailFetch } = mpreturnApplyOrder()
|
||
const [DeatailObj, setDeatailObj] = useState<any>({})
|
||
const getDetail = async () => {
|
||
Taro.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
})
|
||
const res = await detailFetch({ id: Number(router.params.id) })
|
||
if (res.data) {
|
||
setDeatailObj(res.data)
|
||
orderMsg.map(it => {
|
||
if (it.leftTitle === '售后编号：') {
|
||
it.rightTitle = res.data.return_order_no
|
||
}
|
||
if (it.leftTitle === '订单号：') {
|
||
it.rightTitle = res.data.order_no
|
||
}
|
||
if (it.leftTitle === '退货原因：') {
|
||
it.rightTitle = res.data.return_reason_name
|
||
}
|
||
if (it.leftTitle === '退货说明：') {
|
||
it.rightTitle = res.data.return_explain_name
|
||
}
|
||
if (it.leftTitle === '其他什么：') {
|
||
it.rightTitle = res.data.reason_describe
|
||
}
|
||
if (it.leftTitle === '货物状况：') {
|
||
it.rightTitle = res.data.goods_status_name
|
||
}
|
||
if (it.leftTitle === '申请时间：') {
|
||
it.rightTitle = formatDateTime(res.data.apply_time)
|
||
}
|
||
})
|
||
setOrderMsg([...orderMsg])
|
||
setPicList([...res.data?.accessory_url !== null ? res.data?.accessory_url : []])
|
||
Taro.hideLoading()
|
||
}
|
||
}
|
||
|
||
//分辨用质检中还是质检前的数组
|
||
const productList = useMemo(() => {
|
||
if (DeatailObj.stage === 0 ||
|
||
(DeatailObj.sale_mode == 1 && DeatailObj.type == 1) || DeatailObj.stage === 1 || DeatailObj.stage === 2) {
|
||
return DeatailObj.product_list
|
||
} else {
|
||
return DeatailObj.quality_check_pass_product
|
||
}
|
||
}, [DeatailObj])
|
||
|
||
|
||
//订单信息文字数组
|
||
const [orderMsg, setOrderMsg] = useState<any[]>([
|
||
{
|
||
leftTitle: '售后编号：',
|
||
rightTitle: '------',
|
||
showBtn: true
|
||
},
|
||
{
|
||
leftTitle: '订单号：',
|
||
rightTitle: '------',
|
||
showBtn: true
|
||
},
|
||
{
|
||
leftTitle: '退货原因：',
|
||
rightTitle: '------',
|
||
},
|
||
{
|
||
leftTitle: '退货说明：',
|
||
rightTitle: '------',
|
||
},
|
||
{
|
||
leftTitle: '其他什么：',
|
||
rightTitle: '------',
|
||
},
|
||
{
|
||
leftTitle: '货物状况：',
|
||
rightTitle: '------',
|
||
},
|
||
{
|
||
leftTitle: '申请时间：',
|
||
rightTitle: '------',
|
||
}
|
||
])
|
||
|
||
//复制功能
|
||
const clipboardData = (val) => {
|
||
Taro.setClipboardData({
|
||
data: val || '',
|
||
success: function (res) {
|
||
Taro.showToast({
|
||
icon: 'none',
|
||
title: '复制成功',
|
||
})
|
||
},
|
||
})
|
||
}
|
||
|
||
//取消退货
|
||
const { fetchData: cancelFetch } = returnApplyOrdercancel()
|
||
const handCancle = async () => {
|
||
Taro.showModal({
|
||
content: "确定要取消吗？",
|
||
confirmText: "确认",
|
||
cancelText: "取消",
|
||
success: async function (res) {
|
||
if (res.confirm) {
|
||
const res = await cancelFetch({ id: Number(DeatailObj.id) })
|
||
Taro.showLoading({
|
||
title: '请稍等...',
|
||
mask: true
|
||
})
|
||
if (res.msg === 'success') {
|
||
Taro.showToast({
|
||
title: '取消成功'
|
||
})
|
||
Taro.hideLoading()
|
||
getDetail()
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.msg,
|
||
icon: 'error'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
//查看图片
|
||
const [ShowPic, setShowPic] = useState(false)
|
||
|
||
|
||
const [PicList, setPicList] = useState<any[]>([])
|
||
|
||
const handUp = (value) => {
|
||
setShowPic(true)
|
||
}
|
||
|
||
const onlyRead = useMemo(() => {
|
||
if (DeatailObj.stage == 1) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}, [DeatailObj])
|
||
|
||
//获取图片列表
|
||
const picUrl = useRef([])
|
||
const getImageList = useCallback((list) => {
|
||
picUrl.current = list
|
||
}, [])
|
||
|
||
//提交附件
|
||
const { fetchData: sureFetch } = returnApplyOrderuploadAccessory()
|
||
const handSure = () => {
|
||
let arr: any = []
|
||
arr = [...picUrl.current, ...PicList]
|
||
Taro.showModal({
|
||
content: "确定要提交吗？",
|
||
confirmText: "确认",
|
||
cancelText: "取消",
|
||
success: async function (res) {
|
||
if (res.confirm) {
|
||
const res = await sureFetch({ id: Number(DeatailObj.id), accessory_url: arr, })
|
||
Taro.showLoading({
|
||
title: '请稍等...',
|
||
mask: true
|
||
})
|
||
if (res.msg === 'success') {
|
||
Taro.showToast({
|
||
title: '取消成功'
|
||
})
|
||
Taro.hideLoading()
|
||
getDetail()
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.msg,
|
||
icon: 'error'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const proview = (item) => {
|
||
Taro.previewImage({
|
||
current: IMG_CND_Prefix + item, // 当前显示图片的 http 链接
|
||
urls: DeatailObj.fabric_piece_accessory_url.map((item) => {
|
||
item = IMG_CND_Prefix + item;
|
||
return item;
|
||
}), // 需要预览的图片 http 链接列表
|
||
});
|
||
};
|
||
|
||
|
||
return (
|
||
<View className={styles.main}>
|
||
<OrderState orderInfo={DeatailObj} />
|
||
<AddressDetailBox
|
||
obj={DeatailObj}
|
||
handUp={() => handUp(DeatailObj)}
|
||
></AddressDetailBox>
|
||
<DefaultBox
|
||
showMode={true}
|
||
title={'客户信息'}
|
||
modeName={DeatailObj.sale_mode_name}
|
||
>
|
||
<View className={styles.pussBox}>
|
||
<View className={styles.pussName}>{DeatailObj.purchaser_name}</View>
|
||
<View className={styles.pussPhone}>{DeatailObj.purchaser_phone}</View>
|
||
</View>
|
||
</DefaultBox>
|
||
<DefaultBox title={'退款信息'}>
|
||
<GoodsItem list={productList} obj={DeatailObj}></GoodsItem>
|
||
<View className={styles.totalBox}>
|
||
<View className={styles.totalLeft}>总计</View>
|
||
<View className={styles.totalRight}>{DeatailObj.total_fabrics} 种面料，{DeatailObj?.total_colors} 种颜色，共 {
|
||
DeatailObj?.sale_mode == 0 ? DeatailObj?.return_roll : DeatailObj?.total_number / 100
|
||
} {DeatailObj?.sale_mode == 0 ? "条" : "米"}</View>
|
||
</View>
|
||
</DefaultBox>
|
||
<DefaultBox title={'订单信息'}>
|
||
{
|
||
orderMsg.map((item, index) => {
|
||
return (
|
||
<View className={styles.detailBox} key={index}>
|
||
<View className={styles.detailFont}>
|
||
{item.leftTitle}
|
||
</View>
|
||
<View className={styles.detailRightFlex}>
|
||
<View className={styles.detailRight}>{item.rightTitle}</View>
|
||
{item.showBtn && <View className={styles.detailBtn} onClick={() => clipboardData(item.rightTitle)}>复制</View>}
|
||
</View>
|
||
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
|
||
</DefaultBox>
|
||
<DefaultBox title={'售后图片'}>
|
||
<View className={styles.picBox}>
|
||
{
|
||
DeatailObj?.fabric_piece_accessory_url?.length > 0 && DeatailObj?.fabric_piece_accessory_url.map((item, index) => {
|
||
return (
|
||
<Image className={styles.pic} lazyLoad key={index} onClick={() => proview(item)}
|
||
mode="aspectFill" src={IMG_CND_Prefix + item}></Image>
|
||
)
|
||
})
|
||
}
|
||
{
|
||
DeatailObj?.fabric_piece_accessory_url?.length === 0 && <View className={styles.noPic}>暂无图片</View>
|
||
}
|
||
</View>
|
||
</DefaultBox>
|
||
<View className={styles.safeBox}></View>
|
||
{
|
||
(DeatailObj.stage === 0 || DeatailObj.stage === 1) && <View className={styles.bottomMuck}>
|
||
<View className={styles.cancleBtn} onClick={() => handCancle()}>取消退货</View>
|
||
</View>
|
||
}
|
||
<Popup title={'查看/修改物流回单'} show={ShowPic} onClose={() => setShowPic(false)}>
|
||
<UploadImage onChange={getImageList} defaultList={PicList} onlyRead={onlyRead} />
|
||
{
|
||
|
||
!onlyRead && <View className={styles.picBtn} onClick={() => handSure()}>确认修改</View>
|
||
}
|
||
</Popup>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
interface Obs {
|
||
title?: string,
|
||
modeName?: string,
|
||
showMode?: boolean,
|
||
children?: ReactNode,
|
||
clickNode?: () => void
|
||
}
|
||
|
||
const DefaultBox = memo((props: Obs) => {
|
||
const {
|
||
title = '标题',
|
||
modeName = '大货',
|
||
showMode = false,
|
||
children,
|
||
clickNode
|
||
} = props
|
||
|
||
return (
|
||
<View className={styles.defaltBox}>
|
||
<View className={styles.titleBox}>
|
||
<View className={styles.title}>{title}</View>
|
||
{
|
||
showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
|
||
}
|
||
</View>
|
||
<View className={styles.modeLine}></View>
|
||
{children}
|
||
</View>
|
||
)
|
||
})
|
||
|
||
|
||
interface PropGoods {
|
||
// item?: {
|
||
// code?: string | number
|
||
// }
|
||
list: any[],
|
||
obj: any
|
||
}
|
||
const GoodsItem = memo((porps: PropGoods) => {
|
||
const { list = [], obj = {} } = porps
|
||
return (
|
||
<>
|
||
{
|
||
list.map((item, index) => {
|
||
return (
|
||
<View className={styles.goodsBox} key={index}>
|
||
<View className={styles.goodsProduct}>{item.code}# {item.name}</View>
|
||
{
|
||
item.product_colors.map((it, inx) => {
|
||
return (
|
||
<View className={styles.itemGoods}>
|
||
<View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View>
|
||
<View className={styles.clear}> </View>
|
||
<View className={styles.itemRight}>
|
||
<View className={styles.item_right_top}>
|
||
<View className={styles.itemName}>{it.code}# {it.name}</View>
|
||
{/* <View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View> */}
|
||
{
|
||
obj.sale_mode == 0 && <View className={styles.itemNums}>x{obj.stage == 0 || obj.stage == 1 || obj.stage == 2
|
||
? it.roll
|
||
: obj.stage == 5 || obj.stage == 6 || obj.stage == 3
|
||
? it.return_roll
|
||
: it.roll}{obj?.sale_mode == 0 ? '条' : 'm'}</View>
|
||
}
|
||
{
|
||
obj.sale_mode != 0 && <View className={styles.itemNums}>x{it.length / 100}m</View>
|
||
}
|
||
</View>
|
||
<View className={styles.item_right_Bottom}>
|
||
<View className={styles.itemMoney}>¥{it.sale_price / 100}/{obj?.sale_mode == 0 ? 'kg' : 'm'}</View>
|
||
{/* <View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View> */}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
</>
|
||
|
||
)
|
||
}) |