支付部分

src/views/userCenter/choosePackage.vue

@@ -144,19 +144,26 @@
       <!-- 步骤三 -->
       <div v-if="steps === 2">
         <div class="top-box">
-          <div class="bg-box"></div>
+          <div class="bg-box" v-if="activeIndex === 1"></div>
+          <div class="bg-box--other" v-if="activeIndex === 2"></div>
           <div>
-            <p>距离二维码过期还剩 <span>89S</span></p>
+            <p>
+              距离二维码过期还剩 <span>{{ times }}S</span>
+            </p>
             <div class="right">订单编号：{{ orderId }}</div>
           </div>
         </div>
-        <div class="money-box">
+        <div class="money-box" v-if="activeIndex === 1">
           应付金额：<span>￥{{ price }}.00</span> 元
         </div>
+        <!--  -->
+        <div class="money-box" v-if="activeIndex === 2">
+          应付BEST：<span>{{ price }}.00</span> 个
+        </div>
         <div class="Qr-code">
           <img :src="payUrl" />
         </div>
-        <div class="prompt-box">
+        <div class="prompt-box" v-if="activeIndex === 1">
           <div class="left">
             <i class="iconfont iconsaoma"></i>
           </div>
@@ -165,6 +172,22 @@
             <p>扫描二维码支付</p>
           </div>
         </div>
+        <div class="prompt-box prompt-box--blue" v-if="activeIndex === 2">
+          <div class="left">
+            <i class="iconfont iconsaoma"></i>
+          </div>
+          <div class="right">
+            <p>请使用B钱包扫一扫</p>
+            <p>扫描二维码支付</p>
+          </div>
+        </div>
+        <div class="download" v-if="activeIndex === 2">
+          B钱包下载地址：https://d.biqianbao.net
+        </div>
+        <div class="top-up-hints" v-if="activeIndex === 2">
+          <span>提示：</span>
+          实际到账时间取决于区块链确认速度，大概需要5-30分钟时间。
+        </div>
       </div>
     </div>
     <common-dialog showMask v-if="PromptShow" @closePopup="PromptShow = false">
@@ -196,6 +219,7 @@ export default {
       PromptShow: false,
       PaymentList: [], // 支付方式列表
       activeIndex: 0,
+      times: 180,
     };
   },
   components: {
@@ -210,9 +234,17 @@ export default {
     }
   },
   methods: {
+    // 倒计时
+    reduce() {
+      this.timeID = setInterval(() => {
+        this.times--;
+        if (this.times === 0) {
+          clearInterval(this.timeID);
+        }
+      }, 1000);
+    },
     // 确定支付
     determinePay() {
-      console.log(this.PaymentList[this.activeIndex]);
       if (this.PaymentList[this.activeIndex].type === 0) {
         // 支付宝
         this.PaymentOrder(this.PaymentList[this.activeIndex].type);
@@ -220,21 +252,36 @@ export default {
         // 微信
         this.WeChatPay(this.PaymentList[this.activeIndex].type);
         this.steps = 2;
+        this.reduce();
       } else if (this.PaymentList[this.activeIndex].type === 2) {
         // 币钱包支付
-        // this.WeChatPay(this.PaymentList[this.activeIndex].type);
+        this.OtherPayment(this.PaymentList[this.activeIndex].type);
         this.steps = 2;
+        this.reduce();
+      }
+    },
+    async OtherPayment(type) {
+      const res = await pay({
+        coin: "BTY",
+        device: 0,
+        id: this.orderId,
+        method: type,
+        return_url: window.location.href,
+      });
+      if (res) {
+        this.cycle();
+        if (res.data.pay_url) this.payUrl = await payQR(res.data.pay_url);
       }
     },
     choose(item, index) {
       this.activeIndex = index;
-      console.log(item);
     },
     async getOrder() {
       const res = await orderType(this.orderId);
       if (res) {
         if (res.data.status === 2) {
           clearInterval(this.intervalHandle);
+          clearInterval(this.timeID);
           this.$message({
             message: "恭喜您支付成功",
             type: "success",
@@ -445,6 +492,37 @@ export default {
     }
   }
 }
+.prompt-box--blue {
+  background: #3F79FE;
+}
+.download {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 30px;
+  height: 17px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #353535;
+  line-height: 17px;
+}
+.top-up-hints {
+  width: 435px;
+  height: 45px;
+  background: #F5F9FC;
+  border-radius: 4px;
+  line-height: 45px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #797D84;
+  span {
+    color: #462F2E;
+  }
+}
 .bg-box {
   width: 150px;
   margin-right: 57px;
@@ -454,6 +532,15 @@ export default {
   margin-left: 96px;
   background: url("../../assets/images/userCenter/WeChat.png") no-repeat center;
 }
+.bg-box--other {
+  width: 160px;
+  margin-right: 57px;
+  height: 34px;
+  float: left;
+  margin-top: 15px;
+  margin-left: 96px;
+  background: url("../../assets/images/userCenter/other.png") no-repeat center;
+}
 .back-button {
   font-size: 16px;
   font-family: PingFangSC-Regular, PingFang SC;