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 storage from "@system.storage";

import { getChargeList, getUserInfo, checkWxOrder } from "../../api";
import { configWxPay, configAliPay } from "../../helper";
import { getAppConfig } from '../../api/utils.js';
let getConfig;

export default {
	public: {
		push_id: "",
	},
	protected: {
		bid: "",
		code: "",
		fee: ""
	},
	private: {
		pay_back: 0,
		curPayType: 2,
		curSelect: 0,
		balance: 0,
		send_order_id: 0,
		total: "0元",
		loadingText: "订单查询中...",
		isInPay: false,
		showLoading: false,
		checked: false,
		phone: '',
		haslogin: '',
		isVip: '',
		last: null,
		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: []
	},
	//函数节流
	throttle(fun, delay) {
		let last = this.last;
		const now = + new Date();
		if (now - last > delay) {
			fun();
			this.last = now;
		} else {
			console.log('间隔太短了')
		}
	},
	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;
		this.checked = userinfo.is_check;
		this.phone = (await storage.get({ key: "loginPhone" })).data;
		this.haslogin = (await storage.get({ key: "hasLogin" })).data;
		this.isVip = userinfo.is_vip;
		if (userinfo.pay_mode_default == 'weixin') {
			this.curPayType = 2;
		} else {
			this.curPayType = 1;
		}
	},
	async initChargeList() {
		this.rechargeList = await getChargeList();
		this.rechargeList.forEach((p, k) => {
			if (p.today_special) {
				this.curSelect = k;
				this.total = this.rechargeList[k].price;
			}
		})
	},
	async onInit() {
		if (this.push_id) {
			await storage.set({ key: "push_id", value: this.push_id });
		}
		getConfig = getAppConfig(this);
		let { pay_back_alert_show } = await getConfig('task_center');
		this.pay_back = pay_back_alert_show;
		this.initChargeList();
	},
	toPay() {
		if (!(this.send_order_id || (this.haslogin && this.loginPhone))) {
			prompt.showDialog({
				title: '友情提示',
				message: '您还未绑定手机号，请绑定手机号后在进行相关操作',
				buttons: [
					{
						text: '前往绑定',
						color: '#33dd44'
					}
				],
				success: function (data) {
					router.push({
						uri: '/views/Phone'
					})
				},
				cancel: function () {
					console.log('取消绑定')
				},
			})
		} else {
			this.throttle(() => { this.payFunc() }, 1000)
		}
	},
	async payFunc() {
		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) => {
				if (data.index === 0) this.checkOrder(order);
			},
			cancel: () => {
				console.log("cancel");
			}
		});
	},
	showToastByCode(code) {
		this.showLoading = false;
		let msg = "支付成功！";
		switch (code) {
			case "9000": (msg = "支付成功！", router.back()); 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 });
	},
	onShow() {
		this.getUserInfo();
	},
	onHide() {
		//this.$app.$def.createShortcut(true);
	},
	onBackPress() {
		if (!this.isVip && this.pay_back) {
			prompt.showDialog({
				title: '温馨提示',
				message: '每日完成任务，可以免费获取书币~',
				buttons: [
					{
						text: '去做任务',
						color: '#EF5952'
					},
					{
						text: '我知道了',
						color: '#999'
					}
				],
				success: function (data) {
					if (data.index === 1) {
						router.back();
					} else {
						router.push({
							uri: '/views/Task'
						})
					}

				},
				cancel: function () {
					console.log('取消前往')
				},
			})
			return true;
		}

	}
}
</script>

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