1. 增加错误提示弹窗 2，增加按钮loading

jeepay-ui-merchant/package.json

@@ -13,12 +13,13 @@
   "dependencies": {
     "@ant-design-vue/pro-layout": "^1.0.7",
     "@antv/data-set": "^0.10.2",
-    "ant-design-vue": "^1.7.2",
     "@antv/g2plot": "^2.3.21",
     "@antv/util": "^2.0.13",
+    "ant-design-vue": "^1.7.2",
     "axios": "^0.19.0",
     "core-js": "^3.1.2",
     "enquire.js": "^2.1.6",
+    "js-base64": "^2.5.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
@@ -26,6 +27,7 @@
     "mockjs2": "1.0.8",
     "moment": "^2.24.0",
     "nprogress": "^0.2.0",
+    "reconnectingwebsocket": "^1.0.0",
     "store": "^2.0.12",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
@@ -36,9 +38,7 @@
     "vue-router": "^3.1.2",
     "vue-svg-component-runtime": "^1.0.1",
     "vuex": "^3.1.1",
-    "wangeditor": "^3.1.1",
+    "wangeditor": "^3.1.1"
-    "js-base64": "^2.5.2",
-    "reconnectingwebsocket": "^1.0.0"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",

jeepay-ui-merchant/src/main.js

@@ -16,7 +16,9 @@ import './utils/filter' // global filter
 import './global.less' // global style
 import 'ant-design-vue/dist/antd.less'
 import infoBox from '@/utils/infoBox'
+import VueClipboard from 'vue-clipboard2' // 复制插件
 
+Vue.use(VueClipboard) // 复制插件
 Vue.config.productionTip = false
 
 // use pro-layout components

jeepay-ui-merchant/src/views/mchApp/List.vue

@@ -46,7 +46,7 @@
           <JeepayTableColumns>
             <a-button type="link" v-if="$access('ENT_MCH_PAY_TEST')">
               <router-link :to="{name:'ENT_MCH_PAY_TEST', params:{appId:record.appId}}">
-                支付体验
+                支付测试
               </router-link>
             </a-button>
             <a-button type="link" v-if="$access('ENT_MCH_APP_EDIT')" @click="editFunc(record.appId)">修改</a-button>

jeepay-ui-merchant/src/views/payTest/PayTest.vue

@@ -114,8 +114,8 @@
               </a-radio-group>
 
             </div>
-            <div style="margin-top:20px;text-align: right">
+            <div style="margin-top:20px;text-align: left">
-              <span style="color: #FD482C;font-size: 18px;padding-right: 10px;" id="amountShow">{{ paytestAmount }}</span>
+              <!-- <span style="color: #FD482C;font-size: 18px;padding-right: 10px;" id="amountShow">{{ paytestAmount }}</span> -->
               <a-button @click="immediatelyPay" style="padding:5px 20px;background-color: #1953ff;border-radius: 5px;color:#fff">立即支付</a-button>
             </div>
           </form>
@@ -147,8 +147,7 @@ export default {
       mchOrderNo: '', // 模拟商户订单号
       authCode: '', // 条码的值
       paytestAmount: '0.01', // 支付金额，默认为0.01
-      amountInput: false, // 自定金额输入框是否展示
+      amountInput: false // 自定金额输入框是否展示
-      barCodeAgain: true // 判断条码是否为，第二次吊起支付按钮,默认为true
     }
   },
 
@@ -215,7 +214,7 @@ export default {
     // 立即支付按钮
     immediatelyPay () {
       // 判断支付金额是否为0
-      if (this.paytestAmount === 0.00 || this.paytestAmount === ' ' || this.paytestAmount === undefined) {
+      if (!this.paytestAmount || this.paytestAmount === 0.00) {
         return this.$message.error('请输入支付金额')
       }
 
@@ -225,14 +224,9 @@ export default {
       }
 
       // 判断是否为条码支付
-      if (this.currentWayCode === 'WX_BAR' || this.currentWayCode === 'ALI_BAR' || this.currentWayCode === 'AUTO_BAR') {
+      if (!this.$refs.payTestBarCode.getVisible() && (this.currentWayCode === 'WX_BAR' || this.currentWayCode === 'ALI_BAR' || this.currentWayCode === 'AUTO_BAR')) {
-        // 此处判断是否是条码支付，同时让条码弹窗的输入框处于焦点状态，当在点击提交，或者扫码盒自动提交时，返回条码信息
-        // 此处返回一个值，代表他是条码要第二次吊起支付按钮，第二次吊起后，要将其清空
-        if (this.barCodeAgain) {
           this.$refs.payTestBarCode.showModal()
-          this.barCodeAgain = false
           return
-        }
       }
 
       const that = this
@@ -246,10 +240,9 @@ export default {
         authCode: this.authCode
       }).then(res => {
         that.$refs.payTestModal.showModal(this.currentWayCode, res) // 打开弹窗
-        that.barCodeAgain = true // 将条码的判断还原为true
         that.randomOrderNo() // 刷新订单号
-      }).catch(err => {
+      }).catch(() => {
-        console.log(err)
+        that.$refs.payTestBarCode.processCatch()
         that.randomOrderNo() // 刷新订单号
       })
     },
@@ -282,7 +275,6 @@ export default {
 
     // 条码弹窗点击x或者蒙版关闭
     testCodeChange () {
-      this.barCodeAgain = true
       this.randomOrderNo() // 刷新订单号
     }
 

jeepay-ui-merchant/src/views/payTest/PayTestBarCode.vue

@@ -5,7 +5,7 @@
         <p>请输入用户条形码:</p>
         <div style="display:flex;flex-direction:row;margin-bottom:14px;">
           <a-input v-model="barCodeValue" ref="barCodeInput" @keyup.enter="handleOk"></a-input>
-          <a-button @click="handleOk" type="primary" style="margin-left:10px;" >确认支付</a-button>
+          <a-button @click="handleOk" type="primary" style="margin-left:10px;" :loading="loading">确认支付</a-button>
         </div>
         <p>或者使用(扫码枪/扫码盒)扫码:</p>
         <div style="text-align:center">
@@ -20,11 +20,13 @@ export default {
   data () {
     return {
       visible: false,
-      barCodeValue: '' // 条码的值
+      barCodeValue: '', // 条码的值
+      loading: false // 按钮的loading状态
     }
   },
   methods: {
     showModal () {
+      this.loading = false
       this.barCodeValue = ''// 清空条码的值
       this.visible = true
       this.$nextTick(() => { // 弹窗展示后，输入框默认展示焦点
@@ -34,12 +36,23 @@ export default {
 
     // 按钮的点击事件，当使用扫码设备扫码后，也会自动吊起该事件
     handleOk () {
+      if (this.barCodeValue === '') {
+        return
+      }
+
       // 传递条码值给父组件
+      this.loading = true
       this.$emit('barCodeValue', this.barCodeValue)
     },
     handleChose () {
       // 点击×关闭，或者点击蒙版关闭时，设置父组件barCodeAgain的值为false
       this.$emit('CodeAgainChange')
+    },
+    getVisible () {
+      return this.visible
+    },
+    processCatch () {
+      this.loading = false
     }
   }
 }

jeepay-ui-merchant/src/views/payTest/PayTestModal.vue

@@ -3,7 +3,8 @@
     <a-modal v-model="visible" title="等待支付" @ok="handleClose" :footer="null" :width="300">
       <div style="width:100%;margin-bottom:20px;text-align:center">
         <img v-if="apiRes.payDataType == 'codeImgUrl'" :src="apiRes.payData" alt="">
-        <span v-if="apiRes.payDataType == 'payurl'">等待用户支付 <hr> 如浏览器未正确跳转请点击： <a :href="apiRes.payData" target="_blank">支付地址</a></span>
+        <span v-else-if="apiRes.payDataType == 'payurl'">等待用户支付 <hr> 如浏览器未正确跳转请点击： <a :href="apiRes.payData" target="_blank">支付地址</a><a-button size="small" class="copy-btn" v-clipboard:copy="apiRes.payData" v-clipboard:success="onCopy" >复制链接</a-button></span>
+        <span v-else>等待用户支付,请稍后</span>
       </div>
       <p class="describe">
         <img src="@/assets/payTestImg/wx_app.svg" alt="" v-show="wxApp"><!-- 微信图标 -->
@@ -31,6 +32,11 @@ export default {
     }
   },
   methods: {
+
+    onCopy () {
+      this.$message.success('复制成功')
+    },
+
     // 二维码以及条码弹窗
     showModal (wayCode, apiRes) {
       const that = this
@@ -45,6 +51,7 @@ export default {
       this.visible = true // 打开弹窗
 
       // 根据不同的支付方式，展示不同的信息
+      this.payText = ''
       if (wayCode === 'WX_NATIVE' || wayCode === 'WX_JSAPI') { // 微信二维码
         this.wxApp = true
         this.payText = '请使用微信"扫一扫"扫码支付'
@@ -61,20 +68,27 @@ export default {
       if (apiRes.orderState === 2 || apiRes.orderState === 3) {
         if (apiRes.orderState === 2) {
           that.handleClose()
-          that.$message.success('支付成功')
+          const succModal = that.$infoBox.modalSuccess('支付成功', <div>2s后自动关闭...</div>)
+          setTimeout(() => { succModal.destroy() }, 2000)
           that.$emit('closeBarCode') // 关闭条码框
         } else if (apiRes.orderState === 3) {
           that.handleClose()
-          that.$message.error('支付失败')
+
           that.$emit('closeBarCode') // 关闭条码框
+          that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
+          <div>错误信息：{ apiRes.errMsg}</div></div>)
         }
         return
       }
 
+      if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') { // h5 或者 wap
+        this.payText = '请复制链接到手机端打开'
+      } else {
       // 跳转到PC网站
       if (apiRes.payDataType === 'payurl') {
         window.open(apiRes.payData)
       }
+      }
 
       // 监听响应结果
       this.payOrderWebSocket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/payOrder/' + apiRes.payOrderId + '/' + new Date().getTime())
@@ -83,11 +97,13 @@ export default {
         const resMsgObject = JSON.parse(msgObject.data)
         if (resMsgObject.state === 2) {
           that.handleClose()
-          that.$message.success('支付成功')
+          const succModal = that.$infoBox.modalSuccess('支付成功', <div>2s后自动关闭...</div>)
+          setTimeout(() => { succModal.destroy() }, 2000)
           that.$emit('closeBarCode') // 关闭条码框
         } else {
           that.handleClose()
-          that.$message.error('支付失败')
+          that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
+          <div>错误信息：{ apiRes.errMsg}</div></div>)
           that.$emit('closeBarCode') // 关闭条码框
         }
       }