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

订单支付完善

Browse Source
This commit is contained in:
czm 2022-06-06 20:32:35 +08:00
parent 52008e153f
commit a552a023f8
18 changed files with 603 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.config.ts
View File

@ -116,6 +116,12 @@ export default {
pages: [
"index",
]
},
{
root: "pages/salesAfterList",
pages: [
"index",
]
}
]
}

12
src/common/enum.ts
View File

@ -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 = {

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

@ -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,

20
src/pages/order/components/orderState/index.tsx
View File

@ -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) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(settle_mode == 2)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(settle_mode == 1)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(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}/>}
</View>
</View>}
</>

41
src/pages/order/components/payment/index.tsx
View File

@ -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<any>()
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 (
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View>
)
}, [payInfo])
//账期
const account_peyment = useMemo(() => {
const price = payInfo?.should_collect_money - payInfo?.amount_paid
return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.account_period < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
)
}, [payInfo])
@ -133,16 +143,17 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
</View>
<MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
</View>
<View className={styles.payment_list_item}>
{(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&&<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
</View>
<View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
{/* <View className={styles.payment_list_item_left_price}>可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> */}
{account_peyment}
</View>
<MCheckbox status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
</View>
</View>}
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>

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

@ -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 (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details} settle_mode={orderDetail?.settle_mode}/>
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
@ -216,7 +224,7 @@ import styles from './index.module.scss'
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
<View className="common_safe_area_y"></View>
</View>
)

1
src/pages/orderList/components/order/index.module.scss
View File

@ -117,5 +117,6 @@
background-color: #F6F6F6;
border-radius: 10px;
padding: 10px 22px;
margin-top: 20px;
}
}

9
src/pages/orderList/components/order/index.tsx
View File

@ -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, //待付金额
}

26
src/pages/orderList/index.tsx
View File

@ -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<any[]>([{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<any>()
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 (
<View className={styles.order_list_main}>
<View className={styles.title}>
@ -132,7 +134,7 @@ export default () => {
})}
</InfiniteScroll>
</View>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={shouldCollectOrderId}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
</View>
)
}

121
src/pages/salesAfterList/components/order/index.module.scss Normal file
View File

@ -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;
}
}

106
src/pages/salesAfterList/components/order/index.tsx Normal file
View File

@ -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 (
<View className={styles.order_item}>
<View className={styles.header} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<View className={styles.user}>
<Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
</View>
<View className={styles.order_num}>
<Text>订单号：{value?.order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<OrderStatusTag/>
</View>
<View className={styles.product_con} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<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>
<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>
</View>
<View className={styles.color_list}>
{value?.product_list[0].product_colors.map((itemColor, index) => {
return (
(index <= 1)&&<View className={styles.color_item}>
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
<View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
</View>
)
})
}
<View className={styles.color_item}>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
</View>
</View>
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
</View>
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
</View>
)
})

18
src/pages/salesAfterList/components/orderStatusList/index.module.scss Normal file
View File

@ -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;
}
}

46
src/pages/salesAfterList/components/orderStatusList/index.tsx Normal file
View File

@ -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 (
<View className={styles.order_status_list}>
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
<View className={styles.order_list_scroll}>
{list.map((item, index) => {
return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
})}
</View>
</ScrollView>
</View>
)
})

21
src/pages/salesAfterList/components/orderStatusTag/index.module.scss Normal file
View File

@ -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;
}

20
src/pages/salesAfterList/components/orderStatusTag/index.tsx Normal file
View File

@ -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 (
<>
<View className={classnames(styles.tag, styles.saleReturn_tag)}>
<View className={classnames(styles.miconfont, 'iconfont, icon-yucunkuan')}></View>
<Text>退货</Text>
</View>
</>
)
})

4
src/pages/salesAfterList/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '退货/售后',
enableShareAppMessage: true,
}

38
src/pages/salesAfterList/index.module.scss Normal file
View File

@ -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;
}
}
}

139
src/pages/salesAfterList/index.tsx Normal file
View File

@ -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<any[]>([{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<any>()
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [])
//支付成功
const onPaySuccess = useCallback(() => {
getOrderList()
closePayShow()
}, [])
return (
<View className={styles.order_list_main}>
<View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
</View>
<View className={styles.order_list}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list.map(item => {
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})}
</InfiniteScroll>
</View>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
</View>
)
}