订单列表对接

This commit is contained in:
2022-05-25 20:32:15 +08:00
parent bbe5956813
commit 1367c0f654
13 changed files with 287 additions and 129 deletions
@@ -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>}
</>
+89 -43
View File
@@ -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,42 +124,14 @@ 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 (
@@ -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>