feat: 新增钱包支付的功能

deployFeatPay2Test.sh

+mv dist tracesourcemb-pay
+tar -czf tracesourcemb-pay.tar tracesourcemb-pay
+rm -rf tracesourcemb-pay
+scp tracesourcemb-pay.tar root@120.26.174.69:/usr/share/nginx/html/tracesourcemb-pay.tar
+rm -rf tracesourcemb-pay.tar
+ssh root@120.26.174.69 'cd /usr/share/nginx/html && rm -rf tracesourcemb-pay && tar -xzf tracesourcemb-pay.tar && rm -rf tracesourcemb-pay.tar'
+echo 'done. 👉 http://120.26.174.69:9092'
\ No newline at end of file

package.json

@@ -25,6 +25,7 @@
     "vue-cropper": "^0.5.4",
     "vue-cropper-h5": "^1.2.0",
     "vue-property-decorator": "^8.4.1",
+    "vue-qr": "^2.3.0",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3",
     "vuex-class": "^0.3.2"

src/router/index.ts

@@ -67,8 +67,12 @@ const routes: RouteConfig[] = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "view-code" */ '@/views/ViewCode.vue'),
-    props: ({query}) => ({locationUrl: query.locationUrl,
-      isPayment: query.payment ? JSON.parse(query.payment as string) : undefined}),
+    props: ({query}) => ({
+      locationUrl: query.locationUrl,
+      isPayment: query.payment ? JSON.parse(query.payment as string) : undefined,
+      coin: query.coin,
+      downloadUrl: query.downloadUrl,
+    }),
     meta: { requiresAuth: true },
   },
   {

src/types/vue-qr.d.ts

+declare module 'vue-qr' {
+    const VueQr: any;
+    export default VueQr ;
+}
\ No newline at end of file

src/views/ViewCode.vue

 <template>
   <div class="view-code">
     <!-- {{hash}} -->
-    <div v-if="isPayment">
-      应付***：**个
-    </div>
     <div class="container">
+      <div v-if="isPayment" class="title">
+        应付{{ coin }}：<span class="count">{{ count }}</span
+        >个
+      </div>
       <VueQr
         class="qr-code"
         :text="locationUrl"
-        :size="220"
+        :size="180"
         :callback="vueQrCb"
       />
-      <div v-if="isPayment">
-        
+      <div v-if="isPayment" class="tip">
+        <div>使用{{ coin }}钱包扫一扫扫描二维码支付</div>
+        <div>下载链接：{{ downloadUrl }}</div>
       </div>
       <div>
         <a class="btn-save" download="二维码.png" :href="dataUrl">保存二维码</a>
@@ -32,8 +34,20 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
   },
 })
 export default class ViewCode extends Vue {
-  @Prop() locationUrl!: string;
-  @Prop() isPayment!: boolean;
+  @Prop() private locationUrl!: string;
+  @Prop() private isPayment!: boolean;
+  @Prop() private coin!: string;
+  @Prop() private downloadUrl!: string;
+
+  get count() {
+    try {
+      const payUrl = JSON.parse(this.locationUrl);
+      const amount = payUrl.amount;
+      return amount;
+    } catch (err) {
+      return '--';
+    }
+  }
 
   private dataUrl = '';
 
@@ -51,8 +65,8 @@ export default class ViewCode extends Vue {
   background: #333648;
   display: flex;
   justify-content: center;
-  padding-top: 52px;
   .container {
+    margin-top: 52px;
     text-align: center;
     width: 332px;
     height: 408px;
@@ -60,12 +74,29 @@ export default class ViewCode extends Vue {
     box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09);
     border-radius: 5px;
     border-radius: 10px;
+    .title {
+      margin-top: 37px;
+      margin-bottom: 13px;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1f292d;
+      .count {
+        color: #ff1818;
+      }
+    }
     .qr-code {
-      margin-top: 45px;
-      margin-bottom: 33px;
+    }
+    .tip {
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #929292;
+      line-height: 20px;
     }
     .btn-save {
       display: inline-block;
+      margin-top: 28px;
       width: 200px;
       height: 40px;
       background: linear-gradient(180deg, #4667fa 0%, #5b77f4 100%);

src/views/userCenter/Recharge.vue

@@ -40,7 +40,7 @@
         </van-cell>
       </van-radio-group>
     </section>
-    <div @click="recharge" class="slc-btn-common btn">充值</div>
+    <div @click="recharge" class="slc-btn-common btn btn-recharge">充值</div>
     <section style="display:flex;align-items:center;justify-content:center;color:#3F79FE;font-size:12px;margin-top:15px;">
       <router-link tag="span" to="/rechargeRecord">充值记录</router-link>
       <router-link to="/contect" tag="span" style="margin-left:10px;">联系客服</router-link>
@@ -74,6 +74,7 @@ import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio, Popup,
 import { Getter, State } from 'vuex-class';
 import { Route } from 'vue-router';
 import { EPayMethod } from "./const"
+import { IMethod } from "./types"
 
 @Component({
   components: {
@@ -102,7 +103,7 @@ export default class Recharge extends Vue {
   //     method: 1,
   //   },
   // };
-  private  payMethods = [];
+  private  payMethods: IMethod[] = [];
   private planList: any[] = [];
   private selectedPlan: any = {
     planId: -1,
@@ -183,11 +184,18 @@ export default class Recharge extends Vue {
     const redirectUrl = encodeURIComponent(`${protocol}//${host}/#/rechargeSuccess`);
     if(this.getSelectedPayMethodType === EPayMethod.biqianbaopay){
       // 币钱包 需要展示二维码
+     
+      const method = this.payMethods.find((method: any)=> method.id === this.selectedMethodId) as IMethod;
+      const coin = method.coin;
+      const downloadUrl = method.download_url;
+
       this.$router.push({
         name: 'ViewCode',
         query: {
           locationUrl: pay_url,
           payment: JSON.stringify(true),
+          coin,
+          downloadUrl
         }
       })
     }else{
@@ -252,6 +260,9 @@ export default class Recharge extends Vue {
         font-weight: 500;
       }
     }
+    .btn-recharge{
+      margin-top: 30px;
+    }
     .btn{
       width: 200px;
       height: 40px;

src/views/userCenter/types.ts

+export interface IMethod {
+  coin: string;
+  download_url: string;
+  [props: string]: any;
+}