2020-07-14

king

2020-07-14 f36141f3075edf9d41928d64f759ad6bd1b1ac60

 src/views/pay/index.jsx

@@ -2,25 +2,32 @@
import moment from 'moment'
import md5 from 'md5'
import QRCode from 'qrcode.react'
import { notification, Radio } from 'antd'
import { notification, Tabs } from 'antd'

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: '',
    orderNo: '',
    appid: '',
    logo: '',
    name: '',
    copyRight: '',
    icp: '',
    total: '',
    unit: '',
    qrcode: ''
    qrcode: '',
    second: 60,
    overdue: false,
    overdone: false
  }

  UNSAFE_componentWillMount () {
@@ -64,7 +71,7 @@
    let param = {
      func: 's_get_weixin_pay_native',
      ID: Id,
      sandbox: 'Y'
      // sandbox: 'Y'
    }

    param.LTextOut = md5(param.ID + window.GLOB.appkey)
@@ -73,11 +80,28 @@

    Api.getLocalConfig(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({
          appid: res.appid,
          orderNo: res.out_trade_no,
          total: res.amount ? res.amount.total : '',
          total: _total,
          unit: res.amount && res.amount.currency === 'CNY' ? '元' : '元',
        })

        // 当前订单支付成功
        if (res.pay_status) {
          this.setState({
            overdone: true
          })
          return
        }

        if (!res.out_trade_no) {
          notification.warning({
@@ -100,7 +124,11 @@
            this.setState({
              qrcode: result.qrcode
            })
            setTimeout(this.resetSecond, 1000)
          } else {
            this.setState({
              overdue: true
            })
            notification.warning({
              top: 10,
              message: result.msg || '未获取到支付码！',
@@ -109,9 +137,79 @@
          }
        })
      } 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,
          // sandbox: 'Y'
        }

        param.LTextOut = md5(orderNo + 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.pay_status) {
            this.setState({
              overdone: true
            })
          }
        })
      }
    } else {
      this.setState({
        overdue: true
      })
    }
  }

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

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

    Api.getWxNativePay({ 'out_biz_no': orderNo, 'out_open_id': appid }).then(result => {
      if (result.qrcode) {
        this.setState({
          qrcode: result.qrcode,
          overdue: false,
          second: 60
        })
        setTimeout(this.resetSecond, 1000)
      } else {
        notification.warning({
          top: 10,
          message: result.msg || '未获取到支付码！',
          duration: 5
        })
      }
@@ -123,7 +221,7 @@
  }

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

    return (
      <div className="mk-pay-container">
@@ -133,38 +231,49 @@
            <div className="user-name">{name}</div>
          </header>
          <div className="pay-tip">
            <span>请您尽快支付，以便订单快速处理！订单号：{orderNo}</span>
            <span className="pay-total">应付金额<span>{total}</span>{unit}</span>
            <span>请您尽快支付，以便订单快速处理！{orderNo ? `订单号：${orderNo}` : ''}</span>
            {total !== '' ? <span className="pay-total">应付金额<span>{total}</span>{unit}</span> : null}
          </div>
          <div className="mk-pay-content">
            <div className="mk-pay-type">
            <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 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>
          <div className="mk-pay-bottom">
            {copyRight ? <p dangerouslySetInnerHTML={{ __html: copyRight.replace(/\s/ig, '&nbsp;') }}></p> : null}