商城测试版v8_1

This commit is contained in:
2022-07-30 17:11:42 +08:00
parent e2b0b0c52b
commit 09e34ecabe
39 changed files with 3360 additions and 3274 deletions
@@ -1,220 +1,219 @@
import { GetAddressListApi } from "@/api/addressList";
import { addressListApi } from "@/api/addressManager";
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { debounce, throttle } 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, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import styles from './index.module.scss'
import { GetAddressListApi } from '@/api/addressList'
import { addressListApi } from '@/api/addressManager'
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from '@/api/order'
import { alert, goLink } from '@/common/common'
import { ORDER_STATUS } from '@/common/enum'
import { debounce, throttle } 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, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import Taro from '@tarojs/taro'
import styles from './index.module.scss'
type Param = {
onSelect?: (val:any) => void, //选择地址
disabled?: false|true, //true禁用后只用于展示
onChangeShipmentMode?: (val: number) => void, //返回收货方式
onLogistics?: () => void, //查看物流
status?: 1|2, //1确认订单时使用, 2订单流程
orderInfo?: {
id?: number //订单id
shipment_mode?: 1|2, //1自提 2物流
status?: number //订单状态
province_name: string,
city_name: string,
district_name: string,
address_detail: string,
take_goods_address: string,
take_goods_phone: string,
target_user_name: string,
target_user_phone: string
}
type Param = {
onSelect?: (val: any) => void //选择地址
disabled?: false | true //true禁用后只用于展示
onChangeShipmentMode?: (val: number) => void //返回收货方式
onLogistics?: () => void //查看物流
status?: 1 | 2 //1确认订单时使用, 2订单流程
orderInfo?: {
id?: number //订单id
shipment_mode?: 1 | 2 //1自提 2物流
status?: number //订单状态
province_name: string
city_name: string
district_name: string
address_detail: string
take_goods_address: string
take_goods_phone: string
target_user_name: string
target_user_phone: string
}
}
//订单状态
//订单状态
const {
SaleorderstatusWaitingPrePayment,
SaleOrderStatusBooking,
SaleOrderStatusArranging,
SaleOrderStatusArranged,
SaleOrderStatusWaitingPayment,
SaleOrderStatusWaitingReceipt,
SaleOrderStatusAlreadyReceipt,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusCancel,
SaleorderstatusWaitingPrePayment,
SaleOrderStatusBooking,
SaleOrderStatusArranging,
SaleOrderStatusArranged,
SaleOrderStatusWaitingPayment,
SaleOrderStatusWaitingReceipt,
SaleOrderStatusAlreadyReceipt,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusCancel,
} = ORDER_STATUS
export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false, onLogistics}: Param, ref) => {
export default memo(
forwardRef(({ onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false, onLogistics }: Param, ref) => {
const [addressInfo, setAddressInfo] = useState<any>()
useEffect(() => {
if(orderInfo) {
setReceivingStatus(() => orderInfo.shipment_mode||2)
setAddressInfo(() => orderInfo)
}
if (orderInfo) {
setReceivingStatus(() => orderInfo.shipment_mode || 2)
setAddressInfo(() => orderInfo)
}
}, [orderInfo])
//打开地址列表
const [showAddressList, setShowAddressList] = useState(false)
const changeShow = () => {
if(receivingStatus == 2 && !logisticsShow && limitEdit())
setShowAddressList(() => true)
if (receivingStatus == 2 && !logisticsShow && limitEdit()) setShowAddressList(() => true)
}
//把内部方法提供给外部
useImperativeHandle(ref, () => ({
changeShow
changeShow,
}))
//收货方法,1:自提,2物流
const [receivingStatus, setReceivingStatus] = useState(2)
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
const { fetchData: shipmentModeFetchData } = EditSaleOrderShipmentModeApi()
const onReceivingStatus = async (value, e) => {
e.stopPropagation()
if(limitEdit()) changeReceivingStatus(value)
e.stopPropagation()
if (limitEdit()) changeReceivingStatus(value)
}
//当没有地址时获取地址列表中的第一个数据
const {fetchData: addressListFetchData} = addressListApi()
const { fetchData: addressListFetchData } = addressListApi()
const getAddressListOne = async () => {
if(orderInfo?.address_detail) return true
let res = await addressListFetchData()
if( res.data.list && res.data.list?.length > 0 ) {
let info = res.data.list[0]
await addressFetchData({id: orderInfo?.id, address_id: info.id})
setAddressInfo((e) => ({...e, ...info, target_user_name: info.name, target_user_phone: info.phone}))
return true
} else {
Taro.showModal({
content: '您还没有地址,请前去新增地址',
success: function (res) {
if (res.confirm) {
goLink('/pages/addressManager/index')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
return false
}
if (orderInfo?.address_detail) return true
let res = await addressListFetchData()
if (res.data.list && res.data.list?.length > 0) {
let info = res.data.list[0]
await addressFetchData({ id: orderInfo?.id, address_id: info.id })
setAddressInfo((e) => ({ ...e, ...info, target_user_name: info.name, target_user_phone: info.phone }))
return true
} else {
Taro.showModal({
content: '您还没有地址,请前去新增地址',
success: function (res) {
if (res.confirm) {
goLink('/pages/addressManager/index')
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
return false
}
}
const changeReceivingStatus = debounce(async (value) => {
if(!orderInfo || value == receivingStatus) return false
if(status == 1) {
onChangeShipmentMode?.(value)
setReceivingStatus(value)
return false
}
if(value == 2) {
let res = await getAddressListOne()
if(!res) return false
}
alert.loading('正在修改')
const res = await shipmentModeFetchData({id: orderInfo.id, shipment_mode:value})
if(res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
setReceivingStatus(() => value)
} else {
alert.none(res.msg)
}
if (!orderInfo || value == receivingStatus) return false
if (status == 1) {
onChangeShipmentMode?.(value)
setReceivingStatus(value)
return false
}
if (value == 2) {
let res = await getAddressListOne()
if (!res) return false
}
alert.loading('正在修改')
const res = await shipmentModeFetchData({ id: orderInfo.id, shipment_mode: value })
if (res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
setReceivingStatus(() => value)
} else {
alert.none(res.msg)
}
}, 300)
//修改地址
const [addressId, setAddressId] = useState(0)
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const { fetchData: addressFetchData } = EditSaleOrderAddressApi()
const getAddress = async (value) => {
if(!orderInfo) return false
if(status == 1) {
setShowAddressList(() => false)
setAddressId(value.id)
setAddressInfo((e) => ({...e, ...value, target_user_name: value.name, target_user_phone: value.phone}))
onSelect?.(value)
return false
}
alert.loading('正在修改')
const res = await addressFetchData({id: orderInfo.id, address_id: value.id})
if(res.success) {
alert.success('地址修改成功')
onSelect?.(value)
setShowAddressList(() => false)
setAddressId(value.id)
setAddressInfo((e) => ({...e, ...value, target_user_name: value.name, target_user_phone: value.phone}))
} else {
alert.none(res.msg)
}
if (!orderInfo) return false
if (status == 1) {
setShowAddressList(() => false)
setAddressId(value.id)
setAddressInfo((e) => ({ ...e, ...value, target_user_name: value.name, target_user_phone: value.phone }))
onSelect?.(value)
return false
}
alert.loading('正在修改')
const res = await addressFetchData({ id: orderInfo.id, address_id: value.id })
if (res.success) {
alert.success('地址修改成功')
onSelect?.(value)
setShowAddressList(() => false)
setAddressId(value.id)
setAddressInfo((e) => ({ ...e, ...value, target_user_name: value.name, target_user_phone: value.phone }))
} else {
alert.none(res.msg)
}
}
//根据订单状态判断是否可修改
const limitEdit = () => {
let res = [
SaleorderstatusWaitingPrePayment.value,
SaleOrderStatusBooking.value,
SaleOrderStatusArranging.value,
SaleOrderStatusArranged.value,
SaleOrderStatusWaitingPayment.value,
].includes(orderInfo?.status as number)
if(!res && status != 1) alert.none('该订单状态不能修改地址!')
return status == 1? true : res
let res = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value].includes(
orderInfo?.status as number,
)
if (!res && status != 1) alert.none('该订单状态不能修改地址!')
return status == 1 ? true : res
}
//根据订单状态判断是否显示物流
const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value]
const logisticsShow = useMemo(() => {
return logisticsShowList.includes(orderInfo?.status as number)
return logisticsShowList.includes(orderInfo?.status as number)
}, [orderInfo])
//地址格式
const formatAddress = useMemo(() => {
if(receivingStatus == 2) {
return addressInfo?.address_detail?addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail:''
} else {
return addressInfo?.take_goods_address
}
if (receivingStatus == 2) {
return addressInfo?.address_detail ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : ''
} else {
return addressInfo?.take_goods_address
}
}, [receivingStatus, addressInfo])
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_text_con}>
<View className={styles.order_address_text_title}>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{formatAddress||'请选择收货地址及信息'}</Text>
{(receivingStatus == 2 && !logisticsShow)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
</View>
<View className={styles.order_address_text_name}>
<Text>{receivingStatus == 1?'管理员':addressInfo?.target_user_name}</Text>
<Text>{receivingStatus == 1?addressInfo?.take_goods_phone: addressInfo?.target_user_phone}</Text>
</View>
</View>
{!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>||
(orderInfo?.status != SaleOrderStatusRefund.value)&&<View className={styles.logisticsBtn} onClick={onLogistics}>
查看物流
</View>}
<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_text_con}>
<View className={styles.order_address_text_title}>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{formatAddress || '请选择收货地址及信息'}</Text>
{receivingStatus == 2 && !logisticsShow && <Text className={classnames(styles.moreIconfont, 'iconfont icon-a-moreback')}></Text>}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<View className={styles.addressList_con}>
<AddressList onSelect={getAddress} id={addressId}/>
</View>
<View className={styles.order_address_text_name}>
<Text>{receivingStatus == 1 ? '谭先生' : addressInfo?.target_user_name}</Text>
<Text>{receivingStatus == 1 ? addressInfo?.take_goods_phone : addressInfo?.target_user_phone}</Text>
</View>
</View>
{(!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>
</Popup>
<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>
)) ||
(orderInfo?.status != SaleOrderStatusRefund.value && (
<View className={styles.logisticsBtn} onClick={onLogistics}>
查看物流
</View>
))}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<View className={styles.addressList_con}>
<AddressList onSelect={getAddress} id={addressId} />
</View>
</View>
</Popup>
</View>
)
}))
}),
)
@@ -1,66 +1,67 @@
.apply_after_sales_con{
padding: 20px;
.returnSaleInput_item{
display: flex;
align-items: center;
padding-bottom: 50px;
flex-wrap: wrap;
.title{
font-size: $font_size;
font-weight: 700;
width: 119px;
}
.select{
flex:1;
height: 60px;
border: 2px solid #e6e6e6;
border-radius: 10px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 26px;
color: $color_font_two;
.miconfont{
font-size: 30px;
}
}
.upload_image{
flex:1;
}
.apply_after_sales_con {
padding: 20px;
.returnSaleInput_item {
display: flex;
align-items: center;
padding-bottom: 50px;
flex-wrap: wrap;
.title {
font-size: $font_size;
font-weight: 700;
width: 119px;
}
.btns_con{
width: 100%;
bottom:0;
box-sizing: border-box;
margin-top: 50px;
.btns_two{
display: flex;
height: 82px;
// border: 1PX solid #007aff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border: 1PX solid #007aff;
border-radius: 40px 0 0 40px;
text-align: center;
line-height: 82px;
color: $color_main;
background-color: #fff;
}
.verify_btn{
flex:1;
border-radius: 0 40px 40px 0;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
.select {
flex: 1;
height: 60px;
border: 2px solid #e6e6e6;
border-radius: 10px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 26px;
color: $color_font_two;
.miconfont {
font-size: 30px;
}
.selected {
color: #000;
}
}
}
.upload_image {
flex: 1;
}
}
.btns_con {
width: 100%;
bottom: 0;
box-sizing: border-box;
margin-top: 50px;
.btns_two {
display: flex;
height: 82px;
// border: 1PX solid #007aff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn {
flex: 1;
border: 1px solid #007aff;
border-radius: 40px 0 0 40px;
text-align: center;
line-height: 82px;
color: $color_main;
background-color: #fff;
}
.verify_btn {
flex: 1;
border-radius: 0 40px 40px 0;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}
+104 -103
View File
@@ -1,111 +1,112 @@
import Popup from "@/components/popup";
import TextareaEnhance from "@/components/textareaEnhance";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import ReasonPopup from "../reasonPopup";
import styles from './index.module.scss'
import classnames from "classnames";
import { ApplyRefundApi, RefundExplainApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";
import Popup from '@/components/popup'
import TextareaEnhance from '@/components/textareaEnhance'
import { ScrollView, Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import ReasonPopup from '../reasonPopup'
import styles from './index.module.scss'
import classnames from 'classnames'
import { ApplyRefundApi, RefundExplainApi } from '@/api/salesAfterOrder'
import { alert } from '@/common/common'
type Param = {
show?: true|false,
onClose?: () => void,
orderId?: number
show?: true | false
onClose?: () => void
orderId?: number
onSuccess?: () => void
}
export default memo(({show, onClose, orderId}:Param) => {
export default memo(({ show, onClose, orderId, onSuccess }: Param) => {
//提交的数据
const submitData = useRef({
return_explain: 0,
sale_order_id: 0,
reason_describe: '',
})
//提交的数据
const submitData = useRef({
useEffect(() => {
if (show && orderId) {
submitData.current.sale_order_id = orderId
refundExplain()
}
}, [orderId, show])
//申请退款
const { fetchData } = ApplyRefundApi()
const getApplyRefund = async () => {
if (!submitData.current.return_explain) return alert.error('请选择说明原因')
let res = await fetchData(submitData.current)
if (res.success) {
alert.success('申请成功')
onSuccess?.()
} else {
alert.error('申请失败')
}
onClose?.()
}
//获取说明数据
const [list, setList] = useState<any[]>([])
const { fetchData: refundExplainFetchdata } = RefundExplainApi()
const refundExplain = async () => {
let res = await refundExplainFetchdata()
setList(() => res.data.list)
}
const [reason, setReason] = useState({ id: 0, name: '' })
const reasonSelect = useCallback((e) => {
setReason({ ...reason, name: e.name, id: e.id })
submitData.current.return_explain = e.id
closeReason()
}, [])
//备注
const getOtherReason = useCallback((val) => {
submitData.current.reason_describe = val
}, [])
//显示说明
const [showReason, setShowReason] = useState(false)
const closeReason = useCallback(() => {
setShowReason(false)
}, [])
//提交
const onSubmit = (val) => {
if (val == 2) {
getApplyRefund()
} else {
onClose?.()
submitData.current = {
return_explain: 0,
sale_order_id: 0,
reason_describe: ''
})
useEffect(() => {
console.log('show&&orderId::', show)
if(show&&orderId) {
submitData.current.sale_order_id = orderId
refundExplain()
}
}, [orderId, show])
//申请退款
const {fetchData} = ApplyRefundApi()
const getApplyRefund = async () => {
if(!submitData.current.return_explain) return alert.error('请选择说明原因')
let res = await fetchData(submitData.current)
if(res.success) {
alert.error('申请成功')
} else {
alert.error('申请失败')
}
onClose?.()
reason_describe: '',
}
}
}
//获取说明数据
const [list, setList] = useState<any[]>([])
const {fetchData: refundExplainFetchdata} = RefundExplainApi()
const refundExplain = async () => {
let res = await refundExplainFetchdata()
setList(() => res.data.list)
}
const [reason, setReason] = useState({id:0, name:''})
const reasonSelect = useCallback((e) => {
setReason({...reason, name:e.name, id:e.id})
submitData.current.return_explain = e.id
closeReason()
}, [])
//备注
const getOtherReason = useCallback((val) => {
submitData.current.reason_describe = val
}, [])
//显示说明
const [showReason, setShowReason] = useState(false)
const closeReason = useCallback(() => {
setShowReason(false)
}, [])
//提交
const onSubmit = (val) => {
if(val == 2) {
getApplyRefund()
} else {
onClose?.()
submitData.current = {
return_explain: 0,
sale_order_id: 0,
reason_describe: ''
}
}
}
return (
<>
<Popup show={show} title="申请退款" onClose={onClose} >
<View className={styles.apply_after_sales_con}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退款说明</View>
<View className={styles.select} onClick={() => setShowReason(true)}>
<Text>{reason.name||'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<TextareaEnhance onChange={getOtherReason} title='备注' placeholder="请输入退款备注"/>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
<View className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
</View >
</View>
</View>
</Popup>
<ReasonPopup defaultValue={reason.id} show={showReason} onClose={closeReason} list={list} title="退款说明" onSelect={reasonSelect}/>
</>
)
})
return (
<>
<Popup show={show} title='申请退款' onClose={onClose}>
<View className={styles.apply_after_sales_con}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退款说明</View>
<View className={styles.select} onClick={() => setShowReason(true)}>
<Text className={reason.name ? styles.selected : ''}>{reason.name || '请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<TextareaEnhance onChange={getOtherReason} title='备注' placeholder='请输入退款备注' />
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onSubmit(1)}>
取消
</View>
<View className={styles.verify_btn} onClick={() => onSubmit(2)}>
确认
</View>
</View>
</View>
</View>
</Popup>
<ReasonPopup defaultValue={reason.id} show={showReason} onClose={closeReason} list={list} title='退款说明' onSelect={reasonSelect} />
</>
)
})
+7 -14
View File
@@ -221,6 +221,9 @@ export default () => {
const applyRefundClose = useCallback(() => {
setRefundShow(false)
}, [])
const applyRefundSuccess = useCallback(() => {
getSaleOrderPreView()
}, [])
//查看物流
const getLogistics = useCallback(() => {
@@ -281,17 +284,9 @@ export default () => {
return (
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
)}
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || <AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />}
<View>
<AddressInfoDetail
orderInfo={defaultAddress}
onLogistics={getLogistics}
onSelect={getAddress}
onChangeShipmentMode={getShipmentMode}
ref={addressRef}
/>
<AddressInfoDetail orderInfo={defaultAddress} onLogistics={getLogistics} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} />
</View>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info}>
@@ -315,9 +310,7 @@ export default () => {
</View>
<View className={styles.order_desc} onClick={descOpen}>
<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>
)}
{(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 && (
@@ -331,7 +324,7 @@ export default () => {
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ScanPayCheck show={showScanPayCheck} onClose={() => setShowScanPayCheck(false)} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={orderDetail?.id} />
<ApplyRefund show={refundShow} onSuccess={applyRefundSuccess} onClose={applyRefundClose} orderId={orderDetail?.id} />
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id} />
<View className='common_safe_area_y'></View>
@@ -1,146 +1,163 @@
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'
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
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) => {
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 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 orderBtnsClick = useCallback((status) => {
onClickBtn?.({status, orderInfo:value})
}, [value])
let { SaleOrderStatusTaking, SaleOrderStatusWaitingReceipt } = ORDER_STATUS
let {SaleOrderStatusTaking, SaleOrderStatusWaitingReceipt} = ORDER_STATUS
//订单状态
// const orderStatus = useCallback((item) => {
// return item.status == SaleOrderStatusTaking.value?'装车中':item.status_name
// }, [value])
//订单状态
// const orderStatus = useCallback((item) => {
// return item.status == SaleOrderStatusTaking.value?'装车中':item.status_name
// }, [value])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
orderId: value?.id,
...value,
}
}, [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 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])
//订单状态
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'/>
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?.product_list?.[0].product_colors?.[0].lab,
rgb: value?.product_list?.[0].product_colors?.[0].rgb,
texture_url: 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) + (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>
)
})
+4 -2
View File
@@ -181,6 +181,9 @@ export default () => {
const applyRefundClose = useCallback(() => {
setRefundShow(false)
}, [])
const applyRefundSuccess = useCallback(() => {
getOrderList()
}, [])
//显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false)
@@ -210,14 +213,13 @@ export default () => {
{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} />
<ApplyRefund show={refundShow} onClose={applyRefundClose} onSuccess={applyRefundSuccess} orderId={callBackOrderInfo?.id} />
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id} />
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo} />