充值逻辑调整 首页样式提取至页面层

src/api/utils.js

@@ -13,12 +13,8 @@ let token = null;
 export const getToken = async () => {
   if (getToken.promise) return getToken.promise;
 
-  console.log("token status", token);
-
   if (!token) token = (await storage.get({ key: "token" })).data;
 
-  console.log("123", token);
-
   // token格式化
   if (token && typeof token === "string") token = JSON.parse(token);
 

src/assets/less/pay.less

@@ -211,6 +211,27 @@
     }
   }
 
+  .notice-wrap {
+    flex-direction: column;
+    padding: 0 24px;
+    margin-top: 20px;
+
+    text {
+      font-size: 24px;
+      color: #999;
+    }
+
+    .title {
+      font-size: 26px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .notice-item {
+      margin-top: 10px;
+    }
+  }
+
   .stack-wrap {
     margin-bottom: 30px;
 
@@ -221,4 +242,29 @@
       right: 0;
     }
   }
+
+  .loading-wrap {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, .6);
+    justify-content: center;
+    align-items: center;
+
+    .loading-content {
+      width: 300px;
+      height: 100px;
+      border-radius: 6px;
+      background-color: #fff;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .loading-text {
+        font-size: 26px;
+      }
+    }
+  }
 }

src/helper/index.js

@@ -61,7 +61,7 @@ let useWxH5Pay = (params) => {
       success: (data) => {
         console.log("success", data);
         // app中返回prepayid web中返回final_url
-        resolve({ code: "0", data: data, order: config.trade_no, message: "订单已经提交" });
+        resolve({ code: "9000", data: data, order: config.trade_no, message: "订单已经提交" });
       },
       fail: (data, code) => {
         console.log("error");
@@ -70,7 +70,7 @@ let useWxH5Pay = (params) => {
       },
       cancel: () => {
         console.log("user cancel");
-        reject({ code: "-1", data: "", message: "user cancel" });
+        reject({ code: "6001", data: "", message: "user cancel" });
       }
     })
   })
@@ -95,7 +95,7 @@ let useWxAppPay = (params) => {
       success: (data) => {
         console.log("success", data);
         // app中返回prepayid web中返回final_url
-        resolve({ code: "0", data: data, order: config.trade_no, message: "订单已经提交" });
+        resolve({ code: "9000", data: data, order: config.trade_no, message: "支付成功" });
       },
       fail: (data, code) => {
         console.log("error");
@@ -104,7 +104,7 @@ let useWxAppPay = (params) => {
       },
       cancel: () => {
         console.log("user cancel");
-        reject({ code: "-1", data: "", message: "user cancel" });
+        reject({ code: "6001", data: "", message: "user cancel" });
       }
     })
   })

src/views/Home/index.ux

@@ -126,5 +126,173 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../assets/less/home.less";
+/* @import "../../assets/less/home.less"; */
+.home-wrap {
+  background-color: #fff;
+  flex-direction: column;
+
+  .type-bar {
+    background-color: #fff;
+
+    .type-item {
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      text {
+        font-size: 30px;
+        color: #999;
+        // padding: 34px 0;
+      }
+
+      .cur {
+        color: #ef5952;
+        font-size: 36px;
+        font-weight: bold;
+      }
+
+      .choose-bar {
+        width: 38px;
+        height: 4px;
+        background-color: #ef5952;
+        border-radius: 2px;
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .search-bar {
+    padding: 24px;
+
+    .search-bar__wrap {
+      flex: 1;
+      background-color: #f7f7f7;
+      height: 62px;
+      padding: 0 14px;
+      border-radius: 30px;
+      align-items: center;
+
+      image {
+        margin-right: 20px;
+        width: 36px;
+        height: 36px;
+      }
+
+      text {
+        flex: 1;
+        font-size: 24px;
+        color: #999;
+      }
+    }
+  }
+
+  .swipe-bar {
+    height: 260px;
+    // background-color: #fff;
+
+    .swipe-item {
+      padding: 0px 24px;
+
+      .swipe-item__info {
+        flex: 1;
+        flex-direction: column;
+        padding-right: 32px;
+
+        .name {
+          font-size: 32px;
+          color: #333;
+        }
+
+        .intro {
+          font-size: 26px;
+          color: #666;
+          margin-top: 36px;
+          lines: 4;
+          text-overflow: ellipsis;
+        }
+
+        .category {
+          font-size: 24px;
+          color: #32a1ff;
+          margin-top: 10px;
+        }
+      }
+
+      .cover {
+        width: 100%;
+        height: 260px;
+        // flex-basis: 180px;
+        // flex-shrink: 0;
+        // height: 240px;
+        border-radius: 6px;
+      }
+    }
+  }
+
+  .book-list__wrap {
+    background-color: #fff;
+    // margin-top: 24px;
+    padding: 0 24px;
+    flex-direction: column;
+
+    .book-list__title {
+      padding: 30px 0;
+      align-items: center;
+
+      text {
+        color: #333;
+        font-size: 32px;
+      }
+    }
+  }
+
+  .book-list {
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .book-list__multi {
+    margin-top: 30px;
+    flex-direction: column;
+
+    .book-item {
+      margin-bottom: 30px;
+    }
+
+    .book-info__multi {
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      margin-left: 38px;
+      // margin-bottom: 40px;
+
+      .name {
+        font-size: 32px;
+        color: #333;
+        lines: 1;
+        text-overflow: ellipsis;
+      }
+
+      .intro {
+        font-size: 24px;
+        color: #666;
+        lines: 3;
+        text-overflow: ellipsis;
+        margin-top: 36px;
+        line-height: 36px;
+      }
+    }
+  }
+
+  .book-list__line {
+    justify-content: space-between;
+    align-items: flex-start;
+    border-bottom: 2px solid #f7f7f7;
+  }
+}
 </style>

src/views/Pay/index.ux

@@ -49,6 +49,12 @@
               </block>
             </div>
           </div>
+          <div class="notice-wrap">
+            <text class="title">提示：</text>
+            <text class="notice-item">1.书币属虚拟商品，一经购买不得退换</text>
+            <text class="notice-item">2.充值后书币到账可能有延迟，1小时内未到账请到个人中心联系客服</text>
+            <text class="notice-item">3.工作时间：周一 周四 周五 9:00-21:00，周二 周三 周六 周日 9:00-18:00</text>
+          </div>
         </div>
       </tab-content>
     </tabs>
@@ -62,6 +68,12 @@
         <text class="go-to-pay" @click="toPay">立即充值</text>
       </div>
     </div>
+    <div class="loading-wrap" if="showLoading">
+      <div class="loading-content">
+        <progress type="circular"></progress>
+        <text class="loading-text">{{loadingText}}</text>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -82,8 +94,10 @@ export default {
     curSelect: 0,
     balance: 0,
     send_order_id: 0,
-    total: "50元",
+    total: "0元",
+    loadingText: "订单查询中...",
     isInPay: false,
+    showLoading: false,
     payType: [
       {
         name: "支付宝",
@@ -121,46 +135,56 @@ export default {
   async toPay() {
     let cur_pay_type = this.curPayType;
     let product_id = this.rechargeList[this.curSelect].product_id;
-    console.log(cur_pay_type);
-    this.isInPay = true;
+    let ret = null;
     if (cur_pay_type === 1) {
-      let ret = await configAliPay({ product_id: product_id, bid: this.bid, send_order_id: this.send_order_id });
-      this.showToastByCode(ret.code);
-      if (ret.code === "9000") {
-        router.back();
-      }
+      ret = await configAliPay({ product_id: product_id, bid: this.bid, send_order_id: this.send_order_id });
     }
     else {
-      let wx_ret = await configWxPay({ product_id: product_id, bid: this.bid, send_order_id: this.send_order_id });
-      console.log("isInPay", this.isInPay);
-      this.isInPay = false;
-      console.log("wx_ret", wx_ret);
-      console.log("isInPay", this.isInPay);
-      // 查询订单
-      this.checkOrderIfNotApp(wx_ret);
+      ret = await configWxPay({ product_id: product_id, bid: this.bid, send_order_id: this.send_order_id });
     }
+    // 成功支付后的回调操作
+    if (ret.code === "9000") this.showWaitingWrap(ret);
+    else this.showToastByCode(ret.code);
   },
-  checkOrderIfNotApp(order_info) {
-    console.log(order_info);
+  checkOrder(order_info) {
+    this.showLoading = true;
     let { data, order } = order_info;
-    // if (data.final_url) {
-    //   // h5支付回调
-    //   console.log("check h5 order");
-    //   let times = 0;
-    //   this.timer = setInterval(async () => {
-    //     if (times === 10) clearInterval(this.timer), this.showToastByCode("6004");
-    //     else {
-    //       times++;
-    //       let fb = await checkWxOrder(order);
-    //       if (fb) clearInterval(this.timer), this.showToastByCode("9000");
-    //     }
-    //   }, 1000)
-    // } else if (data.prepayid) {
-    //   // app支付回调
-    //   this.showToastByCode("9000");
-    // }
+    let times = 10;
+    this.loadingText = `订单查询中...${times}s`;
+    this.timer = setInterval(async () => {
+      if (times === 0) clearInterval(this.timer), this.showToastByCode("6004");
+      else {
+        times--;
+        this.loadingText = `订单查询中...${times}s`;
+        let fb = await checkWxOrder(order);
+        if (fb && typeof fb === "object") clearInterval(this.timer), this.showToastByCode("9000");
+      }
+    }, 1000);
+  },
+  showWaitingWrap(order) {
+    prompt.showDialog({
+      title: "支付结果",
+      message: "请确认支付结果",
+      buttons: [
+        {
+          text: "完成",
+          color: "#EF5952"
+        },
+        {
+          text: "支付遇到问题",
+          color: "#999"
+        }
+      ],
+      success: (data) => {
+        data.index === 0 && this.checkOrder(order);
+      },
+      cancel: () => {
+        console.log("cancel");
+      }
+    });
   },
   showToastByCode(code) {
+    this.showLoading = false;
     let msg = "支付成功！";
     switch (code) {
       case "9000": msg = "支付成功！"; break;