add qrCode

front/project/www/components/PayModal/index.js

@@ -5,6 +5,7 @@ import Assets from '@src/components/Assets';
 import { formatDate } from '@src/services/Tools';
 import Tabs from '../Tabs';
 import Modal from '../Modal';
+import QrCode from '../QrCode';
 
 import { Order } from '../../stores/order';
 import { Main } from '../../stores/main';
@@ -253,7 +254,7 @@ export class PayMModal extends Component {
             />
             <div hidden={pay === 'bank'} className="pay">
               <div className="qrcode">
-                <Assets src={checked ? payInfo.qr : '模糊'} />
+                <QrCode width={140} height={140} qrCode={payInfo.qr} vague={!checked} />
               </div>
               <div className="t">请使用手机微信或支付宝扫码付款</div>
               <div className="t">支付金额: ¥ {order.money}</div>
@@ -342,7 +343,7 @@ export class PayMutilModal extends Component {
             />
             <div hidden={pay === 'bank'} className="pay">
               <div className="qrcode">
-                <Assets src={checked ? payInfo.qr : '模糊'} />
+                <QrCode width={140} height={140} qrCode={payInfo.qr} vague={!checked} />
               </div>
               <div className="t">请使用手机微信或支付宝扫码付款</div>
               <div className="t">支付金额: ¥ {order.money}</div>

front/project/www/components/QrCode/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+import { Icon } from 'antd';
+import Assets from '@src/components/Assets';
+
+function QrCode(props) {
+  const { className = '', qrCode, width, height, vague = false, refresh = false, onRefresh } = props;
+  return (
+    <div className={`qr-code-item ${className}`}>
+      {!vague && <Assets width={width} height={height} src={qrCode} />}
+      {vague && <Assets width={width} height={height} name='' />}
+      {refresh && <div style={{ lineHeight: `${height}px` }} className='fixed-refresh' onClick={() => onRefresh && onRefresh()}><Icon type="sync" /></div>}
+    </div>
+  );
+}
+QrCode.propTypes = {};
+export default QrCode;

front/project/www/components/QrCode/index.less

@@ -0,0 +1,24 @@
+@import '../../app.less';
+
+.qr-code-item{
+  display: inline-block;
+  position: relative;
+  .fixed-refresh {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    font-size: 30px;
+    cursor: pointer;
+    color: #fff;
+    background: rgba(0, 0, 0, .5);
+  }
+}
+.qr-code-item:hover {
+  .fixed-refresh {
+    display: block;
+  }
+}

front/project/www/components/VipRenew/index.js

@@ -7,6 +7,7 @@ import Tabs from '../Tabs';
 import { SpecialRadioGroup } from '../Radio';
 import Invite from '../Invite';
 import Button from '../Button';
+import QrCode from '../QrCode';
 import { PayMVipEndModal } from '../PayModal';
 import { Main } from '../../stores/main';
 import { Order } from '../../stores/order';
@@ -192,7 +193,7 @@ export default class extends Component {
               onChange={key => this.changePay(key)}
             />
             <div className="qrcode">
-              <Assets width={140} height={140} src={payInfo.qr} />
+              <QrCode width={140} height={140} qrCode={payInfo.qr} refresh />
             </div>
             <div className="t">请使用手机微信或支付宝扫码付款</div>
             {order && <div className="t">支付金额: ¥ {order.money}</div>}