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

订单售后v3

Browse Source
This commit is contained in:
cheng
2022-06-21 20:32:27 +08:00
parent f92a8913f4
commit 51ff3eefe7
26 changed files with 1111 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/salesAfter/components/addressInfoDetail/index.tsx
+60 -21
View File
@@ -1,30 +1,69 @@
import { AFTER_ORDER_STATUS } from "@/common/enum";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import {memo} from "react";
import {memo, useMemo} from "react";
import styles from './index.module.scss'
export default memo(({return_address = '', return_phone = ''}:{return_address:string, return_phone: string}) => {
type Param = {
return_address?:string,
return_phone?: string,
onLogistics?: (val: number) => void,
stage?: number
}
export default memo(({return_address = '', return_phone = '', onLogistics, stage}:Param) => {
const {
ReturnStageApplying,
ReturnStageWaitCheck,
ReturnStageChecked,
ReturnStageReturned,
ReturnStageCancel,
ReturnStageQualityCheckPendingRefund,
ReturnStageServiceOrderPendingRefund,
ReturnStageRejected
} = AFTER_ORDER_STATUS
//是否显示地址
const showAddress = useMemo(() => {
return stage != ReturnStageApplying.value
}, [])
//上传物流
const upLogistics = useMemo(() => {
return stage == ReturnStageWaitCheck.value
}, [stage])
//查看物流
const showLogistics = useMemo(() => {
return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value)
}, [stage])
return (
<View className={styles.address_main}>
<View className={styles.address_title_tag}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
请按以下退货地址寄回货物并提供退货物流信息
</View>
<View className={styles.order_address} >
<View className={classnames(styles.order_address_icon, 'iconfont','icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
</View>
<View className={styles.order_address_text_name}>
<Text>管理员</Text>
<Text>{return_phone}</Text>
{/* <View className={styles.updateBtn}>
上传物流
</View> */}
<>
{showAddress&&<View className={styles.address_main}>
<View className={styles.address_title_tag}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
请按以下退货地址寄回货物并提供退货物流信息
</View>
<View className={styles.order_address} >
<View className={classnames(styles.order_address_icon, 'iconfont','icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
</View>
<View className={styles.order_address_text_name}>
<Text>管理员</Text>
<Text>{return_phone}</Text>
{upLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(1)}>
上传物流
</View>}
{showLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(2)}>
查看物流
</View>}
</View>
</View>
</View>
</View>
</View>
</View>}
</>
)
})
src/pages/salesAfter/components/applyRecord/index.module.scss
+146
View File
@@ -0,0 +1,146 @@
.apply_record_scroll{
height: 70vh;
}
.apply_record_main{
margin-top: 20px;
padding: 0 30px;
.kind_number{
width: 100%;
padding: 20px;
box-sizing: border-box;
text{
background-color: #F6F6F6;
border-radius: 10px;
font-size: $font_size_medium;
padding: 5px 0;
text-align: center;
width: 100%;
display: block;
color: $color_font_three;
}
}
.orders_list_con{
background-color: #fff;
border-radius: 20px;
padding: 20px;
.orders_return_title{
font-size: 28px;
font-weight: 700;
padding-bottom: 20px;
}
.order_list{
&:nth-child(n+2) {
margin-top: 45px;
}
.order_list_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
.num{
color: $color_font_two;
font-size: $font_size_min;
}
}
}
.order_list_scroll{
margin-top: 30px;
.order_list_item {
display: flex;
&:nth-child(2) {
margin-top: 30px;
}
.order_list_item_img{
width: 126px;
height: 126px;
border-radius: 20px;
}
.order_list_item_con{
display: flex;
width: 100%;
flex:1;
border-bottom: 1px solid #f0f0f0;
height: 150px;
padding-top: 20px;
box-sizing: border-box;
}
.order_list_item_des{
flex:1;
box-sizing: border-box;
padding-left: 30px;
.order_list_item_title{
font-weight: 700;
font-size: $font_size;
margin-bottom: 15px;
}
.order_list_item_price{
font-size: 26px;
color: $color_font_three;
}
}
.order_list_item_count{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
.count_num{
color: $color_main;
font-size: $font_size;
margin-bottom: 15px;
font-weight: 400;
text{
font-size: $font_size_min;
}
}
.count_price {
font-size: $font_size;
font-weight: 700;
text{
font-size: $font_size_min;
}
}
}
}
}
.order_total{
padding-top: 30px;
display: flex;
justify-content: space-between;
text{
&:nth-child(1) {
font-size: 28px;
font-weight: 700;
}
&:nth-child(2) {
font-size: 32px;
font-weight: 700;
color: #007AFF;
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 30px 0;
.order_price_des{
font-size: $font_size_medium;
color: $color_font_two;
}
}
}
}
src/pages/salesAfter/components/applyRecord/index.tsx
+124
View File
@@ -0,0 +1,124 @@
import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder";
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import LabAndImg from "@/components/LabAndImg";
import Popup from "@/components/popup";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from './index.module.scss'
type Param = {
show?: true|false,
onClose?: () => void,
onSubmit?: () => void,
id?: number
}
export default memo(({show, onClose, onSubmit, id}:Param) => {
useEffect(() => {
if(show && id) getSaleOrderPreView()
}, [show, id])
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
const getSaleOrderPreView = async () => {
if(id) {
let res = await saleOrderOrderDetailData({id: id})
setOrderDetail(res.data)
}
Taro.stopPullDownRefresh()
}
//格式化数据格式
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.product_list,
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, //取消订单时的订单状态
})
}
//监听获取到的数据
useEffect(() => {
if(orderDetail)
formatData()
}, [orderDetail])
//对应数量
const formatCount = useCallback((item) => {
return formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [formatDetailOrder])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (formatDetailOrder?.sale_mode == 1?'m':'kg')
}, [formatDetailOrder])
//数量格式
const numText = useMemo(() => {
if(formatDetailOrder)
return `${formatDetailOrder?.total_fabrics}种面料，${formatDetailOrder?.total_colors}种颜色，共${formatDetailOrder?.total_number}${formatDetailOrder?.unit}`
}, [formatDetailOrder])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [])
return (
<>
<Popup show={show} title="申请记录" onClose={onClose}>
{formatDetailOrder&&<View className={styles.apply_record_main}>
<View className={styles.kind_number}><Text>{numText}</Text></View>
<ScrollView scrollY className={styles.apply_record_scroll}>
<View className={styles.orders_list_con}>
{
formatDetailOrder?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{formatDetailOrder.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}>
<LabAndImg value={labAndRgbAndUrl(colorItem)}/>
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{formatDetailOrder.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
</View>
</View>
</View>
})}
</View>
</View>
})
}
<View className={styles.order_total}>
<Text>申请条数</Text>
<Text>×{orderDetail?.total_number}</Text>
</View>
</View>
</ScrollView>
</View>}
</Popup>
</>
)
})
src/pages/salesAfter/components/kindList/index.tsx
+12 -12
View File
@@ -45,18 +45,18 @@ export default memo(({order, comfirm = false}:Param) => {
return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
}, [order])
const {
SaleOrderStatusBooking, // 待接单
SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranged, // 已配布
SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
} = ORDER_STATUS
// const {
// SaleOrderStatusBooking, // 待接单
// SaleOrderStatusArranging, // 配布中
// SaleOrderStatusArranged, // 已配布
// SaleOrderStatusWaitingPayment, // 待付款
// SaleOrderStatusWaitingDelivery, // 待发货
// SaleOrderStatusWaitingReceipt, // 待收货
// SaleOrderStatusAlreadyReceipt, // 已收货
// SaleOrderStatusComplete, // 已完成
// SaleOrderStatusRefund, // 已退款
// SaleOrderStatusCancel, // 已取消
// } = ORDER_STATUS
//金额列表枚举
const priceList = [
src/pages/salesAfter/components/returnLogistics/index.module.scss
+35
View File
@@ -0,0 +1,35 @@
.logistics_main{
padding: 20px 30px;
box-sizing: border-box;
.logistics_image{
display: flex;
.title_desc{
font-size: 28px;
font-weight: 700;
padding-top: 50px;
box-sizing: border-box;
}
.upload_image{
flex:1;
}
}
.logistics_desc{
margin-top: 50px;
}
.btns_two{
display: flex;
height: 82px;
font-size: $font_size_big;
border-radius: 40px;
margin-top: 50px;
.verify_btn{
flex:1;
border-radius: 40px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
src/pages/salesAfter/components/returnLogistics/index.tsx
+70
View File
@@ -0,0 +1,70 @@
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import UploadImage from "@/components/uploadImage"
import styles from './index.module.scss'
import TextareaEnhance from "@/components/textareaEnhance";
import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";
type Param = {
show?: true|false,
onClose?: () => void,
onSubmit?: () => void,
id?: number //订单id
}
export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => {
//需要提交的数据
const submitData = useRef({
accessory_url: [],
remark: '',
id: 0
})
useEffect(() => {
if(id) submitData.current.id = id
}, [id])
//获取图片列表
const getImageList = useCallback((list) => {
submitData.current.accessory_url = list
}, [])
//备注
const getOtherReason = useCallback((val) => {
submitData.current.remark = val
}, [])
//确定
const {fetchData} = ReturnApplyLogisticsApi()
const onSubmitEven = async () => {
if(!id) return alert.error('参数有误')
if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件')
let res = await fetchData(submitData.current)
if(res.success) {
alert.success('上传成功')
} else {
alert.error('上传失败')
}
}
return (
<>
<Popup show={show} title="上传物流" onClose={onClose}>
<View className={styles.logistics_main}>
<View className={styles.logistics_image}>
<Text className={styles.title_desc}>上传附件：</Text>
<View className={styles.upload_image}>
<UploadImage onChange={getImageList}/>
</View>
</View>
<View className={styles.logistics_desc}>
<TextareaEnhance onChange={getOtherReason} title="备注：" placeholder="请输入备注信息"/>
</View>
<View className={styles.btns_two}>
<View className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
</View >
</View>
</Popup>
</>
)
})