2020-07-09

king

2020-07-09 89ee68c59cdcaa4b7fa0178be42d58bec651ee73

 src/views/pay/index.jsx

@@ -1,17 +1,32 @@
import React, {Component} from 'react'
import moment from 'moment'
import md5 from 'md5'
import QRCode from 'qrcode.react'
import { notification, Radio } from 'antd'

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

class Pay extends Component {
  state = {
    orderId: ''
    orderId: '',
    orderNo: '',
    logo: '',
    name: '',
    copyRight: '',
    icp: '',
    total: '',
    unit: '',
    qrcode: ''
  }

  UNSAFE_componentWillMount () {
    let _param = window.atob(this.props.match.params.param)
    let _urlparam = window.decodeURIComponent(window.atob(this.props.match.params.param))
    let _params = {}
    _param.split('&').forEach(cell => {
    _urlparam.split('&').forEach(cell => {
      let _cell = cell.split('=')
      _params[_cell[0]] = _cell[1]
    })
@@ -19,22 +34,141 @@
    if (!sessionStorage.getItem('LoginUID') && _params.LoginUID) {
      sessionStorage.setItem('LoginUID', _params.LoginUID)
    }
    if (!sessionStorage.getItem('UserID') && _params.userid) {
      sessionStorage.setItem('UserID', _params.userid)
    }
    if (!sessionStorage.getItem('SessionUid') && _params.suid) {
      sessionStorage.setItem('SessionUid', _params.suid)
    }

    this.setState({
      orderId: _params.ID
      orderId: _params.ID,
      logo: _params.logo,
      name: _params.name,
      copyRight: _params.copyRight,
      icp: _params.icp
    })

    if (_params.ID) {
      this.getOrder(_params.ID)
    } else {
      notification.warning({
        top: 92,
        message: '未获取到订单ID！',
        duration: 5
      })
    }
  }

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

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

    Api.getLocalConfig(param).then(res => {
      if (res.status) {
        this.setState({
          orderNo: res.out_trade_no,
          total: res.amount ? res.amount.total : '',
          unit: res.amount && res.amount.currency === 'CNY' ? '元' : '元',
        })

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

        Api.getWxNativePay({ 'out_biz_no': res.out_trade_no, 'out_open_id': res.appid }).then(result => {
          if (result.qrcode) {
            this.setState({
              qrcode: result.qrcode
            })
          } else {
            notification.warning({
              top: 10,
              message: result.msg || '未获取到支付码！',
              duration: 5
            })
          }
        })
      } else {
        notification.warning({
          top: 10,
          message: res.message,
          duration: 5
        })
      }
    })
  }

  onChange = () => {

  }

  render () {
    const { logo, name, orderNo, icp, copyRight, total, unit, qrcode } = 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}</span>
            <span className="pay-total">应付金额<span>{total}</span>{unit}</span>
          </div>
          <div className="mk-pay-msg">
            <div>应付金额:</div>
          <div className="mk-pay-content">
            <div className="mk-pay-type">
              <span className="tip">支付方式：</span>
              <Radio.Group onChange={this.onChange} value="weixin">
                <Radio value="weixin">微信支付</Radio>
              </Radio.Group>
            </div>
            <div className="qrcode-box">
              <p>二维码有效时长5分钟，过期后请刷新页面重新获取二维码。</p>
              <QRCode
                value={qrcode}
                size={230}
                fgColor="#000000"
                // imageSettings={{
                //   src: '',
                //   height: 60,
                //   width: 60,
                //   excavate: true
                // }}
              />
              <div className="qrcode-tip">
                <img src={WeiXinScan} alt=""/>
                <div>
                  <p>请使用微信扫一扫</p>
                  <p>扫描二维码支付</p>
                </div>
              </div>
            </div>
            <img className="weixin-scan" src={WeiXinPay} alt=""/>
          </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>