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

订单列表对接

Browse Source
This commit is contained in:
czm 2022-05-26 17:32:59 +08:00
parent 1367c0f654
commit e73bd1bc25
10 changed files with 271 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/order.ts
View File

@ -80,3 +80,13 @@ export const SaleOrderApi = () => {
method: "get",
})
}
/**
* 作废销售单
*/
export const CancelOrderApi = () => {
return useRequest({
url: `/v1/mall/saleOrder/cancel`,
method: "put",
})
}

22
src/components/orderBtns/index.module.scss Normal file
View File

@ -0,0 +1,22 @@
.btns_list{
display: flex;
justify-content: flex-end;
margin-top: 30px;
.btns_item{
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 72px;
font-size: $font_size;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 32px;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}

80
src/components/orderBtns/index.tsx Normal file
View File

@ -0,0 +1,80 @@
import { CancelOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useCallback, useRef, memo } from "react"
import styles from './index.module.scss'
type Param = {
status?: number //订单状态
orderId?: number //订单id
}
export default memo(({status = 0, orderId = 0}:Param) => {
//订单按钮按订单状态归类
const orderBtnsList = useRef([
{
value: [0, 1, 2, 9, 3], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货
label: '取消订单'
},
{
value: [3, 9], //去付款按钮对应：待付款， 待发货
label: '去付款'
},
{
value: [3], //取消订单按钮对应： 待发货
label: '申请退款'
},
{
value: [4, 7, 8, 6], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
label: '查看物流'
},
{
value: [4, 7, 6], //取消订单按钮对应： 待收货, 已收货, 已退款
label: '申请退货'
},
{
value: [4], //取消订单按钮对应： 待收货
label: '确认收货'
},
{
value: [4,7,8,6], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
label: '再次购买'
}
])
const orderBtnsShow = useCallback((item, status) => {
return item.value.includes(status)
},[])
//点击按钮操作
const submitBtns = (val) => {
if( val == 0 ) cancelOrder()
}
//取消订单
const {fetchData: cancelFetchData} = CancelOrderApi()
const cancelOrder = () => {
Taro.showModal({
title: '要取消该订单吗？',
success: async function (res) {
if (res.confirm) {
let res = await cancelFetchData({id: orderId})
if(res.success) {
alert.success('取消成功')
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
return (
<View className={styles.btns_list}>
{orderBtnsList.current.map((item, index) =>
orderBtnsShow(item, status)&&<View className={styles.btns_item} onClick={() => submitBtns(index)}>{item.label}</View>
)}
</View>
)
})

35
src/pages/order/comfirm.tsx
View File

@ -31,7 +31,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useDidShow(async () => {
await checkLogin()
// await checkLogin()
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map(item => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
@ -43,8 +43,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
})
//获取销售预览订单
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string, default_address:AddressInfoParam}
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
@ -65,36 +64,16 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
//格式化数据格式
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const formatData = () => {
if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
let dataList = {}
let num_count = 0 //总数量
let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式
preViewOrder?.product_color_list.map(item => {
dataList[item.product_code] = dataList[item.product_code]||{}
dataList[item.product_code].product_code = item.product_code
dataList[item.product_code].product_name = item.product_name
dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name
dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[]
dataList[item.product_code].color_list.push(item)
//大货
if (preViewOrder.sale_mode == 0) num_count += item.roll
//剪板或散件
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
orderList.push({shopping_cart_product_color_id:item.id})
})
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100);
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
estimate_weight: preViewOrder.estimate_weight,
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
colo_count: preViewOrder.product_color_list.length, //颜色数量
num_count: num_count, //总数量
total_colors: preViewOrder.total_colors, //总颜色数量
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: Object.values(dataList)
list: preViewOrder.product_list
})
setSubmitOrderData({...submitOrderData, list: orderList})
}
}
const formatPreViewOrderMemo = useMemo(() => {
console.log('formatPreViewOrder::',formatPreViewOrder)
@ -185,7 +164,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`}</View>
</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View>

66
src/pages/order/components/addressInfoDetail/index.tsx
View File

@ -1,3 +1,6 @@
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"
@ -12,29 +15,25 @@ export type AddressInfoParam = {
address_detail: string,
id?: number,
name: string,
phone: string
phone: string,
}
type Param = {
onSelect?: (val:any) => void, //选择
defaultValue?: AddressInfoParam|null //默认值
disabled?: false|true //true禁用后只用于展示
shipment_mode?: 1|2 //1自提 2物流
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, defaultValue = null, disabled = false, shipment_mode = 1}: Param, ref) => {
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 getAddress = useCallback((val) => {
setShowAddressList(() => false)
setUserInfo(() => val)
onSelect?.(val)
}, [])
//地址格式
const formatAddress = useMemo(() => {
@ -46,13 +45,7 @@ export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false
if(receivingStatus == 2)
setShowAddressList(() => true)
}
//收货方法,1:自提，2物流
const [receivingStatus, setReceivingStatus] = useState(1)
const onReceivingStatus = (val, e) => {
e.stopPropagation()
setReceivingStatus(val)
console.log("e::::", e)
}
useEffect(() => {
setReceivingStatus(() => shipment_mode)
}, [shipment_mode])
@ -61,6 +54,41 @@ export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false
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('正在修改')
setShowAddressList(() => false)
setUserInfo(() => value)
const res = await addressFetchData({id: orderId, address_id: value.id})
if(res.success) {
alert.success('修改成功')
onSelect?.(value)
} else {
alert.none(res.msg)
}
}
return (
<View>
<View className={styles.order_address} onClick={() => changeShow()}>
@ -86,7 +114,7 @@ export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={(item) => getAddress(item)}/>
<AddressList onSelect={getAddress}/>
</View>
</Popup>
</View>

31
src/pages/order/components/scanPay/index.tsx
View File

@ -8,6 +8,7 @@ import { alert } from "@/common/common";
import { formatImgUrl } from "@/common/fotmat";
import useCheckAuthorize from "@/use/useCheckAuthorize";
import { GetPayCode } from "@/api/onlinePay";
import LoadingCard from "@/components/loadingCard";
type Param = {
@ -58,7 +59,7 @@ export default memo(({show = true, onClose}:Param) => {
filePath: '',
base64: ''
})
const {fetchData} = GetPayCode()
const {fetchData, state} = GetPayCode()
const getCore = async () => {
let res = await fetchData({
title: "面料销售电子确认单",
@ -80,7 +81,7 @@ export default memo(({show = true, onClose}:Param) => {
phone:"15818085802",
order_total_length:"12",
order_total_price:"63000",
qrcode:"www.zzfzyc.com/checkorder/XS-211005888",
qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888",
order_total_weight:"300.00",
list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
})
@ -91,10 +92,18 @@ export default memo(({show = true, onClose}:Param) => {
let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
}
useEffect(() => {
if(show)
getCore()
}, [])
}, [show])
//检查是否开启保存图片权限
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
@ -105,13 +114,7 @@ export default memo(({show = true, onClose}:Param) => {
//保存图片
const saveImage = () => {
const save = Taro.getFileSystemManager()
alert.loading('正在保存图片')
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
success: function (res) {
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
success: function (res) {
@ -122,13 +125,12 @@ export default memo(({show = true, onClose}:Param) => {
}
})
}
})
}
//预览图片
const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示图片的http链接
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
})
}
@ -144,9 +146,12 @@ export default memo(({show = true, onClose}:Param) => {
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态
</View>
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
</ScrollView>
</ScrollView>}
</View>
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
</View>
</Popup>

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

@ -1,20 +1,22 @@
import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from "@/api/order";
import {
GetSaleOrderDetailApi,
EditSaleOrderRemarkApi,
CancelOrderApi
} from "@/api/order";
import { alert, goLink } from "@/common/common";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
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, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo";
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 WeightMemo from "./components/weightMemo";
import styles from './index.module.scss'
export default () => {
@ -59,7 +61,6 @@ import styles from './index.module.scss'
})
}
const formatPreViewOrderMemo = useMemo(() => {
console.log('formatDetailOrder::',formatDetailOrder)
return formatDetailOrder
}, [formatDetailOrder])
@ -97,7 +98,8 @@ import styles from './index.module.scss'
setOrderRemark(() => e)
let res = await remarkFetchData({remark:e, id: orderId.current})
if(res.success) {
alert.success('修改成功')
getSaleOrderPreView()
alert.success('提交成功')
} else {
alert.error(res.msg)
}
@ -113,6 +115,18 @@ import styles from './index.module.scss'
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
@ -120,7 +134,7 @@ import styles from './index.module.scss'
</View> */}
<OrderState list={orderDetail?.logistics_details}/>
<View >
<AddressInfoDetail ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
@ -141,15 +155,13 @@ import styles from './index.module.scss'
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderRemark}</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>
<View className={styles.submit_order}>
{(orderDetail?.status == 0)&&<View className={styles.order_btn}>取消订单</View>}
{(orderDetail?.status == 0)&&<View className={classnames(styles.order_btn, styles.order_btn_select)} onClick={() => addressRef.current.changeShow()}>修改地址</View>}
<OrderBtns status={orderDetail?.status} orderId={orderDetail?.id}/>
<View className={styles.order_btn} onClick={() => toPay()}>去支付</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >

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

@ -118,26 +118,4 @@
border-radius: 10px;
padding: 10px 22px;
}
.btns_list{
display: flex;
justify-content: flex-end;
margin-top: 30px;
.btns_item{
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 72px;
font-size: $font_size;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 32px;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}
}

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

@ -1,8 +1,10 @@
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 } from "react";
import { memo, useCallback, useMemo, useRef } from "react";
import styles from './index.module.scss'
type Param = {
@ -15,7 +17,9 @@ type Param = {
product_list: any[],
total_fabrics: number,
total_colors: number,
total_number: number
total_number: number,
status: 0,
id: number
}
}
export default memo(({value}: Param) => {
@ -28,9 +32,47 @@ export default memo(({value}: Param) => {
const standardPrice = useCallback((price, sale_mode) => {
return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
}, [value])
//订单按钮按订单状态归类
const orderBtnsList = useRef([
{
value: [0, 1, 2, 9, 3], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货
label: '取消订单'
},
{
value: [3, 9], //去付款按钮对应：待付款， 待发货
label: '去付款'
},
{
value: [3], //取消订单按钮对应： 待发货
label: '申请退款'
},
{
value: [4, 7, 8, 6], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
label: '查看物流'
},
{
value: [4, 7, 6], //取消订单按钮对应： 待收货, 已收货, 已退款
label: '申请退货'
},
{
value: [4], //取消订单按钮对应： 待收货
label: '确认收货'
},
{
value: [4,7,8,6], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
label: '再次购买'
}
])
const orderBtnsShow = useCallback((item, status) => {
return item.value.includes(status)
},[])
return (
<View className={styles.order_item}>
<View className={styles.header}>
<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>
@ -41,7 +83,7 @@ export default memo(({value}: Param) => {
</View>
<View className={styles.tag}>{value?.shipment_mode_name}</View>
</View>
<View className={styles.product_con}>
<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>
@ -61,7 +103,6 @@ export default memo(({value}: Param) => {
<View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
</View>
)
})
}
<View className={styles.color_item}>
@ -73,12 +114,8 @@ export default memo(({value}: Param) => {
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
</View>
<View className={styles.btns_list}>
<View className={styles.btns_item}>取消订单</View>
<View className={styles.btns_item}>修改地址</View>
<View className={styles.btns_item}>修改地址</View>
<View className={classnames(styles.btns_item, styles.end_btn)}>去付款</View>
</View>
<OrderBtns status={value?.status}/>
</View>
)
})

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

@ -100,7 +100,7 @@ export default () => {
<View className={styles.order_list}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} >
{orderData?.list.map(item => {
return <View className={styles.order_item_con}> <Order value={item}/></View>
return <View key={item.id} className={styles.order_item_con}> <Order value={item}/></View>
})}
</InfiniteScroll>
</View>