From a552a023f8dbbcaee9832b9ffc56aa4fd426c88a Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Mon, 6 Jun 2022 20:32:35 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E6=94=AF=E4=BB=98=E5=AE=8C?= =?UTF-8?q?=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 6 + src/common/enum.ts | 12 ++ src/components/orderBtns/index.tsx | 3 +- .../order/components/orderState/index.tsx | 20 ++- src/pages/order/components/payment/index.tsx | 41 ++++-- src/pages/order/index.tsx | 12 +- .../components/order/index.module.scss | 1 + .../orderList/components/order/index.tsx | 9 +- src/pages/orderList/index.tsx | 26 ++-- .../components/order/index.module.scss | 121 +++++++++++++++ .../salesAfterList/components/order/index.tsx | 106 +++++++++++++ .../orderStatusList/index.module.scss | 18 +++ .../components/orderStatusList/index.tsx | 46 ++++++ .../orderStatusTag/index.module.scss | 21 +++ .../components/orderStatusTag/index.tsx | 20 +++ src/pages/salesAfterList/index.config.ts | 4 + src/pages/salesAfterList/index.module.scss | 38 +++++ src/pages/salesAfterList/index.tsx | 139 ++++++++++++++++++ 18 files changed, 603 insertions(+), 40 deletions(-) create mode 100644 src/pages/salesAfterList/components/order/index.module.scss create mode 100644 src/pages/salesAfterList/components/order/index.tsx create mode 100644 src/pages/salesAfterList/components/orderStatusList/index.module.scss create mode 100644 src/pages/salesAfterList/components/orderStatusList/index.tsx create mode 100644 src/pages/salesAfterList/components/orderStatusTag/index.module.scss create mode 100644 src/pages/salesAfterList/components/orderStatusTag/index.tsx create mode 100644 src/pages/salesAfterList/index.config.ts create mode 100644 src/pages/salesAfterList/index.module.scss create mode 100644 src/pages/salesAfterList/index.tsx diff --git a/src/app.config.ts b/src/app.config.ts index 9c67410..0d1fbb8 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -116,6 +116,12 @@ export default { pages: [ "index", ] + }, + { + root: "pages/salesAfterList", + pages: [ + "index", + ] } ] } diff --git a/src/common/enum.ts b/src/common/enum.ts index 8972e0a..00a8ec1 100644 --- a/src/common/enum.ts +++ b/src/common/enum.ts @@ -13,6 +13,17 @@ export const ORDER_STATUS = { SaleOrderStatusCancel : {value:5, label:'已取消'}, // 已取消 } +//售后单状态枚举 +export const AFTER_ORDER_STATUS = { + SaleOrderStatusBooking : {value:0, label:'申请中'}, + SaleOrderStatusArranging : {value:1, label:'退货中'}, + SaleOrderStatusArranged : {value:2, label:'待验布'}, + SaleOrderStatusWaitingPayment : {value:7, label:'退款中'}, + SaleOrderStatusWaitingDelivery : {value:3, label:'已退款'}, + SaleOrderStatusWaitingReceipt : {value:8, label:'已取消'}, + SaleOrderStatusAlreadyReceipt : {value:9, label:'已拒绝'}, +} + //支付方式 export const PAYMENT_METHOD = { PaymentMethodPreDeposit: {value:1, label:'预存款'}, @@ -21,6 +32,7 @@ export const PAYMENT_METHOD = { PaymentMethodScanCodeToPay: {value:4, label:'扫码支付'}, PaymentMethodCashOnDelivery: {value:5, label:'货到付款'}, } +export type PAYMENT_METHOD_PARAM = 1|2|3|4|5 //分享场景枚举 export const SHARE_SCENE = { diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index 66d1f98..f098520 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -10,14 +10,13 @@ type Param = { orderInfo: { status: number, //订单状态 orderId: number, //订单id - settle_mode: number, //支付方式 actual_amount: number, //实付金额 wait_pay_amount: number, //待付金额 }|null, onClick?: (val: number) => void //点击后触发的事件，返回订单状态 } -export const OrderBtnsemus = [{id:1, label:'取消订单'},{id:2, label:'去付款'},{id:3, label:'申请退款'},{id:4, label:'查看物流'}, {id:5, label:'申请退货'}, {id:6, label:'确认收货'}, {id:7, label:'再次购买'}] +// export const OrderBtnsemus = [{id:1, label:'取消订单'},{id:2, label:'去付款'},{id:3, label:'申请退款'},{id:4, label:'查看物流'}, {id:5, label:'申请退货'}, {id:6, label:'确认收货'}, {id:7, label:'再次购买'}] export default memo(({orderInfo, onClick}:Param) => { const { SaleOrderStatusBooking, diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index 471cc9e..82ed17f 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/src/pages/order/components/orderState/index.tsx @@ -3,6 +3,10 @@ import { memo, useMemo, 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, @@ -10,10 +14,18 @@ type Param = { tag: string, desc: string }[], - settle_mode: -1|0|1|2, //-1:没选支付方式，0：全额现结，1：定期付款，2：货到付款 + payment_method: 0|PAYMENT_METHOD_PARAM, } -export default memo(({list = [], settle_mode = -1}:Param) => { + +//支付方式枚举 +const { + PaymentMethodAccountPeriod, + PaymentMethodCashOnDelivery, +} = PAYMENT_METHOD + +export default memo(({list = [], payment_method = 0}:Param) => { + const [showMore, setShowMore] = useState(false) const changeMore = () => { setShowMore(() => !showMore) @@ -42,8 +54,8 @@ export default memo(({list = [], settle_mode = -1}:Param) => { } - {(settle_mode == 2)&&} - {(settle_mode == 1)&&} + {(payment_method == PaymentMethodAccountPeriod.value)&&} + {(payment_method == PaymentMethodCashOnDelivery.value)&&} } diff --git a/src/pages/order/components/payment/index.tsx b/src/pages/order/components/payment/index.tsx index a452f95..8af70dc 100644 --- a/src/pages/order/components/payment/index.tsx +++ b/src/pages/order/components/payment/index.tsx @@ -11,21 +11,22 @@ import ScanPay from "../scanPay"; import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay"; import { formatPriceDiv } from "@/common/fotmat"; import {alert} from "@/common/common" -import { PAYMENT_METHOD } from "@/common/enum"; +import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; type Param = { show?: true|false, onClose?: () => void, - orderId?: number, //应付单id - onSubmitSuccess?: () => void //支付成功 + onSubmitSuccess?: () => void, //支付成功 + orderInfo?: OrderInfo } -type PayInfo = { - amount: string +type OrderInfo = { + orderId: number, //应付单id + payment_method: 0|PAYMENT_METHOD_PARAM //支付方式 } type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款 -export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => { +export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => { //提交参数 const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({ @@ -51,15 +52,15 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param const [payInfo, setPayInfo] = useState() const {fetchData: orderFetchData} = GetOrderPayApi() const getOrderPay = async () => { - let {data} = await orderFetchData({id: orderId}) + let {data} = await orderFetchData({id: orderInfo?.orderId}) setPayInfo(() => data) } useEffect(() => { - if(show&&orderId) { - setSubmitData((val) => ({...val, id:orderId})) + if(show&&orderInfo?.orderId) { + setSubmitData((val) => ({...val, id:orderInfo.orderId})) getOrderPay() } - }, [show, orderId]) + }, [show, orderInfo]) //预存款选择 const advanceSelectData = useCallback((val) => { @@ -88,10 +89,19 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param } } + //预付款 const advance_payment = useMemo(() => { - const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid) + const price = payInfo?.should_collect_money - payInfo?.amount_paid return ( - {(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance} + {(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)} + ) + }, [payInfo]) + + //账期 + const account_peyment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid + return ( + {(payInfo?.account_period < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} ) }, [payInfo]) @@ -133,16 +143,17 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> - + {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&& {payInfo?.account_period}天账期 - 可用额度 ¥{payInfo?.account_period_credit_available_line} + {/* 可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} */} + {account_peyment} periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> - + } diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index a625aeb..1367b57 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -115,6 +115,12 @@ import styles from './index.module.scss' setShowDesc(() => false) }, []) + //支付所需数据 + const payOrderInfo = useMemo(() => { + if(orderDetail) + return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method } + }, [orderDetail]) + //去付款 const [payMentShow, setPayMentShow] = useState(false) const toPay = () => { @@ -177,12 +183,14 @@ import styles from './index.module.scss' //订单状态枚举 const {SaleOrderStatusCancel} = ORDER_STATUS + + return ( {/* */} - + @@ -216,7 +224,7 @@ import styles from './index.module.scss' setShowDesc(false)} > getRemark(e)}/> - + ) diff --git a/src/pages/orderList/components/order/index.module.scss b/src/pages/orderList/components/order/index.module.scss index e453de3..85e1123 100644 --- a/src/pages/orderList/components/order/index.module.scss +++ b/src/pages/orderList/components/order/index.module.scss @@ -117,5 +117,6 @@ background-color: #F6F6F6; border-radius: 10px; padding: 10px 22px; + margin-top: 20px; } } \ No newline at end of file diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx index 64eeb3a..7bff925 100644 --- a/src/pages/orderList/components/order/index.tsx +++ b/src/pages/orderList/components/order/index.tsx @@ -1,6 +1,6 @@ import { goLink } from "@/common/common"; import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; -import OrderBtns, {OrderBtnsemus} from "@/components/orderBtns"; +import OrderBtns from "@/components/orderBtns"; import Payment from "@/pages/order/components/payment"; import { useSelector } from "@/reducers/hooks"; import { Image, Text, View } from "@tarojs/components" @@ -21,12 +21,12 @@ type Param = { total_number: number, status: 0, id: number, - settle_mode: number, //支付方式 + payment_method: number, //支付方式 actual_amount: number, //实付金额 wait_pay_amount: number //待付金额 should_collect_order_id: number //应付单id }, - onClickBtn?: (val:number) => void + onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void } export default memo(({value, onClickBtn}: Param) => { const userInfo = useSelector(state => state.userInfo) @@ -41,7 +41,7 @@ export default memo(({value, onClickBtn}: Param) => { //点击订单按钮 const orderBtnsClick = useCallback((status) => { - onClickBtn?.(status) + onClickBtn?.({status, orderInfo:value}) }, [value]) //按钮所需数据 @@ -49,7 +49,6 @@ export default memo(({value, onClickBtn}: Param) => { return { status: value?.status, //订单状态 orderId: value?.id, - settle_mode: value?.settle_mode, //支付方式 -1 还没支付 0：全额现结，1：定期付款，2：货到付款 actual_amount: value?.actual_amount, //实付金额 wait_pay_amount: value?.wait_pay_amount, //待付金额 } diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx index 9b213fc..dee8c57 100644 --- a/src/pages/orderList/index.tsx +++ b/src/pages/orderList/index.tsx @@ -11,6 +11,7 @@ import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order' import { dataLoadingStatus, getFilterData } from "@/common/util" import OrderStatusList from "./components/orderStatusList" import Payment from "../order/components/payment" +import { ORDER_STATUS } from "@/common/enum" export default () => { const {checkLogin} = useLogin() @@ -27,12 +28,13 @@ export default () => { }) //获取订单状态 - const {fetchData: statusFetchData} = GetOrderStatusListApi() + // const {fetchData: statusFetchData} = GetOrderStatusListApi() const [statusList, setStatusList] = useState([{id: -1, name: '全部'}]) - const getOrderStatusList = async () => { - let res = await statusFetchData() - let list = [...statusList, ...res.data.list||[]] - setStatusList(() => list) + const getOrderStatusList = () => { + const status = Object.values(ORDER_STATUS).map(item => { + return {id: item.value, name: item.label} + }) + setStatusList((e) => [...e, ...status]) } useEffect(() => { getOrderStatusList() @@ -93,15 +95,17 @@ export default () => { } //监听点击的按钮 - const clickOrderBtn = useCallback((state) => { - if(state == 2) { + const clickOrderBtn = useCallback(({status, orderInfo}) => { + if(status == 2) { //去支付 + setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) toPay() } }, [orderData]) + //去付款 - const [shouldCollectOrderId, setShouldCollectOrderId] = useState(0) + const [payOrderInfo, setPayOrderInfo] = useState() const [payMentShow, setPayMentShow] = useState(false) const toPay = () => { setPayMentShow(true) @@ -110,15 +114,13 @@ export default () => { const closePayShow = useCallback(() => { setPayMentShow(() => false) }, []) - //支付成功 const onPaySuccess = useCallback(() => { + getOrderList() closePayShow() }, []) - - return ( @@ -132,7 +134,7 @@ export default () => { })} - + ) } diff --git a/src/pages/salesAfterList/components/order/index.module.scss b/src/pages/salesAfterList/components/order/index.module.scss new file mode 100644 index 0000000..e453de3 --- /dev/null +++ b/src/pages/salesAfterList/components/order/index.module.scss @@ -0,0 +1,121 @@ +.order_item{ + background-color: #fff; + border-radius: 20px; + padding: 20px; + box-sizing: border-box; + .header{ + display: flex; + align-items: center; + .user{ + display: flex; + align-items: center; + .name { + color: #000; + font-weight: 700; + margin-left: 15px; + font-size: $font_size; + } + image{ + width: 70px; + height: 70px; + border-radius: 50%; + } + } + .order_num { + flex: 1; + font-size: $font_size_medium; + color: $color_font_one; + text-align: right; + padding-right: 30px; + display: flex; + justify-content: flex-end; + align-items: center; + .miconfont { + font-size: 20px; + } + } + .tag{ + font-size: $font_size_min; + padding: 5px 15px; + background-color: $color_main; + color: #fff; + border-radius: 0px 20px 0px 20px; + } + } + .product_title{ + display: flex; + align-items: center; + padding: 35px 0; + .product_tag{ + background-color: #CDE5FF; + font-size: $font_size_min; + padding: 5px 10px; + color: $color_main; + border-radius: 6px; + } + .product_name{ + flex:1; + font-size: $font_size; + font-weight: 700; + padding-left: 20px; + } + .product_status{ + font-size: $font_size; + color: $color_main; + } + } + .product_list{ + display: flex; + .image{ + width: 126px; + height: 126px; + background: #e5ad3a; + border-radius: 20px 20px 0px 0px; + position: relative; + image{ + width: 100%; + height: 100%; + border-radius: 20px 20px 0px 0px; + } + .color_num { + background: rgba(0,0,0, 0.5); + border-radius: 50px 0px 0px 0px; + font-size: $font_size_min; + color: #fff; + position: absolute; + right:0; + bottom:0; + padding: 5px 10px; + box-sizing: border-box; + } + } + .color_list{ + flex:1; + padding-left: 30px; + .color_item{ + display: flex; + justify-content: space-between; + font-size: $font_size_min; + color: $color_font_three; + align-items: center; + margin-bottom: 20px; + .color_title{ + font-weight: 700; + font-size: $font_size; + color: #000; + } + .color_more{ + color: $color_font_three; + } + } + } + + } + .color_count_num{ + font-size: $font_size_min; + color: $color_font_two; + background-color: #F6F6F6; + border-radius: 10px; + padding: 10px 22px; + } +} \ No newline at end of file diff --git a/src/pages/salesAfterList/components/order/index.tsx b/src/pages/salesAfterList/components/order/index.tsx new file mode 100644 index 0000000..f33edaa --- /dev/null +++ b/src/pages/salesAfterList/components/order/index.tsx @@ -0,0 +1,106 @@ +import { goLink } from "@/common/common"; +import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import OrderBtns from "@/components/orderBtns"; +import { useSelector } from "@/reducers/hooks"; +import { Image, Text, View } from "@tarojs/components" +import classnames from "classnames"; +import { memo, useCallback, useMemo, useRef, useState } from "react"; +import OrderStatusTag from "../orderStatusTag"; +import styles from './index.module.scss' + +type Param = { + value: { + order_no: string, + sale_mode: number, + sale_mode_name: string, + status_name: string, + shipment_mode_name: string, + product_list: any[], + total_fabrics: number, + total_colors: number, + total_number: number, + status: 0, + id: number, + payment_method: number, //支付方式 + actual_amount: number, //实付金额 + wait_pay_amount: number //待付金额 + should_collect_order_id: number //应付单id + }, + onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void +} +export default memo(({value, onClickBtn}: Param) => { + const userInfo = useSelector(state => state.userInfo) + //对应数量 + const formatCount = useCallback((item, sale_mode) => { + return sale_mode == 0? item.roll : Number(item.length / 100) + }, [value]) + //对应单价 + const standardPrice = useCallback((price, sale_mode) => { + return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg') + }, [value]) + + //点击订单按钮 + const orderBtnsClick = useCallback((status) => { + onClickBtn?.({status, orderInfo:value}) + }, [value]) + + //按钮所需数据 + const orderInfo = useMemo(() => { + return { + status: value?.status, //订单状态 + orderId: value?.id, + actual_amount: value?.actual_amount, //实付金额 + wait_pay_amount: value?.wait_pay_amount, //待付金额 + } + }, [value]) + + return ( + + goLink('/pages/order/index', {id: value?.id})}> + + + {userInfo?.adminUserInfo?.user_name} + + + 订单号：{value?.order_no} + + + + + goLink('/pages/order/index', {id: value?.id})}> + + {value?.sale_mode_name} + {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} + {value?.status_name} + + + + + {value?.product_list[0].product_colors[0].code} + + + {value?.product_list[0].product_colors.map((itemColor, index) => { + return ( + (index <= 1)&& + {formatHashTag(itemColor.code, itemColor.name)} + {standardPrice(itemColor.sale_price, value.sale_mode)} + ×{formatCount(itemColor, value.sale_mode)}条 + + ) + }) + } + + …… + …… + …… + + + + {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} + + + + + ) +}) + diff --git a/src/pages/salesAfterList/components/orderStatusList/index.module.scss b/src/pages/salesAfterList/components/orderStatusList/index.module.scss new file mode 100644 index 0000000..47de83d --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusList/index.module.scss @@ -0,0 +1,18 @@ +.order_status_list{ + font-size: $font_size; + color: #9E9E9E; + margin-top: 20px; + .order_status_item{ + padding: 20px; + box-sizing: border-box; + } + .selected{ + font-weight: 700; + color: #000; + border-bottom: 4px solid #707070; + } + .order_list_scroll{ + white-space: nowrap; + display: flex; + } +} \ No newline at end of file diff --git a/src/pages/salesAfterList/components/orderStatusList/index.tsx b/src/pages/salesAfterList/components/orderStatusList/index.tsx new file mode 100644 index 0000000..3e12f6f --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusList/index.tsx @@ -0,0 +1,46 @@ +import { ScrollView, View } from "@tarojs/components" +import { memo, useEffect, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + list: {id: number, name: string}[], + defaultId?: number|null, + onSelect?: (val: number) => void +} +export default memo(({list = [], defaultId = null, onSelect}: Param) => { + const [selectInfo, setSelectInfo] = useState({ + selected: -1, //当前选中的id + tabId: '', //需要滚动到的id + }) + useEffect(() => { + if(defaultId) { + const index = list?.findIndex(item => { + console.log(item.id, defaultId) + return item.id == defaultId + }) + if(index !== -1) { + const num = index > 0?( index - 1) : 0 + setSelectInfo((e) => ({...e, tabId:list[num].id.toString()})) + } + } + }, [defaultId]) + const clickEvent = ({item, index}: {item:any, index:number}) => { + const num = index > 0?( index - 1) : 0 + setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id})) + onSelect?.(item.id) + } + + return ( + + + + {list.map((item, index) => { + return clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name} + })} + + + + ) +}) + diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.module.scss b/src/pages/salesAfterList/components/orderStatusTag/index.module.scss new file mode 100644 index 0000000..1f6f8d3 --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusTag/index.module.scss @@ -0,0 +1,21 @@ +.tag{ + font-size: $font_size_min; + padding: 5px 15px; + background-color: $color_main; + color: #fff; + border-radius: 0px 20px 0px 20px; + display: flex; + align-items: center; + .miconfont{ + font-size: 30px; + } + +} +.saleReturn_tag{ + background-color: #FFE6CE; + color: #EE7500; +} +.priceReturn_tag { + background-color: #E4E4FF; + color: #1818B4; +} \ No newline at end of file diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.tsx b/src/pages/salesAfterList/components/orderStatusTag/index.tsx new file mode 100644 index 0000000..a88ae20 --- /dev/null +++ b/src/pages/salesAfterList/components/orderStatusTag/index.tsx @@ -0,0 +1,20 @@ +import { Text, View } from "@tarojs/components" +import { memo } from "react" +import classnames from "classnames"; +import styles from './index.module.scss' + + +type Param = { + status: '' +} +export default memo(({status}:Param) => { + status + return ( + <> + + + 退货 + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfterList/index.config.ts b/src/pages/salesAfterList/index.config.ts new file mode 100644 index 0000000..d4c9fc3 --- /dev/null +++ b/src/pages/salesAfterList/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '退货/售后', + enableShareAppMessage: true, +} diff --git a/src/pages/salesAfterList/index.module.scss b/src/pages/salesAfterList/index.module.scss new file mode 100644 index 0000000..e8f528a --- /dev/null +++ b/src/pages/salesAfterList/index.module.scss @@ -0,0 +1,38 @@ +.order_list_main{ + height: 100vh; + background-color: $color_bg_one; + display: flex; + flex-direction: column; + .title{ + padding: 0 20px; + background-color: #fff; + box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16); + border-bottom: 2px solid #e2e2e2; + height: 160px; + .order_status_list{ + font-size: $font_size; + color: #9E9E9E; + margin-top: 20px; + .order_status_item{ + padding: 20px; + box-sizing: border-box; + } + .selected{ + font-weight: 700; + color: #000; + border-bottom: 4px solid #707070; + } + .order_list_scroll{ + white-space: nowrap; + display: flex; + } + } + } + .order_list{ + height: calc(100vh - 160px); + .order_item_con{ + margin-top: 20px; + padding: 0 20px; + } + } +} \ No newline at end of file diff --git a/src/pages/salesAfterList/index.tsx b/src/pages/salesAfterList/index.tsx new file mode 100644 index 0000000..f5c59c7 --- /dev/null +++ b/src/pages/salesAfterList/index.tsx @@ -0,0 +1,139 @@ +import Search from "@/components/search" +import useLogin from "@/use/useLogin" +import { Image, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro" +import { useCallback, useEffect, useMemo, useRef, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; +import Order from "./components/order" +import InfiniteScroll from "@/components/infiniteScroll" +import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order' +import { dataLoadingStatus, getFilterData } from "@/common/util" +import OrderStatusList from "./components/orderStatusList" +import Payment from "../order/components/payment" +import { AFTER_ORDER_STATUS } from "@/common/enum" + +export default () => { + const {checkLogin} = useLogin() + useDidShow(async () => { + await checkLogin() + }) + + //搜索参数 + const [searchField, setSearchField] = useState({ + status: -1, + page : 1, + size : 10, + Name:'' + }) + + //获取订单状态 + const [statusList, setStatusList] = useState([{id: -1, name: '全部'}]) + const getOrderStatusList = () => { + const status = Object.values(AFTER_ORDER_STATUS).map(item => { + return {id: item.value, name: item.label} + }) + setStatusList((e) => [...e, ...status]) + } + useEffect(() => { + getOrderStatusList() + }, []) + + //获取订单列表 + const {fetchData: listFetchData, state:orderState} = GetOrderListApi() + const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0}) + const getOrderList = async () => { + let res = await listFetchData(getFilterData(searchField)) + setOrderData({list: res.data.list, total: res.data.total}) + setRefresherTriggeredStatus(() => false) + } + + + //监听筛选条件变化 + useEffect(() => { + getOrderList() + }, [searchField]) + + //上拉加载数据 + const pageNum = useRef({size: searchField.size, page: searchField.page}) + const getScrolltolower = useCallback(() => { + if(orderData.list.length < orderData.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({...searchField, size }) + } + }, [orderData]) + + //状态改变 + const changeStatus = useCallback((e) => { + pageNum.current.page = 1 + setSearchField((value) => ({...value, status:e, size:10})) + setOrderData(() => ({list:[], total:0})) + }, []) + + + //数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading}) + }, [orderData, orderState]) + + //输入了搜索关键字 + const getSearchData = useCallback((e) => { + pageNum.current.page = 1 + setOrderData(() => ({list:[], total:0})) + setSearchField((val) => ({...val, name:e, size:10})) + }, []) + + + //列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async () => { + pageNum.current.size = 1 + setRefresherTriggeredStatus(true) + setSearchField((val) => ({...val, size:10})) + } + + //监听点击的按钮 + const clickOrderBtn = useCallback(({status, orderInfo}) => { + if(status == 2) { + //去支付 + setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) + toPay() + } + }, [orderData]) + + + //去付款 + const [payOrderInfo, setPayOrderInfo] = useState() + const [payMentShow, setPayMentShow] = useState(false) + const toPay = () => { + setPayMentShow(true) + } + //关闭支付弹窗 + const closePayShow = useCallback(() => { + setPayMentShow(() => false) + }, []) + //支付成功 + const onPaySuccess = useCallback(() => { + getOrderList() + closePayShow() + }, []) + + + return ( + + + + + + + + {orderData?.list.map(item => { + return + })} + + + + + ) +}