store

src/api/modules/order.ts

@@ -12,7 +12,7 @@ const order = {
             ...params,
         });
     },
-    add(planId: number, method: number, params: any) {
+    add(planId: number, method: number, params: {[name: string]: any}) {
         return axios.post(`${base}/add`, {
             plan_id: planId,
             promo_code: '',
@@ -34,5 +34,11 @@ const order = {
             },
         });
     },
+    payMethods() {
+        return axios({
+            url: `${base}/pay/methods`,
+            method: 'get',
+        });
+    },
 };
 export default order;

src/router/index.ts

@@ -67,6 +67,8 @@ 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}),
     meta: { requiresAuth: true },
   },
   {

src/views/ViewCode.vue

 <template>
   <div class="view-code">
     <!-- {{hash}} -->
+    <div v-if="isPayment">
+      应付***：**个
+    </div>
     <div class="container">
-        <div class="border">
+      <VueQr
+        class="qr-code"
+        :text="locationUrl"
+        :size="220"
+        :callback="vueQrCb"
+      />
+      <div v-if="isPayment">
         
       </div>
+      <div>
+        <a class="btn-save" download="二维码.png" :href="dataUrl">保存二维码</a>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import VueQr from 'vue-qr';
+
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component
+@Component({
+  components: {
+    VueQr,
+  },
+})
 export default class ViewCode extends Vue {
+  @Prop() locationUrl!: string;
+  @Prop() isPayment!: boolean;
+
+  private dataUrl = '';
+
   get hash() {
     return this.$route.query.hash;
   }
+  private vueQrCb(dataUrl: string) {
+    this.dataUrl = dataUrl;
+  }
 }
 </script>
 <style lang="scss" scoped>
-  .view-code{
-    background: #454674;
+.view-code {
+  min-height: 100vh;
+  background: #333648;
   display: flex;
   justify-content: center;
   padding-top: 52px;
-    .container{
-      width:277px;
-      height: 295px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 10px;
-      background: #FFFFFF;
-      .border{
-        width: 195px;
-        height: 195px;
-        margin: 20px;
-      background-image: linear-gradient(to left, #FF9F08, #FF9F08), 
-                  linear-gradient(to left, #FF9F08, #FF9F08), 
-                  linear-gradient(to left, #FF9F08, #FF9F08),
-                  linear-gradient(to bottom, #FF9F08, #FF9F08), 
-                  linear-gradient(to left, #FF9F08, #FF9F08),
-                  linear-gradient(to bottom, #FF9F08, #FF9F08),
-                  linear-gradient(to left, #FF9F08, #FF9F08),
-                  linear-gradient(to left, #FF9F08, #FF9F08);
-        background-size: 3px 20px, 20px 3px;
-        background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
-        background-repeat: no-repeat;
+  .container {
+    text-align: center;
+    width: 332px;
+    height: 408px;
+    background: #ffffff;
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09);
     border-radius: 5px;
+    border-radius: 10px;
+    .qr-code {
+      margin-top: 45px;
+      margin-bottom: 33px;
     }
-      
+    .btn-save {
+      display: inline-block;
+      width: 200px;
+      height: 40px;
+      background: linear-gradient(180deg, #4667fa 0%, #5b77f4 100%);
+      box-shadow: 0px 2px 15px 0px rgba(63, 121, 254, 0.42);
+      border-radius: 4px;
+      line-height: 40px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
     }
   }
+}
 </style>

src/views/userCenter/Recharge.vue

@@ -22,18 +22,20 @@
     </section>
     <section class="method">
       <p class="title">选择支付方式</p>
-      <van-radio-group v-model="method">
+      <van-radio-group v-model="selectedMethodId">
         <van-cell 
           v-for="(item, key) in payMethods"
           :key="key"
           :title="item.title"
-          @click="method = item.method"
+          @click="handleClickPayMethod(item)"
           center clickable>
           <template #icon>
-            <common-svg :name="item.icon" style="margin-right:10px;"></common-svg>
+            <img :src="item.s_image_url" style="height:20px">
+            <div style="flex-grow: 1">
+            </div>
           </template>
           <template #right-icon>
-            <van-radio :name="item.method" />
+            <van-radio :name="item.id" />
           </template>
         </van-cell>
       </van-radio-group>
@@ -57,7 +59,8 @@
               <div style="font-size: 40px;margin-top:60px;">￥{{selectedPlan.price}}</div>
               <div style="color:#B6B7B9;font-size: 16px;">燃料次数：{{selectedPlan.chain_times}}次</div>
               <div style="text-align:left;margin-top:42px"> 
-                <common-svg :name="payMethods[method].icon" style="margin-right:10px;"></common-svg>{{payMethods[method].title}}
+                <img :src="selectedMethodImgUrl" alt="">
+                <!-- <common-svg :name="payMethods[method].icon" style="margin-right:10px;"></common-svg>{{payMethods[method].title}} -->
               </div>
               <div @click="payHandler" class="slc-btn-common" style="display:inline-block;width:200px;height:40px;line-height:40px;margin-top:12px;">立即充值</div>
           </div>
@@ -70,6 +73,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio, Popup, Dialog } from 'vant';
 import { Getter, State } from 'vuex-class';
 import { Route } from 'vue-router';
+import { EPayMethod } from "./const"
+
 @Component({
   components: {
     [Form.name]: Form,
@@ -85,18 +90,19 @@ import { Route } from 'vue-router';
 })
 export default class Recharge extends Vue {
   @State('userInfo') private userInfo!: any;
-  private readonly payMethods: any = {
-    0: {
-      title: '支付宝',
-      icon: 'gerenzhongxin-zhifubaozhifu',
-      method: 0,
-    },
-    1: {
-      title: '微信',
-      icon: 'gerenzhongxin-weixinzhifu2',
-      method: 1,
-    },
-  };
+  // private  payMethods: any = {
+  //   0: {
+  //     title: '支付宝',
+  //     icon: 'gerenzhongxin-zhifubaozhifu',
+  //     method: 0,
+  //   },
+  //   1: {
+  //     title: '微信',
+  //     icon: 'gerenzhongxin-weixinzhifu2',
+  //     method: 1,
+  //   },
+  // };
+  private  payMethods = [];
   private planList: any[] = [];
   private selectedPlan: any = {
     planId: -1,
@@ -104,6 +110,27 @@ export default class Recharge extends Vue {
     chain_times: 0,
   };
   private method: number = 0;
+  private selectedMethodId: null | number = null;
+  
+  private getSelectedPayMethod(){
+    return this.payMethods.find((item: any) => item.id === this.selectedMethodId) as any
+  }
+  
+  get selectedMethodImgUrl(){
+    if(this.selectedMethodId !== null){
+      return (this.getSelectedPayMethod()).s_image_url;
+    }
+    return "";
+  }
+  
+  get getSelectedPayMethodType(): EPayMethod{
+    const selectedPayMethod = this.getSelectedPayMethod();
+    if(selectedPayMethod){
+      return selectedPayMethod.type;
+    }else{
+      throw new Error("没有选中方法")
+    }
+  }
 
   private orderId: string = '';
 
@@ -118,9 +145,19 @@ export default class Recharge extends Vue {
         chain_times,
       };
     });
+    this.$api.order.payMethods().then((ret: any) => {
+      const methods = ret.pay_methods || [];
+      this.payMethods = methods;
+      this.selectedMethodId = methods[0].id;
+    })
+  }
+
+  private handleClickPayMethod(method: any){
+    this.selectedMethodId = method.id;
   }
+
   private beforeRouteLeave(to: Route, from: Route, next: (params?: any) => void) {
-    if (!this.confirm) { return next(); }
+    if (!this.confirm || to.name === "ViewCode") { return next(); }
     this.$dialog.confirm({
       title: '提示',
       message: '点击“返回”将中断操作，确定返回？',
@@ -133,15 +170,30 @@ export default class Recharge extends Vue {
     });
   }
   private async recharge() {
-    const { id } = await this.$api.order.add(this.selectedPlan.id, this.method);
+    const { id } = await this.$api.order.add(this.selectedPlan.id);
     this.confirm = true;
     this.orderId = id;
   }
   private async payHandler() {
     const { protocol, host } = location;
-    const { pay_url } = await this.$api.order.pay(this.orderId, this.method);
+
+    const params:any = {};
+    if(this.getSelectedPayMethodType === EPayMethod.biqianbaopay) params.coin = this.getSelectedPayMethod().coin;
+    const { pay_url } = await this.$api.order.pay(this.orderId, this.getSelectedPayMethodType, params);
     const redirectUrl = encodeURIComponent(`${protocol}//${host}/#/rechargeSuccess`);
-    location.href = this.method === 0 ? pay_url : `${pay_url}&redirect_url=${redirectUrl}`;
+    if(this.getSelectedPayMethodType === EPayMethod.biqianbaopay){
+      // 币钱包 需要展示二维码
+      this.$router.push({
+        name: 'ViewCode',
+        query: {
+          locationUrl: pay_url,
+          payment: JSON.stringify(true),
+        }
+      })
+    }else{
+      // 支付宝和微信支付走👇流程
+      location.href = this.getSelectedPayMethodType === EPayMethod.alipay ? pay_url : `${pay_url}&redirect_url=${redirectUrl}`;
+    }
   }
 }
 </script>

src/views/userCenter/const.ts

+export enum EPayMethod {
+    alipay = 0,
+    weixinpay = 1,
+    biqianbaopay = 2,
+}