From f36141f3075edf9d41928d64f759ad6bd1b1ac60 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 14 七月 2020 17:43:34 +0800
Subject: [PATCH] 2020-07-14
---
src/views/pay/index.jsx | 171 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 140 insertions(+), 31 deletions(-)
diff --git a/src/views/pay/index.jsx b/src/views/pay/index.jsx
index 44c1372..30c32d2 100644
--- a/src/views/pay/index.jsx
+++ b/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, ' ') }}></p> : null}
--
Gitblit v1.8.0