uniAppXCX/pages/vip/vip.vue

<template>
  <view class="container">
    <view class="vipBox">
      <view class="userInfo">
        <image class="userPhoto" :src="userInfo.avatar"></image>
        <view class="name">
          {{ userInfo.nickname }}
        </view>
      </view>
      <view class="vip">
        <view class="vipLive">
          <span class="color1">VIP</span>
          <span class="color1" style="margin-left: 10rpx">{{ userInfo.userLevel }}</span>
        </view>
        <view class="tip" style="font-size: 20rpx; margin: 10rpx 0">
          离升级还有{{ userInfo.nextLevelLeftAmount || 0 }}元 ({{ userInfo.consumeAmount || 0 }}/{{
            userInfo.nextLevelAmount || 0
          }})
        </view>
        <view class="progress">
          <view class="progressActive" :style="'width:' + progressWidth + '%'"></view>
        </view>
      </view>
    </view>
    <view class="title">权益说明</view>
    <view class="vipBox" style="display: flex; align-items: center" v-for="(item, index) in vipRule" :key="index">
      <view class="left vipLive">
        <span class="color1">VIP</span>
        <span class="color1" style="margin-left: 10rpx">{{ item.vipLevel }}</span>
      </view>
      <view class="right">
        <view class="row">获得条件：累计消费{{ item.minAmount }}元</view>
        <view class="row" style="color: #969696">权益说明：达标获得{{ item.rewardOneIntegral }}积分奖励</view>
      </view>
    </view>
  </view>
</template>

<script>
import { userInfoApi, vipRuleApi } from '@/api/user.js'
export default {
  data() {
    return {
      userInfo: {},
      vipRule: [],
    }
  },
  onShow() {
    this.getUserInfo()
    this.getVipRule()
  },
  computed: {
    progressWidth() {
      let num = 0
      let consumeAmount = this.userInfo.consumeAmount || 0
      let nextLevelAmount = this.userInfo.nextLevelAmount || 0
      num = (consumeAmount / nextLevelAmount) * 100
      num = num.toFixed(0)
      return num
    },
  },
  methods: {
    getUserInfo() {
      userInfoApi().then(res => {
        this.userInfo = res.data
      })
    },
    getVipRule() {
      vipRuleApi().then(res => {
        this.vipRule = res.data
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: linear-gradient(#ff8b45 0%, #ff9859 36%, #ffb9a9 100%);
  overflow: auto;

  .color1 {
    background: linear-gradient(116deg, #fef5e4 0%, #f89eb2 62%, #aa91da 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .vipBox {
    margin: 30rpx;
    // background: #272833;
    background: linear-gradient(160deg, #fef5e4 0%, #272833 36%, #717171 100%);
    border-radius: 20rpx;
    color: #fef7e4;
    padding: 30rpx;

    .right {
      margin-left: 20rpx;
      font-size: 24rpx;

      .row {
        margin: 10rpx 0;
      }
    }
    .userInfo {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .userPhoto {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        position: relative;
        background: #dedede;
      }

      .name {
        margin-left: 20rpx;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
    .vipLive {
      font-size: 40rpx;
      font-weight: 600;
    }
    .vip {
      .progress {
        margin: 10rpx 0;
        width: 100%;
        height: 12rpx;
        background: #fff;
        border-radius: 6rpx;
      }

      .progressActive {
        width: 0%;
        height: 100%;
        border-radius: 6rpx;
        background: linear-gradient(116deg, #fef5e4 0%, #f89eb2 62%, #aa91da 100%);
      }
    }
  }
  .title {
    margin: 40rpx 30rpx 20rpx 30rpx;
    font-weight: 600;
    color: #fff;
  }
}
</style>