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

剪板流程

Browse Source
This commit is contained in:
cheng
2022-06-14 16:29:26 +08:00
parent 86a8a76b27
commit cef0a4c2af
13 changed files with 409 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/addressInfoDetail/index.module.scss
+15
View File
@@ -89,6 +89,21 @@
}
}
.logisticsBtn{
width: 152px;
height: 72px;
background: #ffffff;
border: 2px solid #dddddd;
border-radius: 38px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 999;
font-size: 28px;
color: #707070;
text-align: center;
line-height: 72px;
}
.order_address_text_no{
flex: 1;
font-size: $font_size;
src/pages/order/components/addressInfoDetail/index.tsx
+38 -13
View File
@@ -1,11 +1,12 @@
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
import { alert } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { debounce } from "@/common/util";
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
import styles from './index.module.scss'
export type AddressInfoParam = {
@@ -18,15 +19,18 @@ export type AddressInfoParam = {
phone: string,
}
type Param = {
onSelect?: (val:any) => void, //选择
onSelect?: (val:any) => void, //选择地址
defaultValue?: AddressInfoParam|null, //默认值
disabled?: false|true, //true禁用后只用于展示
shipment_mode?: 1|2, //1自提 2物流
onChangeShipmentMode?: (val: number) => void, //返回收货方式
orderId?: number //订单id
orderInfo?: {
orderId: number //订单id
shipment_mode: 1|2, //1自提 2物流
status: number //订单状态
}
}
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderInfo}: Param, ref) => {
const [showAddressList, setShowAddressList] = useState(false)
useEffect(() => {
@@ -42,13 +46,14 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
}, [userInfo])
const changeShow = () => {
if(receivingStatus == 2)
if(receivingStatus == 2 && !logisticsShow)
setShowAddressList(() => true)
}
useEffect(() => {
setReceivingStatus(() => shipment_mode)
}, [shipment_mode])
if(orderInfo)
setReceivingStatus(() => orderInfo.shipment_mode)
}, [orderInfo])
//把内部方法提供给外部
useImperativeHandle(ref, () => ({
@@ -63,8 +68,9 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
changeReceivingStatus(value)
}
const changeReceivingStatus = debounce(async (value) => {
if(!orderInfo) return false
alert.loading('正在修改')
const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
const res = await shipmentModeFetchData({id: orderInfo.orderId, shipment_mode:value})
if(res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
@@ -78,8 +84,9 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
const [addressId, setAddressId] = useState(0)
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const getAddress = async (value) => {
if(!orderInfo) return false
alert.loading('正在修改')
const res = await addressFetchData({id: orderId, address_id: value.id})
const res = await addressFetchData({id: orderInfo.orderId, address_id: value.id})
if(res.success) {
alert.success('地址修改成功')
onSelect?.(value)
@@ -91,6 +98,21 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
}
}
//订单状态
const {
SaleOrderStatusWaitingReceipt,
SaleOrderStatusAlreadyReceipt,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusCancel
} = ORDER_STATUS
//根据订单状态判断是否显示物流
const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value]
const logisticsShow = useMemo(() => {
return logisticsShowList.includes(orderInfo?.status as number)
}, [orderInfo])
return (
<View>
<View className={styles.order_address} onClick={() => changeShow()}>
@@ -98,20 +120,23 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text className={styles.address_text}>{formatAddress}</Text>
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
{(receivingStatus == 2 && !logisticsShow)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
</View>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
</View>
</View>
<View className={styles.updateBtn}>
{!logisticsShow&&<View className={styles.updateBtn}>
<View className={styles.updateBtn_list}>
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
</View>
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
</View>
</View>||
<View className={styles.logisticsBtn}>
查看物流
</View>}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
src/pages/order/components/kindList/index.module.scss
+1 -1
View File
@@ -40,7 +40,7 @@
.order_list_item {
display: flex;
&:nth-child(2) {
&:nth-child(n + 2) {
margin-top: 30px;
}
.order_list_item_img{
src/pages/order/components/kindList/index.tsx
+4 -2
View File
@@ -40,8 +40,10 @@ export default memo(({order, comfirm = false}:Param) => {
//数量格式
const numText = useMemo(() => {
if(order)
return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
if(order) {
let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100)
return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${total_number}${order?.unit}`
}
}, [order])
const {
src/pages/order/components/orderState/index.module.scss
+33 -1
View File
@@ -15,7 +15,7 @@
}
.order_status_item{
position: relative;
padding-left: 50px;
// padding-left: 50px;
&:nth-last-child(n+2) {
padding-bottom: 30px;
}
@@ -44,6 +44,7 @@
.order_status_content{
display: flex;
align-items: center;
padding: 0 30px;
.order_status_title{
color: $color_font_two;
font-size: $font_size;
@@ -75,6 +76,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%;
@@ -102,4 +121,17 @@
top: -10px;
right: -10px;
}
.refresh{
position: absolute;
top: 23px;
right: 20px;
display: flex;
color: #707070;
.mconfont{
font-size: 30px;
}
.refresh_text{
font-size: 23px;
}
}
}
src/pages/order/components/orderState/index.tsx
+43 -23
View File
@@ -3,40 +3,53 @@ 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";
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
type Param = {
list: {
status: string,
time: string,
tag: string,
desc: string
}[],
payment_method: 0|PAYMENT_METHOD_PARAM,
type List = {
status: string,
time: string,
tag: string,
desc: 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?.reverse()||[]
}, [orderInfo])
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
//倒计时
const count_down = useMemo(() => {
}, [orderInfo])
return (
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
@@ -47,6 +60,9 @@ export default memo(({list = [], payment_method = 0}:Param) => {
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.pay_time}>
剩<Text>23:58:55</Text>支付关闭，订单自动取消
</View>}
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@@ -54,8 +70,12 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
<View className={styles.refresh} onClick={onRefresh}>
<Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>
</View>}
</>