mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-21 01:46:54 +08:00
508 lines
13 KiB
Vue
508 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
<div class="rc-header">
|
||
<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>新手铲屎官</span>
|
||
<span>资深铲屎官</span>
|
||
<span>金牌铲屎官</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="usermember" 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>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from '~/components/header.vue'
|
||
export default {
|
||
data(){
|
||
|
||
return{
|
||
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)
|
||
}
|
||
|
||
},
|
||
components:{
|
||
Myheader
|
||
},
|
||
mounted(){
|
||
console.log(this.$refs.userblock);
|
||
let userwidth=0;
|
||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
||
if(user!==null){
|
||
this.userid=user.data;
|
||
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=[];
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
ul li ol li em strong i {
|
||
list-style: none;
|
||
font-style: normal;
|
||
}
|
||
.rc-header {
|
||
width: 100%;
|
||
}
|
||
//手机端
|
||
@media screen and (max-width: 768px) {
|
||
.rc-main {
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
.rc-center {
|
||
width: 100%;
|
||
height: 180px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
.rc-userorder{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.rc-order{
|
||
padding: 16px 0 16px 0 ;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
margin-top: 22px;
|
||
|
||
}
|
||
|
||
.rc-cordd{
|
||
color:#666666;
|
||
font-size: 14px;
|
||
margin-top: 16px;
|
||
span{
|
||
display: block;
|
||
margin-top: 16px;
|
||
}
|
||
.block{
|
||
height: 8px;
|
||
background: #D7D7D7;
|
||
margin-top: 16px;
|
||
border-radius: 4px;
|
||
.r-block{
|
||
width: 0%;
|
||
height: 100%;
|
||
background: #008900;
|
||
}
|
||
|
||
|
||
}
|
||
.rc-value{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.usermember{
|
||
width: 100%;
|
||
height: 80px;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
display: flex;
|
||
align-items: center;
|
||
.rc-image{
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
img{
|
||
width: 48px;
|
||
height: 48px;
|
||
display: block;
|
||
}
|
||
em{
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
display: block;
|
||
margin-left:16px;
|
||
font-weight: bold;
|
||
color: #531c1c;
|
||
}
|
||
span{
|
||
color: #666666;
|
||
font-size: 14px;
|
||
margin-left: 8px;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||
|
||
.rc-main {
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
.rc-center {
|
||
width: 100%;
|
||
height: 180px;
|
||
display: none;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
|
||
.rc-order{
|
||
padding: 16px 0 16px 0 ;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
|
||
|
||
}
|
||
.rc-cordd{
|
||
color:#666666;
|
||
margin-top: 16px;
|
||
span{
|
||
display: block;
|
||
margin-top: 16px;
|
||
font-size: 16px;
|
||
}
|
||
.block{
|
||
height: 8px;
|
||
background: #D7D7D7;
|
||
margin-top: 16px;
|
||
border-radius: 4px;
|
||
.r-block{
|
||
width: 0%;
|
||
height: 100%;
|
||
background: #008900;
|
||
}
|
||
|
||
|
||
}
|
||
.rc-value{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.usermember{
|
||
width: 23%;
|
||
float: left;
|
||
height: 160px;
|
||
border: 1px solid #D7D7D7;
|
||
margin-top: 80px;
|
||
margin-left: 19px;
|
||
.rc-image{
|
||
float: right;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right:20px;
|
||
|
||
}
|
||
img{
|
||
width: 80px;
|
||
height: 80px;
|
||
display: block;
|
||
}
|
||
em{
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
display: block;
|
||
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
span{
|
||
color: #999999;
|
||
font-size: 14px;
|
||
|
||
}
|
||
}
|
||
.rc-userorder{
|
||
width: 60%;
|
||
float: left;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
span{
|
||
margin-top: 8px;
|
||
width: 54%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</style> |