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="chapter-cost" if="fee">
              <text>当前需要消耗：</text>
              <text class="cost">{{ fee }}</text>
              <text>书币</text>
            </div>
            <div class="user-balance">
              <text>您的余额：</text>
              <text class="balance">{{ balance }}</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.充值后书币到账可能有延迟，1小时内未到账请到个人中心联系客服</text
            >
            <text class="notice-item"
              >2.未满18周岁的未成年人应在法定监护人同意后进行充值。</text
            >
            <text class="notice-item"
              >3.充值书币，鉴于网络服务性质特殊属于不宜退货商品,不适用无理由退换规定。</text
            >
          </div>
        </div>
      </tab-content>
    </tabs>
    <div class="wrap-fixed">
      <image src="../../assets/imgs/shadow.png" class="shadow"></image>
      <div class="total-wrap">
        <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 it from '../../helper/interface.js'

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

export default {
  public: {
    push_id: '',
    isPendingTask: true
  },
  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,
    loginPhone: '',
    need_check_order: false,
    haslogin: '',
    isVip: '',
    pay_order_id: '',
    trade_no: '',
    pay_success: false,
    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 {
    }
  },
  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.loginPhone = (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()
  },
  oldtoPay() {
    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() {
        }
      })
    } else {
      this.throttle(() => {
        this.payFunc()
      }, 1000)
    }
  },
  async toPay() {
    let manufacturer = (await it.devManufacturerName()).toLowerCase()
    if (
      !(this.send_order_id || (this.haslogin && this.loginPhone)) &&
      (manufacturer == 'xiaomi' || manufacturer == 'vivo')
    ) {
      prompt.showDialog({
        title: '友情提示',
        message: '您还未绑定手机号，请绑定手机号后在进行相关操作',
        buttons: [
          {
            text: '前往绑定',
            color: '#33dd44'
          }
        ],
        success: function(data) {
          router.push({
            uri: '/views/Phone'
          })
        },
        cancel: function() {
        }
      })
    } 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
    this.need_check_order = false
    this.pay_order_id = ''
    this.trade_no = ''
    if (cur_pay_type === 1) {
      ret = await configAliPay({
        product_id: product_id,
        bid: this.bid,
        send_order_id: this.send_order_id
      })
      this.trade_no = ret.order
      this.showToastByCode(ret.code)
    } else {
      ret = await configWxPay({
        product_id: product_id,
        bid: this.bid,
        send_order_id: this.send_order_id
      })
      this.trade_no = ret.order
      this.pay_order_id = ret.order
      this.need_check_order = true

    }

    return false
    // 成功支付后的回调操作
    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: () => {
      }
    })

    return false
  },
  showToastByCode(code) {
    this.showLoading = false
    this.pay_success = false
    let msg = '支付成功！'

    switch (code) {
      case '9000':
        this.pay_success = true
        try {
          advertOrders(this.trade_no)
        } catch (e) {
        }
        ;(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 })
  },
  async onShow() {
    try {
      let { has_pend_task } = await hasPendingTask({ type: 'recharge' })
      this.isPendingTask = has_pend_task
    } catch (err) {
    }
    this.getUserInfo()
    if (this.need_check_order && this.pay_order_id) {
      this.checkOrderNew(this.pay_order_id)
    }
  },
  async checkOrderNew(order) {
    let fb = await checkWxOrder(order)
    if (fb && typeof fb === 'object') {
      this.showToastByCode('9000')
    } else {
      this.showToastByCode('6001')
    }
  },
  onHide() {
  },
  onBackPress() {
    if (this.pay_back && !this.pay_success) {
      this.getActivity()
      return true
    } else {
      this.getLastpage()
    }
    return true
  },
  async getActivity() {
    let back = await bannerData(5)
    if (JSON.stringify(back) === '{}') {
      let taht = this
      if (this.isPendingTask) {
        prompt.showDialog({
          title: '温馨提示',
          message: '每日完成任务，可以免费获取书币~',
          buttons: [
            {
              text: '去做任务',
              color: '#EF5952'
            },
            {
              text: '我知道了',
              color: '#999'
            }
          ],
          success: function(data) {
            if (data.index === 1) {
              taht.getLastpage()
            } else {
              router.push({
                uri: '/views/Task'
              })
            }
          },
          cancel: function() {
          }
        })
      } else {
        this.getLastpage()
      }
    } else {
      router.push({
        uri: back.redirect_url,
        params: back.param
      })
    }
  },
  getLastpage() {
    let backPage = {}
    try {
      let page = router.getState()
      let allPage = router.getPages()
      for (var k = allPage.length - 1; k >= 0; k--) {
        if (allPage[k].name != page.name && allPage[k].name != 'views/Phone') {
          backPage = allPage[k]
          break
        }
      }
    } catch (e) {
      backPage = {}
    }
    if (JSON.stringify(backPage) === '{}') {
      router.replace({ uri: '/views/Index' })
    } else {
      router.back(backPage)
    }
    return true
  }
}
</script>

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