jiqu-library-miniprogram/src/pageB/svip/index.vue

<template>
  <view>
    <loading-view v-if="isFirstLoading"></loading-view>
    <view class="bg-hex-303133 flex items-center justify-between p-30rpx">
      <view class="flex">
        <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
        <view class="ml-20rpx mt-10rpx">
          <image :src="!user.is_vip ? '/static/images/svip/vip_failure.png' : '/static/images/svip/vip.png'" class="w-48rpx h-48rpx" mode=""></image>
          <view v-if="!user.is_vip" class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
          <view v-else class="text-hex-f5f5f5 text-22rpx mt-10rpx">vip到期日期：{{ time }}</view>
        </view>
      </view>
      <view class="text-white flex items-center text-26rpx" @click="$u.route('/pageB/record/index')">
        <view class="mr-8rpx">购买记录</view>
        <u-icon color="#ffffff" name="arrow-right" size="26"></u-icon>
      </view>
    </view>
    <!--  -->
    <view class="bg-white pb-40rpx">
      <view class="p-30rpx text-32rpx">尊享特权</view>
      <view class="grid grid-cols-4 gap-30rpx">
        <view class="flex items-center justify-center flex-col">
          <view class="item">
            <image src="@/static/images/svip/vip_icon02.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
          </view>
          <view class="mt-20rpx text-24rpx">会员折扣</view>
        </view>
        <view class="flex items-center justify-center flex-col">
          <view class="item">
            <image src="@/static/images/svip/vip_icon03.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
          </view>
          <view class="mt-20rpx text-24rpx">会员礼卷</view>
        </view>
        <view class="flex items-center justify-center flex-col">
          <view class="item">
            <image src="@/static/images/svip/vip_icon01.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
          </view>
          <view class="mt-20rpx text-24rpx">会员特权</view>
        </view>
        <view class="flex items-center justify-center flex-col">
          <view class="item">
            <image src="@/static/images/svip/vip_icon04.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
          </view>
          <view class="mt-20rpx text-24rpx">尊贵标识</view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="bg-white mt-20rpx p-30rpx">
      <!--  -->
      <view class="grid grid-cols-3 gap-30rpx">
        <view
          @click="Index = index"
          :class="Index == index ? 'text-hex-f59e0b border-hex-f59e0b' : 'border-hex-F5F5F5'"
          class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="text-26rpx">{{ item.name }}</view>
          <view class="price-text text-34rpx font-medium mt-15rpx">{{ item.price }}</view>
          <view :class="Index == index ? 'text-hex-f59e0b' : ''" class="text-26rpx mt-15rpx text-hex-909399">{{ item.times.text }} </view>
        </view>
      </view>
      <!--  -->
      <view class="mt-30rpx text-28rpx">
        <text class="leading-40rpx">
          {{ chooseVip.description }}
        </text>
      </view>
      <!--  -->
      <view class="flex items-center mt-20rpx">
        <u-checkbox v-model="checked" shape="circle" active-color="#f59e0b" size="28" icon-size="18"></u-checkbox>
        <view class="text-22rpx -ml-15rpx mt-8rpx">
          已同意并阅读
          <text class="text-hex-f59e0b">《平台协议》、</text>
          <text class="text-hex-f59e0b">《价格说明》</text>
        </view>
      </view>
      <!--  -->
      <view class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx" @click="onSumbit">
        {{ user.is_vip ? '续费' : '立即开通' }}</view
      >
    </view>
  </view>
</template>

<script>
import { wxpay, alipay } from '@/utils/pay.js';
export default {
  data() {
    return {
      isFirstLoading: true,
      list: [],
      Index: 0,
      checked: true,
    };
  },
  computed: {
    user() {
      return this.$store.getters.user ?? {};
    },
    chooseVip() {
      return this.list[this.Index] ?? {};
    },
    time() {
      return this.$u.timeFormat(this.user.vip_expired, 'yyyy-mm-dd');
    },
  },
  onShow() {
    this.getDate();
  },
  methods: {
    async getDate() {
      try {
        const resData = await this.$api.get('/v1/vip');
        this.list = resData;
      } catch (err) {
      } finally {
        this.isFirstLoading = false;
      }
    },
    async onSumbit() {
      if (!this.checked) return this.$u.toast('请勾选协议');
      try {
        const resData = await this.$api.post('/v1/vip/buy', { vip_id: this.chooseVip.id });
        if (resData.status == 1) {
          return this.success();
        }
        const res = await wxpay(resData.data);
        if (res == 'success') {
          this.success();
        } else {
          this.$u.toast('支付失败');
        }
      } catch (err) {}
    },
    success() {
      this.$u.toast('充值成功');
      this.$store.dispatch('user/getUserInfo');
      setTimeout(() => {
        uni.navigateBack({});
      }, 300);
    }
  },
};
</script>

<style lang="scss" scoped>
.item {
  background-image: linear-gradient(-90deg, #e3a96d 0%, #f8cfb4 100%), linear-gradient(#c59f6d, #c59f6d);
  border-radius: 50%;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>