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

商城测试版v8

Browse Source
This commit is contained in:
cheng
2022-07-26 14:26:27 +08:00
parent e11c46fa9c
commit 341c5c2eed
29 changed files with 32 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/scanPay/index.tsx
+7 -7
View File
@@ -69,22 +69,22 @@ export default memo(({show = true, onClose, company, orderInfo}:Param) => {
client: orderInfo.purchaser_name, //客户名称
phone: userPhone(orderInfo), //收货手机号码
order_total_length: (orderInfo.total_number/100).toString(), //订单布匹长度
order_total_price: formatPriceDiv(orderInfo.total_should_collect_money).toString(), //订单价格
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
order_total_num: (orderInfo.total_number) + '',
qrcode:"", //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_weight||orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists ,
show_qrcode: true, //是否显示码单
estimate_amount: orderInfo.estimate_amount,
show_estimate_amount: orderInfo.estimate_amount > 0,
total_sale_price: orderInfo.total_sale_price,
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
show_total_sale_price: orderInfo.total_sale_price > 0,
total_weight_error_discount: orderInfo.total_weight_error_discount,
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
actual_amount: orderInfo.actual_amount,
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
show_actual_amount: orderInfo.actual_amount > 0,
wait_pay_amount: orderInfo.wait_pay_amount,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0
}))
}
src/pages/order/components/scanPayCheck/index.tsx
+7 -7
View File
@@ -74,21 +74,21 @@ export default memo(({show = true, onClose, company, orderInfo}:Param) => {
client: orderInfo.purchaser_name, //客户名称
phone: userPhone(orderInfo), //收货手机号码
order_total_length: (orderInfo.total_number/100).toString(), //订单布匹长度
order_total_price: formatPriceDiv(orderInfo.total_should_collect_money).toString(), //订单价格
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
order_total_num: (orderInfo.total_number).toString(),
qrcode:"", //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_weight||orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists,
estimate_amount: orderInfo.estimate_amount,
show_estimate_amount: orderInfo.estimate_amount > 0,
total_sale_price: orderInfo.total_sale_price,
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
show_total_sale_price: orderInfo.total_sale_price > 0,
total_weight_error_discount: orderInfo.total_weight_error_discount,
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
actual_amount: orderInfo.actual_amount,
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
show_actual_amount: orderInfo.actual_amount > 0,
wait_pay_amount: orderInfo.wait_pay_amount,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0
}))
}
src/pages/order/cutOrder/index.module.scss
-133
View File
@@ -1,133 +0,0 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
flex:1;
word-break:break-all;
}
.order_desc_text_hint{
text-align: right;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 20px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 34px;
}
}
.order_btn_select{
color: $color_main;
border: 2px solid $color_main;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
.weight_memo_con{
margin-bottom: 20px;
}
}
src/pages/order/cutOrder/index.tsx
-228
View File
@@ -1,228 +0,0 @@
import {
GetSaleOrderDetailApi,
EditSaleOrderRemarkApi,
CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfoDetail from "../components/addressInfoDetail";
import KindList from "../components/kindList";
import OrderState from "../components/orderState";
import Payment from "../components/payment";
import Remark from "../components/remark";
import styles from '../index.module.scss'
export default () => {
const [showDesc, setShowDesc] = useState(false)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
setOrderDetail(res.data)
setOrderRemark(res.data.remark)
}
Taro.stopPullDownRefresh()
}
//监听获取到的数据
useEffect(() => {
if(orderDetail)
formatData()
}, [orderDetail])
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
estimate_amount: orderDetail.estimate_amount, //预估金额
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
total_colors: orderDetail.total_colors, //总颜色数量
total_number: orderDetail.total_number, //总数量
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
total_sale_price: orderDetail.total_sale_price, //销售金额
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
actual_amount: orderDetail.actual_amount, //实付金额
the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatDetailOrder
}, [formatDetailOrder])
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: orderDetail?.order_no||'',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
//格式化初始地址
const defaultAddress = useMemo(() => {
return {
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
// id: address.id,
name: orderDetail?.target_user_name,
phone: orderDetail?.target_user_phone
}
}, [orderDetail])
//订单备注
const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
const [orderRemark, setOrderRemark] = useState('')
const getRemark = useCallback(async (e) => {
setOrderRemark(() => e)
let res = await remarkFetchData({remark:e, id: orderId.current})
if(res.success) {
getSaleOrderPreView()
alert.success('提交成功')
} else {
alert.error(res.msg)
}
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 = () => {
setPayMentShow(true)
}
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
if(val == 1 || val == 6) {
//取消订单
getSaleOrderPreView()
}else if(val == 2) {
//待付款
toPay()
}
}, [orderDetail])
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
})
//支付成功
const onPaySuccess = useCallback(() => {
getSaleOrderPreView()
closePayShow()
}, [orderDetail])
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [orderDetail])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: orderDetail?.status, //订单状态
orderId: orderDetail?.id,
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
}
}, [orderDetail])
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<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>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height={50}>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
<SearchInput showBorder={false} title='付款时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
</View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View> }
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
<View className="common_safe_area_y"></View>
</View>
)
}
src/pages/order/orderList/components/order/index.module.scss
+149
View File
@@ -0,0 +1,149 @@
.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;
image{
width: 70px;
height: 70px;
border-radius: 50%;
}
}
.order_con {
padding-left: 15px;
width: 100%;
.name {
color: #000;
font-weight: 700;
font-size: $font_size;
}
.order_num {
font-size: $font_size_medium;
padding-right: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
.order_num_con{
flex:1;
}
.miconfont {
font-size: 20px;
}
.order_no{
}
}
}
.product_status{
font-size: $font_size;
color: $color_main;
font-weight: 700;
}
}
.product_con{
margin-bottom: 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: 0 20px;
@include common_ellipsis()
}
.tag{
font-size: $font_size_min;
padding: 5px 15px;
background-color: $color_main;
color: #fff;
border-radius: 0px 20px 0px 20px;
position:relative;
right: 0;
}
}
.product_list{
display: flex;
.image{
width: 126px;
height: 126px;
border-radius: 20px;
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 20px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 10px 5px 20px;
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;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.price{
font-size: 30px;
color: #007AFF;
text{
font-size: 23px;
}
}
}
}
src/pages/order/orderList/components/order/index.tsx
+146
View File
@@ -0,0 +1,146 @@
import { goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import LabAndImg from "@/components/LabAndImg";
import OrderBtns from "@/components/orderBtns";
import Payment from "@/pages/order/components/payment";
import { useSelector } from "@/reducers/hooks";
import { Image, Text, View } from "@tarojs/components"
import { useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { memo, useCallback, useMemo, useRef, useState } from "react";
import styles from './index.module.scss'
type Param = {
value: {
order_no: string,
sale_mode: number,
sale_mode_name: string,
status_name: string,
shipment_mode: number,
shipment_mode_name: string,
product_list: any[],
total_fabrics: number,
total_colors: number,
total_number: number,
status: 0,
id: number,
lab: any,
rgb: any,
texture_url: string,
payment_method: number, //支付方式
actual_amount: number, //实付金额
wait_pay_amount: number, //待付金额
should_collect_order_id: number, //应付单id
av_return_roll: number,
total_sale_price: number,
estimate_amount: number,
is_return: true|false
},
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])
let {SaleOrderStatusTaking, SaleOrderStatusWaitingReceipt} = ORDER_STATUS
//订单状态
// const orderStatus = useCallback((item) => {
// return item.status == SaleOrderStatusTaking.value?'装车中':item.status_name
// }, [value])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
orderId: value?.id,
...value
}
}, [value])
//总条数
const numText = useMemo(() => {
let total_number_new = value?.sale_mode == 0? value?.total_number:(value?.total_number/100)
return `${value?.total_fabrics} 种面料，${value?.total_colors} 种颜色，共 ${total_number_new}${value?.sale_mode == 0? ' 条':' 米'}`
}, [value])
//订单状态
const orderStatus = useMemo(() => {
if(value.status == SaleOrderStatusWaitingReceipt.value && value.shipment_mode == 1) {
return '待提货'
} else {
return value?.status_name
}
}, [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}`}/>
</View>
<View className={styles.order_con}>
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
<View className={styles.order_num}>
<View className={styles.order_num_con}>
<Text className={styles.order_no}>订单号：{value?.order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<View className={styles.product_status}>{orderStatus}</View>
</View>
</View>
</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.tag}>{value?.shipment_mode_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<LabAndImg value={{lab:value.lab,rgb:value.rgb,texture_url:value.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) + (value.sale_mode == 0?' 条':' 米')}</View>
</View>
)
})
}
{value?.product_list[0].length > 2 && <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}>
<Text>{numText}</Text>
<Text className={styles.price}><Text>¥</Text>{value.total_sale_price?formatPriceDiv(value.total_sale_price, 100, true):formatPriceDiv(value.estimate_amount, 100, true)}</Text>
</View>
</View>
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick} showStatus='list'/>
</View>
)
})
src/pages/order/orderList/components/orderStatusList/index.module.scss
+18
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;
}
}
src/pages/order/orderList/components/orderStatusList/index.tsx
+47
View File
@@ -0,0 +1,47 @@
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) {
console.log('defaultId:::', defaultId)
const index = list?.findIndex(item => {
return item.id == defaultId
})
if(index !== -1) {
const num = index > 0?( index - 1) : 0
setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
}
}
setSelectInfo((e) => ({...e, selected: defaultId||-1}))
}, [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>
)
})
src/pages/order/cutOrder/index.config.ts → src/pages/order/orderList/index.config.ts
+2 -2
View File
@@ -1,6 +1,6 @@
export default {
navigationBarTitleText: '订单详情',
navigationBarTitleText: '订单列表',
enableShareAppMessage: true,
enablePullDownRefresh: true,
backgroundTextStyle: 'dark',
enableShareAppMessage: true,
}
src/pages/order/orderList/index.module.scss
+38
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;
}
}
}
src/pages/order/orderList/index.tsx
+217
View File
@@ -0,0 +1,217 @@
import Search from "@/components/search"
import useLogin from "@/use/useLogin"
import {View } from "@tarojs/components"
import Taro, { useDidShow,} from "@tarojs/taro"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import Order from "./components/order"
import InfiniteScroll from "@/components/infiniteScroll"
import { GetOrderListApi, OrderStatusListApi} from '@/api/order'
import { dataLoadingStatus, getFilterData } from "@/common/util"
import OrderStatusList from "./components/orderStatusList"
import { AddShoppingCartApi } from "@/api/shopCart"
import ShopCart from "@/components/shopCart"
import { alert } from "@/common/common"
import { useRouter } from "@tarojs/runtime"
import Payment from "../components/payment"
import ApplyRefund from "../components/applyRefund"
import ReturnRecord from "../components/returnRecord"
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
//传递过来的参数
const router = useRouter()
useEffect(() => {
if(router?.params.status != undefined && router?.params.status !== '') {
setSearchField((e) => ({...e, status: router?.params.status as number}))
} else {
setSearchField((e) => ({...e, status:-1}))
}
}, [router])
//搜索参数
const [searchField, setSearchField] = useState<{status: number|null, page: number, size: number, name: string}>({
status: null,
page : 1,
size : 10,
name:''
})
//获取订单状态
const {fetchData: orderStatusListFetchData} = OrderStatusListApi()
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
const getOrderStatusList = async () => {
let res = await orderStatusListFetchData()
setStatusList((e) => [...e, ...res.data.list])
}
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((e) => ({...e, list: res.data?.list, total: res.data?.total}))
setRefresherTriggeredStatus(() => false)
}
//监听筛选条件变化
useEffect(() => {
if(searchField.status != null) 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}) => {
setCallBackPayOrderInfo(() => orderInfo)
if(status == 1 || status == 6 || status == 8) {
getOrderList()
} else if(status == 2) {
//去支付
toPay()
} else if (status == 3) {
//申请退款
if(!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款')
setRefundShow(true)
} else if (status == 7) {
//购买
addShopCart(orderInfo)
} else if (status == 9) {
onReturnRecordShow()
} else if (status == 10) {
setShowScanPayCheck(true)
}
}, [orderData])
const [callBackOrderInfo, setCallBackPayOrderInfo] = useState<any>()
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [])
//支付成功
const onPaySuccess = useCallback(() => {
getOrderList()
closePayShow()
}, [])
//添加购物车
const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async (item) => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
item?.product_list.map(pitem => {
pitem?.product_colors.map(citem => {
if(item?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll})
} else {
return color_list.push({product_color_id: citem.id, length: citem.length})
}
})
})
const state = await addFetchData({
sale_mode: item?.sale_mode,
color_list
})
if(state.success) {
Taro.showToast({
title:'已加入购物车'
})
setShowCart(true)
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
//申请退款
const [refundShow, setRefundShow] = useState(false)
const applyRefundClose = useCallback(() => {
setRefundShow(false)
}, [])
//显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false)
const onReturnRecordShow = useCallback(() => {
setReturnRecordShow(true)
}, [])
const closeReturnRecord = useCallback(() => {
setReturnRecordShow(false)
}, [])
//显示
const [showScanPayCheck, setShowScanPayCheck] = useState(false)
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={router?.params.status as number}/>
</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>
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={callBackOrderInfo?.id}/>
<ShopCart intoStatus="again" show={showCart} onClose={() => setShowCart(false)}/>
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo}/>
</View>
)
}