From c07ba11595d0865f971e16066d038a2fa3a7a514 Mon Sep 17 00:00:00 2001 From: Haiyi <1021441632@qq.com> Date: Wed, 14 Sep 2022 18:45:00 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 7 + src/api/order.ts | 24 +- src/components/address/index.tsx | 2 +- .../components/PayPopup/index.module.scss | 2 +- src/pages/order/components/PayPopup/index.tsx | 15 +- .../components/offlinePay/index.module.scss | 94 +++ .../order/components/offlinePay/index.tsx | 100 ++++ src/pages/order/index.tsx | 23 +- .../components/BottomApply/index.module.scss | 4 +- .../addressDetailBox/index.module.scss | 5 +- .../components/addressDetailBox/index.tsx | 37 +- .../advanceOrderState/index.module.scss | 42 +- .../components/advanceOrderState/index.tsx | 2 +- .../components/orderState/index.module.scss | 187 ++++++ .../components/orderState/index.tsx | 79 +++ src/pages/orderDetails/index.config.ts | 3 +- src/pages/orderDetails/index.module.scss | 72 ++- src/pages/orderDetails/index.tsx | 538 ++++++++++++++++-- src/use/useCommon.ts | 48 +- 19 files changed, 1166 insertions(+), 118 deletions(-) create mode 100644 src/pages/order/components/offlinePay/index.module.scss create mode 100644 src/pages/order/components/offlinePay/index.tsx create mode 100644 src/pages/orderDetails/components/orderState/index.module.scss create mode 100644 src/pages/orderDetails/components/orderState/index.tsx diff --git a/project.private.config.json b/project.private.config.json index 54c66af..0e657bf 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -63,6 +63,13 @@ "query": "type=add", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/orderDetails/index", + "query": "id=27651", + "launchMode": "default", + "scene": null } ] } diff --git a/src/api/order.ts b/src/api/order.ts index 03ba67b..4559692 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -102,10 +102,24 @@ export const orderPaymentpreCollectOrderorderPaymentSubmission = () => { /** * 获取在线支付二维码 */ - export const GetPayCode = () => { +export const GetPayCode = () => { return useRequest({ - url: `/xima-caphtml/caphtml`, - base_url: CAP_HTML_TO_IMAGE_BASE_URL, - method: 'post', + url: `/xima-caphtml/caphtml`, + base_url: CAP_HTML_TO_IMAGE_BASE_URL, + method: 'post', }) - } \ No newline at end of file +} +//编辑备注信息 +export const mpsaleOrderput = () => { + return useRequest({ + url: `/v1/mp/saleOrder`, + method: "put", + }) +} +//修改销售单的收货地址 +export const mpsaleOrderaddress = () => { + return useRequest({ + url: `/v1/mp/saleOrder/address`, + method: "put", + }) +} \ No newline at end of file diff --git a/src/components/address/index.tsx b/src/components/address/index.tsx index 1e00455..4dd9f83 100644 --- a/src/components/address/index.tsx +++ b/src/components/address/index.tsx @@ -204,7 +204,7 @@ export default memo(({ return ( selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}> {item.name} - {(selectArr[selectIndex]?.id == item.id)&&} + {(selectArr[selectIndex]?.id == item.id)&&} ) })} diff --git a/src/pages/order/components/PayPopup/index.module.scss b/src/pages/order/components/PayPopup/index.module.scss index c195f1f..853a6df 100644 --- a/src/pages/order/components/PayPopup/index.module.scss +++ b/src/pages/order/components/PayPopup/index.module.scss @@ -1,6 +1,6 @@ .popupBox { position: relative; - z-index: 99999; + z-index: 99; background: #f7f7f7; bottom: 0; diff --git a/src/pages/order/components/PayPopup/index.tsx b/src/pages/order/components/PayPopup/index.tsx index 232d526..3699c40 100644 --- a/src/pages/order/components/PayPopup/index.tsx +++ b/src/pages/order/components/PayPopup/index.tsx @@ -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) => { { - item.name !== '扫码支付' && + item.name !== '扫码支付' && item.name !== '线下汇款' && } { - item.name === '扫码支付' && + (item.name === '扫码支付' || item.name === '线下汇款') && } diff --git a/src/pages/order/components/offlinePay/index.module.scss b/src/pages/order/components/offlinePay/index.module.scss new file mode 100644 index 0000000..ae7cf38 --- /dev/null +++ b/src/pages/order/components/offlinePay/index.module.scss @@ -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)); + + } +} \ No newline at end of file diff --git a/src/pages/order/components/offlinePay/index.tsx b/src/pages/order/components/offlinePay/index.tsx new file mode 100644 index 0000000..91c2333 --- /dev/null +++ b/src/pages/order/components/offlinePay/index.tsx @@ -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 ( + + + + + 线下汇款 + + + 开户名称 + + {offlineInfo?.account_name} + { copy(1) }}>复制 + + + + 开户银行 + + {offlineInfo?.bank_of_deposit} + { copy(2) }}>复制 + + + + 转账汇款账号 + + {offlineInfo?.transfer_remittance_account} + { copy(3) }}>复制 + + + {/* + {offlineInfo?.bank_of_deposit} + + + {offlineInfo?.transfer_remittance_account} + */} + + 复制信息 + + { + showKong && + } + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 907e626..ecd8c24 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -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 ( @@ -670,6 +684,7 @@ export default () => { title={title} picUrl={picUrl} > + setShowOffine(false)} offlineInfo={itemObj}> ) } diff --git a/src/pages/orderDetails/components/BottomApply/index.module.scss b/src/pages/orderDetails/components/BottomApply/index.module.scss index eaa51f5..a04d88e 100644 --- a/src/pages/orderDetails/components/BottomApply/index.module.scss +++ b/src/pages/orderDetails/components/BottomApply/index.module.scss @@ -1,6 +1,6 @@ - - .title { + width: 112px; + height: 34px; font-size: 28px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; diff --git a/src/pages/orderDetails/components/addressDetailBox/index.module.scss b/src/pages/orderDetails/components/addressDetailBox/index.module.scss index 32de37d..7dc24e0 100644 --- a/src/pages/orderDetails/components/addressDetailBox/index.module.scss +++ b/src/pages/orderDetails/components/addressDetailBox/index.module.scss @@ -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; diff --git a/src/pages/orderDetails/components/addressDetailBox/index.tsx b/src/pages/orderDetails/components/addressDetailBox/index.tsx index db4803f..2721a5c 100644 --- a/src/pages/orderDetails/components/addressDetailBox/index.tsx +++ b/src/pages/orderDetails/components/addressDetailBox/index.tsx @@ -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 ( @@ -22,13 +45,13 @@ export default memo((props: propsObj) => { - 广东省佛山市禅城区南庄镇吉利大道872巷7818号正门口 - + {addressInfo} + - 谭先生 - 13334726540 + {addressUser} + {addressPone} diff --git a/src/pages/orderDetails/components/advanceOrderState/index.module.scss b/src/pages/orderDetails/components/advanceOrderState/index.module.scss index 7779cc4..a33b863 100644 --- a/src/pages/orderDetails/components/advanceOrderState/index.module.scss +++ b/src/pages/orderDetails/components/advanceOrderState/index.module.scss @@ -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; } } diff --git a/src/pages/orderDetails/components/advanceOrderState/index.tsx b/src/pages/orderDetails/components/advanceOrderState/index.tsx index d500c56..275b8bd 100644 --- a/src/pages/orderDetails/components/advanceOrderState/index.tsx +++ b/src/pages/orderDetails/components/advanceOrderState/index.tsx @@ -60,7 +60,7 @@ export default memo(({orderInfo, onRefresh}:Param) => { : {showTime.SS} - 支付关闭，订单自动取消 + 等待买家付款，超时自动取消 diff --git a/src/pages/orderDetails/components/orderState/index.module.scss b/src/pages/orderDetails/components/orderState/index.module.scss new file mode 100644 index 0000000..e9fc208 --- /dev/null +++ b/src/pages/orderDetails/components/orderState/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/orderDetails/components/orderState/index.tsx b/src/pages/orderDetails/components/orderState/index.tsx new file mode 100644 index 0000000..ccd2b91 --- /dev/null +++ b/src/pages/orderDetails/components/orderState/index.tsx @@ -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)&& + + {dataList.map((item, index) => + {(dataList.length > 1)&&} + {(dataList.length != (index + 1))&&} + + {item.status} + {formatDateTime(item.time)} + + {item.desc} + )} + + {(dataList.length > 2) && changeMore()}> + {showMore&&'收起详情'||'点击查看详情'} + + } + + {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&} + + } + {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&& + + 您使用了{orderInfo.account_period}天账期支付，还款日期为{formatDateTime(orderInfo.account_period_time)} + } + + ) +}) diff --git a/src/pages/orderDetails/index.config.ts b/src/pages/orderDetails/index.config.ts index c4a60e0..d36c589 100644 --- a/src/pages/orderDetails/index.config.ts +++ b/src/pages/orderDetails/index.config.ts @@ -1,4 +1,5 @@ export default { navigationBarTitleText: '订单详情', - enableShareAppMessage: true, + enablePullDownRefresh: true, + "backgroundTextStyle": "dark" } diff --git a/src/pages/orderDetails/index.module.scss b/src/pages/orderDetails/index.module.scss index 8bc1381..93b6ee0 100644 --- a/src/pages/orderDetails/index.module.scss +++ b/src/pages/orderDetails/index.module.scss @@ -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; diff --git a/src/pages/orderDetails/index.tsx b/src/pages/orderDetails/index.tsx index 1a5d002..96ed7f5 100644 --- a/src/pages/orderDetails/index.tsx +++ b/src/pages/orderDetails/index.tsx @@ -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({}) + //获取订单详情 + 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([ { 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([ + { + 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 ( - {/* */} - onReceivingStatus(e, value)}> + {(infoObj?.status != 10 && )} + { + infoObj.status === 10 && refresh()} /> + } + onReceivingStatus(e, value)}> - JENNIEEEEE - 136******73 + {infoObj.purchaser_name} + {1310154151} - 1 种面料，1 个颜色，共 4 M + {infoObj.total_fabrics} 种面料，{infoObj.total_colors} 个颜色，共 {infoObj.sale_mode === 0 ? infoObj.total_number : infoObj.total_number / 100} {infoObj.sale_mode === 0 ? '条' : 'm'} - + 合计金额 - 12,332.00 + {formatPriceDiv(infoObj.total_should_collect_money)} 实付金额 - 12,332.00 + {formatPriceDiv(infoObj.actual_amount)} 待付金额 - 12,332.00 + {formatPriceDiv(infoObj.wait_pay_amount)} @@ -106,7 +512,7 @@ export default () => { {item.rightTitle} - {item.showBtn && 复制} + {item.showBtn && clipboardData()}>复制} @@ -116,10 +522,10 @@ export default () => { `} clickNode={() => setShowDesc(true)}> - 尚未备注信息 + {infoObj.remark === '' ? '暂无' : infoObj.remark} setShowDesc(false)}> - getRemark(e)} defaultValue={''} /> + getRemark(e)} defaultValue={infoObj.remark} /> @@ -131,11 +537,28 @@ export default () => { } { showMore && - + } - + cancle?.(e, infoObj)} + nextBuy={(e) => nextBuy?.(e, infoObj)} + toPay={(e) => toPay?.(e, infoObj)} + > + setShowPay(false)} + clickItem={(infoObj) => clickItem(infoObj)} + handsurePay={(infoObj) => handsurePay(infoObj)} + showSide={showSide} + title={title} + picUrl={picUrl} + > + setShowOffine(false)} offlineInfo={infoObj}> ) } @@ -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 ( - - 0681# 26S全棉平纹 - - - - - - 001# 环保黑 - x1m - - - ¥340/m - ¥2,332.00 - - - - + <> + { + list.map((item, index) => { + return ( + + {item.code}# {item.name} + + { + item.product_colors.map((it, inx) => { + return ( + + + + + {it.code}# {it.name} + x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'} + + + ¥{it.sale_price / 100}/{obj?.sale_mode === 0 ? '条' : 'm'} + ¥{formatPriceDiv(it.total_sale_price)} + + + + ) + }) + } + + ) + }) + } + + ) }) diff --git a/src/use/useCommon.ts b/src/use/useCommon.ts index f09525d..17e97ba 100644 --- a/src/use/useCommon.ts +++ b/src/use/useCommon.ts @@ -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, +// } +// }