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>
      </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>
</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: "50元",
    isInPay: 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;
    console.log(cur_pay_type);
    this.isInPay = true;
    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();
      }
    }
    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);
    }
  },
  checkOrderIfNotApp(order_info) {
    console.log(order_info);
    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");
    // }
  },
  showToastByCode(code) {
    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>