TestEShopDist/src/components/viewCodeList/index.tsx

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>
      }
    </>
  )
}