TestRestructureWechatLymarketDist/src/components/SaleCodeList/index.tsx

import { Image, ScrollView, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
// import BottomBtns from '@/components/BottomBtns'
import { formatPriceDiv } from '@/common/format'
import Popup from '@/components/popup'
import useCheckAuthorize from '@/use/useCheckAuthorize'
import { alert } from '@/common/common'
import { GetPayCode } from '@/api/order'
import { formatDateTime, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
import { PAY_H5_CODE_URL } from '@/common/constant'

interface Props {
  obj: any
  // picUrl?: string,
  showPopup: boolean
  popupClose: () => void
}

const CodeList = (props: Props) => {
  const { fetchData: payFetch } = GetPayCode()
  const [PicUrl, setPicUrl] = useState<string>('')

  const getPic = async() => {
    Taro.showLoading({
      title: '请稍等...',
      mask: true,
    })
    const list: any = []
    props.obj.product_list?.forEach((item) => {
      item.product_colors.forEach((it) => {
        list.push({
          product_code: item.code,
          product_name: item.name,
          product_color_code: formatRemoveHashTag(it.code),
          product_color_name: it.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,
      title: '面料销售电子确认单',
      // show_qrcode: true,
      // show_barcode: true,
      order_type: props?.obj.sale_mode_name,
      shipment_mode: props?.obj.shipment_mode_name,
      company: props?.obj.title_purchaser_name,
      sale_user: props?.obj.sale_user_name,
      order_created_time: formatDateTime(props?.obj.create_time),
      order_no: props?.obj.order_no,
      target_user_name: props?.obj.target_user_name,
      target_address: props?.obj.address_detail,
      target_description: props?.obj.remark,
      pay_account: props?.obj.transfer_remittance_account,
      bank_account_name: props?.obj.account_name,
      bank_name: props?.obj.bank_of_deposit,
      pay_type: props?.obj.settle_mode_name,
      client: props?.obj.purchaser_name,
      phone: props?.obj.target_user_phone,
      order_total_length: (props?.obj.total_number / 100).toString(),
      order_total_price: (
        props?.obj.bill_total_sale_price / 100
      ).toString(),
      total_weight_error_discount: (
        props?.obj.total_weight_error_discount / 100
      ).toString(),
      order_total_num: props?.obj.total_number.toString(),
      qrcode: `${PAY_H5_CODE_URL}?sale_order_no=${props?.obj.order_no}`,
      order_total_weight: (props?.obj.total_weight / 1000).toString(),
      estimate_amount: (props?.obj.estimate_amount / 100).toString(),
      total_sale_price: (props?.obj.total_sale_price / 100).toString(),
      actual_amount: (props?.obj.actual_amount / 100).toString(),
      wait_pay_amount: (props?.obj.wait_pay_amount / 100).toString(),
      order_total_weight_error: (
        props?.obj.total_weight_error / 1000
      ).toString(),
      show_sale_price: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_total_price: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_estimate_amount: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_total_sale_price: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_total_weight_error_discount: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_actual_amount: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_wait_pay_amount: props?.obj?.sale_mode === 0 && props?.obj?.is_display_price ? true : !!((props?.obj?.sale_mode === 1 || props?.obj?.sale_mode === 2)),
      show_tips: true,
      tips: `请核对本单后验收， <b>如发现质量问题，请于收到货之日起3天内与平台客服联系协商解决，</b>逾期不作处理即表示购方默认对货物无异议；<b>购方确认无任何问题方可裁剪/加工，一经裁剪，缩水等工艺，平台概不负责；</b>
      看布购货，请先试缩水，并注意分缸裁布！如需撞色拼接，请先试色牢度。非质量问题，恕不退换，谢谢合作！`,
    }
    const res = await payFetch(query)
    if (res.data) {
      setPicUrl(res.data.base64)
      Taro.hideLoading()
    }
  }

  const fileData = useRef({
    filePath: '',
    base64: '',
  })

  // 预览图片
  const showImage = () => {
    const time = new Date().valueOf()
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(PicUrl) || []
    const 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',
    })
    Taro.previewImage({
      current: fileData.current.filePath, // 当前显示
      urls: [fileData.current.filePath], // 需要预览的图片http链接列表
    })
  }

  // 检查是否开启保存图片权限
  const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })

  // 保存图片
  const saveImage = () => {
    const time = new Date().valueOf()
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(PicUrl) || []
    const 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,
      success() {
        alert.success('图片保存成功')
      },
      fail(err) {
        console.log('err::', err)
      },
    })
  }
  const saveImageCheck = async() => {
    const res = await check()
    res && saveImage()
  }
  useEffect(() => {
    // 判断进来的是否是空对象，减少性能问题
    const length = Object.keys(props.obj)
    if (length.length > 0) { getPic() }
  }, [props.obj])
  return (
    <Popup show={props.showPopup} title="销售码单" onClose={() => props.popupClose?.()}>
      <View className={styles.popupBox}>
        <ScrollView enhanced scrollY className={styles.scroStyle}>
          <View className={styles.pic}>
            <Image lazyLoad mode="widthFix" style={{ width: '100%', height: '100%' }} src={PicUrl} onClick={() => showImage()}></Image>
          </View>
        </ScrollView>
        <View className={styles.sure} onClick={() => saveImageCheck()}>保存图片</View>
      </View>
    </Popup>
  )
}

export default memo(CodeList)