integral.vue

<template>
  <view class="integral">
    <dHeader :title="$lang.lang.integral.info"></dHeader>
    <view class="container">
      <view class="header">
        <view class="avatar">
          <image src="../../static/img/vip_avatar.png" mode=""></image>
        </view>
        <view class="content">
          <view class="content-title"
            >{{ $lang.lang.integral.headerTitle
            }}{{ levelInfo.levelName }}</view
          >
          <view class="content-text">
            <view class="text"
              >{{ $lang.lang.integral.spend }} {{ levelInfo.usedScore }}</view
            >
            <view class="text"
              >{{ $lang.lang.integral.available }}
              {{ levelInfo.holdScore }}</view
            >
          </view>
          <view class="divider">
            <view class="divider-active" :style="{ width: `${score}%` }"></view>
            <view class="divider-unm">{{ levelInfo.totalScore }}</view>
            <view class="divider-level">{{ levelInfo.levelName }}</view>
          </view>
        </view>
        <view class="classification">
          <image class="classification-image" :src="levelIcon"></image>
          <view class="log-menu">
            <view class="menu-item" @click="toLog(0)"
              >{{ $lang.lang.integral.logPoints }}&ensp;&gt;</view
            >
            <view class="menu-item" @click="toLog(1)"
              >{{ $lang.lang.integral.logExchange }}&ensp;&gt;</view
            >
          </view>
        </view>
      </view>
      <view class="main">
        <view class="main-nav">
          <view
            class="nav-item"
            :class="{ 'nav-active1': navIndex === 0 }"
            @click="navIndex = 0"
            >{{ $lang.lang.integral.redeemGifts }}</view
          >
          <view
            class="nav-item"
            :class="{ 'nav-active2': navIndex === 1 }"
            @click="navIndex = 1"
            >{{ $lang.lang.integral.pointsCampaign }}</view
          >
        </view>
        <view class="main-content">
          <gift v-show="navIndex === 0" :userInfo="userInfo"></gift>
          <points v-show="navIndex === 1"></points>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dHeader from "../../components/dHeader/index.vue";
import points from "./components/points.vue";
import gift from "./components/gift.vue";
export default {
  components: {
    dHeader,
    gift,
    points,
  },
  data() {
    return {
      navIndex: 0,
      // 会员信息
      levelInfo: {},
      // 会员图标
      levelIcon: "",
      userInfo: {},
    };
  },
  computed: {
    score() {
      if (this.levelInfo.totalScore) {
        return Math.min(
          Math.floor(
            (this.levelInfo.totalScore / this.levelInfo.upperCount) * 100
          ),
          100
        );
      }
      return 0;
    },
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    toLog(val) {
      const url = val === 1 ? "/pages/log/exchange" : "/pages/log/integral";
      uni.navigateTo({ url });
    },
    // 获取个人信息
    async getUserInfo() {
      try {
        const { code, data } = await this.$request.get(
          "/app-api/member/user/get"
        );
        if (code === 0 && data) {
          const { userScoreLevelInfo, ...args } = data;
          this.userInfo = args;
          this.levelIcon = userScoreLevelInfo.levelIcon;
          this.getMemberScore(this.$store.getters.id);
        }
      } catch (err) {}
    },
    // 获取会员积分信息
    async getMemberScore(id) {
      try {
        const { code, data } = await this.$request.post(
          `/app-api/member/user-score/info?id=${id}`,
          { id }
        );
        if (code === 0 && data) {
          this.levelInfo = data;
        }
      } catch (err) {}
    },
  },
};
</script>

<style>
@import url(../../static/css/integral.css);
</style>