zhangsiye/mini/pages/member/index.vue

<template>
  <u-loading-page v-if="loading" :loading="loading" :bg-color="$colors.bgColor" />
  <view v-else class="member-container">
    <view class="header dir-top-wrap cross-center">
      <view class="title">会员充值</view>
      <text class="tips">会员指定短剧无限观看、xxx 等特权</text>
    </view>
    <view class="content main-left">
      <view
        v-for="(item,index) in settings"
        :key="index"
        class="item dir-top-wrap cross-center main-center"
        :class="{active: activeIndex === index}"
        @click="handleSelect(index)"
      >
        <view class="border" />
        <view v-if="activeIndex === index" class="selected">已选择</view>
        <text class="day">{{ item.valid_day }}天</text>
        <text class="price">￥{{ item.price }}</text>
      </view>
    </view>
    <view class="free main-center cross-center" @click="$u.route('/pages/member/free')">
      查看 <text>免费片单</text>
    </view>

    <view class="footer main-between">
      <view class="price main-left cross-bottom">
        <text>共计:</text>
        <view class="price">￥{{ settings[activeIndex].price }}</view>
      </view>
      <view class="buy-btn main-center cross-center" @click="handleBuy">立即支付</view>
    </view>
    <!--购买弹窗-->
    <u-modal
      :show="modal.show"
      content="确定购买?"
      show-cancel-button
      @confirm="handleBuy"
      @cancel="modal.show = false"
    />
  </view>
</template>

<script>

import ULoadingPage from '../../uni_modules/uview-ui/components/u-loading-page/u-loading-page'
export default {
  components: { ULoadingPage },
  data() {
    return {
      settings: {},
      activeIndex: 0,
      payId: null,
      interval: null,
      modal: {
        show: false
      }
    }
  },
  computed: {
    loading() {
      return Object.keys(this.settings).length === 0
    }
  },
  methods: {
    getSetting() {
      this.$api.user.vip.setting().then(res => {
        this.settings = res.data
      })
    },
    handleSelect(index) {
      this.activeIndex = index
      // this.modal.show = true
    },
    handleBuy() {
      const item = this.settings[this.activeIndex]
      this.$loading('购买中...')
      this.$api.user.vip.create({ id: item.id }).then(res => {
        this.$hideLoading()
        this.payId = res.pay_id
        this.modal.show = false
        // #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
      }).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 => {

        })
      }, 1000)
    }
  },
  onLoad() {
    this.getSetting()
  }
}
</script>

<style lang="scss" scoped>
    .member-container{
      padding: 20rpx 0;
      font-size: 30rpx;
      .header{
        color: $primary-color;
        margin-top: 50rpx;
        .title{
          position: relative;
          font-size: 42rpx;
          font-weight: 600;
          width: 100%;
          text-align: center;
          &:before,&:after{
            content: "";
            background: url("/static/image/member-line-bg.png") no-repeat;
            background-size: 100%;
            position: absolute;
            top: 50%;
            left: 60rpx;
            width: 200rpx;
            height: 20rpx;
          }
          &:after{
            transform: rotate(180deg);
            right: 60rpx;
            left: unset;
            top: 20%;
          }
        }
        .tips{
          color: $dark-color;
          font-size: 26rpx;
          margin-top: 20rpx;
        }
      }
      .content{
        padding: 0 20rpx;
        margin-top: 80rpx;
        .item{
          color: $default-color;
          margin-left: 20rpx;
          flex: 1;
          height: 300rpx;
          position: relative;
          .border{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            border: 4rpx solid $info-color;
            border-radius: 10rpx;
            overflow: hidden;
          }
          &.active .border{
            border: unset;
            &:after{
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border: 4rpx solid;
              border-image: linear-gradient(222deg, #6EEBE8, #FF74B9) 1;
              z-index: 0;
            }
          }
          .selected{
            position: absolute;
            top: -20rpx;
            background: url("/static/image/member-selected-bg.png") no-repeat;
            background-size: 100%;
            text-align: center;
            width: 120rpx;
            height: 40rpx;
            font-size: 24rpx;
            line-height: 40rpx;
            left: 20rpx;
            z-index: 1;
          }
          &:first-child{
            margin-left: 0;
          }
          .day{
            font-size: 32rpx;
            margin-bottom: 80rpx;
          }
          .price{
            font-size: 38rpx;
            color: $primary-color;
          }
        }
      }
      .free{
        background: #1B1E32;
        width: 100%;
        padding: 20rpx 0;
        color: $info-color;
        text-align: center;
        font-size: 26rpx;
        margin-top: 60px;
        text{
          color: $dark-color;
        }
      }

      .footer{
        position: fixed;
        bottom: 60rpx;
        left: 0;
        right: 0;
        padding: 0 30rpx;
        .price{
          text{
            color: #fff;
          }
          .price{
            color: $primary-color;
            font-size: 48rpx;
            margin-left: 10rpx;
            font-weight: 500;
            line-height: 1;
            &:first-letter{
              font-size: 30rpx;
              font-weight: normal;
            }
          }
        }
        .buy-btn{
          background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
          border-radius: 42rpx;
          width: 400rpx;
          font-weight: 600;
          color: #151728;
          padding: 18rpx 0;
        }
      }
    }
</style>