<template>
|
<view class="memberVip">
|
<!-- #ifdef H5||APP||MP-WEIXIN -->
|
<view class="header" :style="{ paddingTop: menuTop + 'px' }">
|
<view class="header_text" :style="{ lineHeight: menuHeight + 'px' }">
|
<view class="return iconfont icon-xiangzuo" @click.stop="goback"></view>
|
会员等级
|
</view>
|
</view>
|
<!-- #endif -->
|
<view class="pad30">
|
<view class="bg">
|
<view class="test"></view>
|
<view class="test1"></view>
|
</view>
|
<view style="height: 30rpx;"></view>
|
<view class="item vip">
|
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="handleScroll" :scroll-left="scrollLeft">
|
<view id="pt" class="scroll-view-item_H" :class="{pt:activeName=='pt'}">
|
<view class="item">
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/v1_1.png"
|
:class="{'grey-img':activeName!=='pt'}"></image>
|
<view class="txt active">
|
<view v-if="userInfo.level<1">当前等级</view>
|
<view v-if="userInfo.level>=0" class="highlight">普通会员</view>
|
<view v-else class="highlight">暂未达成</view>
|
</view>
|
</view>
|
</view>
|
<view id="cx" class="scroll-view-item_H" :class="{cx:activeName=='cx'}">
|
<view class="item">
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/v2_2.png"
|
:class="{'grey-img':activeName!=='cx'}"></image>
|
<view class="txt active">
|
<view v-if="userInfo.level==1">当前等级</view>
|
<view v-if="userInfo.level>=1" class="highlight">畅享会员</view>
|
<view v-else class="highlight">暂未达成</view>
|
</view>
|
</view>
|
</view>
|
<view id="yx" class="scroll-view-item_H" :class="{yx:activeName=='yx'}">
|
<view class="item">
|
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/v3_3.png"
|
:class="{'grey-img':activeName!=='yx'}"></image>
|
<view class="txt active">
|
<view v-if="userInfo.level==2">当前等级</view>
|
<view v-if="userInfo.level>=2" class="highlight">悦享会员</view>
|
<view v-else class="highlight">暂未达成</view>
|
</view>
|
</view>
|
</view>
|
<view id="zx" class="scroll-view-item_H" :class="{zx:activeName=='zx'}">
|
<view class="item">
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/v4_4.png"
|
:class="{'grey-img':activeName!=='zx'}"></image>
|
<view class="txt active">
|
<view v-if="userInfo.level==3">当前等级</view>
|
<view v-if="userInfo.level>=3" class="highlight">臻享会员</view>
|
<view v-else class="highlight">暂未达成</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="line-point">
|
<view class="name pt" :class="{active:activeName=='pt'}">普通会员</view>
|
<view class="name cx" :class="{active:activeName=='cx'}">畅享会员</view>
|
<view class="name yx" :class="{active:activeName=='yx'}">悦享会员</view>
|
<view class="name zx" :class="{active:activeName=='zx'}">臻享会员</view>
|
</view>
|
</view>
|
<view class="item descrition">
|
<view class="title">
|
等级权益说明
|
</view>
|
<view class="info" v-for="info in desInfo[activeName]" :key="info.id">
|
<view class="num" v-if="desInfo[activeName]&&desInfo[activeName].length>1" :class="activeName">{{info.num}}</view>
|
<view class="txt">
|
<rich-text :nodes="info.txt"></rich-text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapGetters
|
} from "vuex";
|
import {
|
getlevelInfo,
|
getlevelExpList
|
} from '@/api/user.js';
|
import {
|
toLogin
|
} from '@/libs/login.js';
|
export default {
|
data() {
|
return {
|
userInfo: {},
|
activeName: '',
|
enum: ['pt', 'cx', 'yx', 'zx'],
|
leftEnum: [0, 200, 490, 730],
|
scrollLeft: 0,
|
baseWidth: [100, 350, 600],
|
levelInfo: '',
|
levelList: [],
|
current: 0,
|
widthLen: 0,
|
loading: false,
|
loadend: false,
|
loadTitle: '加载更多', //提示语
|
page: 1,
|
limit: 20,
|
expList: [],
|
desInfo: {
|
pt: [{
|
id: 1,
|
num: 1,
|
txt: '可享受普通会员价格，每笔订单最多可购10件商品，支持购买全品类商品（<strong style="font-weight:bold;">不含臻享专区商品</strong>），不可进入臻享专区选购。',
|
name: '普通会员优惠券：'
|
},{
|
id: 6,
|
num: 2,
|
txt: '每月免费获得1张限时臻享价体验券，以臻享价购买任意1件非专区商品。',
|
name: '臻享价体验券：'
|
}],
|
cx: [{
|
id: 2,
|
num: 1,
|
txt: '可享受畅享会员价格，每笔订单最多可购10件商品，支持购买全品类商品（<strong style="font-weight:bold;">不含臻享专区商品</strong>），不可进入臻享专区选购。',
|
name: '畅享优惠券：'
|
}],
|
yx: [{
|
id: 3,
|
num: 1,
|
txt: '可享受悦享会员价格，每笔订单最多可购10件商品，支持购买全品类商品（<strong style="font-weight:bold;">不含臻享专区商品</strong>），不可进入臻享专区选购。',
|
name: '悦享优惠券：'
|
}],
|
zx: [{
|
id: 4,
|
num: 1,
|
txt: '可享受臻享会员价格，每笔订单最多可购10件商品，支持购买全品类商品（<strong style="font-weight:bold;">含臻享专区商品</strong>），可进入臻享专区选购。',
|
name: '臻享优惠券：'
|
}
|
],
|
},
|
isPageShow:false,
|
loginBackFn:null,
|
};
|
},
|
onLoad() {
|
const rect = uni.getMenuButtonBoundingClientRect()
|
this.menuTop = rect.top;
|
this.menuHeight = rect.height
|
},
|
onShow() {
|
let that = this;
|
if (that.$store.getters.isBelong) {
|
that.belongInfoReadyFn({
|
isRegister: false
|
})
|
} else {
|
uni.$once('BELONG_READY', that.belongInfoReadyFn);
|
}
|
},
|
onHide: function() {
|
let that = this;
|
that.isPageShow = false;
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
uni.$off('loginFlSuccess', that.registerFn);
|
},
|
methods: {
|
belongInfoReadyFn(data) {
|
let that = this;
|
if (!data.isRegister) {
|
that.checkLoginFn()
|
}
|
},
|
checkLoginFn() {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
this.addTrack('yy_pageView', {
|
pageTitle_var: '会员等级',
|
pagePath_var: currPage.$page.fullPath,
|
pageType_var: '我的'
|
});
|
if (that.$store.getters.isLogin) {
|
that.onLoadFn();
|
} else {
|
toLogin(that);
|
}
|
that.loginBackFn = function() {
|
that.onLoadFn();
|
}
|
uni.$once('loginFlSuccess', that.registerFn);
|
},
|
registerFn() {
|
console.log('registerFn');
|
let that = this;
|
if (that.loginBackFn) {
|
that.loginBackFn();
|
}
|
that.loginBackFn = null;
|
},
|
onLoadFn() {
|
let that = this;
|
this.userInfo = this.$store.getters.userInfo;
|
this.levelInfo = this.userInfo.experience;
|
this.scrollLeft = this.leftEnum[this.userInfo.level]
|
this.activeName = this.enum[this.userInfo.level]
|
},
|
goback() {
|
// #ifdef H5
|
return history.back();
|
// #endif
|
// #ifndef H5
|
return uni.navigateBack({
|
delta: 1,
|
})
|
// #endif
|
},
|
handleScroll(event) {
|
const {
|
scrollLeft
|
} = event.detail;
|
console.log(scrollLeft)
|
for (let i = 0; i < 4; i++) {
|
if (scrollLeft < this.baseWidth[i]) {
|
this.activeName = this.enum[i]
|
break;
|
}
|
if (i == 3) {
|
this.activeName = this.enum[i]
|
}
|
}
|
},
|
getInfo: function() {
|
let that = this;
|
getlevelInfo().then(res => {
|
let levelList = res.data;
|
let list = []
|
that.levelList = levelList;
|
levelList.map((item, index) => {
|
if (item.experience <= that.levelInfo) {
|
list.push(item.experience)
|
}
|
})
|
let maxn = Math.max.apply(null, list);
|
that.current = maxn;
|
// 解决len取的值没有时；
|
let levelListLen = levelList[list.length] ? levelList[list.length] : levelList[list
|
.length - 1];
|
// 解决除数不能为0
|
let divisor = levelListLen.experience - maxn ? levelListLen.experience - maxn : 1;
|
// 每小格所占的百分比
|
let per = (that.levelInfo - maxn) / divisor / levelList.length;
|
|
that.widthLen = ((list.length - 0.5) / (levelList.length)) * 100 + per * 100
|
|
}).catch(function(err) {
|
return that.$util.Tips({
|
title: (err&&err.message)?err.message:err
|
});
|
})
|
},
|
getlevelList: function() {
|
let that = this
|
if (this.loadend) return false;
|
if (this.loading) return false;
|
getlevelExpList({
|
page: that.page,
|
limit: that.limit
|
}).then(res => {
|
let list = res.data.list,
|
loadend = list.length < that.limit;
|
let expList = that.$util.SplitArray(list, that.expList);
|
that.$set(that, 'expList', expList);
|
that.loadend = loadend;
|
that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
|
that.page = that.page + 1;
|
that.loading = false;
|
}).catch(err => {
|
that.loading = false;
|
that.loadTitle = '加载更多';
|
});
|
}
|
},
|
onReachBottom: function() {
|
// this.getlevelList();
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page,
|
body {
|
height: 100%;
|
}
|
|
.memberVip {
|
height: 100%;
|
background-color: #F5F5F5;
|
|
.bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 416rpx;
|
overflow: hidden;
|
background: linear-gradient(180deg, #FFEF7D 0%, #FFE20E 50%, #FFE20E 100%);
|
z-index: 0;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 200rpx;
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #F5F5F5 100%);
|
}
|
}
|
|
.header {
|
width: 750rpx;
|
// height: 334rpx;
|
position: sticky;
|
top: 0;
|
z-index: 1;
|
width: 100%;
|
text-align: center;
|
padding-top: 88rpx;
|
line-height: 64rpx;
|
text-align: center;
|
// position: fixed;
|
left: 0;
|
top: 0;
|
background: linear-gradient(to bottom, #FFEF7D 0%, #FFE945 37%, rgba(255, 226, 14, 0) 100%);
|
}
|
|
.header_text {
|
font-size: 34rpx;
|
position: relative;
|
font-weight: bold;
|
}
|
|
.return {
|
position: absolute;
|
left: 30rpx;
|
top: 0;
|
}
|
|
.vip {
|
// background-color: #04c763;
|
height: 360rpx;
|
border-radius: 30rpx;
|
position: relative;
|
|
.scroll-view_H {
|
height: 235rpx;
|
margin-bottom: 77rpx;
|
white-space: nowrap;
|
width: 100%;
|
|
.scroll-view-item_H {
|
width: 475rpx;
|
height: 176rpx;
|
margin-top: 59rpx;
|
box-shadow: 0rpx 11rpx 23rpx 0rpx rgba(0, 0, 0, 0.05);
|
border-radius: 15rpx 15rpx 15rpx 15rpx;
|
font-size: 27rpx;
|
color: #D9D9D9;
|
font-weight: 500;
|
display: inline-block;
|
margin-right: 20rpx;
|
background-color: #FAFAFA;
|
|
.item {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
|
.highlight {
|
font-size: 38rpx;
|
}
|
|
&.pt {
|
background: #EFFFF0;
|
color: #000000;
|
|
.highlight {
|
color: #04C763;
|
}
|
}
|
|
&.cx {
|
background: #FEFEE5;
|
color: #000000;
|
|
.highlight {
|
color: #FFE20E;
|
}
|
}
|
|
&.yx {
|
background: #EAF4FF;
|
color: #000000;
|
|
.highlight {
|
color: #016DCC;
|
}
|
}
|
|
&.zx {
|
background: #ECF1FF;
|
color: #000000;
|
|
.highlight {
|
color: #002561;
|
}
|
}
|
|
image {
|
position: absolute;
|
top: -59rpx;
|
height: 183rpx;
|
width: 183rpx;
|
left: 27rpx;
|
|
&.grey-img {
|
filter: grayscale(100%);
|
}
|
}
|
|
.txt {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
}
|
|
.line-point {
|
font-size: 23rpx;
|
color: #979797;
|
display: flex;
|
justify-content: space-around;
|
|
.name {
|
position: relative;
|
width: 25%;
|
text-align: center;
|
|
&.active {
|
color: #000000;
|
|
&.pt:before {
|
border: 4rpx solid #FFFFFF;
|
background-color: #04C763;
|
top: -29rpx;
|
}
|
|
&.cx:before {
|
border: 4rpx solid #FFFFFF;
|
background-color: #FFE20E;
|
top: -29rpx;
|
}
|
|
&.yx:before {
|
border: 4rpx solid #FFFFFF;
|
background-color: #016DCC;
|
top: -29rpx;
|
}
|
|
&.zx:before {
|
border: 4rpx solid #FFFFFF;
|
background-color: #002561;
|
top: -29rpx;
|
}
|
}
|
|
&::after {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 2rpx;
|
background-color: #DDDDDD;
|
top: -19rpx;
|
left: 0;
|
}
|
|
&::before {
|
content: '';
|
position: absolute;
|
width: 15rpx;
|
height: 15rpx;
|
border-radius: 15rpx;
|
border: 2rpx solid #D9D9D9;
|
background-color: #F5F5F5;
|
top: -27rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 1;
|
}
|
}
|
}
|
|
|
}
|
|
.descrition {
|
background: #FFFFFF;
|
border-radius: 15rpx 15rpx 15rpx 15rpx;
|
padding: 30rpx;
|
margin-top: 30rpx;
|
|
.title {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 31rpx;
|
color: #000000;
|
margin-bottom: 30rpx;
|
}
|
|
.info {
|
display: flex;
|
gap: 30rpx;
|
margin-top: 30rpx;
|
font-weight: bold;
|
|
.num {
|
width: 34rpx;
|
height: 34rpx;
|
border-radius: 19rpx 19rpx 19rpx 19rpx;
|
color: #FFFFFF;
|
font-weight: 400;
|
font-size: 23rpx;
|
text-align: center;
|
line-height: 34rpx;
|
|
&.pt {
|
background: #04C763;
|
}
|
|
&.cx {
|
background: #FFE20E;
|
}
|
|
&.yx {
|
background: #016DCC;
|
}
|
|
&.zx {
|
background: #002561;
|
}
|
}
|
|
.txt {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #000000;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.qname {
|
font-weight: bold;
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
