1 . 支付体验页，增加分割线以及提示信息

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

 <template>
   <div>
-    <a-card style="box-sizing:border-box;border-radius:15px;padding:30px">
+    <a-card style="box-sizing:border-box;padding:30px">
 
       <!-- 选择下单的应用列表 -->
       <a-form>
         <div style="display:flex;flex-direction:row">
-          <p style="margin-top:9px;margin-right:10px;">应用APPID</p>
+          <!-- <p style="margin-top:9px;margin-right:10px;"></p> -->
           <a-form-item label="" class="table-head-layout">
             <a-select v-model="appId" @change="changeAppId" style="width:300px">
-              <a-select-option key="" >请选择应用</a-select-option>
+              <a-select-option key="" >应用APPID</a-select-option>
               <a-select-option v-for="(item) in mchAppList" :key="item.appId" >{{ item.appName }} [{{ item.appId }}]</a-select-option>
             </a-select>
           </a-form-item>
         </div>
       </a-form>
 
+      <!-- 未配置支付方式提示框 -->
+      <a-divider v-if="!appId">请选择应用APPID</a-divider>
+      <a-divider v-else-if="noConfigText">您尚未配置任何支付方式</a-divider>
+      <a-divider v-else></a-divider>
+
       <!-- 支付测试面板 v-if=""-->
       <div style="width: 100%;" class="paydemo" v-if="payTestShow()">
         <div class="paydemo-type-content">
-          <div class="paydemo-type-name" v-show="showTitle('WX')" >微信支付</div>
+          <div class="paydemo-type-name article-title" v-show="showTitle('WX')" >微信支付</div>
           <div class="paydemo-type-body">
 
             <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_NATIVE') >= 0" @click="changeCurrentWayCode('WX_NATIVE', 'codeImgUrl')" :class="{this:(currentWayCode === 'WX_NATIVE')}">
@@ -39,7 +44,7 @@
 
           </div>
 
-          <div class="paydemo-type-name" v-show="showTitle('ALI')">支付宝支付</div>
+          <div class="paydemo-type-name article-title" v-show="showTitle('ALI')">支付宝支付</div>
           <div class="paydemo-type-body">
             <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_QR') >= 0" @click="changeCurrentWayCode('ALI_QR', 'codeImgUrl')" :class="{this:(currentWayCode === 'ALI_QR')}">
               <img src="@/assets/payTestImg/ali_qr.svg" class="paydemo-type-img"><span class="color-change">支付宝二维码</span>
@@ -64,7 +69,7 @@
             </div>
           </div>
 
-          <div class="paydemo-type-name" v-show="showJhTitle()">聚合支付</div>
+          <div class="paydemo-type-name article-title" v-show="showJhTitle()">聚合支付</div>
           <div class="paydemo-type-body">
             <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_JSAPI') >= 0 || appPaywayList.indexOf('ALI_JSAPI') >= 0" @click="changeCurrentWayCode('QR_CASHIER', 'codeImgUrl')" :class="{this:(currentWayCode === 'QR_CASHIER')}">
               <img src="@/assets/payTestImg/qr_cashier.svg" class="paydemo-type-img"><span class="color-change">聚合扫码(用户扫商家)</span>
@@ -77,9 +82,10 @@
           </div>
         </div>
 
+        <a-divider ></a-divider>
         <!-- 订单信息 -->
         <div class="paydemo-type-content">
-          <div class="paydemo-type-name">支付信息</div>
+          <div class="paydemo-type-name article-title">支付信息</div>
           <form class="layui-form">
             <div class="paydemo-form-item">
               <label>订单编号：</label><span id="payMchOrderNo">{{ mchOrderNo }}</span>
@@ -122,8 +128,8 @@
         </div>
       </div>
     </a-card>
-    <!-- 二维码弹窗 @closeBarCode="handleCloseBarCode"-->
-    <pay-test-modal ref="payTestModal" @closeBarCode="$refs.payTestBarCode.visible = false"></pay-test-modal>
+    <!-- 二维码弹窗 -->
+    <pay-test-modal ref="payTestModal" @closeBarCode="$refs.payTestBarCode.visible = false" ></pay-test-modal>
 
     <!-- 条码弹框 -->
     <pay-test-bar-code ref="payTestBarCode" @barCodeValue="barCodeChange" @CodeAgainChange="testCodeChange"></pay-test-bar-code>
@@ -147,7 +153,8 @@ export default {
       mchOrderNo: '', // 模拟商户订单号
       authCode: '', // 条码的值
       paytestAmount: '0.01', // 支付金额，默认为0.01
-      amountInput: false // 自定金额输入框是否展示
+      amountInput: false, // 自定金额输入框是否展示
+      noConfigText: false // 尚无任何配置分割线提示文字
     }
   },
 
@@ -169,6 +176,7 @@ export default {
     this.randomOrderNo()
   },
   methods: {
+
     // 支付板块是否展示
     payTestShow () {
       // 如果未选择appid，或者支付方式列表为0，则不显示支付体验板块
@@ -209,6 +217,11 @@ export default {
       const that = this
       payTest(value).then(res => {
         that.appPaywayList = res
+        if (res.length === 0) {
+          that.noConfigText = true
+        } else {
+          that.noConfigText = false
+        }
       })
     },
     // 立即支付按钮

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

@@ -73,7 +73,6 @@ export default {
           that.$emit('closeBarCode') // 关闭条码框
         } else if (apiRes.orderState === 3) {
           that.handleClose()
-
           that.$emit('closeBarCode') // 关闭条码框
           that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
           <div>错误信息：{ apiRes.errMsg}</div></div>)
@@ -81,15 +80,18 @@ export default {
         return
       }
 
-      if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') { // h5 或者 wap
+      // h5 或者 wap
+      if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') {
         this.payText = '请复制链接到手机端打开'
       } else {
       // 跳转到PC网站
-      if (apiRes.payDataType === 'payurl') {
-        window.open(apiRes.payData)
-      }
+        if (apiRes.payDataType === 'payurl') {
+          window.open(apiRes.payData)
+        }
       }
 
+      // 如果上面未关闭条码框，则代表进入webScoket，那么先在此处关闭条码框
+      that.$emit('closeBarCode') // 关闭条码框
       // 监听响应结果
       this.payOrderWebSocket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/payOrder/' + apiRes.payOrderId + '/' + new Date().getTime())
       this.payOrderWebSocket.onopen = () => {}
@@ -99,12 +101,10 @@ export default {
           that.handleClose()
           const succModal = that.$infoBox.modalSuccess('支付成功', <div>2s后自动关闭...</div>)
           setTimeout(() => { succModal.destroy() }, 2000)
-          that.$emit('closeBarCode') // 关闭条码框
         } else {
           that.handleClose()
           that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
           <div>错误信息：{ apiRes.errMsg}</div></div>)
-          that.$emit('closeBarCode') // 关闭条码框
         }
       }
     },

jeepay-ui-merchant/src/views/payTest/payTest.css

@@ -121,4 +121,8 @@
 }
 .paydemo-form-item label input {
 	margin-left:3px;
+}
+
+.paydemo .article-title {
+	font-weight: 600
 }
\ No newline at end of file