mall4pc-bbc/pages/member-center/member-equity.vue

<template>
  <div class="member-center equity">
    <!-- 头部 -->
    <MemberHeader />
    <!-- /头部 -->
    <div v-if="commonLevelShow">
      <div class="member-equity" v-if="commonLevelShow" v-rich="commonLevelShow"></div>
    </div>
    <!-- <div class="member-equity">
      <div class="tit">
        <div class="tit-bg"></div>
        <div class="text">会员成长体系</div>
        <div class="tit-bg tit-r"></div>
      </div>
      <div class="growth-system">
        <div class="item">
          <div class="condition">
            注册成为普通会员
            <br />可购买黄金VIP
          </div>
          <div class="lv lv1"></div>
          <div class="text">普通会员</div>
        </div>
        <div class="item">
          <div class="condition">
            成长值≥1000达成
            <br />可购买铂金VIP
          </div>
          <div class="lv lv2"></div>
          <div class="text">高级会员</div>
        </div>
        <div class="item">
          <div class="condition">
            成长值≥2000达成
            <br />可购买钻石VIP
          </div>
          <div class="lv lv3"></div>
          <div class="text">尊贵会员</div>
        </div>
        <div class="item">
          <div class="condition">
            成长值≥3000达成
            <br />可购买黑金VIP
          </div>
          <div class="lv lv4"></div>
          <div class="text">至尊会员</div>
        </div>
      </div>
      <div class="tit">
        <div class="tit-bg"></div>
        <div class="text">会员福利体系</div>
        <div class="tit-bg tit-r"></div>
      </div>
      <div class="welfare-system">
        <div class="w-tit">
          <div class="item">会员特权</div>
          <div class="item">普通会员</div>
          <div class="item">高级会员</div>
          <div class="item">尊贵会员</div>
          <div class="item">至尊会员</div>
        </div>
        <div class="w-con">
          <div class="item">注册好礼</div>
          <div class="item big-item">注册成为会员即送100积分和新人礼券</div>
        </div>
        <div class="w-con">
          <div class="item">商品包邮</div>
          <div class="item big-item">注册成为会员在自营店购买商品可免运费</div>
        </div>
        <div class="w-con">
          <div class="item">升级好礼</div>
          <div class="item big-item">会员升级送好礼，每提升一个等级都送专属优惠券</div>
        </div>
        <div class="w-con">
          <div class="item">购物积分</div>
          <div class="item big-item">会员购物返积分，积分可用于兑换好礼</div>
        </div>
        <div class="w-con">
          <div class="item">会员折扣</div>
          <div class="item">无折扣</div>
          <div class="item">部分商品99折</div>
          <div class="item">部分商品98折</div>
          <div class="item">部分商品95折</div>
        </div>
        <div class="w-tit vip-tit">
          <div class="item">付费会员</div>
          <div class="item">黄金VIP</div>
          <div class="item">铂金VIP</div>
          <div class="item">钻石VIP</div>
          <div class="item">黑金VIP</div>
        </div>
        <div class="w-con">
          <div class="item">专属好券</div>
          <div class="item">√</div>
          <div class="item">√</div>
          <div class="item">√</div>
          <div class="item">√</div>
        </div>
        <div class="w-con">
          <div class="item">倍率积分</div>
          <div class="item">√</div>
          <div class="item">√</div>
          <div class="item">√</div>
          <div class="item">√</div>
        </div>
        <div class="w-con">
          <div class="item">会员折扣</div>
          <div class="item">√</div>
          <div class="item">√</div>
          <div class="item">√</div>
          <div class="item">√</div>
        </div>
      </div>
      <div class="tit">
        <div class="tit-bg"></div>
        <div class="text">会员福利说明</div>
        <div class="tit-bg tit-r"></div>
      </div>
      <div class="welfare-explain">
        <div class="item">
          <div class="img">
            <img src="~/assets/images/memberPic/welfare-icon01.png" alt />
          </div>
          <div class="text-box">
            <div class="text">商品包邮</div>
            <div class="des">注册成为会员在自营店购买商品时可享受包邮优惠，商品包邮快递由商家决定，特殊原因或特殊地区，不享受包邮。</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="~/assets/images/memberPic/welfare-icon02.png" alt />
          </div>
          <div class="text-box">
            <div class="text">专属好券</div>
            <div class="des">会员注册和升级均会获赠送优惠券，购买VIP会员还可获赠付费会员专属优惠券，专属优惠券由平台直接发放到会员账户，全平台通用，尽享独特礼遇。</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="~/assets/images/memberPic/welfare-icon03.png" alt />
          </div>
          <div class="text-box">
            <div class="text">购物积分</div>
            <div class="des">会员购物返积分，升级为付费会员获得积分比例将会大大增加，累积足够积分可到积分商城兑换精美礼品或优惠券。</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="~/assets/images/memberPic/welfare-icon04.png" alt />
          </div>
          <div class="text-box">
            <div class="text">会员折扣</div>
            <div class="des">会员达到至尊会员等级，部分商品可95折购买，付费会员可直接获得折扣特权，黄金VIP至黑金VIP部分商品折扣分别为：95折、9折、85折、8折。</div>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</template>

<script src='~/assets/js/load-transition'></script>
<script>
import MemberHeader from '~/components/member-header'
export default {
  layout: 'home',
  components: {
    MemberHeader
  },
  data () {
    return {
      commonLevelShow: ''
    }
  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('memberCenter.memberBenefits')
    this.getComLevelShow()
  },
  methods: {
    /**
     * 普通会员等级
     */
    getComLevelShow () {
      this.$axios.get('/p/score/getLevelShow').then(({ data }) => {
        this.commonLevelShow = data
      })
    }

  },
}
</script>

<style scoped>
@import '~/assets/css/member-center.css';
</style>

<style>
@import '~/assets/css/member-equity.css';
</style>