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

订单售后_售后详情

Browse Source
This commit is contained in:
czm 2022-06-20 20:31:17 +08:00
parent 6e08416ba0
commit 09e61e0779
22 changed files with 802 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/api/salesAfterOrder.ts
View File

@ -20,3 +20,22 @@ export const GetSaleOrderListApi = () => {
})
}
/**
* 取消退货
*/
export const ReturnApplyOrderCancelApi = () => {
return useRequest({
url: `/v1/mall/returnApplyOrder/cancel`,
method: "post",
})
}
/**
* 售后订单详情
*/
export const SaleOrderOrderDetailApi = () => {
return useRequest({
url: `/v1/mall/returnApplyOrder`,
method: "get",
})
}

202
src/components/afterOrderBtns/index copy.tsx Normal file
View File

@ -0,0 +1,202 @@
import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { ORDER_STATUS, SALE_MODE } from "@/common/enum"
import { ScrollView, Text, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react"
import styles from './index.module.scss'
type Param = {
orderInfo: {
status: number, //订单状态
orderId: number, //订单id
actual_amount: number, //实付金额
wait_pay_amount: number, //待付金额
sale_mode: number //订单类型
}|null,
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}
export default memo(({orderInfo, onClick}:Param) => {
//订单状态枚举
const {
SaleOrderStatusBooking,
SaleOrderStatusArranging,
SaleOrderStatusArranged,
SaleOrderStatusWaitingDelivery,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusWaitingPayment,
SaleOrderStatusWaitingReceipt,
SaleOrderStatusAlreadyReceipt,
SaleorderstatusWaitingPrePayment
} = ORDER_STATUS
//订单类型
const {
SaLeModeBulk,
SaleModeLengthCut,
SaLeModeWeightCut,
} = SALE_MODE
//订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现
const orderBtnsList = useRef([
{
id: 1,
value: [SaleOrderStatusBooking.value,
SaleOrderStatusArranging.value,
SaleOrderStatusArranged.value,
SaleOrderStatusWaitingPayment.value,
SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货
label: '取消订单'
},
{
id: 2,
value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
label: '去付款'
},
{
id: 3,
value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货
label: '申请退款'
},
{
id: 4,
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
label: '查看物流'
},
{
id: 5,
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应： 待收货, 已收货, 已退款
label: '申请退货'
},
{
id: 6,
value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货
label: '确认收货'
},
{
id: 7,
value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款
label: '再次购买'
},
{
id: 8,
value: [SaleOrderStatusBooking.value], //按钮对应： 待接单
label: '退款'
},
])
//判断是否显示该按钮
const orderBtnsShow = (item) => {
if(orderInfo) {
if(item.id == 1) {
//取消订单按钮
return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款
} else if (item.id == 2) {
//去付款按钮
return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示
} else if(item.id == 3 ) {
//申请退款, 只有大货才有
return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款
} else if( item.id == 8) {
//退款按钮（直接退款不用申请）, 只有散剪和剪板有
return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款
}
else {
//其他按钮
return item.value.includes(orderInfo.status)
}
}
}
//显示的按钮数组
const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => {
return orderBtnsList.current.filter(item => {
return orderBtnsShow(item)
})
}, [orderInfo])
//点击按钮操作
const submitBtns = (val, index) => {
(val == 1)&&cancelOrder(); //取消订单按钮
(val == 2)&&onClick?.(2); //去付款按钮
(val == 6)&&receiveOrder(); //确认收货
}
//取消订单
const {fetchData: cancelFetchData} = CancelOrderApi()
const cancelOrder = () => {
Taro.showModal({
title: '要取消该订单吗？',
success: async function (res) {
if (res.confirm) {
let res = await cancelFetchData({id: orderInfo?.orderId})
if(res.success) {
alert.success('取消成功')
onClick?.(1)
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
//确认订单
const {fetchData: receiveOrderFetchData} = ReceiveOrderApi()
const receiveOrder = async () => {
console.log('123456')
Taro.showModal({
title: '确定收货？',
success: async function (res) {
if (res.confirm) {
let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId})
if(res.success){
onClick?.(6)
alert.success('收货成功')
} else {
alert.error('收货失败')
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
//显示更多按钮
const [showMore, setShowMore] = useState(false)
const styleTop = useMemo(() => {
return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
}, [orderBtnsShowList])
return (
<View className={styles.btns_list}>
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
<Text onClick={() => setShowMore(true)}>更多</Text>
{showMore&&<View className={styles.more_con}>
<View className={styles.more_list} style={styleTop}>
{orderBtnsShowList.map((item, index) => {
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
})}
</View>
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
</View>}
</View>}
<View className={styles.list_scroll}>
{orderBtnsShowList.map((item, index) =>
(index < 3)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
)}
</View>
</View>
)
})

87
src/components/afterOrderBtns/index.module.scss Normal file
View File

@ -0,0 +1,87 @@
.btns_list{
width: 100%;
// margin-top: 30px;
display: flex;
align-content: center;
.more{
font-size: 28px;
width: 143px;
display: flex;
align-items: center;
color: $color_font_two;
padding-left: 20px;
position: relative;
.more_list{
position: absolute;
background-color: #fff;
width: 226px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06);
border-radius: 10px;
padding: 0 20px;
box-sizing: border-box;
z-index:999;
&::before{
z-index: 1;
position: absolute;
bottom: -7px;
left: 50px;
width: 15px;
height: 15px;
content: " ";
transform: rotate(45deg);
background: #fff;
box-sizing: border-box;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}
.more_item{
font-size: 28px;
height: 70px;
line-height: 70px;
text-align: center;
&:nth-last-child(n+2) {
border-bottom: 1PX solid #F0F0F0;
}
}
}
.more_bg{
position:fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
}
.scroll{
white-space: nowrap;
width: 100%;
}
.list_scroll{
white-space: nowrap;
width: 100%;
text-align: right;
}
.btns_item{
padding: 0 15px;
width: 130px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 60px;
font-size: $font_size;
color: $color_font_three;
display:inline-block;
&:nth-child(n+2) {
margin-left: 32px;
}
&:nth-last-child(1) {
border: 2px solid $color_main;
color: $color_main;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}

193
src/components/afterOrderBtns/index.tsx Normal file
View File

@ -0,0 +1,193 @@
import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { AFTER_ORDER_STATUS, ORDER_STATUS, SALE_MODE } from "@/common/enum"
import {Text, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import {useRef, memo, useState, useMemo } from "react"
import classnames from "classnames";
import styles from './index.module.scss'
import { ReturnApplyOrderCancelApi } from "@/api/salesAfterOrder"
type Param = {
orderInfo: {
stage: number, //售后状态
orderId: number, //订单id
sale_mode: number //订单类型
type: number //1退货，2退款
},
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}
export default memo(({orderInfo, onClick}:Param) => {
//售后订单状态
const {
ReturnStageApplying,
ReturnStageWaitCheck,
ReturnStageChecked,
ReturnStageReturned,
ReturnStageCancel,
ReturnStageQualityCheckPendingRefund,
ReturnStageServiceOrderPendingRefund,
ReturnStageRejected
} = AFTER_ORDER_STATUS
//订单类型
const {
SaLeModeBulk,
SaleModeLengthCut,
SaLeModeWeightCut,
} = SALE_MODE
//售后按钮按售后状态归类, value是该订单状态，可能该按钮会出现
const orderBtnsList = useRef([
{
id: 1,
value: [ReturnStageApplying.value, ReturnStageWaitCheck.value],
label: '取消退货'
},
{
id: 2,
value: [ReturnStageWaitCheck.value],
label: '退货物流'
},
{
id: 3,
value: [ReturnStageChecked.value, ReturnStageQualityCheckPendingRefund.value],
label: '查看物流'
},
{
id: 4,
value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value],
label: '质检结果'
},
{
id: 5,
value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value],
label: '退货码单'
},
{
id: 6,
value: [ReturnStageApplying.value, ReturnStageServiceOrderPendingRefund.value],
label: '取消退款'
},
{
id: 7,
value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value],
label: '退款码单'
},
{
id: 8,
value: [],
label: '申请记录'
},
])
//判断是否显示该按钮
const orderBtnsShow = (item) => {
if(!orderInfo) return false
if(item.id == 1) {
//取消退货
return (orderInfo.type == 1)&&item.value.includes(orderInfo.stage)
} else if (item.id == 6) {
//取消退款
return (orderInfo.type == 2)&&item.value.includes(orderInfo.stage)
} else {
return item.value.includes(orderInfo.stage)
}
}
//显示的按钮数组
const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => {
return orderBtnsList.current.filter(item => {
return orderBtnsShow(item)
})
}, [orderInfo])
//点击按钮操作
const submitBtns = (val, index) => {
if (val == 1) {
cancelOrder()
} else if (val == 6) {
receiveOrder()
} else {
onClick?.(val)
}
}
//取消退货
const {fetchData: returnApplyOrderCancelFetchData} = ReturnApplyOrderCancelApi()
const cancelOrder = () => {
Taro.showModal({
title: '要取消退货吗？',
success: async function (res) {
if (res.confirm) {
let res = await returnApplyOrderCancelFetchData({id: orderInfo?.orderId})
if(res.success) {
alert.success('取消成功')
onClick?.(1)
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
//确认订单
const {fetchData: receiveOrderFetchData} = ReceiveOrderApi()
const receiveOrder = async () => {
console.log('123456')
Taro.showModal({
title: '确定收货？',
success: async function (res) {
if (res.confirm) {
let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId})
if(res.success){
onClick?.(6)
alert.success('收货成功')
} else {
alert.error('收货失败')
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
//显示更多按钮
const [showMore, setShowMore] = useState(false)
const styleTop = useMemo(() => {
return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
}, [orderBtnsShowList])
return (
<View className={styles.btns_list}>
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
<Text onClick={() => setShowMore(true)}>更多</Text>
{showMore&&<View className={styles.more_con}>
<View className={styles.more_list} style={styleTop}>
{orderBtnsShowList.map((item, index) => {
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
})}
</View>
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
</View>}
</View>}
<View className={styles.list_scroll}>
{orderBtnsShowList.map((item, index) =>
(index < 3)&&<View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
)}
</View>
</View>
)
})

4
src/components/orderBtns/index.tsx
View File

@ -1,5 +1,5 @@
import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { alert, goLink } from "@/common/common"
import { ORDER_STATUS, SALE_MODE } from "@/common/enum"
import {Text, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
@ -130,6 +130,8 @@ export default memo(({orderInfo, onClick}:Param) => {
cancelOrder()
} else if (val == 6) {
receiveOrder()
} else if(val == 5) {
goLink('/pages/applyAfterSales/index',{id:orderInfo?.orderId})
} else {
onClick?.(val)
}

3
src/pages/applyAfterSales/index.tsx
View File

@ -11,7 +11,7 @@ import useUploadCDNImg from "@/use/useUploadImage";
import { GetSaleOrderDetailApi } from "@/api/order";
import KindList from "./components/kindList"
import { ReturnApplyOrderApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";
import { alert, goLink } from "@/common/common";
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {
@ -133,6 +133,7 @@ export default () => {
let res = await fetchDataReturnApply(submitData)
if(res.success) {
alert.success('申请成功')
goLink('/pages/salesAfterList/index',{}, 'reLaunch')
} else {
alert.error('申请失败')
}

0
src/pages/order/components/applyRefund/index.module.scss Normal file
View File

9
src/pages/order/components/applyRefund/index.tsx Normal file
View File

@ -0,0 +1,9 @@
import { memo } from "react";
export default memo(() => {
return (
<>
123123
</>
)
})

4
src/pages/order/index.tsx
View File

@ -149,9 +149,6 @@ import styles from './index.module.scss'
}else if(val == 2) {
//待付款
toPay()
} else if (val == 5) {
console.log('aa:::',orderDetail)
goLink('/pages/applyAfterSales/index',{id:orderDetail.id})
}
}, [orderDetail])
@ -230,6 +227,7 @@ import styles from './index.module.scss'
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<View className="common_safe_area_y"></View>
</View>
)

23
src/pages/salesAfter/components/addressInfoDetail/index.module.scss
View File

@ -1,12 +1,31 @@
.address_main{
margin-top: 20px;
}
.address_title_tag{
font-size: 24px;
color: #EE7500;
background: rgba(255,230,206,0.36);
border-radius: 20px 20px 0px 0px;
height: 56px;
display: flex;
align-items: center;
position: relative;
z-index: 999;
.miconfont {
font-size: 30px;
padding: 0 20px;
}
}
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
border-radius: 0 0 20px 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
position: relative;
.order_address_icon{
font-size: 50px;

16
src/pages/salesAfter/components/addressInfoDetail/index.tsx
View File

@ -3,21 +3,25 @@ import classnames from "classnames";
import {memo} from "react";
import styles from './index.module.scss'
export default memo(({defaultValue}:{defaultValue:string}) => {
export default memo(({return_address = '', return_phone = ''}:{return_address:string, return_phone: string}) => {
return (
<View>
<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)}>{defaultValue}</Text>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
</View>
<View className={styles.order_address_text_name}>
<Text>管理员</Text>
<Text>13939399536</Text>
<View className={styles.updateBtn}>
<Text>{return_phone}</Text>
{/* <View className={styles.updateBtn}>
上传物流
</View>
</View> */}
</View>
</View>
</View>

27
src/pages/salesAfter/components/kindList/index.module.scss
View File

@ -1,14 +1,17 @@
.orders_list_title{
padding: 20px 20px 10px 20px;
color: $color_font_two;
font-size: $font_size_medium;
.kindsList_main{
margin-top: 20px;
}
.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: 30px;
@ -47,7 +50,6 @@
width: 126px;
height: 126px;
border-radius: 20px;
background-color: red;
}
.order_list_item_con{
display: flex;
@ -96,6 +98,21 @@
}
}
}
.order_total{
padding-top: 20px;
display: flex;
justify-content: space-between;
text{
&:nth-child(1) {
font-size: 28px;
font-weight: 700;
}
&:nth-child(2) {
font-size: 24px;
font-weight: 700;
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;

87
src/pages/salesAfter/components/kindList/index.tsx
View File

@ -1,6 +1,7 @@
import { ORDER_STATUS } from "@/common/enum"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import { View } from "@tarojs/components"
import LabAndImg from "@/components/LabAndImg"
import { Text, View } from "@tarojs/components"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
@ -14,7 +15,8 @@ type OrderParam = {
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
stage: number, //订单状态
type: 1|2, //1退货， 2退款
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
@ -60,31 +62,43 @@ export default memo(({order, comfirm = false}:Param) => {
const priceList = [
{
id:1,
value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
label:'扣款金额',
value:[],
label:'退货条数',
field: 'estimate_amount'
},
{
id:2,
value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'合计金额',
value:[],
label:'扣款金额',
field: 'total_sale_price'
},
{
id:3,
value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'空差优惠',
value:[],
label:'其他扣款',
field: 'total_weight_error_discount'
},
{
id:4,
value:[ SaleOrderStatusWaitingPayment.value],
label:'应付金额',
value:[],
label:'应退金额',
field: 'total_should_collect_money'
},
{
id:5,
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
value:[],
label:'退款金额',
field: 'total_should_collect_money'
},
{
id:6,
value:[],
label:'退款去向',
field: 'actual_amount'
},
{
id:7,
value:[],
label:'实付金额',
field: 'actual_amount'
}
@ -97,38 +111,26 @@ export default memo(({order, comfirm = false}:Param) => {
const priceConDom = useMemo(() => {
if(!order) return
//确认订单
if(comfirm == true) {
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
//订单为取消订单状态
if(order?.status == SaleOrderStatusCancel.value) {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
} else {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.stage)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}, [order])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.kindsList_main}>
<View className={styles.orders_list_con}>
<View className={styles.orders_return_title}>{order?.type == 1?'退货信息':'退款信息'}</View>
{
order?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
@ -140,7 +142,9 @@ export default memo(({order, comfirm = false}:Param) => {
<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}></View>
<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>
@ -157,10 +161,11 @@ export default memo(({order, comfirm = false}:Param) => {
</View>
})
}
<View className={styles.order_total}><Text>合计</Text><Text>{numText}</Text></View>
<View className={styles.order_estimated_amount}>
{priceConDom}
</View>
</View>
</>
</View>
)
})

18
src/pages/salesAfter/components/orderState copy/index.module.scss
View File

@ -1,18 +0,0 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
}
}

14
src/pages/salesAfter/components/orderState copy/index.tsx
View File

@ -1,14 +0,0 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}

35
src/pages/salesAfter/components/orderState/index.module.scss
View File

@ -43,6 +43,7 @@
.order_status_content{
display: flex;
align-items: center;
padding: 0 30px;
.order_status_title{
color: $color_font_two;
font-size: $font_size;
@ -74,6 +75,24 @@
.order_status_des_select{
color: $color_font_one;
}
.pay_time{
height: 56px;
background: #f6f6f6;
border-radius: 20px;
color: #3C3C3C;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-top: 20px;
text{
font-size: 28px;
color: $color_main;
padding: 0 10px;
}
}
}
.more{
width: 100%;
@ -101,4 +120,20 @@
top: -10px;
right: -10px;
}
.refresh{
position: absolute;
top: 23px;
right: 20px;
display: flex;
color: #707070;
display: flex;
align-items: center;
.mconfont{
font-size: 30px;
}
.refresh_text{
font-size: 23px;
}
}
}

119
src/pages/salesAfter/components/orderState/index.tsx
View File

@ -1,42 +1,59 @@
import { Image, Text, View } from "@tarojs/components"
import { memo, useMemo, useState } from "react"
import { memo, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
type Param = {
list: {
status: string,
time: string,
tag: string,
desc: string
}[],
payment_method: 0|PAYMENT_METHOD_PARAM,
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import * as dayjs from 'dayjs'
type List = {
status: string,
time: string,
tag: string,
desc: string,
expire_time: string
}
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
status: number, //订单状态
}
}
export default memo(({list = [], payment_method = 0}:Param) => {
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
const dataList = useMemo(() => {
return list.reverse()
}, [list])
return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
}, [orderInfo.logistics_details])
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
//获取预付款最后时间
const endTime = useMemo(() => {
if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
return orderInfo.logistics_details[0].expire_time
}
return ''
}, [orderInfo])
return (
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<CountDown onFinish={onRefresh} endTime={endTime}/>}
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.refresh} onClick={onRefresh}>
<Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>}
</View>}
</>
)
})
//倒计时
const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => {
const [showTime, setShowTime] = useState('')
const timeObj:any = useRef()
useEffect(() => {
if(endTime) {
clearInterval(timeObj.current)
timeObj.current = setInterval(() => {
count_down()
}, 1000)
}
return () => {
clearInterval(timeObj.current)
}
}, [endTime])
const count_down = () => {
var startData = dayjs();
var endDate = dayjs(endTime);
if(startData >= endDate) {
clearInterval(timeObj.current)
onFinish?.()
setShowTime(() => '00:00:00')
return false
}
var _dd = endDate.diff(startData,'day');
var _hh = endDate.diff(startData,'hour');
var _mm = endDate.diff(startData,'minute');
var _ss = endDate.diff(startData,'second');
// 转换
var hh = _hh - (_dd*24);
var mm = _mm - (_hh*60);
var ss = _ss - (_mm*60);
// 格式化
var DD = ('00'+_dd).slice(-2);
var HH = ('00'+hh).slice(-2);
var MM = ('00'+mm).slice(-2);
var SS = ('00'+ss).slice(-2);
setShowTime(() => ` ${HH}:${MM}:${SS}`)
}
return (
<>
<View className={styles.pay_time}>
剩<Text>{showTime||'--:--:--'}</Text>支付关闭，订单自动取消
</View>
</>
)
}

68
src/pages/salesAfter/index.tsx
View File

@ -3,9 +3,11 @@ import {
EditSaleOrderRemarkApi,
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import AfterOrderBtns from "@/components/afterOrderBtns";
import OrderBtns from "@/components/orderBtns";
import SearchInput from "@/components/searchInput";
import { Image, Text, Textarea, View } from "@tarojs/components"
@ -28,10 +30,10 @@ import styles from './index.module.scss'
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
let res = await saleOrderOrderDetailData({id: orderId.current})
setOrderDetail(res.data)
}
Taro.stopPullDownRefresh()
@ -55,7 +57,8 @@ import styles from './index.module.scss'
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
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, //空差优惠
@ -88,11 +91,11 @@ import styles from './index.module.scss'
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: orderDetail?.status, //订单状态
stage: orderDetail?.stage, //售后订单状态
orderId: orderDetail?.id,
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
type: orderDetail?.type, //退货or退款
sale_mode: orderDetail?.sale_model, //订单类型
}
}, [orderDetail])
@ -101,22 +104,22 @@ import styles from './index.module.scss'
return (
<View className={styles.order_main}>
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<AddressInfoDetail defaultValue="广东省佛山市禅城区阿萨的飞机螺丝钉解放" />
<OrderState orderInfo={orderDetail}/>
<AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone}/>
<KindList order={formatPreViewOrderMemo}/>
<OrderDes/>
<OrderDes orderInfo={orderDetail}/>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View>}
<AfterSalePricture/>
<AfterSalePricture urls={orderDetail?.fabric_piece_accessory_url}/>
<View className="common_safe_area_y"></View>
</View>
)
}
const OrderDes = memo(({val = ''}:{val?:string}) => {
const OrderDes = memo(({orderInfo}:{orderInfo?:any}) => {
//复制功能
const clipboardData = () => {
const clipboardData = (val) => {
Taro.setClipboardData({
data: val,
success: function (res) {
@ -132,30 +135,30 @@ import styles from './index.module.scss'
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='售后单号' height={50}>
<View className={styles.order_num}>
<Text>RA-LY-2204240002</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
<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>XS-LY-2204210002</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
<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>其他问题</Text>
<SearchInput showBorder={false} title='退货说明' height={50}>
<Text>{orderInfo?.return_explain_name}</Text>
</SearchInput>
<SearchInput showBorder={false} title='其它说明' height={50}>
<Text>板布疵点太多</Text>
<Text>{orderInfo?.return_remark}</Text>
</SearchInput>
<SearchInput showBorder={false} title='申请时间' height={50}>
<Text>2022-04-24 08:32:39</Text>
<Text>{formatDateTime(orderInfo?.apply_time)}</Text>
</SearchInput>
</View>
)
})
const AfterSalePricture = memo(() => {
const AfterSalePricture = memo(({urls}:{urls: string[]}) => {
//预览图片
const showImage = () => {
Taro.previewImage({
@ -166,24 +169,9 @@ import styles from './index.module.scss'
return (
<ContentBox title="售后图片">
<View className={styles.after_sale_picture_list}>
<View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl('')} />
</View>
<View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
{urls?.map(item=> <View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl(item)} />
</View>)}
</View>
</ContentBox>
)

9
src/pages/salesAfterList/components/order/index.module.scss
View File

@ -71,23 +71,22 @@
.image{
width: 126px;
height: 126px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
border-radius: 20px ;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
border-radius: 20px ;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
border-radius: 36px 0px 20px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 10px;
padding: 5px 10px 5px 15px;
box-sizing: border-box;
}
}

36
src/pages/salesAfterList/components/order/index.tsx
View File

@ -1,6 +1,7 @@
import { goLink } from "@/common/common";
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import AfterOrderBtns from "@/components/afterOrderBtns";
import LabAndImg from "@/components/LabAndImg";
import { useSelector } from "@/reducers/hooks";
import { Image, Text, View } from "@tarojs/components"
import classnames from "classnames";
@ -14,18 +15,17 @@ type Param = {
return_order_no: string,
sale_mode: number,
sale_mode_name: string,
status_name: string,
stage_name: string,
shipment_mode_name: string,
product_list: any[],
total_fabrics: number,
total_colors: number,
total_number: number,
status: 0,
stage: 0,
id: number,
payment_method: number, //支付方式
actual_amount: number, //实付金额
wait_pay_amount: number, //待付金额
should_collect_order_id: number, //应付单id
lab: {l:number, a:number, b:number},
rgb: {r:number, g:number, b:number},
texturl_url: string,
type: number //1 退货 2退款
},
onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void
@ -49,14 +49,18 @@ export default memo(({value, onClickBtn}: Param) => {
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: value?.status, //订单状态
stage: value?.stage, //订单状态
orderId: value?.id,
actual_amount: value?.actual_amount, //实付金额
wait_pay_amount: value?.wait_pay_amount, //待付金额
sale_mode: value?.sale_mode //订单类型
sale_mode: value?.sale_mode, //订单类型
type: value?.type //退货or退款
}
}, [value])
//整理颜色
const labAndRgbAndUrl = useMemo(() => {
return {lab:{...value?.lab}, rgb:{...value?.rgb}, texturl_url: value?.texturl_url}
}, [value])
return (
<View className={styles.order_item}>
<View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', {id: value?.id})}>
@ -74,12 +78,12 @@ export default memo(({value, onClickBtn}: Param) => {
<View className={styles.product_title}>
<View className={styles.product_tag}>{value?.sale_mode_name}</View>
<View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
<View className={styles.product_status}>{value?.status_name}</View>
<View className={styles.product_status}>{value?.stage_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
<LabAndImg value={labAndRgbAndUrl}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
</View>
<View className={styles.color_list}>
{value?.product_list[0].product_colors.map((itemColor, index) => {
@ -101,11 +105,11 @@ export default memo(({value, onClickBtn}: Param) => {
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
<View className={styles.order_number}>
<Text>已申请退款</Text>
<Text>{value?.type == 1?'已申请退货':'已申请退款'}</Text>
<Text>订单号：{value?.order_no}</Text>
</View>
</View>
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
<AfterOrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
</View>
)
})

6
src/pages/salesAfterList/components/orderStatusTag/index.tsx
View File

@ -5,14 +5,14 @@ import styles from './index.module.scss'
type Param = {
status?: 0|1|2 //0默认不处理, 1退款，2退货
status?: 0|1|2 //0默认不处理, 1退货，2退款
}
export default memo(({status = 0}:Param) => {
return (
<>
{(status !== 0)&&<View className={classnames(styles.tag, status == 1?styles.refund_tag :styles.saleReturn_tag)}>
{(status !== 0)&&<View className={classnames(styles.tag, status == 2?styles.refund_tag :styles.saleReturn_tag)}>
<View className={classnames(styles.miconfont, 'iconfont icon-yucunkuan')}></View>
<Text>{ status == 1?'退款':'退货'}</Text>
<Text>{ status == 1?'退货':'退款'}</Text>
</View>}
</>
)

2
src/pages/salesAfterList/index.tsx
View File

@ -100,6 +100,8 @@ export default () => {
//去支付
setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
toPay()
} else {
getOrderList()
}
}, [orderData])