quickapp_front/src/views/Pay/index.ux

<template>
  <div class="pay-wrap">
    <tabs class="wrap-relative">
      <tab-content>
        <div class="wrap-relative">
          <div class="top-user__wrap">
            <div class="user-balance">
              <text>您的余额：</text>
              <text class="balance">{{balance}}</text>
              <text>书币</text>
            </div>
            <div class="chapter-cost" if="fee">
              <text>当前章节需要消耗</text>
              <text class="cost">{{fee}}</text>
              <text>书币</text>
            </div>
          </div>
          <div class="charge-wrap">
            <div class="title">
              <text class="border"></text>
              <text>支付方式</text>
            </div>
            <div class="pay-type">
              <block for="item in payType">
                <div class="pay-type__item {{curPayType === item.value ? 'pay-type__item--cur' : ''}}" @click="changePayType(item)">
                  <image src="{{item.icon}}"></image>
                  <text>{{item.name}}</text>
                </div>
              </block>
            </div>
            <div class="recharge-list">
              <block for="charge in rechargeList">
                <stack class="stack-wrap" @click="changeCharge($idx)">
                  <div class="recharge-item {{curSelect === $idx ? 'recharge-item__select' : ''}}">
                    <text class="price {{curSelect === $idx ? 'price__select' : ''}}">{{charge.price}}</text>
                    <text class="send {{curSelect === $idx ? 'send__select' : ''}}">{{charge.text}}</text>
                    <div class="discount {{curSelect === $idx ? 'discount__select' : ''}}" if="charge.save_text">
                      <block if="!charge.is_year_order">
                        <text>省</text>
                      </block>
                      <block else>
                        <image src="../../assets/imgs/year_pay.png"></image>
                      </block>
                      <text class="discount-num {{curSelect === $idx ? 'discount-num__select' : ''}}">{{charge.save_text}}</text>
                    </div>
                  </div>
                  <image if="charge.today_special" class="recharge-recommend" src="../../assets/imgs/jinri.png"></image>
                </stack>
              </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>
    <div class="wrap-fixed">
      <image src="../../assets/imgs/shadow.png" class="shadow"></image>
      <div class="total-wrap">
        <div class="total-cost">
          <text>合计：{{total}}</text>
          <text class="notice">选择充值金额（1元=100书币）</text>
        </div>
        <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>

<script>
import router from '@system.router';
import prompt from '@system.prompt';
import { getChargeList, getUserInfo, checkWxOrder } from "../../api";
import { configWxPay, configAliPay } from "../../helper";

export default {
  protected: {
    bid: "",
    code: "",
    fee: ""
  },
  private: {
    curPayType: 1,
    curSelect: 0,
    balance: 0,
    send_order_id: 0,
    total: "0元",
    loadingText: "订单查询中...",
    isInPay: false,
    showLoading: false,
    payType: [
      {
        name: "支付宝",
        icon: "http://newycsd.oss-cn-hangzhou.aliyuncs.com/images/base/logo/zhifubao.jpg",
        value: 1
      },
      {
        name: "微信",
        icon: "http://newycsd.oss-cn-hangzhou.aliyuncs.com/images/base/logo/weixin.jpg",
        value: 2
      }
    ],
    rechargeList: []
  },
  changePayType(type) {
    this.curPayType = type.value;
  },
  changeCharge(key) {
    this.curSelect = key;
    this.total = this.rechargeList[key].price;
  },
  async getUserInfo() {
    let userinfo = await getUserInfo();
    this.balance = userinfo.balance;
    this.send_order_id = userinfo.send_order_id;
  },
  async initChargeList() {
    this.rechargeList = await getChargeList();
    this.rechargeList.forEach((p, k) => {
      if (p.today_special) {
        this.curSelect = k;
      }
    })
  },
  async toPay() {
    let cur_pay_type = this.curPayType;
    let product_id = this.rechargeList[this.curSelect].product_id;
    let ret = null;
    if (cur_pay_type === 1) {
      ret = await configAliPay({ product_id: product_id, bid: this.bid, send_order_id: this.send_order_id });
    }
    else {
      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);
  },
  checkOrder(order_info) {
    this.showLoading = true;
    let { data, order } = order_info;
    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;
      case "8000": msg = "订单已提交，请等待结果"; break;
      case "4000": msg = "订单支付失败！"; break;
      case "5000": msg = "订单重复！"; break;
      case "6001": msg = "您已取消支付"; break;
      case "6002": msg = "网络错误！"; break;
      case "6004": msg = "请联系客服查询订单"; break;
      default: msg = "请联系客服" + code;
    }
    prompt.showToast({ message: msg });
  },
  onInit() {
    this.initChargeList();
    this.getUserInfo();
  },
  onHide() {
    this.$app.$def.createShortcut(true);
  }
}
</script>

<style lang="less">
@import "../../assets/less/pay.less";
</style>