jichuangshe/mini/components/Recharge/index.vue

<template>
  <view class="recharge">
    <u-popup
      :show="show"
      :mode="mode"
      round="20rpx"
      :close-on-click-overlay="false"
      @close="close"
    >
      <view class="container" :class="{bottom: mode === 'bottom'}">
        <template v-if="type === 'play'">
          <view class="play-container">
            <view class="header main-between cross-center">
              <text>感谢您的支持，本集解锁后可继续观看</text>
              <u-icon name="arrow-down" size="28rpx" @click="close" />
            </view>
            <view class="episode main-between cross-center">
              <view class="detail">
                <view class="name">{{ episode.name }} 第{{ list.sort }}集</view>
                <view class="sale-box main-left cross-center">
                  <view class="sale-price cross-center">专享价{{ list.sale_price }}金币</view>
                  <view class="origin-price cross-center">原价{{ list.origin_price }}金币</view>
                </view>
              </view>
              <view class="buy-num">{{ buyNum }}人购买</view>
            </view>
          </view>
          <view class="static-text main-between cross-center">
            <text>充值金币</text>
            <view class="overage">账户余额：<text>{{ userInfo.info.integral }}金币</text></view>
          </view>
        </template>
        <template v-else>
          <view class="static-text main-between cross-center">
            <text>充值金币</text>
            <u-icon name="close-circle" size="52rpx" color="#BEBDBB" @click="close" />
          </view>
          <view class="overage">账户余额：<text>{{ userInfo.info.integral }}金币</text></view>
        </template>

        <view class="recharge-group dir-left-wrap">
          <view
            v-for="(combo,index) in combos"
            :key="index"
            class="recharge-item dir-top-wrap main-center cross-center"
            :class="{active: rechargeActive === index}"
            @click="rechargeActive = index"
          >
            <text class="price">{{ combo.price }}元</text>
            <text class="gold">{{ combo.gold }}+{{ combo.gift }}金币</text>
            <text class="gift">多送{{ combo.gift }}金币</text>
          </view>
        </view>

        <view class="btn" @click="handleRecharge">充值</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Recharge',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'center'
    },
    type: {
      type: String,
      default: 'normal'
    },
    episode: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      modal: {
        show: false
      },
      combos: [],
      rechargeActive: 0,
      buyNum: 0
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  watch: {
    show(val) {
      this.modal.show = val
    }
  },
  created() {
    this.getCombo()
    this.getBuyNum()
  },
  methods: {
    getCombo() {
      this.$api.setting.rechargeCombo().then(res => {
        this.combos = res.data
      })
    },
    close() {
      this.$emit('update:show', false)
    },
    getBuyNum() {
      if (this.type === 'play') {
        this.$api.episode.listBuyNum(this.list.id).then(res => {
          this.buyNum = res.data
        })
      }
    },
    handleRecharge() {
      const item = this.combos[this.rechargeActive]
      this.$loading('请稍后...')
      this.$api.user.recharge.create({ id: item.id }).then(res => {
        console.log('-->data', res)
        // #ifdef MP-TOUTIAO
        tt.pay({
          service: 5,
          orderInfo: {
            order_id: res.data.order_id,
            order_token: res.data.order_token
          },
          success: payRes => {
            if (payRes.code === 0) {
              this.$loading('支付结果查询中...')
              this.query()
            } else {
              this.$u.toast('支付失败')
            }
          },
          fail: err => {
            console.log('-->data', err)
            // 调起收银台失败处理逻辑
          }
        })
        // #endif
        // #ifdef MP-KUAISHOU
        ks.pay({
          serviceId: '1',
          orderInfo: {
            order_no: res.data.order_id,
            order_info_token: res.data.order_token
          },
          success: payRes => {
            this.$loading('支付结果查询中...')
            this.query()
          },
          fail: err => {
            console.log('-->data', err)
            // 调起收银台失败处理逻辑
          }
        })
        // #endif
        this.$hideLoading()
      }).catch(() => {
        this.$hideLoading()
      })
    },
    query() {
      if (this.interval) return
      this.interval = setInterval(() => {
        this.$api.pay.query(this.payId).then(res => {
          this.$hideLoading()
          this.$u.toast('支付成功')
          clearInterval(this.interval)
          // 获取用户信息
          this.$api.user.info().then(res => {
            this.$store.dispatch('user/info', res.data)
          })
        }).catch(err => {
          this.$hideLoading()
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
    .recharge {
      font-size: 28rpx;
      .container{
        width: 700rpx;
        border: 2rpx solid;
        padding: 30rpx;
        &.bottom{
          width: 750rpx;
          border: unset;
        }
        .static-text{
          font-size: 36rpx;
          font-weight: 600;
          margin-bottom: 40rpx;
          .overage{
            font-size: 28rpx;
            color: $info-color;
          }
        }
        .overage{
          color: $info-color;
          text{
            color: #FB3651 ;
          }
        }
        // 播放充值
        .play-container{
          .episode{
            margin: 40rpx 0 ;
            background: linear-gradient(270deg, #6EEBE8, #FF74B9);
            border-radius: 20rpx;
            height: 180rpx;
            padding: 20rpx;
            .detail{
              .name{
                color: $default-color;
                font-weight: 600;
              }
              .sale-box{
                margin-top: 40rpx;
                .sale-price{
                  color: $primary-color;
                  font-size: 28rpx;
                }
                .origin-price{
                  color: $default-color;
                  font-size: 24rpx;
                  margin-left: 20rpx;
                  text-decoration: line-through;
                  opacity: .6;
                  margin-top: 6rpx;
                }
              }
            }
            .buy-num{
              color: $default-color;
              min-width: 80px;
              text-align: center;
            }
          }
        }
        // 充值套餐
        .recharge-group{
          margin-top: 30rpx;
          .recharge-item{
            border: 4rpx solid $primary-color;
            width: calc(#{600rpx} / 2);
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            padding: 40rpx 20rpx;
            transition: .3s;
            &:nth-child(2n){
              margin-right: 0;
            }
            &.active{
              background: #1b1e32;
              border: 4rpx solid #1b1e32;
              .price{
                color: $default-color;
              }
            }
            .price{
              margin-bottom: 40rpx;
              font-size: 38rpx;
            }
            .gold{
              color: $primary-color;
              margin-bottom: 10rpx;
            }
            .gift{
              color: $info-color;
            }
          }
        }
        .btn{
          background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
          width: 90%;
          margin: 40rpx auto;
          padding: 20rpx 0;
          text-align: center;
          border-radius: 40rpx;
          color: $default-color;
          letter-spacing: .1rem;
        }
      }
    }
</style>