kxmall-ui/kxmall-app-ui/pages/user/userVip.vue

<template>
  <view class="member-center">
    <!-- 头部背景 -->
    <view class="bg-user-gradual-green" style="background-image: url(https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bg.png);">
      <view :style="'height:'+statusBarHeight+'px;'"></view>
      <view class="flex align-center justify-center" style="height: 88rpx;font-size: 36rpx;">
        会员中心
      </view>
    </view>

    <!-- 会员等级轮播 -->
    <view class="margin-lr bg-white shadow" style="border-radius: 16rpx;margin-top: -40rpx;">
      <swiper class="swiper" indicator-dots="true" @change="swiperChange">
        <block v-for="(item, index) in vipList" :key="index">
          <swiper-item>
            <view class="swiper-item" :style="{background: getLevelBgColor(index)}">
              <view class="flex align-center">
                <image :src="item.icon" mode="aspectFit" style="width: 80rpx;height: 80rpx;"></image>
                <view class="level-info">
                  <view class="name">{{ item.name }}</view>
                  <view class="discount">可享受商品折扣: {{ item.discount / 10 }}折</view>
                </view>
              </view>

              <view class="nav acea-row" v-if="item.grade == grade">
                <view style="width: 30%;float:left;" class="item" v-for="(task, taskIndex) in vipComplete" :key="taskIndex">
                  <view class="num">{{ task.newNumber }}</view>
                  <view>{{ task.realName }}</view>
                </view>
              </view>

              <view class="lock" v-if="item.grade > grade">
                <text class="iconfont icon-quanxianguanlisuozi"></text>该会员等级尚未解锁
              </view>

              <view class="lock" v-if="item.grade < grade">
                <text class="iconfont icon-xuanzhong1"></text>已解锁更高等级
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- 会员升级要求 -->
    <view class="margin-lr bg-white shadow" style="border-radius: 16rpx;margin-top: 20rpx;">
      <view class="title acea-row row-between-wrapper padding">
        <view style="float: left">
          <text class="iconfont icon-jingyanzhi"></text>会员升级要求
        </view>
        <view class="num">
          <text class="current">{{ taskCount }}</text>
          /{{ vipRequire.length }}
        </view>
      </view>

      <view class="list padding-lr padding-bottom">
        <view class="item margin-bottom" v-for="(task, index) in vipComplete" :key="index">
          <view class="top acea-row row-between-wrapper">
            <view class="name">
              {{ task.name }}
              <text class="iconfont icon-wenti" v-if="task.illustrate" @click="showGrow(task)"></text>
            </view>
            <view :style="{color: task.finish ? '#8AD62A' : '#999'}">
              {{ task.finish ? "已满足条件" : "未满足条件" }}
            </view>
          </view>

          <view class="cu-progress margin-top-sm">
            <view class="bg-red" :style="{width: task.speed + '%'}"></view>
          </view>

          <view class="experience acea-row row-between-wrapper margin-top-sm">
            <view>{{ task.taskTypeTitle }}</view>
            <view>
              <text class="num">{{ task.newNumber }}</text>
              /{{ task.number }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 成长值说明弹窗 -->
    <view class="growthValue" :class="growthValue === false ? 'on' : ''">
      <view class="pictrue">
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/value.jpg`" />
        <text class="iconfont icon-guanbi3" @click="growthTap"></text>
      </view>
      <view class="conter">{{ illustrate }}</view>
    </view>

    <view class="mask" :hidden="growthValue" @click="growthTap"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 88,
      vipList: [],       // 等级列表
      vipRequire: [],    // 等级要求
      vipComplete: [],   // 完成情况
      taskCount: 0,      // 已完成任务数
      grade: 0,          // 当前会员等级
      growthValue: true, // 成长值说明显示状态
      illustrate: "",    // 成长值说明内容
      activeIndex: 0     // 当前轮播索引
    };
  },
  onLoad() {
    this.getSystemInfo();
    this.getVipData();
    this.detection();
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      try {
        const res = uni.getSystemInfoSync();
        this.statusBarHeight = res.statusBarHeight;
      } catch (e) {
        console.error(e);
      }
    },

    // 获取会员数据
    getVipData() {
      this.$api.request('get', 'user/userLevel/grade').then(res => {
        this.vipList = res.data.list;
        this.vipRequire = res.data.task.list;
        this.vipComplete = res.data.task.task;
        this.taskCount = res.data.task.reachCount;
        this.grade = res.data.grade;
      }).catch(err => {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: "none",
          duration: 2000
        });
      });
    },
    // 检查升级
    detection() {
      this.$api.request('get', 'user/userLevel/detection').then(res => {
      });
    },

    // 轮播切换
    swiperChange(e) {
      this.activeIndex = e.detail.current;
      this.getTask();
    },

    // 获取任务数据
    getTask() {
      const levelId = this.vipList[this.activeIndex]?.id;
      if (!levelId) return;

      this.$api.request('get', 'user/userLevel/task/'+levelId, {
        levelId: levelId
      }).then(res => {
        this.vipRequire = res.data.list;
        this.vipComplete = res.data.task;
        this.taskCount = res.data.reachCount;
      }).catch(err => {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: "none",
          duration: 2000
        });
      });
    },

    // 显示成长值说明
    showGrow(task) {
      this.illustrate = task.illustrate;
      this.growthValue = false;
    },

    // 关闭成长值说明
    growthTap() {
      this.growthValue = true;
    },

    // 获取等级背景色
    getLevelBgColor(index) {
      const colors = [
        'linear-gradient(to right, #FF9A9E, #FAD0C4)',
        'linear-gradient(to right, #A1C4FD, #C2E9FB)',
        'linear-gradient(to right, #84FAB0, #8FD3F4)',
        'linear-gradient(to right, #FFC3A0, #FFAFBD)'
      ];
      return colors[index % colors.length];
    }
  }
};
</script>

<style lang="less">
.member-center {
  background-color: #f1f1f1;
  min-height: 100vh;
  padding-bottom: 30rpx;

  .bg-user-gradual-green {
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fff;
    height: 260rpx;
    width: 750rpx;
  }

  .shadow {
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  }

  .swiper {
    height: 280rpx;

    .swiper-item {
      height: 240rpx;
      padding: 20rpx;
      border-radius: 16rpx;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .level-info {
        margin-left: 20rpx;

        .name {
          font-size: 36rpx;
          font-weight: bold;
        }

        .discount {
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }

      .nav {
        margin-top: 20rpx;

        .item {
          flex: 1;
          text-align: center;
          font-size: 24rpx;

          .num {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
        }
      }

      .lock {
        margin-top: 20rpx;
        text-align: center;
        font-size: 24rpx;

        .iconfont {
          margin-right: 10rpx;
        }
      }
    }
  }

  .title {
    font-size: 30rpx;
    font-weight: bold;
    border-bottom: 1rpx solid #f1f1f1;

    .iconfont {
      margin-right: 10rpx;
      color: #8AD62A;
    }

    .num {
      font-size: 26rpx;
      color: #999;

      .current {
        color: #8AD62A;
        font-weight: bold;
      }
    }
  }

  .list {
    .item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f1f1f1;

      .name {
        font-size: 28rpx;
        color: #333;

        .iconfont {
          margin-left: 10rpx;
          color: #999;
        }
      }

      .cu-progress {
        height: 10rpx;
        background-color: #f1f1f1;
        border-radius: 5rpx;

        .bg-red {
          background-color: #8AD62A;
          height: 100%;
          border-radius: 5rpx;
        }
      }

      .experience {
        font-size: 24rpx;
        color: #999;

        .num {
          color: #8AD62A;
          font-weight: bold;
        }
      }
    }
  }

  .growthValue {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600rpx;
    height: 800rpx;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 999;
    border-radius: 16rpx;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;

    &.on {
      opacity: 1;
      visibility: visible;
    }

    .pictrue {
      position: relative;

      image {
        width: 100%;
        height: 300rpx;
        border-radius: 16rpx 16rpx 0 0;
      }

      .iconfont {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        font-size: 40rpx;
        color: #fff;
      }
    }

    .conter {
      padding: 30rpx;
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
  }
}
</style>