2024-06-28

king

2024-06-28 c8804ceb1fe2dea76f9949c5ea04423876ee2c81

 src/views/pay/index.jsx

@@ -2,82 +2,102 @@
import moment from 'moment'
import md5 from 'md5'
import QRCode from 'qrcode.react'
import { notification, Radio } from 'antd'
import { notification, Tabs, Modal } 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: '',
    logo: '',
    name: '',
    copyRight: '',
    icp: '',
    logo: window.GLOB.doclogo || '',
    name: sessionStorage.getItem('Full_Name') || '',
    copyRight: window.GLOB.copyRight || '',
    icp: window.GLOB.ICP || '',
    total: '',
    unit: '',
    qrcode: ''
    qrcode: '',
    second: 60,
    overdue: false,
    overdone: false,
    appId: ''
  }

  UNSAFE_componentWillMount () {
    let _urlparam = window.decodeURIComponent(window.atob(this.props.match.params.param))
    let _params = {}
    _urlparam.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)
    }
    if (!sessionStorage.getItem('UserID') && _params.userid) {
      sessionStorage.setItem('UserID', _params.userid)
    }
    if (!sessionStorage.getItem('SessionUid') && _params.suid) {
      sessionStorage.setItem('SessionUid', _params.suid)
    }
    let _appId = param.appId || window.GLOB.WXAppID || window.GLOB.WXminiAppID || ''

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

    if (_params.ID) {
      this.getOrder(_params.ID)
    } else {
    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) => {
  getOrder = (Id, appId) => {
    let param = {
      func: 's_get_weixin_pay_native',
      ID: Id,
      sandbox: 'Y'
      ID: Id
    }

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

    Api.getLocalConfig(param).then(res => {
    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: res.amount ? res.amount.total : '',
          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({
@@ -86,32 +106,113 @@
            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) {
        Api.getWxNativePay({ 'out_biz_no': res.out_trade_no, app_id: appId }).then(result => {
          if (result.status && result.code_url) {
            this.setState({
              qrcode: result.qrcode
              qrcode: result.code_url
            })
            setTimeout(this.resetSecond, 1000)
          } else {
            this.setState({
              overdue: true
            })
            notification.warning({
              top: 10,
              message: result.msg || '未获取到支付码！',
              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
        })
      }
@@ -123,7 +224,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 +234,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}