mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
315 lines
8.8 KiB
Vue
315 lines
8.8 KiB
Vue
<template>
|
|
<div>
|
|
<Myheader></Myheader>
|
|
<div class="rc-top"></div>
|
|
<tabs :crumbs="crumbs"></tabs>
|
|
<div class="rc-full-width rc-max-width--xl rc-padding-bottom--lg">
|
|
<div class="rc-main">
|
|
<div class="rc-center">
|
|
<van-swipe @change="onChange">
|
|
<van-swipe-item v-for="(banner, index) in banners" :key="index"><img :src="banner.src" class="useraimg" /></van-swipe-item>
|
|
</van-swipe>
|
|
<!-- <img :src='userimage' /> -->
|
|
</div>
|
|
<div class="rc-order">
|
|
<span>当前等级：{{ userorder }}</span>
|
|
</div>
|
|
<div class="rc-cordd">
|
|
<span>距离升级还差:{{ rcvalue }}</span>
|
|
<div class="block">
|
|
<div class="r-block" ref="userblock"></div>
|
|
<!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
|
|
</div>
|
|
<div class="rc-value">
|
|
<span class="rc-styled-link" @click="onChange(0)">新手铲屎官</span>
|
|
<span class="rc-styled-link" @click="onChange(1)">资深铲屎官</span>
|
|
<span class="rc-styled-link" @click="onChange(2)">金牌铲屎官</span>
|
|
</div>
|
|
</div>
|
|
<div class="rc-layout-container">
|
|
<div class="usermember rc-column" v-for="(item, index) in newlist" :key="index">
|
|
<div class="rc-image"><img :src="item.catimage" alt="" /></div>
|
|
<div class="rc-userorder">
|
|
<em>{{ item.title }}</em>
|
|
<span>{{ item.usereat }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Myfooter></Myfooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Myheader from '~/components/header.vue';
|
|
import Myfooter from '~/components/rc-footer.vue';
|
|
import tabs from '~/components/tabs.vue';
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
crumbs: [
|
|
{
|
|
path: '/personal/mypersonal'
|
|
},
|
|
{
|
|
path: '/personal/usermember/'
|
|
}
|
|
],
|
|
banners: [
|
|
{ src: require('../../assets/image/rc-new.png'), link: '' },
|
|
{ src: require('../../assets/image/rc-new1.png'), link: '' },
|
|
{ src: require('../../assets/image/rc-new2.png'), link: '' }
|
|
],
|
|
userid: null,
|
|
userimage: require('../../assets/image/rc-new.png'),
|
|
userorder: '新手铲屎官',
|
|
rcvalue: 5000,
|
|
uservalue: 0,
|
|
usrnewlist: [],
|
|
newlist: [
|
|
{
|
|
title: '产品试吃',
|
|
usereat: '每年4次免积分产品试吃',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/usereat.png')
|
|
},
|
|
{
|
|
title: '成长工具',
|
|
usereat: '365天专属养宠工具',
|
|
ordernum: 1,
|
|
catimage: require('../../assets/image/rc-growth.png')
|
|
},
|
|
{
|
|
title: '1V1咨询',
|
|
usereat: '10年专业团队1v1咨询',
|
|
ordernum: 2,
|
|
catimage: require('../../assets/image/consult.png')
|
|
},
|
|
{
|
|
title: '知识课堂',
|
|
usereat: '行业大咖专业养宠知识',
|
|
ordernum: 3,
|
|
catimage: require('../../assets/image/rc-book.png')
|
|
},
|
|
{
|
|
title: '健康服务',
|
|
usereat: '每年积分兑换1次价值288元的免费体检及100元医院绝育券',
|
|
ordernum: 4,
|
|
catimage: require('../../assets/image/rc-health.png')
|
|
}
|
|
],
|
|
newlista: [
|
|
{
|
|
title: '产品试吃',
|
|
usereat: '每年4次免积分产品试吃',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/usereat.png')
|
|
},
|
|
{
|
|
title: '成长工具',
|
|
usereat: '365天专属养宠工具',
|
|
ordernum: 1,
|
|
catimage: require('../../assets/image/rc-growth.png')
|
|
},
|
|
{
|
|
title: '1V1咨询',
|
|
usereat: '10年专业团队1v1咨询',
|
|
ordernum: 2,
|
|
catimage: require('../../assets/image/consult.png')
|
|
},
|
|
{
|
|
title: '知识课堂',
|
|
usereat: '行业大咖专业养宠知识',
|
|
ordernum: 3,
|
|
catimage: require('../../assets/image/rc-book.png')
|
|
},
|
|
{
|
|
title: '健康服务',
|
|
usereat: '每年积分兑换1次价值288元的免费体检及100元医院绝育券',
|
|
ordernum: 4,
|
|
catimage: require('../../assets/image/rc-health.png')
|
|
}
|
|
],
|
|
senior: [
|
|
{
|
|
title: '会员奖励',
|
|
usereat: '专属升级奖励',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/rc-win.png')
|
|
},
|
|
|
|
{
|
|
title: '产品试吃',
|
|
usereat: '每年4次免积分产品试吃',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/usereat.png')
|
|
},
|
|
{
|
|
title: '成长工具',
|
|
usereat: '365天专属养宠工具',
|
|
ordernum: 1,
|
|
catimage: require('../../assets/image/rc-growth.png')
|
|
},
|
|
{
|
|
title: '1V1咨询',
|
|
usereat: '10年专业团队1v1咨询',
|
|
ordernum: 2,
|
|
catimage: require('../../assets/image/consult.png')
|
|
},
|
|
{
|
|
title: '知识课堂',
|
|
usereat: '行业大咖专业养宠知识',
|
|
ordernum: 3,
|
|
catimage: require('../../assets/image/rc-book.png')
|
|
},
|
|
{
|
|
title: '专属定制',
|
|
usereat: '爱宠生活定制活动高级养宠宝典',
|
|
ordernum: 3,
|
|
catimage: require('../../assets/image/userself.png')
|
|
},
|
|
{
|
|
title: '健康服务',
|
|
usereat: '每年积分兑换1次价值288元的免费体检及100元医院绝育券',
|
|
ordernum: 4,
|
|
catimage: require('../../assets/image/rc-health.png')
|
|
}
|
|
],
|
|
|
|
goldmedal: [
|
|
{
|
|
title: '会员奖励',
|
|
usereat: '专属升级奖励',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/rc-win.png')
|
|
},
|
|
|
|
{
|
|
title: '产品试吃',
|
|
usereat: '每年4次免积分产品试吃',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/usereat.png')
|
|
},
|
|
{
|
|
title: '产品包邮',
|
|
usereat: '尊享订单免邮服务（指点商品）',
|
|
ordernum: 0,
|
|
catimage: require('../../assets/image/usercar.png')
|
|
},
|
|
{
|
|
title: '成长工具',
|
|
usereat: '365天专属养宠工具',
|
|
ordernum: 1,
|
|
catimage: require('../../assets/image/rc-growth.png')
|
|
},
|
|
{
|
|
title: '1V1咨询',
|
|
usereat: '10年专业团队1v1咨询',
|
|
ordernum: 2,
|
|
catimage: require('../../assets/image/consult.png')
|
|
},
|
|
{
|
|
title: '知识课堂',
|
|
usereat: '行业大咖专业养宠知识',
|
|
ordernum: 3,
|
|
catimage: require('../../assets/image/rc-book.png')
|
|
},
|
|
{
|
|
title: '专属定制',
|
|
usereat: '爱宠生活定制活动高级养宠宝典',
|
|
ordernum: 3,
|
|
catimage: require('../../assets/image/userself.png')
|
|
},
|
|
{
|
|
title: '健康服务',
|
|
usereat: '每年积分兑换1次价值288元的免费体检及100元医院绝育券',
|
|
ordernum: 4,
|
|
catimage: require('../../assets/image/rc-health.png')
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
onChange(index) {
|
|
console.log(index);
|
|
if (index == 0) {
|
|
this.newlist = this.newlista;
|
|
} else if (index == 1) {
|
|
this.newlist = this.senior;
|
|
} else if (index == 2) {
|
|
this.newlist = this.goldmedal;
|
|
}
|
|
console.log(this.newlist);
|
|
},
|
|
initData(){
|
|
let userwidth = 0;
|
|
// let user = JSON.parse(localStorage.getItem('userInfo'));
|
|
let user = this.userInfo;
|
|
console.log('33=',user);
|
|
if (user !== null) {
|
|
this.userid = user;
|
|
let userlength = this.userid.availiblePoint.toString().length;
|
|
console.log(this.userid.availiblePoint);
|
|
if (this.userid.memberLevel == 1) {
|
|
this.userimage = require('../../assets/image/rc-new.png');
|
|
this.userorder = '新手铲屎官';
|
|
this.newlist = this.newlista;
|
|
this.uservalue = 5000; //新手总积分
|
|
this.rcvalue = this.uservalue - this.userid.availiblePoint; //新手总积分减去本身的积分
|
|
if (userlength == 1 || userlength == 2 || userlength == 3 || userlength == 4) {
|
|
userwidth = this.userid.availiblePoint / 100;
|
|
console.log(userwidth);
|
|
}
|
|
console.log(userwidth);
|
|
} else if (this.userid.memberLevel == 2) {
|
|
this.userimage = require('../../assets/image/rc-new2.png');
|
|
this.userorder = '资深铲屎官';
|
|
this.newlist = this.senior;
|
|
this.uservalue = 10000;
|
|
this.rcvalue = this.uservalue - this.userid.availiblePoint;
|
|
userwidth = this.userid.availiblePoint / 100;
|
|
console.log('---2222');
|
|
} else if (this.userid.memberLevel == 3) {
|
|
this.userimage = require('../../assets/image/rc-new1.png');
|
|
this.userorder = '金牌铲屎官';
|
|
this.newlist = this.goldmedal;
|
|
userwidth = 100;
|
|
}
|
|
this.$refs.userblock.style.width = userwidth + '%';
|
|
} else {
|
|
console.log('---');
|
|
this.userid = [];
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
Myheader,
|
|
Myfooter,
|
|
tabs
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
userInfo : state => state.user.userInfo,
|
|
})
|
|
},
|
|
mounted() {
|
|
console.log(this.$refs.userblock);
|
|
this.initData();
|
|
},
|
|
watch: {
|
|
userInfo(newVal){
|
|
if(newVal){
|
|
this.initData();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('../../assets/css/usermember.less');
|
|
</style>
|