228 lines
9.2 KiB
TypeScript
228 lines
9.2 KiB
TypeScript
|
|
import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder";
|
|
import { AFTER_ORDER_STATUS, ORDER_STATUS } from "@/common/enum";
|
|
import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
|
|
import AfterOrderBtns from "@/components/afterOrderBtns";
|
|
import SearchInput from "@/components/searchInput";
|
|
import useLogin from "@/use/useLogin";
|
|
import { Image, Text, Textarea, View } from "@tarojs/components"
|
|
import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
|
|
import classnames from "classnames";
|
|
import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
|
|
import AddressInfoDetail from "./components/addressInfoDetail";
|
|
import ApplyRecord from "./components/applyRecord";
|
|
import ContentBox from "./components/contentBox";
|
|
import KindList from "./components/kindList";
|
|
import OrderState from "./components/orderState";
|
|
import ReturnLogistics from "./components/returnLogistics";
|
|
import styles from './index.module.scss'
|
|
|
|
export default () => {
|
|
useLogin()
|
|
const router = useRouter()
|
|
const orderId = useRef<number>(Number(router.params.id))
|
|
useDidShow(() => {
|
|
getSaleOrderPreView()
|
|
})
|
|
|
|
//获取订单详情
|
|
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
|
|
const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
|
|
const getSaleOrderPreView = async () => {
|
|
if(orderId.current) {
|
|
let res = await saleOrderOrderDetailData({id: orderId.current})
|
|
setOrderDetail(res.data)
|
|
}
|
|
Taro.stopPullDownRefresh()
|
|
}
|
|
|
|
//监听获取到的数据
|
|
useEffect(() => {
|
|
if(orderDetail)
|
|
formatData()
|
|
}, [orderDetail])
|
|
|
|
//格式化数据格式
|
|
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
|
|
const formatData = () => {
|
|
setFormatDetailOrder({
|
|
estimate_amount: orderDetail.estimate_amount, //预估金额
|
|
sale_mode: orderDetail.sale_mode,
|
|
sale_mode_name: orderDetail.sale_mode_name,
|
|
total_colors: orderDetail.total_colors, //总颜色数量
|
|
total_number: orderDetail.total_number, //总数量
|
|
total_fabrics: orderDetail.total_fabrics, //面料数量
|
|
unit: orderDetail.sale_mode == 0?'条':'m', //单位
|
|
list: orderDetail.quality_check_pass_product,
|
|
stage: orderDetail.stage, //订单状态
|
|
type: orderDetail.type, //退货or退款
|
|
total_sale_price: orderDetail.total_sale_price, //销售金额
|
|
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
|
|
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
|
|
actual_amount: orderDetail.actual_amount, //实付金额
|
|
the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
|
|
other_deduction_amount: orderDetail.other_deduction_amount, //其他扣除金额
|
|
total_refund_amount: orderDetail.total_refund_amount, //合计金额
|
|
refund_amount: orderDetail.refund_amount, //退款金额
|
|
refund_type: orderDetail.refund_type, //退款状态
|
|
refund_flow_name: orderDetail.refund_flow_name //退款去向
|
|
|
|
})
|
|
}
|
|
const formatPreViewOrderMemo = useMemo(() => {
|
|
return formatDetailOrder
|
|
}, [formatDetailOrder])
|
|
|
|
|
|
//获取底部按钮点击, 获取按钮状态
|
|
const orderStateClick = useCallback((val) => {
|
|
if(val == 1 || val == 6) {
|
|
getSaleOrderPreView()
|
|
} else if(val == 8) {
|
|
//申请记录
|
|
setApplyRecord(true)
|
|
}
|
|
}, [orderDetail])
|
|
|
|
//页面下拉刷新
|
|
usePullDownRefresh(() => {
|
|
getSaleOrderPreView()
|
|
})
|
|
|
|
|
|
//按钮所需数据
|
|
const orderInfo = useMemo(() => {
|
|
return {
|
|
stage: orderDetail?.stage, //售后订单状态
|
|
orderId: orderDetail?.id,
|
|
settle_mode: orderDetail?.settle_mode,
|
|
type: orderDetail?.type, //退货or退款
|
|
sale_mode: orderDetail?.sale_mode, //订单类型
|
|
return_apply_order_id: orderDetail?.return_apply_order_id
|
|
}
|
|
}, [orderDetail])
|
|
|
|
//售后订单状态枚举
|
|
const {
|
|
|
|
} = AFTER_ORDER_STATUS
|
|
|
|
//物流显示
|
|
const [logisticsShow, setLogisticsShow] = useState(false)
|
|
const [logistics, setLogistics] = useState(false)
|
|
const onShowLogistics = useCallback((val) => {
|
|
setLogisticsShow(true)
|
|
if(val != 1) setLogistics(true)
|
|
// if(val == 1) {
|
|
// setLogisticsShow(true)
|
|
// } else {
|
|
// const list = orderDetail?.accessory_url.map(item => {
|
|
// return formatImgUrl(item)
|
|
// })
|
|
// Taro.previewImage({
|
|
// current: list[0], // 当前显示
|
|
// urls: list // 需要预览的图片http链接列表
|
|
// })
|
|
// }
|
|
}, [])
|
|
const onCloseLogistics = useCallback(() => {
|
|
setLogisticsShow(false)
|
|
}, [])
|
|
//物流成功上传
|
|
const logisticsSuccess = useCallback(() => {
|
|
setLogisticsShow(false)
|
|
getSaleOrderPreView()
|
|
}, [])
|
|
|
|
//显示记录
|
|
const [applyRecord, setApplyRecord] = useState(false)
|
|
|
|
return (
|
|
<View className={styles.order_main}>
|
|
<OrderState orderInfo={orderDetail}/>
|
|
<AddressInfoDetail orderInfo={orderDetail} onLogistics={onShowLogistics}/>
|
|
<KindList order={formatPreViewOrderMemo}/>
|
|
<OrderDes orderInfo={orderDetail}/>
|
|
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
|
|
<AfterSalePricture urls={orderDetail?.fabric_piece_accessory_url}/>
|
|
<ReturnLogistics onlyRead={logistics} images={orderDetail?.accessory_url} descValue={orderDetail?.take_goods_remark} show={logisticsShow} id={orderDetail?.return_apply_order_id} onClose={onCloseLogistics} onSubmit={logisticsSuccess}/>
|
|
<ApplyRecord show={applyRecord} id={orderDetail?.id} onClose={() => setApplyRecord(false)}/>
|
|
<View className="common_safe_area_y"></View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const OrderDes = memo(({orderInfo}:{orderInfo?:any}) => {
|
|
//复制功能
|
|
const clipboardData = (val) => {
|
|
Taro.setClipboardData({
|
|
data: val,
|
|
success: function (res) {
|
|
Taro.showToast({
|
|
icon: 'none',
|
|
title: '复制成功'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<View className={styles.order_info} >
|
|
<View className={styles.order_info_title}>订单信息</View>
|
|
<SearchInput showBorder={false} title='售后单号' height={50}>
|
|
<View className={styles.order_num}>
|
|
<Text>{orderInfo?.return_order_no}</Text>
|
|
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.return_order_no)}>复制</View>
|
|
</View>
|
|
</SearchInput>
|
|
<SearchInput showBorder={false} title='订单号' height={50}>
|
|
<View className={styles.order_num}>
|
|
<Text>{orderInfo?.order_no}</Text>
|
|
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.order_no)}>复制</View>
|
|
</View>
|
|
</SearchInput>
|
|
<SearchInput showBorder={false} title='退货原因' height={50}>
|
|
<Text>{orderInfo?.return_reason_name}</Text>
|
|
</SearchInput>
|
|
<SearchInput showBorder={false} title='退货说明' height={50}>
|
|
<Text>{orderInfo?.return_explain_name}</Text>
|
|
</SearchInput>
|
|
<SearchInput showBorder={false} title='其它说明' height={50}>
|
|
<Text>{orderInfo?.reason_describe}</Text>
|
|
</SearchInput>
|
|
<SearchInput showBorder={false} title='货物状况' height={50}>
|
|
<Text>{orderInfo?.goods_status_name}</Text>
|
|
</SearchInput>
|
|
<SearchInput showBorder={false} title='申请时间' height={50}>
|
|
<Text>{formatDateTime(orderInfo?.apply_time)}</Text>
|
|
</SearchInput>
|
|
</View>
|
|
)
|
|
})
|
|
|
|
const AfterSalePricture = memo(({urls = []}:{urls: string[]}) => {
|
|
|
|
const showList = useMemo(() => {
|
|
let res = urls.map(item => {
|
|
return formatImgUrl(item, "!w800")
|
|
})
|
|
return res
|
|
}, [urls])
|
|
|
|
//预览图片
|
|
const showImage = () => {
|
|
Taro.previewImage({
|
|
current: showList[0], // 当前显示
|
|
urls: showList // 需要预览的图片http链接列表
|
|
})
|
|
}
|
|
return (
|
|
<ContentBox title="售后图片">
|
|
<View className={styles.after_sale_picture_list}>
|
|
{urls?.map(item=> <View className={styles.after_sale_picture_item} onClick={showImage}>
|
|
<Image src={formatImgUrl(item)} />
|
|
</View>)}
|
|
</View>
|
|
</ContentBox>
|
|
)
|
|
})
|