订单售后v3
This commit is contained in:
@@ -26,87 +26,46 @@
|
||||
.order_address_text_title{
|
||||
font-size: $font_size_medium;
|
||||
margin-top: 10px;
|
||||
@include common_ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.moreIconfont{
|
||||
font-size: 20px;
|
||||
}
|
||||
.address_text{
|
||||
word-break:break-all;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.order_address_text_name{
|
||||
|
||||
color: #707070;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $color_font_one;
|
||||
font-size: $font_size_medium;
|
||||
margin-right: 40px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: $color_font_one;
|
||||
flex:1;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateBtn{
|
||||
width:200px;
|
||||
font-size: $font_size_min;
|
||||
background-color: #F0F0F0;
|
||||
height: 64px;
|
||||
border-radius: 24px;
|
||||
width:152px;
|
||||
font-size: 28px;
|
||||
height: 60px;
|
||||
color: $color_font_two;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
.updateBtn_list{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
.updateBtn_item_select{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.updateBtn_item{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
}
|
||||
.updateBtn_select{
|
||||
color: #fff;
|
||||
background-color: $color_main;
|
||||
border-radius: 24px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 61px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 36px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
|
||||
}
|
||||
.order_address_text_no{
|
||||
flex: 1;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.order_address_more_icon{
|
||||
color: $color_font_three;
|
||||
font-size: $font_size;
|
||||
}
|
||||
|
||||
}
|
||||
.order_address_list {
|
||||
height: 900px;
|
||||
.order_address_title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 0 30px 0;
|
||||
}
|
||||
}
|
||||
@@ -1,122 +1,26 @@
|
||||
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
|
||||
import { alert } from "@/common/common";
|
||||
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 {memo} from "react";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export type AddressInfoParam = {
|
||||
province_name: string,
|
||||
city_name: string,
|
||||
district_name: string,
|
||||
address_detail: string,
|
||||
id?: number,
|
||||
name: string,
|
||||
phone: string,
|
||||
}
|
||||
type Param = {
|
||||
onSelect?: (val:any) => void, //选择
|
||||
defaultValue?: AddressInfoParam|null, //默认值
|
||||
disabled?: false|true, //true禁用后只用于展示
|
||||
shipment_mode?: 1|2, //1自提 2物流
|
||||
onChangeShipmentMode?: (val: number) => void, //返回收货方式
|
||||
orderId?: number //订单id
|
||||
}
|
||||
|
||||
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setUserInfo(() => defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const [userInfo, setUserInfo] = useState<any>()
|
||||
|
||||
//地址格式
|
||||
const formatAddress = useMemo(() => {
|
||||
if(userInfo)
|
||||
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
|
||||
}, [userInfo])
|
||||
|
||||
const changeShow = () => {
|
||||
if(receivingStatus == 2)
|
||||
setShowAddressList(() => true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setReceivingStatus(() => shipment_mode)
|
||||
}, [shipment_mode])
|
||||
|
||||
//把内部方法提供给外部
|
||||
useImperativeHandle(ref, () => ({
|
||||
changeShow
|
||||
}))
|
||||
|
||||
//收货方法,1:自提，2物流
|
||||
const [receivingStatus, setReceivingStatus] = useState(1)
|
||||
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
|
||||
const onReceivingStatus = (value, e) => {
|
||||
e.stopPropagation()
|
||||
changeReceivingStatus(value)
|
||||
}
|
||||
const changeReceivingStatus = debounce(async (value) => {
|
||||
alert.loading('正在修改')
|
||||
const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
|
||||
if(res.success) {
|
||||
alert.success('收货方式修改成功')
|
||||
onChangeShipmentMode?.(value)
|
||||
setReceivingStatus(value)
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}, 10)
|
||||
|
||||
//修改地址
|
||||
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
|
||||
const getAddress = async (value) => {
|
||||
alert.loading('正在修改')
|
||||
const res = await addressFetchData({id: orderId, address_id: value.id})
|
||||
if(res.success) {
|
||||
alert.success('地址修改成功')
|
||||
onSelect?.(value)
|
||||
setShowAddressList(() => false)
|
||||
setUserInfo(() => value)
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}
|
||||
|
||||
export default memo(({defaultValue}:{defaultValue:string}) => {
|
||||
return (
|
||||
<View>
|
||||
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
|
||||
<View className={styles.order_address} >
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont','icon-fahuo')}></View>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_title}>
|
||||
<Text>{formatAddress}</Text>
|
||||
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
|
||||
<Text className={classnames(styles.address_text, styles.address_text_no)}>{defaultValue}</Text>
|
||||
</View>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>{userInfo?.name}</Text>
|
||||
<Text>{userInfo?.phone}</Text>
|
||||
<Text>管理员</Text>
|
||||
<Text>13939399536</Text>
|
||||
<View className={styles.updateBtn}>
|
||||
上传物流
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<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>
|
||||
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||
<View className={styles.order_address_list}>
|
||||
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||
<AddressList onSelect={getAddress}/>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}))
|
||||
})
|
||||
@@ -61,7 +61,7 @@ export default memo(({order, comfirm = false}:Param) => {
|
||||
{
|
||||
id:1,
|
||||
value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
|
||||
label:'预估金额',
|
||||
label:'扣款金额',
|
||||
field: 'estimate_amount'
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user