From 09e61e077954bd2801c63df4faf18ad95e16b6d3 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Mon, 20 Jun 2022 20:31:17 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=94=AE=E5=90=8E=5F?= =?UTF-8?q?=E5=94=AE=E5=90=8E=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/salesAfterOrder.ts | 19 ++ src/components/afterOrderBtns/index copy.tsx | 202 ++++++++++++++++++ .../afterOrderBtns/index.module.scss | 87 ++++++++ src/components/afterOrderBtns/index.tsx | 193 +++++++++++++++++ src/components/orderBtns/index.tsx | 4 +- src/pages/applyAfterSales/index.tsx | 3 +- .../components/applyRefund/index.module.scss | 0 .../order/components/applyRefund/index.tsx | 9 + src/pages/order/index.tsx | 4 +- .../addressInfoDetail/index.module.scss | 23 +- .../components/addressInfoDetail/index.tsx | 16 +- .../components/kindList/index.module.scss | 27 ++- .../salesAfter/components/kindList/index.tsx | 87 ++++---- .../orderState copy/index.module.scss | 18 -- .../components/orderState copy/index.tsx | 14 -- .../components/orderState/index.module.scss | 35 +++ .../components/orderState/index.tsx | 121 ++++++++--- src/pages/salesAfter/index.tsx | 68 +++--- .../components/order/index.module.scss | 9 +- .../salesAfterList/components/order/index.tsx | 36 ++-- .../components/orderStatusTag/index.tsx | 6 +- src/pages/salesAfterList/index.tsx | 2 + 22 files changed, 802 insertions(+), 181 deletions(-) create mode 100644 src/components/afterOrderBtns/index copy.tsx create mode 100644 src/components/afterOrderBtns/index.module.scss create mode 100644 src/components/afterOrderBtns/index.tsx create mode 100644 src/pages/order/components/applyRefund/index.module.scss create mode 100644 src/pages/order/components/applyRefund/index.tsx delete mode 100644 src/pages/salesAfter/components/orderState copy/index.module.scss delete mode 100644 src/pages/salesAfter/components/orderState copy/index.tsx diff --git a/src/api/salesAfterOrder.ts b/src/api/salesAfterOrder.ts index 34483ba..dae4883 100644 --- a/src/api/salesAfterOrder.ts +++ b/src/api/salesAfterOrder.ts @@ -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", + }) +} \ No newline at end of file diff --git a/src/components/afterOrderBtns/index copy.tsx b/src/components/afterOrderBtns/index copy.tsx new file mode 100644 index 0000000..d695e16 --- /dev/null +++ b/src/components/afterOrderBtns/index copy.tsx @@ -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 ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/afterOrderBtns/index.module.scss b/src/components/afterOrderBtns/index.module.scss new file mode 100644 index 0000000..252b22e --- /dev/null +++ b/src/components/afterOrderBtns/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/components/afterOrderBtns/index.tsx b/src/components/afterOrderBtns/index.tsx new file mode 100644 index 0000000..6750838 --- /dev/null +++ b/src/components/afterOrderBtns/index.tsx @@ -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 ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index c78275d..5f0d895 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -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) } diff --git a/src/pages/applyAfterSales/index.tsx b/src/pages/applyAfterSales/index.tsx index 088bddf..2837b71 100644 --- a/src/pages/applyAfterSales/index.tsx +++ b/src/pages/applyAfterSales/index.tsx @@ -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('申请失败') } diff --git a/src/pages/order/components/applyRefund/index.module.scss b/src/pages/order/components/applyRefund/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/order/components/applyRefund/index.tsx b/src/pages/order/components/applyRefund/index.tsx new file mode 100644 index 0000000..91f98dc --- /dev/null +++ b/src/pages/order/components/applyRefund/index.tsx @@ -0,0 +1,9 @@ +import { memo } from "react"; + +export default memo(() => { + return ( + <> + 123123 + + ) +}) \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 6713c99..5d6b559 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -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' getRemark(e)}/> + ) diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss index a57550a..82159da 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss +++ b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss @@ -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; diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.tsx b/src/pages/salesAfter/components/addressInfoDetail/index.tsx index 87d144e..e4d7ed7 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.tsx +++ b/src/pages/salesAfter/components/addressInfoDetail/index.tsx @@ -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 ( - + + + + 请按以下退货地址寄回货物并提供退货物流信息 + - {defaultValue} + {return_address} 管理员 - 13939399536 - + {return_phone} + {/* 上传物流 - + */} diff --git a/src/pages/salesAfter/components/kindList/index.module.scss b/src/pages/salesAfter/components/kindList/index.module.scss index be8f53f..de1171e 100644 --- a/src/pages/salesAfter/components/kindList/index.module.scss +++ b/src/pages/salesAfter/components/kindList/index.module.scss @@ -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; diff --git a/src/pages/salesAfter/components/kindList/index.tsx b/src/pages/salesAfter/components/kindList/index.tsx index 23a2a0c..b5e7a52 100644 --- a/src/pages/salesAfter/components/kindList/index.tsx +++ b/src/pages/salesAfter/components/kindList/index.tsx @@ -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 - } - //订单为取消订单状态 - if(order?.status == SaleOrderStatusCancel.value) { - return ( - <> - { - priceList.map(item => { - return <>{showPrice(item, order?.the_previous_status)&&} - }) - } - - ) - } else { - return ( - <> - { - priceList.map(item => { - return <>{showPrice(item, order?.status)&&} - }) - } - - ) - } + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.stage)&&} + }) + } + + ) }, [order]) + + //整理颜色 + const labAndRgbAndUrl = useCallback((item) => { + return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url} + }, []) return ( - <> - {numText} + + {order?.type == 1?'退货信息':'退款信息'} { order?.list?.map(item => { return @@ -140,7 +142,9 @@ export default memo(({order, comfirm = false}:Param) => { {item?.product_colors?.map(colorItem => { return - + + + {colorItem.code + ' ' + colorItem.name} @@ -157,10 +161,11 @@ export default memo(({order, comfirm = false}:Param) => { }) } + 合计{numText} {priceConDom} - + ) }) \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.module.scss b/src/pages/salesAfter/components/orderState copy/index.module.scss deleted file mode 100644 index 78bda44..0000000 --- a/src/pages/salesAfter/components/orderState copy/index.module.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.tsx b/src/pages/salesAfter/components/orderState copy/index.tsx deleted file mode 100644 index 58fec4d..0000000 --- a/src/pages/salesAfter/components/orderState copy/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { View } from "@tarojs/components" -import styles from './index.module.scss' - -export default ({ - state = '', - desc = '' -}) => { - return ( - - {state} - {desc} - - ) -} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.module.scss b/src/pages/salesAfter/components/orderState/index.module.scss index 87a2757..0cc33d6 100644 --- a/src/pages/salesAfter/components/orderState/index.module.scss +++ b/src/pages/salesAfter/components/orderState/index.module.scss @@ -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; + } + } } \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.tsx b/src/pages/salesAfter/components/orderState/index.tsx index 82ed17f..b08861d 100644 --- a/src/pages/salesAfter/components/orderState/index.tsx +++ b/src/pages/salesAfter/components/orderState/index.tsx @@ -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"; +import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; +import * as dayjs from 'dayjs' - - -type Param = { - list: { - status: string, - time: string, - tag: string, - desc: string - }[], - payment_method: 0|PAYMENT_METHOD_PARAM, - +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)&& + {(dataList?.length > 0)&& {dataList.map((item, index) => {(dataList.length > 1)&&} @@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => { {item.status} {formatDateTime(item.time)} - {/* {item.tag} */} {item.desc} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&} )} {(dataList.length > 2) && changeMore()}> @@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => { } - {(payment_method == PaymentMethodAccountPeriod.value)&&} - {(payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&& + + 刷新 + } } ) -}) \ No newline at end of file +}) + +//倒计时 +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 ( + <> + + 剩{showTime||'--:--:--'}支付关闭，订单自动取消 + + + ) +} \ No newline at end of file diff --git a/src/pages/salesAfter/index.tsx b/src/pages/salesAfter/index.tsx index ecdec5c..0e396d2 100644 --- a/src/pages/salesAfter/index.tsx +++ b/src/pages/salesAfter/index.tsx @@ -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() //获取到的原始数据 - 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 ( - - + + - + {(orderDetail?.status != SaleOrderStatusCancel.value)&& - + } - + ) } - 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' 订单信息 - RA-LY-2204240002 - clipboardData()}>复制 + {orderInfo?.return_order_no} + clipboardData(orderInfo?.return_order_no)}>复制 - XS-LY-2204210002 - clipboardData()}>复制 + {orderInfo?.order_no} + clipboardData(orderInfo?.order_no)}>复制 - - 其他问题 + + {orderInfo?.return_explain_name} - 板布疵点太多 + {orderInfo?.return_remark} - 2022-04-24 08:32:39 + {formatDateTime(orderInfo?.apply_time)} ) }) - const AfterSalePricture = memo(() => { + const AfterSalePricture = memo(({urls}:{urls: string[]}) => { //预览图片 const showImage = () => { Taro.previewImage({ @@ -166,24 +169,9 @@ import styles from './index.module.scss' return ( - - - - - - - - - - - - - - - - - - + {urls?.map(item=> + + )} ) diff --git a/src/pages/salesAfterList/components/order/index.module.scss b/src/pages/salesAfterList/components/order/index.module.scss index e687ebd..2582b83 100644 --- a/src/pages/salesAfterList/components/order/index.module.scss +++ b/src/pages/salesAfterList/components/order/index.module.scss @@ -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; } } diff --git a/src/pages/salesAfterList/components/order/index.tsx b/src/pages/salesAfterList/components/order/index.tsx index 99eb4fc..7dd2ac9 100644 --- a/src/pages/salesAfterList/components/order/index.tsx +++ b/src/pages/salesAfterList/components/order/index.tsx @@ -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 ( goLink('/pages/salesAfter/index', {id: value?.id})}> @@ -74,12 +78,12 @@ export default memo(({value, onClickBtn}: Param) => { {value?.sale_mode_name} {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} - {value?.status_name} + {value?.stage_name} - - {value?.product_list[0].product_colors[0].code} + + {value?.product_list[0].product_colors[0].code} {value?.product_list[0].product_colors.map((itemColor, index) => { @@ -101,11 +105,11 @@ export default memo(({value, onClickBtn}: Param) => { {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} - 已申请退款 + {value?.type == 1?'已申请退货':'已申请退款'} 订单号：{value?.order_no} - + ) }) diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.tsx b/src/pages/salesAfterList/components/orderStatusTag/index.tsx index 5664c7c..1a794dc 100644 --- a/src/pages/salesAfterList/components/orderStatusTag/index.tsx +++ b/src/pages/salesAfterList/components/orderStatusTag/index.tsx @@ -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)&& + {(status !== 0)&& - { status == 1?'退款':'退货'} + { status == 1?'退货':'退款'} } ) diff --git a/src/pages/salesAfterList/index.tsx b/src/pages/salesAfterList/index.tsx index 05856cc..53430b9 100644 --- a/src/pages/salesAfterList/index.tsx +++ b/src/pages/salesAfterList/index.tsx @@ -100,6 +100,8 @@ export default () => { //去支付 setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) toPay() + } else { + getOrderList() } }, [orderData])