订单列表对接
This commit is contained in:
parent
bbe5956813
commit
1367c0f654
@ -6,7 +6,8 @@ import { useRequest } from "@/use/useHttp"
|
||||
export const GetPayCode = () => {
|
||||
return useRequest({
|
||||
url: `/`,
|
||||
base_url: 'http://192.168.1.127:8081',
|
||||
base_url: 'http://192.168.1.127:8081/caphtml',
|
||||
method: "post",
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -60,3 +60,23 @@ export const SaleOrderApi = () => {
|
||||
method: "put",
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取订单状态枚举
|
||||
*/
|
||||
export const GetOrderStatusListApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mall/enum/sale/order/status`,
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取订单列表
|
||||
*/
|
||||
export const GetOrderListApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mall/saleOrder/list`,
|
||||
method: "get",
|
||||
})
|
||||
}
|
@ -61,6 +61,7 @@
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
.updateBtn_list{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
@ -2,7 +2,7 @@ import AddressList from "@/components/AddressList";
|
||||
import Popup from "@/components/popup";
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export type AddressInfoParam = {
|
||||
@ -21,7 +21,7 @@ type Param = {
|
||||
shipment_mode?: 1|2 //1自提 2物流
|
||||
}
|
||||
|
||||
export default memo(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param) => {
|
||||
export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param, ref) => {
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
@ -48,12 +48,19 @@ export default memo(({onSelect, defaultValue = null, disabled = false, shipment_
|
||||
}
|
||||
//收货方法,1:自提,2物流
|
||||
const [receivingStatus, setReceivingStatus] = useState(1)
|
||||
const onReceivingStatus = (val) => {
|
||||
const onReceivingStatus = (val, e) => {
|
||||
e.stopPropagation()
|
||||
setReceivingStatus(val)
|
||||
console.log("e::::", e)
|
||||
}
|
||||
useEffect(() => {
|
||||
setReceivingStatus(() => shipment_mode)
|
||||
}, [shipment_mode])
|
||||
|
||||
//把内部方法提供给外部
|
||||
useImperativeHandle(ref, () => ({
|
||||
changeShow
|
||||
}))
|
||||
return (
|
||||
<View>
|
||||
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||
@ -70,18 +77,18 @@ export default memo(({onSelect, defaultValue = null, disabled = false, shipment_
|
||||
</View>
|
||||
<View className={styles.updateBtn}>
|
||||
<View className={styles.updateBtn_list}>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={() => onReceivingStatus(1)}>自提</View>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={() => onReceivingStatus(2)}>物流</View>
|
||||
<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>
|
||||
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(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)}/>
|
||||
</View>
|
||||
</Popup>}
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}))
|
@ -15,7 +15,6 @@ type OrderParam = {
|
||||
total_number: number
|
||||
}
|
||||
|
||||
|
||||
export default memo(({value}:{value:OrderParam|null}) => {
|
||||
//对应数量
|
||||
const formatCount = useCallback((item) => {
|
||||
@ -36,7 +35,7 @@ export default memo(({value}:{value:OrderParam|null}) => {
|
||||
<View className={styles.orders_list_title}>{numText}</View>
|
||||
<View className={styles.orders_list_con}>
|
||||
{
|
||||
value?.list.map(item => {
|
||||
value?.list?.map(item => {
|
||||
return <View key={item.product_code} className={styles.order_list}>
|
||||
<View className={styles.order_list_title}>
|
||||
<View className={styles.tag}>{value.sale_mode_name}</View>
|
||||
|
@ -2,7 +2,7 @@ import { Image, Text, View } from "@tarojs/components"
|
||||
import { memo, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { formatImgUrl } from "@/common/fotmat";
|
||||
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
|
||||
type Param = {
|
||||
status: string,
|
||||
time: string,
|
||||
@ -24,7 +24,7 @@ export default memo(({list = []}:{list?:Param[]}) => {
|
||||
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
|
||||
<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>
|
||||
@ -35,7 +35,7 @@ export default memo(({list = []}:{list?:Param[]}) => {
|
||||
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
|
||||
</View>}
|
||||
<View className={styles.image_tag}>
|
||||
<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
|
||||
{/* <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/> */}
|
||||
</View>
|
||||
</View>}
|
||||
</>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Image, ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo, useEffect } from "react";
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import Popup from "@/components/popup";
|
||||
@ -14,32 +14,106 @@ type Param = {
|
||||
show?: true|false,
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
|
||||
type Item = {
|
||||
product_code: string,
|
||||
product_name: string,
|
||||
product_color_code: string,
|
||||
product_color_name: string,
|
||||
num: string,
|
||||
weight: string,
|
||||
sale_price: string,
|
||||
total_price: string
|
||||
}
|
||||
type CodeParam = {
|
||||
title: string,
|
||||
company: string,
|
||||
order_type: string,
|
||||
sale_user: string,
|
||||
order_created_time: string,
|
||||
order_no: string,
|
||||
department: string,
|
||||
shipment_mode: string,
|
||||
target_user_name: string,
|
||||
target_address: string,
|
||||
target_description: string,
|
||||
pay_account: string,
|
||||
bank_account_name: string,
|
||||
bank_name: string,
|
||||
pay_type: string,
|
||||
client: string,
|
||||
phone: string,
|
||||
order_total_length: string,
|
||||
order_total_price: string,
|
||||
qrcode: string,
|
||||
order_total_weight: string,
|
||||
list: Item[]
|
||||
}
|
||||
export default memo(({show = true, onClose}:Param) => {
|
||||
const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEX///8AAABVwtN+AAACFElEQVR42uyaMbKzMAyExVC8kiNwFI5GjsZRcgRKCgb9I69sY+Ik7R+8O/OKF/N1Gnklr1AURVEURf2sBnUd+P9PZdxFpFddRaZ4uhEhAiR+euBznM2q+hCRacXpROSuiJ0vjphG1YfVkRXM2lm5ECFSR/QpYn+hw+hBhMgnRCScCxA0JSJE3t1i4XdrTPa5e5gvFx+R9pBseqdN9AnTO6+9Pobjq08m8ttIKUP02ZdT0GcRaQuxDhOKyWvMTK/VmMi8droMBxEiNUw6Xawhaagxm5LipGRe+KUpEWkVifMz2hDOXcHwHqV/IdI6IvH3U41JaEqhV6HGLhiRuyBhRj7yyIMrKXnhNYw7L0t7Is0i0mF7snW5w+xp17/4w8+1wxBpF4G79ZEIhbWn2yqY3ortIdIu0mHhYrcYxuqwhRvwkhi88HULR6R5xBd3mmwPmlIaqdGciBBJyKmQjEeNddH2VGuMyO8jeaGCeyfnlAzxLVwlp0SkUeTsbv0dedxlNh8TN7qVRyEizSJlFg4exn7Oo/Xy9zEJSaQt5KS0hzmnaWuml0jDSJm1LqakwbNw28X0ErkPUuaUxg0F40mV+FooRIjUs9Y4n31S8ljTS40RIYLgW1yoxAQkPMzbtC2RlpF0i0mekrwpESFSn5IUq9vYkJba2pbIfZBT1trfkUNSpc/BNiJEKIqiKIqi/gv9CwAA//9IKiY1VjApygAAAABJRU5ErkJggg=='
|
||||
|
||||
|
||||
//获取支付二维码
|
||||
const [payCodeImage, setPayCodeImage] = useState<string>('')
|
||||
const fileData = useRef({
|
||||
filePath: '',
|
||||
base64: ''
|
||||
})
|
||||
const {fetchData} = GetPayCode()
|
||||
const getCore = async () => {
|
||||
let res = await fetchData({
|
||||
title: "面料销售电子确认单",
|
||||
company: "什么什么公司123",
|
||||
order_type: "散剪",
|
||||
sale_user: "小崔",
|
||||
order_created_time:"2022/02/01 12:32:13",
|
||||
order_no:"XS-211005888",
|
||||
department:"嘻嘻嘻",
|
||||
shipment_mode:"自提",
|
||||
target_user_name:"大崔",
|
||||
target_address:"阿斯顿发斯蒂芬",
|
||||
target_description:"无",
|
||||
pay_account:"1234567890123450001",
|
||||
bank_account_name:"佛山市浩川长盛科技有限公司",
|
||||
bank_name:"招商银行佛山分行禅城支行",
|
||||
pay_type:"现结",
|
||||
client:"客户名称",
|
||||
phone:"15818085802",
|
||||
order_total_length:"12",
|
||||
order_total_price:"63000",
|
||||
qrcode:"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'}]
|
||||
})
|
||||
const base64 = res.data.base64
|
||||
setPayCodeImage(() => base64)
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
}
|
||||
useEffect(() => {
|
||||
getCore()
|
||||
}, [])
|
||||
|
||||
//检查是否开启保存图片权限
|
||||
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权,无法保存图片'})
|
||||
const saveImageCheck = async () => {
|
||||
const res = await check()
|
||||
res&&saveImage()
|
||||
}
|
||||
|
||||
//保存图片
|
||||
const saveImage = () => {
|
||||
const save = Taro.getFileSystemManager()
|
||||
const number = Math.random();
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
let filePath = Taro.env.USER_DATA_PATH +'/pic.'+ format
|
||||
alert.loading('正在保存图片')
|
||||
save.writeFile({
|
||||
filePath: filePath,
|
||||
data: base64,
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
success: function (res) {
|
||||
console.log('aa::',res)
|
||||
console.log('aa2::',filePath)
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
filePath: fileData.current.filePath,
|
||||
success: function (res) {
|
||||
alert.success('图片保存成功')
|
||||
},
|
||||
@ -50,43 +124,15 @@ export default memo(({show = true, onClose}:Param) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
Taro.previewImage({
|
||||
current: formatImgUrl(''), // 当前显示图片的http链接
|
||||
urls: [formatImgUrl('')] // 需要预览的图片http链接列表
|
||||
current: fileData.current.filePath, // 当前显示图片的http链接
|
||||
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
|
||||
// const {fetchData} = GetPayCode()
|
||||
// useEffect(() => {
|
||||
// fetchData({
|
||||
// title: "面料销售电子确认单",
|
||||
// company: "什么什么公司123",
|
||||
// order_type: "散剪",
|
||||
// sale_user: "小崔",
|
||||
// order_created_time:"2022/02/01 12:32:13",
|
||||
// order_no:"XS-211005888",
|
||||
// department:"嘻嘻嘻",
|
||||
// shipment_mode:"自提",
|
||||
// target_user_name:"大崔",
|
||||
// target_address:"阿斯顿发斯蒂芬",
|
||||
// target_description:"无",
|
||||
// pay_account:"1234567890123450001",
|
||||
// bank_account_name:"佛山市浩川长盛科技有限公司",
|
||||
// bank_name:"招商银行佛山分行禅城支行",
|
||||
// pay_type:"现结",
|
||||
// client:"客户名称",
|
||||
// phone:"15818085802",
|
||||
// order_total_length:"12",
|
||||
// order_total_price:"23000",
|
||||
// qrcode:"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'}]
|
||||
// })
|
||||
// }, [])
|
||||
|
||||
|
||||
//复制功能
|
||||
return (
|
||||
<View className={styles.scanPay_main}>
|
||||
@ -99,7 +145,7 @@ export default memo(({show = true, onClose}:Param) => {
|
||||
扫码支付成功后,自动更新状态
|
||||
</View>
|
||||
<ScrollView scrollY className={styles.scanPay_list}>
|
||||
<Image mode="widthFix" src={base64} onClick={showImage}></Image>
|
||||
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
|
||||
</ScrollView>
|
||||
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
|
||||
</View>
|
||||
|
@ -89,6 +89,10 @@
|
||||
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;
|
||||
|
@ -109,6 +109,10 @@ import styles from './index.module.scss'
|
||||
const toPay = () => {
|
||||
setPayMentShow(true)
|
||||
}
|
||||
|
||||
//打开地址修改
|
||||
const addressRef = useRef<any>(null)
|
||||
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
{/* <View className={styles.weight_memo_con}>
|
||||
@ -116,7 +120,7 @@ import styles from './index.module.scss'
|
||||
</View> */}
|
||||
<OrderState list={orderDetail?.logistics_details}/>
|
||||
<View >
|
||||
<AddressInfoDetail defaultValue={defaultAddress} disabled={true} shipment_mode={orderDetail?.shipment_mode}/>
|
||||
<AddressInfoDetail ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
|
||||
</View>
|
||||
<KindList value={formatPreViewOrderMemo}/>
|
||||
<View className={styles.order_info} >
|
||||
@ -143,9 +147,9 @@ import styles from './index.module.scss'
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
|
||||
</View>
|
||||
<View className={styles.submit_order}>
|
||||
<View className={styles.order_btn}>申请退货</View>
|
||||
<View className={styles.order_btn}>查看物流</View>
|
||||
<View className={styles.order_btn}>确认收货</View>
|
||||
|
||||
{(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>}
|
||||
<View className={styles.order_btn} onClick={() => toPay()}>去支付</View>
|
||||
</View>
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||
|
@ -1,11 +1,33 @@
|
||||
import { formatImgUrl } from "@/common/fotmat";
|
||||
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
|
||||
import { useSelector } from "@/reducers/hooks";
|
||||
import { Image, Text, View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import { memo } from "react";
|
||||
import { memo, useCallback } from "react";
|
||||
import styles from './index.module.scss'
|
||||
export default memo(() => {
|
||||
|
||||
type Param = {
|
||||
value?: {
|
||||
order_no: string,
|
||||
sale_mode: number,
|
||||
sale_mode_name: string,
|
||||
status_name: string,
|
||||
shipment_mode_name: string,
|
||||
product_list: any[],
|
||||
total_fabrics: number,
|
||||
total_colors: number,
|
||||
total_number: number
|
||||
}
|
||||
}
|
||||
export default memo(({value}: 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])
|
||||
return (
|
||||
<View className={styles.order_item}>
|
||||
<View className={styles.header}>
|
||||
@ -14,41 +36,43 @@ export default memo(() => {
|
||||
<Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
|
||||
</View>
|
||||
<View className={styles.order_num}>
|
||||
<Text>订单号:LY2278204399678</Text>
|
||||
<Text>订单号:{value?.order_no}</Text>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
|
||||
</View>
|
||||
<View className={styles.tag}>自提</View>
|
||||
<View className={styles.tag}>{value?.shipment_mode_name}</View>
|
||||
</View>
|
||||
<View className={styles.product_title}>
|
||||
<View className={styles.product_tag}>大货</View>
|
||||
<View className={styles.product_name}>0770# 21S单面平纹(食毛)</View>
|
||||
<View className={styles.product_status}>待接单</View>
|
||||
</View>
|
||||
<View className={styles.product_list}>
|
||||
<View className={styles.image}>
|
||||
<Image src={formatImgUrl('')}/>
|
||||
<View className={styles.color_num}>24色</View>
|
||||
</View>
|
||||
<View className={styles.color_list}>
|
||||
<View className={styles.color_item}>
|
||||
<View className={styles.color_title}>1# 薄荷绿</View>
|
||||
<View className={styles.color_price}>¥40/kg</View>
|
||||
<View className={styles.color_num}>×2条</View>
|
||||
</View>
|
||||
<View className={styles.color_item}>
|
||||
<View className={styles.color_title}>1# 薄荷绿</View>
|
||||
<View className={styles.color_price}>¥40/kg</View>
|
||||
<View className={styles.color_num}>×2条</View>
|
||||
</View>
|
||||
<View className={styles.color_item}>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.product_con}>
|
||||
<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.product_status}>{value?.status_name}</View>
|
||||
</View>
|
||||
<View className={styles.product_list}>
|
||||
<View className={styles.image}>
|
||||
<Image src={formatImgUrl(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)}条</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
<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}>{`${value?.total_fabrics}种面料,${value?.total_colors}种颜色,共${value?.total_number}条`}</View>
|
||||
</View>
|
||||
<View className={styles.color_count_num}>2种面料,3种颜色,共6条</View>
|
||||
<View className={styles.btns_list}>
|
||||
<View className={styles.btns_item}>取消订单</View>
|
||||
<View className={styles.btns_item}>修改地址</View>
|
||||
|
@ -9,28 +9,30 @@
|
||||
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
|
||||
border-bottom: 2px solid #e2e2e2;
|
||||
.order_status_list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $font_size;
|
||||
color: #9E9E9E;
|
||||
margin-top: 20px;
|
||||
.order_status_item{
|
||||
padding: 20px 10px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selected{
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
border-bottom: 4px solid #707070;
|
||||
// border-radius: 4px;
|
||||
}
|
||||
.order_list_scroll{
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_list{
|
||||
flex:1;
|
||||
height: 0;
|
||||
.order_item{
|
||||
.order_item_con{
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
@ -1,15 +1,16 @@
|
||||
import Search from "@/components/search"
|
||||
import useLogin from "@/use/useLogin"
|
||||
import { Image, Text, View } from "@tarojs/components"
|
||||
import { useDidShow, useRouter } from "@tarojs/taro"
|
||||
import { useCallback, useState } from "react"
|
||||
import { Image, ScrollView, Text, View } from "@tarojs/components"
|
||||
import Taro, { useDidShow, useRouter } from "@tarojs/taro"
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||
import {ORDER_STATUS} from '@/common/enum'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { useSelector } from "@/reducers/hooks"
|
||||
import { formatImgUrl } from "@/common/fotmat"
|
||||
import Order from "./components/order"
|
||||
import InfiniteScroll from "@/components/infiniteScroll"
|
||||
import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
|
||||
import { dataLoadingStatus, getFilterData } from "@/common/util"
|
||||
import Tabs from "@/components/tabs"
|
||||
|
||||
export default () => {
|
||||
const {checkLogin} = useLogin()
|
||||
@ -17,46 +18,89 @@ export default () => {
|
||||
await checkLogin()
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
//搜索参数
|
||||
const [searchField, setSearchField] = useState({
|
||||
shipment_mode:'',
|
||||
status: -1,
|
||||
page : 1,
|
||||
size : 10,
|
||||
key:''
|
||||
Name:''
|
||||
})
|
||||
|
||||
//订单状态
|
||||
type orderStatusParam = {value:number, label:string}[]
|
||||
const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)]
|
||||
const [selectStatus, setSelectStatus] = useState(-1)
|
||||
const changeStatus = useCallback((e) => {
|
||||
setSelectStatus(() => e)
|
||||
//获取订单状态
|
||||
const {fetchData: statusFetchData} = GetOrderStatusListApi()
|
||||
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
|
||||
const getOrderStatusList = async () => {
|
||||
let res = await statusFetchData()
|
||||
let list = [...statusList, ...res.data.list||[]]
|
||||
setStatusList(() => 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({list: res.data.list, total: res.data.total})
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
|
||||
|
||||
//监听筛选条件变化
|
||||
useEffect(() => {
|
||||
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) => {
|
||||
// setMaterialList(() => ({list:[], total:0}))
|
||||
setSearchField((val) => ({...val, code_or_name:e, size:10}))
|
||||
pageNum.current.page = 1
|
||||
setOrderData(() => ({list:[], total:0}))
|
||||
setSearchField((val) => ({...val, name:e, size:10}))
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.order_list_main}>
|
||||
<View className={styles.title}>
|
||||
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
|
||||
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
|
||||
<View className={styles.order_status_list}>
|
||||
{order_status.map(item => {
|
||||
return <View key={item.value} onClick={() => changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label}</View>
|
||||
})}
|
||||
<ScrollView scrollX >
|
||||
<View className={styles.order_list_scroll}>
|
||||
{statusList.map(item => {
|
||||
return <View key={item.id} onClick={() => changeStatus(item.id)} className={classnames(styles.order_status_item, (searchField.status==item.id)&&styles.selected)}>{item.name}</View>
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.order_list}>
|
||||
<InfiniteScroll>
|
||||
{new Array(10).fill('').map(item => {
|
||||
return <View className={styles.order_item}> <Order/></View>
|
||||
|
||||
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} >
|
||||
{orderData?.list.map(item => {
|
||||
return <View className={styles.order_item_con}> <Order value={item}/></View>
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
|
@ -1,7 +1,7 @@
|
||||
|
||||
|
||||
import Taro, { useRouter } from '@tarojs/taro'
|
||||
import { useRef, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import {BASE_URL, WX_APPID} from '@/common/constant'
|
||||
import useUserInfo from "./useUserInfo"
|
||||
import qs from 'qs';
|
||||
@ -122,10 +122,15 @@ export const useRequest = (options:option = {
|
||||
const stateRef = useRef({...params})
|
||||
const [state, setState] = useState({...stateRef.current})
|
||||
const {removeToken, removeSessionKey} = useUserInfo()
|
||||
|
||||
useEffect(() => {
|
||||
console.log('变化::', state.loading)
|
||||
}, [state.loading])
|
||||
// 请求函数
|
||||
const fetchData = async (sub_options?:any) => {
|
||||
stateRef.current.loading = true
|
||||
setState((e) => ({...e, loading:true}))
|
||||
console.log('tf:::', stateRef.current.loading)
|
||||
stateRef.current.query = {
|
||||
...sub_options,
|
||||
...options.pagination && {
|
||||
@ -153,6 +158,7 @@ export const useRequest = (options:option = {
|
||||
}
|
||||
}
|
||||
const result = await Taro.request(q as any)
|
||||
|
||||
const { statusCode } = result
|
||||
const {
|
||||
code,
|
||||
@ -189,7 +195,7 @@ export const useRequest = (options:option = {
|
||||
}
|
||||
stateRef.current.error = false
|
||||
stateRef.current.loading = false
|
||||
setState(() => stateRef.current)
|
||||
setState(() => ({...stateRef.current}))
|
||||
return stateRef.current
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user