✨ feat(传统码单):大货对接完成

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',
+  })
+}

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

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 && <View className={styles.mask} catchMove onClick={() => setShowCode(!showCode)}></View>}
     <MovableView className={classnames(styles.code_list, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${y}rpx`}>
       {showCode && <View className={classnames(styles.code_list__card, showCode && styles['code_list--open'])}>
-        <View className={styles['code_list__card--item']}>
+        <View className={styles['code_list__card--item']} onClick={() => setshowPopup(true)}>
           <IconFont name="icon-yuanshimadanyulan" size={46} />
           <Text>原始码单预览</Text>
         </View>
@@ -34,5 +38,7 @@ export default ({ y }: param) => {
       </View>}
       <View className={styles['code_list--text']} onClick={() => setShowCode(!showCode)}>码单</View>
     </MovableView>
+    <ViewCodeList orderObj={orderObj} showPopup={showPopup} handClose={() => setshowPopup(false)}></ViewCodeList>
+
   </>)
 }

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 = '
       >
         <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
       </MovableView>}
-      {onShow('code') && <CodeSelect y={screenHeight.code as number} />}
+      {onShow('code') && <CodeSelect orderObj={orderObj} y={screenHeight.code as number} />}
       <Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} showCard={showCart} onClose={customerClose} />
     </MovableArea>
   )

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;
+    }
+  }
+}

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<any[]>([])
+
+  // 手机号
+  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 && <View className={styles.main} onClick={() => props?.handClose?.()}>
+          <View className={styles.picBox}>
+            <Image onClick={e => showImage(e)} className={styles.pic} mode="aspectFit" src={codePic[0]}></Image>
+          </View>
+        </View>
+      }
+    </>
+  )
+}

src/pages/order/index.tsx

@@ -287,7 +287,7 @@ const Order = () => {
     [orderDetail],
   )
   return (
-    <MoveBtn showList={['order', 'code']} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart>
+    <MoveBtn orderObj={orderDetail} showList={['order', 'code']} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart>
       <View className={styles.order_main}>
         {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
           <AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />