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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/orderDetails/components/BottomApply/index.module.scss
+2 -2
View File
@@ -1,6 +1,6 @@
.title {
width: 112px;
height: 34px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
src/pages/orderDetails/components/addressDetailBox/index.module.scss
+4 -1
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;
src/pages/orderDetails/components/addressDetailBox/index.tsx
+30 -7
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}>
src/pages/orderDetails/components/advanceOrderState/index.module.scss
+26 -16
View File
@@ -1,6 +1,7 @@
.advance_main{
width:100%;
.advance_main {
width: 702px;
margin-top: 20px;
margin-left: 24px;
height: 238px;
background-color: #007AFF;
border-radius: 20px;
@@ -9,16 +10,20 @@
font-size: 24px;
color: #dddddd;
position: relative;
.time_con{
.time_con {
padding-left: 30px;
.times{
.times {
margin-bottom: 25px;
display: flex;
align-items: center;
.text{
.text {
margin-right: 15px;
}
.num{
.num {
width: 46px;
height: 50px;
background: #0063ce;
@@ -28,24 +33,28 @@
font-weight: 700;
color: #fff;
}
.separate{
.separate {
padding: 0 10px;
}
}
}
.cardIcon{
.cardIcon {
width: 238px;
height: 178px;
position: absolute;
right: 0;
bottom: 0;
.image{
width:100%;
.image {
width: 100%;
height: 100%;
}
}
.refresh{
.refresh {
position: absolute;
top: 23px;
right: 20px;
@@ -53,11 +62,12 @@
color: #dddddd;
display: flex;
align-items: center;
.mconfont{
.mconfont {
font-size: 36px;
}
.refresh_text{
.refresh_text {
font-size: 25px;
}
}
src/pages/orderDetails/components/advanceOrderState/index.tsx
+1 -1
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")}/>
src/pages/orderDetails/components/orderState/index.module.scss
+187
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;
}
}
src/pages/orderDetails/components/orderState/index.tsx
+79
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>}
</>
)
})
src/pages/orderDetails/index.config.ts
+2 -1
View File
@@ -1,4 +1,5 @@
export default {
navigationBarTitleText: '订单详情',
enableShareAppMessage: true,
enablePullDownRefresh: true,
"backgroundTextStyle": "dark"
}
src/pages/orderDetails/index.module.scss
+67 -5
View File
@@ -197,14 +197,76 @@ 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 {
display: flex;
margin-top: 24px;
@@ -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;
src/pages/orderDetails/index.tsx
+490 -48
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>
<View className={styles.goodsLine}></View>
<View className={styles.itemGoods}>
<View className={styles.itemPic}></View>
<View className={styles.itemRight}>
<View className={styles.item_right_top}>
<View className={styles.itemName}>001# 环保黑</View>
<View className={styles.itemNums}>x1m</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>
</View>
</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} 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}>{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}>¥{it.sale_price / 100}/{obj?.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View>
</View>
</View>
</View>
)
})
}
</View>
)
})
}
</>
)
})