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

🦄 refactor:订单详情对接

Browse Source
This commit is contained in:
Haiyi 2022-09-14 18:45:00 +08:00
parent fb8e93445b
commit c07ba11595
19 changed files with 1166 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -63,6 +63,13 @@
"query": "type=add",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/orderDetails/index",
"query": "id=27651",
"launchMode": "default",
"scene": null
}
]
}

14
src/api/order.ts
View File

@ -109,3 +109,17 @@ export const orderPaymentpreCollectOrderorderPaymentSubmission = () => {
method: 'post',
})
}
//编辑备注信息
export const mpsaleOrderput = () => {
return useRequest({
url: `/v1/mp/saleOrder`,
method: "put",
})
}
//修改销售单的收货地址
export const mpsaleOrderaddress = () => {
return useRequest({
url: `/v1/mp/saleOrder/address`,
method: "put",
})
}

2
src/components/address/index.tsx
View File

@ -204,7 +204,7 @@ export default memo(({
return (
<View onClick={() => selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}>
<View className={styles.address_list_item_name}>{item.name}</View>
{(selectArr[selectIndex]?.id == item.id)&&<View className={`iconfont icon-tick ${styles.address_iconfont}` }></View>}
{(selectArr[selectIndex]?.id == item.id)&&<View className={`iconfont icon-lujing ${styles.address_iconfont}` }></View>}
</View>
)
})}

2
src/pages/order/components/PayPopup/index.module.scss
View File

@ -1,6 +1,6 @@
.popupBox {
position: relative;
z-index: 99999;
z-index: 99;
background: #f7f7f7;
bottom: 0;

15
src/pages/order/components/PayPopup/index.tsx
View File

@ -80,6 +80,17 @@ export default memo((props: Props) => {
//保存图片
const saveImage = () => {
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(picUrl) || []
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',
})
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
@ -136,13 +147,13 @@ export default memo((props: Props) => {
</View>
</View>
{
item.name !== '扫码支付' &&
item.name !== '扫码支付' && item.name !== '线下汇款' &&
<View className={item.checked ? styles.activeChecked : styles.checkYuan}>
<View className={classnames('iconfont', 'icon-lujing', styles.gou)}></View>
</View>
}
{
item.name === '扫码支付' &&
(item.name === '扫码支付' || item.name === '线下汇款') &&
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
}
</View>

94
src/pages/order/components/offlinePay/index.module.scss Normal file
View File

@ -0,0 +1,94 @@
$top: 170px;
.offlinePay_main {
.offlinePay_con {
padding: 20px;
background-color: #fff;
border-radius: 20px;
.miconfont_title {
transform: rotate(-180deg);
position: absolute;
left: 20px;
top: 27px;
font-size: 37px;
color: $color_font_three;
z-index: 99;
}
}
.title {
font-size: $font_size_big;
color: #000000;
text-align: center;
font-weight: 700;
position: relative;
}
.offlinePay_list {
border-radius: 10px;
padding: 60px 0;
.flexBox {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 56px;
.title {
margin-left: 48px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.leftFlex {
margin-right: 48px;
display: flex;
align-items: center;
.btn {
margin-left: 16px;
width: 65px;
height: 32px;
border-radius: 8px;
border: 1px solid #337FFF;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
line-height: 32px;
}
}
}
.offlinePay_con_text {
font-size: $font_size;
font-weight: 700;
}
}
.btns {
background: #007aff;
border-radius: 40px;
width: 668px;
height: 82px;
text-align: center;
line-height: 80px;
width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
}
.kongBox {
height: calc($customTabBarHeight + env(safe-area-inset-bottom));
}
}

100
src/pages/order/components/offlinePay/index.tsx Normal file
View File

@ -0,0 +1,100 @@
import { Text, View } from "@tarojs/components";
import { memo } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import Taro from "@tarojs/taro";
type Param = {
show?: true | false,
onClose?: () => void,
offlineInfo?: {
account_name: string,
bank_of_deposit: string,
transfer_remittance_account: string
},
showKong?: true | false,
}
export default memo(({ show = true, onClose, offlineInfo, showKong = true }: Param) => {
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: `开户名称：${offlineInfo?.account_name};\n\r 开户银行：${offlineInfo?.bank_of_deposit};\n\r 转账汇款账号：${offlineInfo?.transfer_remittance_account};`,
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
// //复制功能
const copy = (index) => {
let res: any = ''
if (index === 1) {
res = offlineInfo?.account_name
} else if (index === 2) {
res = offlineInfo?.bank_of_deposit
} else if (index === 3) {
res = offlineInfo?.transfer_remittance_account
}
Taro.setClipboardData({
data: res || '',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功',
})
},
})
}
return (
<View className={styles.offlinePay_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.offlinePay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>线下汇款</View>
<View className={styles.offlinePay_list}>
<View className={styles.flexBox}>
<View className={styles.title}>开户名称</View>
<View className={styles.leftFlex}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.account_name}</Text>
<View className={styles.btn} onClick={() => { copy(1) }}>复制</View>
</View>
</View>
<View className={styles.flexBox}>
<View className={styles.title}>开户银行</View>
<View className={styles.leftFlex}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text>
<View className={styles.btn} onClick={() => { copy(2) }}>复制</View>
</View>
</View>
<View className={styles.flexBox}>
<View className={styles.title}>转账汇款账号</View>
<View className={styles.leftFlex}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text>
<View className={styles.btn} onClick={() => { copy(3) }}>复制</View>
</View>
</View>
{/* <SearchInput showBorder={false} title='开户银行' titleStyle={{ fontSize: '23rpx' }}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text>
</SearchInput>
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{ fontSize: '23rpx' }}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text>
</SearchInput> */}
</View>
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
</View>
{
showKong && <View className={styles.kongBox}></View>
}
</Popup>
</View>
)
})

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

@ -10,6 +10,7 @@ import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
import ItemList from './components/itemList'
import OfflinePay from './components/offlinePay'
import {
mpsaleOrdercancel,
mpshoppingCartproductColorlist,
@ -336,6 +337,10 @@ export default () => {
money: "",
isCheck: false,
},
{
iconfont: "icon-xianxiahuizong",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
@ -393,10 +398,15 @@ export default () => {
money: "",
isCheck: false,
},
{
iconfont: "icon-xianxiahuizong",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
}
},
);
if (item.is_shipper_picks_up) {
const obj = arr.filter((item) => {
@ -416,12 +426,14 @@ export default () => {
setPayList([...arr])
}
setShowSide(true)
setTitle('待支付款项')
setShowPay(true)
}
//选择支付方式
const clickItem = (item) => {
if (item.name === '扫码支付') { handScanpay() }
if (item.name === '线下汇款') { setShowOffine(true) }
payList.map(it => {
if (item.id === it.id) {
it.checked = true
@ -452,8 +464,8 @@ export default () => {
weight: formatWeightDiv(it.actual_weight).toString(),
sale_price: (it.sale_price / 100).toString(),
total_price:
it.actual_amount !== 0
? (it.actual_amount / 100).toString()
it.total_sale_price !== 0
? (it.total_sale_price / 100).toString()
: (it.estimate_amount / 100).toString(),
length: (it.length / 100).toString(),
weight_error: formatWeightDiv(it.weight_error).toString(),
@ -495,7 +507,7 @@ export default () => {
total_sale_price: (itemObj.total_sale_price / 100).toString(),
show_total_sale_price: true,
show_total_weight_error_discount: true,
actual_amount: (itemObj.payment_amount / 100).toString(),
actual_amount: (itemObj.actual_amount / 100).toString(),
wait_pay_amount: (itemObj.wait_pay_amount / 100).toString(),
order_total_weight_error: (
itemObj.total_weight_error / 1000
@ -563,6 +575,8 @@ export default () => {
//显示支付
const [showPay, setShowPay] = useState(false)
//显示线下汇款
const [showOffline, setShowOffine] = useState(false)
return (
<View>
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
@ -670,6 +684,7 @@ export default () => {
title={title}
picUrl={picUrl}
></PayPopup>
<OfflinePay show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={itemObj}></OfflinePay>
</View >
)
}

4
src/pages/orderDetails/components/BottomApply/index.module.scss
View File

@ -1,6 +1,6 @@
.title {
width: 112px;
height: 34px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;

5
src/pages/orderDetails/components/addressDetailBox/index.module.scss
View File

@ -44,7 +44,7 @@
}
.icon_more {
font-size: 30px;
font-size: 50px;
}
}
@ -65,6 +65,9 @@
margin-top: 24px;
.name {
width: 84px;
height: 34px;
@include common_ellipsis();
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;

37
src/pages/orderDetails/components/addressDetailBox/index.tsx
View File

@ -4,17 +4,40 @@ import classnames from "classnames";
import styles from './index.module.scss'
interface propsObj {
receivingStatus: Number,
onReceivingStatus?: (any, Number) => void
receivingStatus: Number | null,
onReceivingStatus?: (any, Number) => void,
obj: any
}
export default memo((props: propsObj) => {
const {
receivingStatus = 2,
onReceivingStatus
onReceivingStatus,
obj = {}
} = props
const addressInfo = useMemo(() => {
if (receivingStatus == 1) {
return obj.take_goods_address
} else {
return obj.province_name + obj.city_name + obj.district_name
}
}, [receivingStatus])
const addressPone = useMemo(() => {
if (receivingStatus == 1) {
return 13242128982
} else {
return obj.purchaser_phone
}
}, [receivingStatus])
const addressUser = useMemo(() => {
if (receivingStatus == 1) {
return '谭先生'
} else {
return obj.target_user_name
}
}, [receivingStatus])
return (
<View className={styles.addressBox}>
@ -22,13 +45,13 @@ export default memo((props: propsObj) => {
<View className={styles.cirle}>
<View className={classnames('iconfont', 'icon-dingwei', styles.dingwei)}></View>
</View>
<View className={styles.address}>广东省佛山市禅城区南庄镇吉利大道872巷7818号正门口</View>
<View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
<View className={styles.address}>{addressInfo}</View>
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.icon_more)}></View>
</View>
<View className={styles.line}></View>
<View className={styles.bottom}>
<View className={styles.name}>谭先生</View>
<View className={styles.phone}>13334726540</View>
<View className={styles.name}>{addressUser}</View>
<View className={styles.phone}>{addressPone}</View>
<View className={styles.reatBox}>
<View className={styles.updateBtn}>
<View className={styles.updateBtn_list}>

14
src/pages/orderDetails/components/advanceOrderState/index.module.scss
View File

@ -1,6 +1,7 @@
.advance_main {
width:100%;
width: 702px;
margin-top: 20px;
margin-left: 24px;
height: 238px;
background-color: #007AFF;
border-radius: 20px;
@ -9,15 +10,19 @@
font-size: 24px;
color: #dddddd;
position: relative;
.time_con {
padding-left: 30px;
.times {
margin-bottom: 25px;
display: flex;
align-items: center;
.text {
margin-right: 15px;
}
.num {
width: 46px;
height: 50px;
@ -28,23 +33,27 @@
font-weight: 700;
color: #fff;
}
.separate {
padding: 0 10px;
}
}
}
.cardIcon {
width: 238px;
height: 178px;
position: absolute;
right: 0;
bottom: 0;
.image {
width: 100%;
height: 100%;
}
}
.refresh {
position: absolute;
top: 23px;
@ -57,6 +66,7 @@
.mconfont {
font-size: 36px;
}
.refresh_text {
font-size: 25px;
}

2
src/pages/orderDetails/components/advanceOrderState/index.tsx
View File

@ -60,7 +60,7 @@ export default memo(({orderInfo, onRefresh}:Param) => {
<Text className={styles.separate}>:</Text>
<Text className={styles.num}>{showTime.SS}</Text>
</View>
<Text>支付关闭，订单自动取消</Text>
<Text>等待买家付款，超时自动取消</Text>
</View>
<View className={styles.cardIcon}>
<Image className={styles.image} src={formatImgUrl("/mall/my_cart.png")}/>

187
src/pages/orderDetails/components/orderState/index.module.scss Normal file
View File

@ -0,0 +1,187 @@
.order_flow_state {
width: 702px;
margin-top: 24px;
margin-left: 24px;
border-radius: 16px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
.order_status_list {
max-height: 250px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.order_status_list_show {
max-height: 1000px !important;
}
.order_status_item {
position: relative;
&:nth-last-child(n+2) {
padding-bottom: 30px;
}
.order_status_tail_end,
.order_status_tail {
width: 15px;
height: 15px;
border: 2px solid $color_main;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 0;
top: 10px;
z-index: 10;
}
.order_status_tail_end {
background-color: $color_main;
}
.order_status_line {
border-left: 2px solid $color_main;
height: 100%;
top: 10px;
left: 9px;
position: absolute;
z-index: 1;
}
.order_status_content {
display: flex;
align-items: center;
padding: 0 30px;
.order_status_title {
color: $color_font_two;
font-size: $font_size;
font-weight: 700;
}
.order_status_time {
color: $color_font_two;
font-size: $font_size_medium;
padding: 0 20px;
}
.order_status_tag {
font-size: $font_size_min;
background: #F0F0F0;
border-radius: 6px;
padding: 5px 10px;
color: $color_font_two;
}
.order_status_select {
color: $color_main;
}
.order_status_tag_select {
color: $color_main;
}
}
.order_status_des {
color: $color_font_two;
font-size: $font_size_medium;
}
.order_status_des_select {
color: $color_font_one;
}
.pay_time {
height: 56px;
background: #f6f6f6;
border-radius: 20px;
color: #3C3C3C;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-top: 20px;
text {
font-size: 28px;
color: $color_main;
padding: 0 10px;
}
}
}
.more {
width: 100%;
text-align: center;
font-size: $font_size_min;
color: $color_font_one;
padding-top: 20px;
.miconfonts {
display: inline-block;
font-size: 25px;
transform: rotate(90deg);
}
.open_miconfonts {
transform: rotate(-90deg);
}
}
.image_tag {
width: 140px;
height: 144px;
.image {
width: 140px;
height: 144px;
}
position: absolute;
top: -10px;
right: -10px;
}
.refresh {
position: absolute;
top: 23px;
right: 20px;
display: flex;
color: #707070;
display: flex;
align-items: center;
.mconfont {
font-size: 30px;
}
.refresh_text {
font-size: 23px;
}
}
}
.pay_title_tag {
margin-top: 10px;
font-size: 24px;
color: #EE7500;
background: rgba(255, 230, 206, 0.36);
border-radius: 10px;
height: 56px;
display: flex;
align-items: center;
position: relative;
z-index: 999;
.miconfont {
font-size: 30px;
padding: 0 20px;
}
}

79
src/pages/orderDetails/components/orderState/index.tsx Normal file
View File

@ -0,0 +1,79 @@
import { Image, Text, View } from "@tarojs/components"
import { memo, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";
import * as dayjs from 'dayjs'
type List = {
status: string,
time: string,
tag: string,
desc: string,
expire_time: string
}
type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: number, //支付方式
status: number, //订单状态
account_period?: number, //账期
account_period_time?: string //还款日期
}
}
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
useEffect(() => {
console.log('orderInfo33::',orderInfo)
}, [orderInfo])
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
const dataList = useMemo(() => {
return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
}, [orderInfo.logistics_details])
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
return (
<>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
{(dataList.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)}>{formatDateTime(item.time)}</View>
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
<Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_day.png')} className={styles.image}/>}
</View>
</View>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<View className={styles.pay_title_tag}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
您使用了{orderInfo.account_period}天账期支付，还款日期为{formatDateTime(orderInfo.account_period_time)}
</View>}
</>
)
})

3
src/pages/orderDetails/index.config.ts
View File

@ -1,4 +1,5 @@
export default {
navigationBarTitleText: '订单详情',
enableShareAppMessage: true,
enablePullDownRefresh: true,
"backgroundTextStyle": "dark"
}

72
src/pages/orderDetails/index.module.scss
View File

@ -197,12 +197,74 @@ page {
}
}
.itemRight:last-child {
}
.itemGoods:last-child {
margin-top: 24px;
display: flex;
.itemPic {
margin-left: 32px;
margin-right: 42px;
width: 108px;
height: 108px;
background: #322F2F;
border-radius: 8px;
}
.itemRight {
padding-bottom: 24px;
width: 495px;
border: none;
border-bottom: none;
.item_right_top {
margin-bottom: 41px;
display: flex;
align-items: center;
justify-content: space-between;
.itemName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemNums {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.item_right_Bottom {
display: flex;
align-items: center;
justify-content: space-between;
.itemMoney {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemMoneyOne {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
}
}
}
}
.goodsBox:last-child {
border-bottom: none;
}
.detailBox {
@ -265,10 +327,10 @@ page {
width: 750px;
height: 160px;
background: #FFFFFF;
// position: fixed;
position: fixed;
bottom: 0;
padding-bottom: 24px;
position: relative;
// position: relative;
.moreFont {
font-size: 28px;
@ -283,7 +345,7 @@ page {
left: 32px;
z-index: 99;
bottom: 170px;
width: 120px;
// width: 120px;
padding: 24px;
background: #fff;
border: 1px solid #ccc;

520
src/pages/orderDetails/index.tsx
View File

@ -2,98 +2,504 @@ import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { usePullDownRefresh } from '@tarojs/taro';
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import AdvanceOrderState from './components/advanceOrderState'
import AddressDetailBox from './components/addressDetailBox'
import Remark from './components/remark'
import Popup from '@/components/popup'
import BottomBtns from '@/components/BottomBtns';
import BottomApply from './components/BottomApply';
import { debounce } from '@/common/util'
import OfflinePay from '../order/components/offlinePay'
import OrderState from './components/orderState'
import {
mpsaleOrder,
mpsaleOrderput,
mpshoppingCartproductColorlist,
orderPaymentorderPaymentMethodInfo,
orderPaymentpreCollectOrderorderPaymentMethodInfo,
orderPaymentorderPaymentSubmission,
orderPaymentpreCollectOrderorderPaymentSubmission,
mpsaleOrdercancel,
GetPayCode
} from '@/api/order'
import { alert, goLink } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/fotmat'
import PayPopup from '../order/components/PayPopup'
export default () => {
const router = useRouter()
useEffect(() => {
getDetail()
}, [])
//页面下拉刷新
usePullDownRefresh(() => {
getDetail()
})
const { fetchData: infoFetch } = mpsaleOrder()
const [infoObj, setInfoObj] = useState<any>({})
//获取订单详情
const getDetail = async () => {
const res = await infoFetch({ id: router.params.id })
setInfoObj(res.data)
orderMsg.map(it => {
if (it.leftTitle === '订单编号：') {
it.rightTitle = res.data.order_no
}
if (it.leftTitle === '创建时间：') {
it.rightTitle = formatDateTime(res.data.create_time)
}
if (it.leftTitle === '发货时间：') {
it.rightTitle = formatDateTime(res.data.delivery_time)
}
if (it.leftTitle === '业务员：') {
it.rightTitle = res.data.sale_user_name
}
})
setOrderMsg([...orderMsg])
setReceivingStatus(res.data.shipment_mode)
}
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: infoObj?.order_no || '',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功',
})
},
})
}
//收货方法,1:自提，2物流
const [receivingStatus, setReceivingStatus] = useState(2)
const [receivingStatus, setReceivingStatus] = useState(null)
//切换自提或者物流
const onReceivingStatus = (e, value) => {
const onReceivingStatus = debounce((e, value) => {
e.stopPropagation()
setReceivingStatus(value)
}
}, 300)
//订单信息文字数组
const [orderMsg, setOrderMsg] = useState<any[]>([
{
leftTitle: '订单编号：',
rightTitle: '2222',
rightTitle: '------',
showBtn: true
},
{
leftTitle: '创建时间：',
rightTitle: '2222',
rightTitle: '------',
},
{
leftTitle: '发货时间：',
rightTitle: '2222',
rightTitle: '------',
},
{
leftTitle: '业务员：',
rightTitle: '2222',
rightTitle: '------',
}
])
//备注操作
const [showDesc, setShowDesc] = useState(false)
const { fetchData: remarkFetch } = mpsaleOrderput()
const getRemark = useCallback(async (e) => {
const res = await remarkFetch({ remark: e, id: Number(router.params.id) })
if (res.msg === 'success') {
Taro.showToast({
title: '成功',
icon: 'success'
})
setShowDesc(false)
getDetail()
}
}, [])
//更多按钮查看操作
const [showMore, setShowMore] = useState(false)
//刷新页面
const refresh = useCallback(() => {
alert.loading('刷新中')
getDetail()
}, [])
const { fetchData: cancelFetch } = mpsaleOrdercancel()
//取消订单
const cancle = async (e, item) => {
e.stopPropagation();
Taro.showModal({
content: "确定要取消吗？",
confirmText: "确认",
cancelText: "取消",
success: async function (res) {
if (res.confirm) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await cancelFetch({ id: item.id })
if (res.msg === 'success') {
Taro.showToast({
title: '取消成功'
})
Taro.hideLoading()
getDetail()
} else {
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}
}
})
}
//再次购买
const { fetchData: buyFetch } = mpshoppingCartproductColorlist()
const nextBuy = async (e, item) => {
e.stopPropagation();
Taro.showLoading({
title: '请稍等...',
mask: true
})
let arr: any = []
item.product_list.forEach(item => {
item.product_colors.forEach(it => {
arr.push({
length: it.length,
roll: it.roll,
product_color_id: it.id
})
})
})
let query = {
purchaser_id: item.purchaser_id,
sale_mode: item.sale_mode,
color_list: arr
}
const res = await buyFetch(query)
if (res.msg === 'success') {
Taro.showToast({
title: '加入购物车成功!'
})
Taro.hideLoading()
getDetail()
} else {
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}
//去支付逻辑
const { fetchData: infoOneFetch } = orderPaymentorderPaymentMethodInfo()
const { fetchData: infoTwoFetch } = orderPaymentpreCollectOrderorderPaymentMethodInfo()
const [payList, setPayList] = useState<any[]>([
{
id: 2,
iconfont: "icon-xianxiahuizong",
name: "预存款",
fonts: "可用额度 ",
money: "",
isCheck: false,
},
{
id: 5,
iconfont: "icon-xianxiahuizong",
name: "货到付款",
fonts: "发货后3天内付款",
isCheck: false,
money: "",
},
{
id: 3,
iconfont: "icon-xianxiahuizong",
name: "x天账期",
fonts: "可用额度 ",
money: "",
isCheck: false,
},
{
iconfont: "icon-xianxiahuizong",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
},
])
const toPay = async (e, item) => {
e.stopPropagation();
if (item.status !== 10) {
let res = await infoOneFetch({ id: item.should_collect_order_id })
payList.map((item) => {
if (item.id === 3) {
item.name = `${res.data.account_period}天账期`;
item.fonts = `可用额度${formatPriceDiv(
res.data.account_period_credit_available_line
).toLocaleString()}`;
}
if (item.id === 2) {
item.fonts = `可用额度${formatPriceDiv(
res.data.advance_deposit_balance
).toLocaleString()}`;
}
return item;
});
setPayList([...payList])
if (item.is_shipper_picks_up) {
const obj = payList.filter((item) => {
return item.id === 6;
});
console.log(obj, "456456");
if (obj.length === 0) {
payList.unshift({
id: 6,
iconfont: "icon-xianxiahuizong",
name: "货主自提",
fonts: "",
money: "",
isCheck: false,
});
setPayList([...payList])
}
}
} else {
let res = await infoTwoFetch({ id: item.pre_collect_order_id })
const arr: any = [];
arr.push(
{
id: 2,
iconfont: "icon-xianxiahuizong",
name: "预存款",
fonts: `可用额度${formatPriceDiv(
res.data.advance_deposit_balance
).toLocaleString()}`,
money: "",
isCheck: false,
},
{
iconfont: "icon-xianxiahuizong",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
}
);
if (item.is_shipper_picks_up) {
const obj = arr.filter((item) => {
return item.id === 6;
});
if (obj.length === 0) {
arr.unshift({
id: 6,
iconfont: "icon-xianxiahuizong",
name: "货主自提",
fonts: "",
money: "",
isCheck: false,
});
}
}
setPayList([...arr])
}
setShowSide(true)
setTitle('待支付款项')
setShowPay(true)
}
//选择支付方式
const clickItem = (item) => {
if (item.name === '扫码支付') { handScanpay() }
if (item.name === '线下汇款') { setShowOffine(true) }
payList.map(it => {
if (item.id === it.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setPayList([...payList])
}
//扫码支付
const [showSide, setShowSide] = useState(true)
const [title, setTitle] = useState('')
const [picUrl, setPicUrl] = useState('')
const { fetchData: payFetch } = GetPayCode()
const handScanpay = async () => {
const list: any = [];
infoObj.product_list.forEach((item) => {
item.product_colors.forEach((it) => {
list.push({
product_code: item.code,
product_name: item.name,
product_color_code: it.product_color_code,
product_color_name: it.product_color_name,
num: it.roll.toString(),
weight: formatWeightDiv(it.actual_weight).toString(),
sale_price: (it.sale_price / 100).toString(),
total_price:
it.total_sale_price !== 0
? (it.total_sale_price / 100).toString()
: (it.estimate_amount / 100).toString(),
length: (it.length / 100).toString(),
weight_error: formatWeightDiv(it.weight_error).toString(),
});
});
});
const query = {
list: list,
title: "面料销售电子确认单",
show_qrcode: true,
show_barcode: true,
show_wait_pay_amount: true,
order_type: infoObj.sale_mode_name,
shipment_mode: infoObj.shipment_mode_name,
company: infoObj.title_purchaser_name,
sale_user: infoObj.sale_user_name,
order_created_time: formatDateTime(infoObj.create_time),
order_no: infoObj.order_no,
target_user_name: infoObj.target_user_name,
target_address: infoObj.address_detail,
target_description: infoObj.remark,
pay_account: infoObj.transfer_remittance_account,
bank_account_name: infoObj.account_name,
bank_name: infoObj.bank_of_deposit,
pay_type: infoObj.settle_mode_name,
client: infoObj.purchaser_name,
phone: infoObj.target_user_phone,
order_total_length: (infoObj.total_number / 100).toString(),
order_total_price: (
infoObj.bill_total_sale_price / 100
).toString(),
total_weight_error_discount: (
infoObj.total_weight_error_discount / 100
).toString(),
order_total_num: infoObj.total_number.toString(),
qrcode: "",
order_total_weight: (infoObj.total_weight / 1000).toString(),
estimate_amount: (infoObj.estimate_amount / 100).toString(),
total_sale_price: (infoObj.total_sale_price / 100).toString(),
show_total_sale_price: true,
show_total_weight_error_discount: true,
actual_amount: (infoObj.actual_amount / 100).toString(),
wait_pay_amount: (infoObj.wait_pay_amount / 100).toString(),
order_total_weight_error: (
infoObj.total_weight_error / 1000
).toString(),
};
const res = await payFetch(query)
if (res.data) {
console.log(res.data.base64)
setShowSide(false)
setTitle('查看销售码单')
setPicUrl(res.data.base64)
}
}
//确认交易
const { fetchData: payOneFetch } = orderPaymentorderPaymentSubmission()
const { fetchData: payTwoFetch } = orderPaymentpreCollectOrderorderPaymentSubmission()
const handsurePay = (obj) => {
let arr: any = []
// if (obj.status !== 10) {
arr = payList.filter(item => {
return item.checked
})
if (!arr.length) {
Taro.showToast({
title: '请选择后再提交',
icon: 'error'
})
return false
}
Taro.showModal({
content: "确定交易吗？",
confirmText: "确认",
cancelText: "取消",
success: async function (res) {
if (res.confirm) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const restult = await obj.status !== 10 ? payOneFetch({ id: Number(obj.should_collect_order_id), payment_method: Number(arr[0]?.id) }) : payTwoFetch({ id: Number(obj.pre_collect_order_id), payment_method: Number(arr[0]?.id) })
if (restult?.msg === 'success') {
Taro.showToast({
title: '交易成功'
})
Taro.hideLoading()
setShowPay(false)
getDetail()
} else {
Taro.showToast({
title: restult?.msg,
icon: 'error'
})
}
}
}
})
// }
}
//显示支付
const [showPay, setShowPay] = useState(false)
//显示线下汇款
const [showOffline, setShowOffine] = useState(false)
return (
<View className={styles.mainBox}>
{/* <AdvanceOrderState orderInfo={a} onRefresh={refresh} /> */}
<AddressDetailBox receivingStatus={receivingStatus} onReceivingStatus={(e, value) => onReceivingStatus(e, value)}></AddressDetailBox>
{(infoObj?.status != 10 && <OrderState orderInfo={infoObj} />)}
{
infoObj.status === 10 && <AdvanceOrderState orderInfo={infoObj} onRefresh={() => refresh()} />
}
<AddressDetailBox obj={infoObj} receivingStatus={receivingStatus} onReceivingStatus={(e, value) => onReceivingStatus(e, value)}></AddressDetailBox>
<DefaultBox
showMode={true}
title={'客户信息'}
modeName={'大货'}
modeName={infoObj.sale_mode_name}
>
<View className={styles.pussBox}>
<View className={styles.pussName}>JENNIEEEEE</View>
<View className={styles.pussPhone}>136******73</View>
<View className={styles.pussName}>{infoObj.purchaser_name}</View>
<View className={styles.pussPhone}>{1310154151}</View>
</View>
</DefaultBox>
<View className={styles.total}> 1 种面料，1 个颜色，共 4 M</View>
<View className={styles.total}> {infoObj.total_fabrics} 种面料，{infoObj.total_colors} 个颜色，共 {infoObj.sale_mode === 0 ? infoObj.total_number : infoObj.total_number / 100} {infoObj.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.productBox}>
<GoodsItem></GoodsItem>
<GoodsItem list={infoObj?.product_list} obj={infoObj}></GoodsItem>
<View className={styles.flexMoney}>
<View className={styles.flexTotalBox}>
<View className={styles.totalFont}>合计金额</View>
<View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
</View>
<View className={styles.shoudPay}>12,332.00</View>
<View className={styles.shoudPay}>{formatPriceDiv(infoObj.total_should_collect_money)}</View>
</View>
<View className={styles.flexMoney}>
<View className={styles.flexTotalBox}>
<View className={styles.totalFont}>实付金额</View>
<View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
</View>
<View className={styles.shoudPay}>12,332.00</View>
<View className={styles.shoudPay}>{formatPriceDiv(infoObj.actual_amount)}</View>
</View>
<View className={styles.flexMoney}>
<View className={styles.flexTotalBox}>
<View className={styles.totalFont}>待付金额</View>
<View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
</View>
<View className={styles.shoudPay}>12,332.00</View>
<View className={styles.shoudPay}>{formatPriceDiv(infoObj.wait_pay_amount)}</View>
</View>
</View>
<DefaultBox title={'订单信息'}>
@ -106,7 +512,7 @@ export default () => {
</View>
<View className={styles.detailRightFlex}>
<View className={styles.detailRight}>{item.rightTitle}</View>
{item.showBtn && <View className={styles.detailBtn}>复制</View>}
{item.showBtn && <View className={styles.detailBtn} onClick={() => clipboardData()}>复制</View>}
</View>
</View>
@ -116,10 +522,10 @@ export default () => {
</DefaultBox>
<DefaultBox title={'备注信息'} showMode={true} modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
<View className={styles.remarkFont}>尚未备注信息</View>
<View className={styles.remarkFont}>{infoObj.remark === '' ? '暂无' : infoObj.remark}</View>
</DefaultBox>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={''} />
<Remark onSave={(e) => getRemark(e)} defaultValue={infoObj.remark} />
</Popup>
<View className={styles.safeBottom}></View>
<View className={styles.bottomBox}>
@ -131,11 +537,28 @@ export default () => {
}
{
showMore && <View className={styles.posssBox}>
<BottomApply ></BottomApply>
<BottomApply obj={infoObj}></BottomApply>
</View>
}
<BottomBtns></BottomBtns>
<BottomBtns
obj={infoObj}
cancle={(e) => cancle?.(e, infoObj)}
nextBuy={(e) => nextBuy?.(e, infoObj)}
toPay={(e) => toPay?.(e, infoObj)}
></BottomBtns>
</View>
<PayPopup
list={payList}
obj={infoObj}
showPopup={showPay}
popupClose={() => setShowPay(false)}
clickItem={(infoObj) => clickItem(infoObj)}
handsurePay={(infoObj) => handsurePay(infoObj)}
showSide={showSide}
title={title}
picUrl={picUrl}
></PayPopup>
<OfflinePay showKong={false} show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={infoObj}></OfflinePay>
</View>
)
}
@ -177,30 +600,49 @@ const DefaultBox = memo((props: Obs) => {
//产品商品元素
interface PropGoods {
item?: {
code?: string | number
}
// item?: {
// code?: string | number
// }
list: any[],
obj: {
sale_mode?: number | string
},
}
const GoodsItem = memo((porps: PropGoods) => {
const { item } = porps
const { list = [], obj = {} } = porps
return (
<View className={styles.goodsBox}>
<View className={styles.goodsProduct}>0681# 26S全棉平纹</View>
<>
{
list.map((item, index) => {
return (
<View className={styles.goodsBox} key={index}>
<View className={styles.goodsProduct}>{item.code}# {item.name}</View>
<View className={styles.goodsLine}></View>
{
item.product_colors.map((it, inx) => {
return (
<View className={styles.itemGoods}>
<View className={styles.itemPic}></View>
<View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View>
<View className={styles.itemRight}>
<View className={styles.item_right_top}>
<View className={styles.itemName}>001# 环保黑</View>
<View className={styles.itemNums}>x1m</View>
<View className={styles.itemName}>{it.code}# {it.name}</View>
<View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View>
</View>
<View className={styles.item_right_Bottom}>
<View className={styles.itemMoney}>¥340/m</View>
<View className={styles.itemMoneyOne}>¥2,332.00</View>
</View>
<View className={styles.itemMoney}>¥{it.sale_price / 100}/{obj?.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View>
</View>
</View>
</View>
)
})
}
</View>
)
})
}
</>
)
})

48
src/use/useCommon.ts
View File

@ -63,28 +63,28 @@ export const useTimeCountDown = () => {
}
//订阅消息hook
export const UseSubscriptionMessage = () => {
const { fetchData: fetchDataMessage } = SubscriptionMessageApi()
const openSubscriptionMessage = ({ orderId = 0, scenes = 0 }: { orderId?: number; scenes: number }) => {
return new Promise(async (resolve) => {
let params: { sale_order_id?: number; scenes?: number } = {}
orderId && (params.sale_order_id = orderId)
params.scenes = scenes
let res = await fetchDataMessage(params)
if (res.success && res.data.TemplateID && res.data.TemplateID.length > 0) {
Taro.requestSubscribeMessage({
tmplIds: res.data.TemplateID,
complete: function (res) {
resolve(res)
},
})
} else {
resolve(true)
}
})
}
// export const UseSubscriptionMessage = () => {
// const { fetchData: fetchDataMessage } = SubscriptionMessageApi()
// const openSubscriptionMessage = ({ orderId = 0, scenes = 0 }: { orderId?: number; scenes: number }) => {
// return new Promise(async (resolve) => {
// let params: { sale_order_id?: number; scenes?: number } = {}
// orderId && (params.sale_order_id = orderId)
// params.scenes = scenes
// let res = await fetchDataMessage(params)
// if (res.success && res.data.TemplateID && res.data.TemplateID.length > 0) {
// Taro.requestSubscribeMessage({
// tmplIds: res.data.TemplateID,
// complete: function (res) {
// resolve(res)
// },
// })
// } else {
// resolve(true)
// }
// })
// }
return {
openSubscriptionMessage,
}
}
// return {
// openSubscriptionMessage,
// }
// }