2024-06-28

king

2024-06-28 c8804ceb1fe2dea76f9949c5ea04423876ee2c81

 src/views/pay/index.jsx

@@ -1,40 +1,286 @@
import React, {Component} from 'react'
import moment from 'moment'
import md5 from 'md5'
import QRCode from 'qrcode.react'
import { notification, Tabs, Modal } from 'antd'

// import Api from '@/api'
import Api from '@/api'
import Utils from '@/utils/utils.js'
import WeiXinPay from '@/assets/img/weixinpay.jpg'
import WeiXinPayLogo from '@/assets/img/weixinpaylogo.jpg'
import WeiXinScan from '@/assets/img/weixinscan.png'
import './index.scss'

const { TabPane } = Tabs

class Pay extends Component {
  state = {
    orderId: ''
    orderId: '',
    orderNo: '',
    logo: window.GLOB.doclogo || '',
    name: sessionStorage.getItem('Full_Name') || '',
    copyRight: window.GLOB.copyRight || '',
    icp: window.GLOB.ICP || '',
    total: '',
    unit: '',
    qrcode: '',
    second: 60,
    overdue: false,
    overdone: false,
    appId: ''
  }

  UNSAFE_componentWillMount () {
    let _param = window.atob(this.props.match.params.param)
    let _params = {}
    _param.split('&').forEach(cell => {
      let _cell = cell.split('=')
      _params[_cell[0]] = _cell[1]
    })
    let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))

    if (!sessionStorage.getItem('LoginUID') && _params.LoginUID) {
      sessionStorage.setItem('LoginUID', _params.LoginUID)
    }
    let _appId = param.appId || window.GLOB.WXAppID || window.GLOB.WXminiAppID || ''

    this.setState({
      orderId: _params.ID
      orderId: param.ID,
      appId: _appId
    })

    if (param.ID && _appId) {
      this.getOrder(param.ID, _appId)
    } else if (!param.ID) {
      notification.warning({
        top: 92,
        message: '未获取到订单ID！',
        duration: 5
      })
    } else if (!_appId) {
      notification.warning({
        top: 92,
        message: '未获取到应用ID！',
        duration: 5
      })
    }
  }

  getOrder = (Id, appId) => {
    let param = {
      func: 's_get_weixin_pay_native',
      ID: Id
    }

    param.LTextOut = md5(param.ID + window.GLOB.appkey)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt(param.LTextOut, param.timestamp)

    Api.genericInterface(param).then(res => {
      if (res.status) {
        let _total = res.amount ? parseFloat(res.amount.total) : ''

        if (isNaN(_total)) {
          _total = ''
        } else if (_total !== '') {
          _total = _total.toFixed(2)
        }

        this.setState({
          orderNo: res.out_trade_no,
          total: _total,
          unit: res.amount && res.amount.currency === 'CNY' ? '元' : '元',
        })

        // 当前订单支付成功
        if (res.pay_status) {
          this.setState({
            overdone: true
          })
          Modal.success({
            title: '支付成功！',
            content: '请刷新订单页面，查看订单状态。',
            okText: '知道了',
            onOk() {
              window.close()
            }
          })
          return
        }

        if (!res.out_trade_no) {
          notification.warning({
            top: 10,
            message: '未获取到订单号！',
            duration: 5
          })
          return
        }

        Api.getWxNativePay({ 'out_biz_no': res.out_trade_no, app_id: appId }).then(result => {
          if (result.status && result.code_url) {
            this.setState({
              qrcode: result.code_url
            })
            setTimeout(this.resetSecond, 1000)
          } else {
            this.setState({
              overdue: true
            })
            notification.warning({
              top: 10,
              message: result.message || '未获取到支付码！',
              duration: 5
            })
          }
        })
      } else {
        this.setState({
          overdue: true
        })
        notification.warning({
          top: 10,
          message: res.message,
          duration: 5
        })
      }
    })
  }

  resetSecond = () => {
    const { second, orderNo, overdone } = this.state

    if (overdone) return

    if (second >= 1) {
      this.setState({
        second: second - 1
      })
      setTimeout(this.resetSecond, 1000)

      if ((second - 1) % 5 === 0) {
        let param = {
          func: 's_get_weixin_pay_native_status',
          out_trade_no: orderNo
        }

        param.LTextOut = md5(orderNo + window.GLOB.appkey)
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
        param.secretkey = Utils.encrypt(param.LTextOut, param.timestamp)

        Api.genericInterface(param).then(res => {
          if (res.pay_status) {
            this.setState({
              overdone: true
            })
            Modal.success({
              title: '支付成功！',
              content: '请刷新订单页面，查看订单状态。',
              okText: '知道了',
              onOk() {
                window.close()
              }
            })
          }
        })
      }
    } else {
      this.setState({
        overdue: true
      })
    }
  }

  resetQrcode = () => {
    const { orderNo, appId } = this.state

    if (!orderNo) {
      notification.warning({
        top: 10,
        message: '未获取到订单号！',
        duration: 5
      })
      return
    } else if (!appId) {
      notification.warning({
        top: 10,
        message: '未获取到应用ID！',
        duration: 5
      })
      return
    }

    Api.getWxNativePay({ 'out_biz_no': orderNo, app_id: appId }).then(result => {
      if (result.status && result.code_url) {
        this.setState({
          qrcode: result.code_url,
          overdue: false,
          second: 60
        })
        setTimeout(this.resetSecond, 1000)
      } else {
        notification.warning({
          top: 10,
          message: result.message || '未获取到支付码！',
          duration: 5
        })
      }
    })
  }

  onChange = () => {

  }

  render () {
    const { logo, name, orderNo, icp, copyRight, total, unit, qrcode, second, overdue, overdone } = this.state

    return (
      <div className="mk-pay-container">
        <div className="mk-pay-box">
          <div className="pay-tip">请您尽快支付，以便订单快速处理！</div>
          <div className="mk-pay-content">
            <div>支付方式:</div>
          <header>
            <img className="plat-logo" src={logo} alt=""/>
            <div className="user-name">{name}</div>
          </header>
          <div className="pay-tip">
            <span>请您尽快支付，以便订单快速处理！{orderNo ? `订单号：${orderNo}` : ''}</span>
            {total !== '' ? <span className="pay-total">应付金额<span>{total}</span>{unit}</span> : null}
          </div>
          <div className="mk-pay-msg">
            <div>应付金额:</div>
          <div className="mk-pay-content">
            <Tabs defaultActiveKey="weixin">
              <TabPane tab={<img src={WeiXinPayLogo} alt=""/>} key="weixin">
                {!overdone ? <div className="qrcode-box">
                  {!overdue ? <p>距离二维码过期还剩<span>{second}</span>秒，过期后请刷新页面重新获取二维码。</p> : null}
                  {overdue ? <p className="overdue">二维码已过期，<span onClick={this.resetQrcode}>刷新</span>页面重新获取二维码。</p> : null}
                  <QRCode
                    value={qrcode}
                    size={250}
                    fgColor="#000000"
                    // imageSettings={{
                    //   src: '',
                    //   height: 60,
                    //   width: 60,
                    //   excavate: true
                    // }}
                  />
                  {overdue ? <div className="overdue-mask"><p onClick={this.resetQrcode}>获取失败 点击重新获取二维码</p></div> : null}
                  <div className="qrcode-tip">
                    <img src={WeiXinScan} alt=""/>
                    <div>
                      <p>请使用微信扫一扫</p>
                      <p>扫描二维码支付</p>
                    </div>
                  </div>
                </div> : null}
                {overdone ? <div className="overdone">
                  <p>支付成功！</p>
                  <p>请刷新订单页面，查看订单状态。</p>
                </div> : null}
                {!overdone ? <img className="weixin-scan" src={WeiXinPay} alt=""/> : null}
              </TabPane>
            </Tabs>
            {/* <div className="mk-pay-type">
              <span className="tip">支付方式：</span>
              <Radio.Group onChange={this.onChange} value="weixin">
                <Radio value="weixin">微信支付</Radio>
              </Radio.Group>
            </div> */}
            
          </div>
          <div className="mk-pay-bottom">
            {copyRight ? <p dangerouslySetInnerHTML={{ __html: copyRight.replace(/\s/ig, '&nbsp;') }}></p> : null}
            {icp ? <p dangerouslySetInnerHTML={{ __html: icp.replace(/\s/ig, '&nbsp;') }}></p> : null}
          </div>
        </div>
      </div>