shop-uniapp/pages/wallet/recharge/index.vue

<template>
  <view v-if="personal.user_id" class="container" :style="appThemeStyle">
    <view class="account-panel dis-flex flex-y-center">
      <view class="panel-lable">
        <text>账户余额</text>
      </view>
      <view class="panel-balance flex-box">
        <text>￥{{ personal.balance }}</text>
      </view>
    </view>
    <view class="recharge-panel">
      <view class="recharge-label">
        <text>充值金额</text>
      </view>
      <view class="recharge-plan clearfix">
        <block v-for="(item, index) in planList" :key="index">
          <view class="recharge-plan_item" :class="{ active: selectedPlanId == item.plan_id }" @click="onSelectPlan(item.plan_id)">
            <view class="plan_money">
              <text>{{ item.money }}</text>
            </view>
            <view class="plan_gift">
              <text>送{{ item.gift_money }}</text>
            </view>
          </view>
        </block>
      </view>
      <!-- 手动充值输入框 -->
      <view class="recharge-input" v-if="setting.is_custom == 1">
        <input class="input" type="digit" placeholder="可输入自定义充值金额" v-model="inputValue" @input="onChangeMoney" />
      </view>

      <!-- 支付方式 -->
      <view class="recharge-label m-top60">
        <text>支付方式</text>
      </view>
      <view class="payment-method">
        <view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(index)">
          <view class="item-left dis-flex flex-y-center">
            <view class="item-left_icon" :class="[item.method]">
              <text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
            </view>
            <view class="item-left_text">
              <text>{{ PayMethodEnum[item.method].name }}</text>
            </view>
          </view>
          <view class="item-right col-m" v-if="curPaymentItem && curPaymentItem.method == item.method">
            <text class="iconfont icon-check"></text>
          </view>
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="recharge-submit btn-submit">
        <form @submit="onSubmit">
          <button class="button" formType="submit" :disabled="disabled">立即充值</button>
        </form>
      </view>
    </view>
    <!-- 充值描述 -->
    <view class="describe-panel">
      <view class="recharge-label">
        <text>充值说明</text>
      </view>
      <view class="content">
        <text space="ensp">{{ setting.describe }}</text>
      </view>
    </view>

    <!-- 支付确认弹窗 -->
    <!-- #ifdef H5 -->
    <u-modal v-if="tempUnifyData" v-model="showConfirmModal" title="支付确认" show-cancel-button confirm-text="已完成支付"
      :confirm-color="appTheme.mainBg" negative-top="100" :asyncClose="true"
      @confirm="onTradeQuery(tempUnifyData.outTradeNo, tempUnifyData.method)">
      <view class="modal-content">
        <text>请在{{ PayMethodClientNameEnum[tempUnifyData.method] }}内完成支付，如果您已经支付成功，请点击“已完成支付”按钮</text>
      </view>
    </u-modal>
    <!-- #endif -->

  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import * as RechargeApi from '@/api/recharge'
  import { PayMethodEnum } from '@/common/enum/payment'
  import { inArray, urlEncode } from '@/utils/util'
  import { Alipay, Wechat } from '@/core/payment'

  // 支付方式对应的图标
  const PayMethodIconEnum = {
    [PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
    [PayMethodEnum.ALIPAY.value]: 'icon-alipay',
  }

  // 支付方式的终端名称
  const PayMethodClientNameEnum = {
    [PayMethodEnum.WECHAT.value]: '微信',
    [PayMethodEnum.ALIPAY.value]: '支付宝'
  }

  // H5端支付下单时的数据
  // 用于从第三方支付页返回到收银台页面后拿到下单数据
  const getTempUnifyData = orderKey => {
    // if (window.performance && window.performance.navigation.type == 2) {
    const tempUnifyData = storage.get('tempUnifyData_' + orderKey)
    if (tempUnifyData) {
      storage.remove('tempUnifyData_' + orderKey)
      return tempUnifyData
    }
    // }
    return null
  }

  export default {
    data() {
      return {
        // 正在加载
        isLoading: true,
        // 按钮禁用
        disabled: false,
        // 枚举类
        PayMethodEnum,
        PayMethodIconEnum,
        PayMethodClientNameEnum,
        // 个人信息
        personal: { balance: '0.00' },
        // 充值设置
        setting: {},
        // 充值方案列表
        planList: [],
        // 当前客户端的支付方式列表（后端根据platform判断）
        methods: [],
        // 当前选中的套餐ID
        selectedPlanId: 0,
        // 自定义金额
        inputValue: '',
        // 当前选中的支付方式
        curPaymentItem: null,
        // 支付确认弹窗
        showConfirmModal: false,
        // #ifdef H5
        // 当前第三方支付信息 (临时数据, 仅用于H5端)
        tempUnifyData: { outTradeNo: '', method: '' },
        // #endif
      }
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 获取页面数据
      this.getPageData()
    },

    methods: {

      // 选择充值套餐
      onSelectPlan(planId) {
        this.selectedPlanId = planId
        this.inputValue = ''
      },

      // 金额输入框
      onChangeMoney({ detail }) {
        this.inputValue = detail.value
        this.selectedPlanId = 0
      },

      // 选择支付方式
      handleSelectPayType(index) {
        this.curPaymentItem = this.methods[index]
      },

      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        return new Promise((resolve, reject) => {
          RechargeApi.center({ client: app.platform })
            .then(result => {
              app.setting = result.data.setting
              app.personal = result.data.personal
              app.planList = result.data.planList
              app.methods = result.data.paymentMethods
              app.isLoading = false
              // 默认选中的支付方式
              app.setDefaultPayType()
              // #ifdef H5
              // 判断当前页面来源于浏览器返回
              this.performance()
              // #endif
            })
        })
      },

      // 默认选中的支付方式
      setDefaultPayType() {
        if (!this.curPaymentItem) {
          this.handleSelectPayType(0)
        }
      },

      // 判断当前页面来源于浏览器返回并提示手动查单
      // #ifdef H5
      performance() {
        const app = this
        const performanceData = getTempUnifyData('recharge')
        if (performanceData) {
          app.tempUnifyData = performanceData
          app.showConfirmModal = true
        }
      },
      // #endif

      // 立即充值
      onSubmit(e) {
        const app = this
        // 判断是否选择了支付方式
        if (!app.curPaymentItem) {
          app.$toast('您还没有选择支付方式')
          return
        }
        // 按钮禁用
        if (app.disabled) return
        app.disabled = true
        // 提交到后端
        RechargeApi.submit({
            planId: app.selectedPlanId,
            customMoney: app.inputValue ? app.inputValue : '',
            method: app.curPaymentItem.method,
            client: app.platform,
            extra: app.getExtraAsUnify(app.curPaymentItem.method)
          })
          .then(result => app.onSubmitCallback(result))
          .finally(err => {
            setTimeout(() => app.disabled = false, 10)
          })
      },

      // 获取第三方支付的扩展参数
      getExtraAsUnify(method) {
        if (method === PayMethodEnum.ALIPAY.value) {
          return Alipay.extraAsUnify()
        }
        if (method === PayMethodEnum.WECHAT.value) {
          return Wechat.extraAsUnify()
        }
        return {}
      },

      // 订单提交成功后回调
      onSubmitCallback(result) {
        const app = this
        const method = app.curPaymentItem.method
        const paymentData = result.data.payment
        // 余额支付
        if (method === PayMethodEnum.BALANCE.value) {
          app.onShowSuccess(result)
        }
        // 发起支付宝支付
        if (method === PayMethodEnum.ALIPAY.value) {
          console.log('paymentData', paymentData)
          Alipay.payment({ orderKey: 'recharge', ...paymentData })
            .then(res => app.onPaySuccess(res))
            .catch(err => app.onPayFail(err))
        }
        // 发起微信支付
        if (method === PayMethodEnum.WECHAT.value) {
          console.log('paymentData', paymentData)
          Wechat.payment({ orderKey: 'recharge', ...paymentData })
            .then(res => app.onPaySuccess(res))
            .catch(err => app.onPayFail(err))
        }
      },

      // 订单支付成功的回调方法
      // 这里只是前端支付api返回结果success,实际订单是否支付成功 以后端的查单和异步通知为准
      onPaySuccess({ res, option: { isRequireQuery, outTradeNo, method } }) {
        const app = this
        // 判断是否需要主动查单
        // isRequireQuery为true代表需要主动查单
        if (isRequireQuery) {
          app.onTradeQuery(outTradeNo, method)
          return true
        }
        this.onShowSuccess(res)
      },

      // 显示支付成功信息并页面跳转
      onShowSuccess({ message }) {
        this.$toast(message || '订单支付成功')
        this.onSuccessNav()
      },

      // 订单支付失败
      onPayFail(err) {
        console.log('onPayFail', err)
        const errMsg = err.message || '订单未支付'
        this.$error(errMsg)
      },

      // 已完成支付按钮事件: 请求后端查单
      onTradeQuery(outTradeNo, method) {
        const app = this
        // 交易查询
        // 查询第三方支付订单是否付款成功
        RechargeApi.tradeQuery({ outTradeNo, method, client: app.platform })
          .then(result => result.data.isPay ? app.onShowSuccess(result) : app.onPayFail(result))
          .finally(() => app.showConfirmModal = false)
      },

      // 支付成功后的跳转
      onSuccessNav() {
        const pages = getCurrentPages()
        const lastPage = pages.length < 2 ? null : pages[pages.length - 2]
        const backRoutes = ['pages/wallet/index']
        if (lastPage && inArray(lastPage.route, backRoutes)) {
          setTimeout(() => uni.navigateBack(), 1000)
        } else {
          setTimeout(() => {
            this.$navTo('pages/wallet/index', {}, 'redirectTo')
          }, 1200)
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  page,
  .container {
    background: #fff;
  }

  .container {
    padding-bottom: 70rpx;
  }

  .m-top60 {
    margin-top: 60rpx;
  }

  // 账户面板
  .account-panel {
    width: 650rpx;
    height: 180rpx;
    margin: 50rpx auto;
    padding: 0 60rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    color: #fff;
    background: linear-gradient(-125deg, #a46bff, #786cff);
    box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
  }

  .panel-lable {
    font-size: 32rpx;
  }

  .recharge-label {
    color: rgb(51, 51, 51);
    font-size: 30rpx;
    margin-bottom: 25rpx;
  }

  .panel-balance {
    text-align: right;
    font-size: 46rpx;
  }

  .recharge-panel {
    margin-top: 60rpx;
    padding: 0 60rpx;
  }

  // 充值套餐
  .recharge-plan {
    margin-bottom: -20rpx;

    .recharge-plan_item {
      width: 192rpx;
      padding: 15rpx 0;
      float: left;
      text-align: center;
      color: #888;
      border: 1rpx solid rgb(228, 228, 228);
      border-radius: 10rpx;
      margin: 0 20rpx 20rpx 0;

      &:nth-child(3n + 0) {
        margin-right: 0;
      }

      &.active {
        color: #786cff;
        border: 1rpx solid #786cff;

        .plan_money {
          color: #786cff;
        }
      }
    }

  }

  .plan_money {
    font-size: 32rpx;
    color: rgb(82, 82, 82);
  }

  .plan_gift {
    font-size: 25rpx;
  }

  .recharge-input {
    margin-top: 40rpx;

    .input {
      display: block;
      border: 1rpx solid rgb(228, 228, 228);
      border-radius: 10rpx;
      padding: 20rpx 26rpx;
      font-size: 28rpx;
    }
  }

  // 立即充值
  .recharge-submit {
    margin-top: 70rpx;
  }

  .btn-submit {
    .button {
      font-size: 30rpx;
      background: #786cff;
      border: none;
      color: white;
      border-radius: 50rpx;
      padding: 0 120rpx;
      line-height: 3;
    }

    .button[disabled] {
      background: #a098ff;
      border-color: #a098ff;
      color: white;
    }
  }

  // 充值说明
  .describe-panel {
    margin-top: 50rpx;
    padding: 0 60rpx;

    .content {
      font-size: 26rpx;
      line-height: 1.6;
      color: #888;
    }
  }

  // 支付方式
  .payment-method {

    .pay-item {
      padding: 14rpx 0;
      font-size: 26rpx;

      .item-left_icon {
        margin-right: 20rpx;
        font-size: 44rpx;

        &.wechat {
          color: #00c800;
        }

        &.alipay {
          color: #009fe8;
        }

      }

      .item-left_text {
        font-size: 30rpx;
      }

      .item-right {
        font-size: 30rpx;
      }

      .user-balance {
        margin-left: 20rpx;
        font-size: 26rpx;
      }
    }

  }

  // 支付确认弹窗
  .modal-content {
    padding: 40rpx 48rpx;
    font-size: 30rpx;
    line-height: 50rpx;
    text-align: left;
    color: #606266;
    // height: 620rpx;
    box-sizing: border-box;
  }
</style>