From 7819ca37ecb3785509e3e47befea310005ef2666 Mon Sep 17 00:00:00 2001 From: Haiyi <1021441632@qq.com> Date: Fri, 30 Dec 2022 11:43:18 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E4=BC=A0=E7=BB=9F=E7=A0=81?= =?UTF-8?q?=E5=8D=95):=E5=A4=A7=E8=B4=A7=E5=AF=B9=E6=8E=A5=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/onlinePay.ts | 11 ++ src/common/constant.ts | 4 +- src/components/codeSelect/index.tsx | 10 +- src/components/moveBtn/index.tsx | 5 +- src/components/viewCodeList/index.module.scss | 29 ++++ src/components/viewCodeList/index.tsx | 141 ++++++++++++++++++ src/pages/order/index.tsx | 2 +- 7 files changed, 195 insertions(+), 7 deletions(-) create mode 100644 src/components/viewCodeList/index.module.scss create mode 100644 src/components/viewCodeList/index.tsx diff --git a/src/api/onlinePay.ts b/src/api/onlinePay.ts index 09bbe43..71fecb7 100644 --- a/src/api/onlinePay.ts +++ b/src/api/onlinePay.ts @@ -40,3 +40,14 @@ export const GetReturnPayCode = () => { // method: 'post', // }) // } + +/** + * 获取传统码单 + */ +export const GetCodePic = () => { + return useRequest({ + url: '/caphtml-order', + base_url: CAP_HTML_TO_IMAGE_BASE_URL, + method: 'post', + }) +} diff --git a/src/common/constant.ts b/src/common/constant.ts index 5126f35..c980a11 100644 --- a/src/common/constant.ts +++ b/src/common/constant.ts @@ -28,8 +28,8 @@ export const SEARCH_EMPTY_IMAGE = `${IMG_CND_Prefix}/search_empty.png` export const COLLECTION_EMPTY_IMAGE = `${IMG_CND_Prefix}/mall/collection_empty.png` // 在线支付图片baseUrl -export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL -// export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081' +// export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL +export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081' // 获取CND资源 export const getCDNSource = (suffix: string) => { return IMG_CND_Prefix + suffix diff --git a/src/components/codeSelect/index.tsx b/src/components/codeSelect/index.tsx index 1df504b..15d13c5 100644 --- a/src/components/codeSelect/index.tsx +++ b/src/components/codeSelect/index.tsx @@ -4,22 +4,26 @@ import classnames from 'classnames' import IconFont from '../iconfont/iconfont' import styles from './index.module.scss' import { goLink } from '@/common/common' +import ViewCodeList from '@/components/viewCodeList/index' interface param { y: number + orderObj?: any } -export default ({ y }: param) => { +export default ({ y, orderObj = {} }: param) => { const [screenHeight, setScreenHeight] = useState({ customer_service_y: 0, code_list_y: 0, }) const [showCode, setShowCode] = useState(false) + const [showPopup, setshowPopup] = useState(false) + return (<> {showCode && setShowCode(!showCode)}>} {showCode && - + setshowPopup(true)}> 原始码单预览 @@ -34,5 +38,7 @@ export default ({ y }: param) => { } setShowCode(!showCode)}>码单 + setshowPopup(false)}> + ) } diff --git a/src/components/moveBtn/index.tsx b/src/components/moveBtn/index.tsx index 497a4b8..8df39a9 100644 --- a/src/components/moveBtn/index.tsx +++ b/src/components/moveBtn/index.tsx @@ -20,8 +20,9 @@ interface param { messageTitle?: string messagePath?: string showCart?: false|true + orderObj?: any } -const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false }: param) => { +const MoveBtn = ({ orderObj = {}, children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false }: param) => { const userInfo = useSelector(state => state.userInfo) // 获取购物车数据数量 const { getShopCount, commonData } = useCommonData() @@ -101,7 +102,7 @@ const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = ' > } - {onShow('code') && } + {onShow('code') && } ) diff --git a/src/components/viewCodeList/index.module.scss b/src/components/viewCodeList/index.module.scss new file mode 100644 index 0000000..f01e04e --- /dev/null +++ b/src/components/viewCodeList/index.module.scss @@ -0,0 +1,29 @@ +.main { + width: 100vw; + height: 100%; + position: fixed; + top: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1998; + overflow: hidden; + .picBox { + position: absolute; + top: 0; + bottom: 0; + justify-content: center; + flex-direction: column; + align-items: center; + display: flex; + left: 0; + right: 0; + z-index: 10000; + background: rgba(0, 0, 0, 0.6); + .pic { + width: 100vw; + height: 600px; + } + } +} diff --git a/src/components/viewCodeList/index.tsx b/src/components/viewCodeList/index.tsx new file mode 100644 index 0000000..febc4b5 --- /dev/null +++ b/src/components/viewCodeList/index.tsx @@ -0,0 +1,141 @@ +import { Image, Text, View } from '@tarojs/components' +import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' +import { useEffect, useRef, useState } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat' +import { PAY_H5_CODE_URL } from '@/common/constant' +import { GetCodePic } from '@/api/onlinePay' + +enum CodeEnum { + oldCode = 1, // 传统码单 + customCode = 2, // 自定义码单 +} + +interface Props { + handClose?: () => void + showPopup?: boolean + orderObj?: any +} + +export default (props: Props) => { + const [codePic, setcodePic] = useState([]) + + // 手机号 + const userPhone = (addressInfo) => { + return addressInfo?.shipment_mode == 2 ? props.orderObj.target_user_phone : props.orderObj.take_goods_phone + } + + // 收货地址 + const address = (addressInfo) => { + if (addressInfo?.shipment_mode == 2) { + return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : '' + } + else { + return addressInfo?.take_goods_address + } + } + + // 收件人 + const userName = (addressInfo) => { + return addressInfo?.shipment_mode == 2 ? props?.orderObj.target_user_name : '' + } + + // 预览图片 + const showImage = (e) => { + e.stopPropagation() + Taro.previewImage({ + current: codePic[0], // 当前显示 + urls: codePic, // 需要预览的图片http链接列表 + }) + } + const { fetchData } = GetCodePic() + const getPic = async() => { + Taro.showLoading({ + title: '加载中...', + }) + const lists: any[] = [] + props.orderObj?.dyelot_number_list?.forEach((item) => { + lists.push({ + product_code: item.product_code, + product_name: item.product_name, + product_color_code: item.product_color_code, + product_color_name: item.product_color_name, + num: item.roll.toString(), + weight: formatWeightDiv(item.weight).toString(), + sale_price: formatPriceDiv(item.sale_price).toString(), + total_price: formatPriceDiv(item?.total_price).toString(), + deduction_weight: formatWeightDiv(item.deduction_weight).toString(), + deduction_amount: formatWeightDiv(item.deduction_amount).toString(), + settle_weight: formatPriceDiv(item?.total_price).toString(), + weight_error: formatWeightDiv(item.weight_error).toString(), + dryelot_number: item.dyelot_number, + product_id: item.product_id.toString(), + product_color_id: item.product_color_id.toString(), + }) + }) + const query: any = { + page_size: '4', + title: '面料销售电子确认单', + company: props.orderObj.company_name, // 后端公司 + order_type: props.orderObj.sale_mode_name, // 类型：大货 + sale_user: props.orderObj.sale_user_name, // 业务员 + order_created_time: formatDateTime(props.orderObj.create_time), + order_no: props.orderObj.order_no, + shipment_mode: props.orderObj.shipment_mode_name, // 发货方式 + target_user_name: userName(props.orderObj), // 收件人 + target_address: address(props.orderObj), // 收货地址 + target_description: props.orderObj.remark, // 发货备注 + pay_account: props.orderObj.transfer_remittance_account, // 专属收款账号 + bank_account_name: props.orderObj.account_name, // 账户名称 + bank_name: props.orderObj.bank_of_deposit, // 开户银行 + client: props.orderObj.purchaser_name, // 客户名称 + phone: userPhone(props.orderObj), // 收货手机号码 + order_total_length: (props.orderObj.total_number / 100).toString(), // 订单布匹长度 + order_total_price: formatPriceDiv(props.orderObj.bill_total_sale_price).toString(), // 订单价格 + qrcode: `${PAY_H5_CODE_URL}?key=${props.orderObj.md5_key}`, // 跳转链接 + order_total_weight: formatWeightDiv(props.orderObj.total_weight || props.orderObj.total_estimate_weight).toString(), // 订单布匹重量 + list: lists, + order_total_weight_error: formatWeightDiv(props.orderObj.total_weight_error).toString(), // 总空差重量 + order_total_deduction_weight: formatWeightDiv(props.orderObj.total_deduction_weight).toString(), + order_total_deduction_amount: formatPriceDiv(props.orderObj.total_deduction_amount).toString(), + order_total_settle_weight: formatWeightDiv(props.orderObj.total_settle_weight).toString(), + pay_type: props.orderObj?.settle_mode_name, + + show_deduction_amount: false, + show_sale_price: props.orderObj.is_display_price, + show_barcode: true, // 条形码 + show_qrcode: true, + } + const res = await fetchData(query) + if (res.data) { + setcodePic(res.data?.base64_list) + Taro.hideLoading() + } + else { + Taro.hideLoading() + Taro.showToast({ + title: res.data?.message, + icon: 'error', + }) + } + } + + useEffect(() => { + if (props.showPopup) { + getPic() + } + }, [props.showPopup]) + + return ( + <> + { + props?.showPopup && props?.handClose?.()}> + + showImage(e)} className={styles.pic} mode="aspectFit" src={codePic[0]}> + + + } + + ) +} diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index ad33c21..3d29822 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -287,7 +287,7 @@ const Order = () => { [orderDetail], ) return ( - + {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && ) || (