mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
886 lines
20 KiB
Vue
886 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
<div class="rc-header">
|
||
<div class="rc-main">
|
||
<!-- <div class="rc-title">
|
||
<img src="../../assets/image/rc-cat.png" alt="" />
|
||
<span>{{ userorder }}</span>
|
||
</div> -->
|
||
<div class="rc-center">
|
||
<img :src='userimage' />
|
||
</div>
|
||
<div class="rc-login">
|
||
<div class="rc-unlogin">
|
||
<div class="rc-people" @click="opendialog()">
|
||
<img src="../../assets/image/rc-people.png" alt="" />
|
||
</div>
|
||
<div class="rc-userlogin">
|
||
<div v-if="!islogin">
|
||
<span>{{usertitle}}</span>
|
||
<em>{{userorder}}</em>
|
||
</div>
|
||
<nuxt-link :to="`/userlogin/login/`">
|
||
<span v-if="islogin">登录/注册</span>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
<div class="rc-islogin">
|
||
<nuxt-link :to="`/personal/usermember/`">
|
||
<span>会员权益</span>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="usercord">
|
||
<em>当前积分:{{ rcrcord }}</em>
|
||
<span @click="userinter">积分明细</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>0</span>
|
||
<span>5000</span>
|
||
<span>10000</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rc-order">
|
||
<em>我的订单</em>
|
||
|
||
|
||
<span @click="findall" >查看全部</span>
|
||
|
||
</div>
|
||
<div class="rc-obligation">
|
||
<ul>
|
||
<li v-for="(item, index) in prefecture" :key="index" @click="obligation(item,index)">
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="rc-usermain">
|
||
<h2>服务工具</h2>
|
||
<div class="rc-buymain">
|
||
<div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(index)">
|
||
<div class="rc-cord">
|
||
<img :src="item.buyimage" alt="" />
|
||
<em>{{ item.title }}</em>
|
||
</div>
|
||
<div class="rc-load">
|
||
<span>{{ item.usertitle }}</span>
|
||
<img src="../../assets/image/rc-left.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:visible.sync="dialogInfo1"
|
||
hegight="700px"
|
||
:before-close="handleClose"
|
||
@open="open"
|
||
>
|
||
<div class="rc-header">
|
||
<div class="rc-title">
|
||
<img src="../../assets/error.png" alt="">
|
||
</div>
|
||
<div class="rc-logmain">
|
||
<h3>温馨提示</h3>
|
||
<span>{{usermessage}}</span>
|
||
|
||
</div>
|
||
|
||
<div class="userer">
|
||
|
||
<img src="../../assets/image/rc-discount.png" alt="">
|
||
<span>微信扫一扫，识别二维码</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from '~/components/header.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
userlog:false,
|
||
islogin:false,
|
||
dialogInfo1:false,
|
||
userid:null,
|
||
usertitle:'',
|
||
rcvalue:5000,
|
||
usermessage:'关注皇家爱宠荟，修改个人资料',
|
||
userimage:require("../../assets/image/rc-new.png"),
|
||
userlogin:'登录注册',
|
||
userorder: "新手铲屎官",
|
||
prefecture: [
|
||
{
|
||
title: "待付款",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-obligation.png"),
|
||
},
|
||
{
|
||
title: "待发货",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-pending.png"),
|
||
},
|
||
{
|
||
title: "待收货",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-wait.png"),
|
||
},
|
||
],
|
||
|
||
personallist: [
|
||
{
|
||
title: "积分商城",
|
||
ordernum: "0",
|
||
buyimage: require("../../assets/image/rc-integral.png"),
|
||
usertitle: "点击进入爱宠荟",
|
||
},
|
||
{
|
||
title: "优惠券",
|
||
ordernum: "1",
|
||
buyimage: require("../../assets/image/rc-discount.png"),
|
||
usertitle: "查看详情",
|
||
},
|
||
{
|
||
title: "收货地址",
|
||
ordernum: "2",
|
||
buyimage: require("../../assets/image/rc-address.png"),
|
||
usertitle: "查看详情",
|
||
},
|
||
],
|
||
rcrcord: '',
|
||
value: [4, 8],
|
||
|
||
};
|
||
|
||
},
|
||
components: {
|
||
Myheader,
|
||
},
|
||
watch:{
|
||
|
||
},
|
||
methods: {
|
||
userinter(){
|
||
console.log(this.userid);
|
||
if(this.userid!==null||this.userid!==undefined){
|
||
this.$router.push({
|
||
path: "/personal/integral/",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
}else{
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
}
|
||
},
|
||
findall(){
|
||
console.log('PPP');
|
||
console.log(this.userid.length);
|
||
if(this.userid!==null||this.userid!==undefined){
|
||
this.$router.push({
|
||
path: "/personal/useraddress/",
|
||
query: {
|
||
stype: 0,
|
||
},
|
||
});
|
||
}else{
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
}
|
||
|
||
},
|
||
//地址的跳转
|
||
obligation(item,index){
|
||
console.log(index);
|
||
console.log(item);
|
||
|
||
if(this.userid!==null||this.userid!==undefined){
|
||
if(item.title=='待付款'){
|
||
this.$router.push({
|
||
path: "/personal/useraddress",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
|
||
}
|
||
|
||
else if(item.title=='待发货'){
|
||
this.$router.push({
|
||
path: "/personal/useraddress",
|
||
query: {
|
||
stype: 2,
|
||
},
|
||
});
|
||
}
|
||
else if(item.title=='待收货'){
|
||
this.$router.push({
|
||
path: "/personal/useraddress",
|
||
query: {
|
||
stype: 3,
|
||
},
|
||
});
|
||
}
|
||
|
||
}else{
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
}
|
||
|
||
},
|
||
|
||
|
||
|
||
handleClose(){
|
||
this.dialogInfo1=false;
|
||
console.log(this.dialogInfo1);
|
||
},
|
||
open(){
|
||
|
||
},
|
||
ifadroind(){
|
||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||
|
||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||
console.log("当前是电脑打开")
|
||
if(this.userlog==true){
|
||
this.usermessage='关注皇家爱宠荟，修改个人资料',
|
||
this.dialogInfo1=true;
|
||
}else{
|
||
this.dialogInfo1=false;
|
||
this.usermessage='关注皇家爱宠荟，兑换更多福利';
|
||
}
|
||
|
||
}else{
|
||
console.log("当前是手机打开")
|
||
this.dialogInfo1=false;
|
||
}
|
||
},
|
||
openaddress(index){
|
||
console.log(index);
|
||
if(this.userid!==null||this.userid!==undefined){
|
||
if(index==2){
|
||
this.$router.push({
|
||
path: `/useraddress/openaddress/`
|
||
})
|
||
console.log('这是地址的跳转');
|
||
|
||
}
|
||
if(index==0){
|
||
this.userlog=true
|
||
this.ifadroind();
|
||
}
|
||
|
||
if(index==1){
|
||
this.$router.push({
|
||
path: `/personal/discount/`
|
||
})
|
||
console.log('这是地址的跳转');
|
||
|
||
|
||
}
|
||
}else{
|
||
console.log('---=');
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
}
|
||
|
||
},
|
||
|
||
opendialog(){
|
||
|
||
this.ifadroind();
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log(this.islogin)
|
||
console.log(this.userid);
|
||
let userwidth=0;
|
||
this.ifadroind();
|
||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
||
console.log(user)
|
||
if(user!==null){
|
||
console.log('11')
|
||
this.userid=user.data;
|
||
console.log(this.userid);
|
||
this.usertitle=this.userid.memberName;
|
||
|
||
this.rcrcord=this.userid.availiblePoint;
|
||
|
||
if(this.userid.memberLevel==1){
|
||
let userlength=this.userid.availiblePoint.toString().length;
|
||
this.userimage=require('../../assets/image/rc-new.png');
|
||
this.userorder='新手铲屎官';
|
||
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);
|
||
}
|
||
}
|
||
else if(this.userid.memberLevel==2){
|
||
this.userimage=require('../../assets/image/rc-new2.png');
|
||
this.userorder='资深铲屎官';
|
||
this.uservalue=10000;
|
||
this.rcvalue=this.uservalue-this.userid.availiblePoint;
|
||
userwidth=this.userid.availiblePoint/100
|
||
}else if( this.userid.memberLevel==3){
|
||
this.userimage=require('../../assets/image/rc-new1.png');
|
||
this.userorder='金牌铲屎官';
|
||
this.usrnewlist=this.goldmedal;
|
||
userwidth=100
|
||
}
|
||
this.$refs.userblock.style.width=userwidth+'%'
|
||
} else{
|
||
console.log('---');
|
||
this.userid=[];
|
||
}
|
||
|
||
if(this.userid==undefined ||this.userid==''||this.userid==null){
|
||
console.log(this.userid)
|
||
this.islogin=true;
|
||
}
|
||
|
||
|
||
},
|
||
|
||
|
||
};
|
||
</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) {
|
||
|
||
|
||
/deep/.el-dialog {
|
||
width: 352px;
|
||
height: 500px;
|
||
}
|
||
|
||
.rc-header{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-title{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
img{
|
||
width: 210px;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
}
|
||
}
|
||
}
|
||
.rc-main {
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
.rc-usermain{
|
||
h2{
|
||
display: none;
|
||
}
|
||
|
||
}
|
||
.rc-center {
|
||
width: 100%;
|
||
height: 180px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
|
||
.rc-login {
|
||
width: 100%;
|
||
height: 112px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.rc-unlogin{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.rc-userlogin{
|
||
margin-left: 16px;
|
||
|
||
span{
|
||
font-size: 18px;
|
||
color: #333333;
|
||
display: block;
|
||
}
|
||
em{
|
||
font-size: 14px;
|
||
color:#666666;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
}
|
||
.rc-islogin{
|
||
span{
|
||
color: #E1001A;
|
||
font-size: 14px;
|
||
display: block;
|
||
border-bottom: 1px solid #E1001A;
|
||
}
|
||
}
|
||
.rc-people {
|
||
width: 64px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 2px solid #d7d7d7;
|
||
border-radius: 50%;
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
.usercord{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 32px;
|
||
align-items: center;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
padding-bottom: 17px
|
||
;
|
||
|
||
em{
|
||
font-style: normal;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
|
||
}
|
||
span{
|
||
color:#E1001A;
|
||
font-size: 14px;
|
||
display: block;
|
||
border-bottom: 1px solid #E1001A;
|
||
}
|
||
}
|
||
.rc-cordd{
|
||
color:#666666;
|
||
font-size: 14px;
|
||
|
||
span{
|
||
display: block;
|
||
margin-top: 16px;
|
||
text-align: left;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.rc-order{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
padding-bottom: 16px;
|
||
em{
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
span{
|
||
color:#E1001A;
|
||
font-size: 14px;
|
||
display: block;
|
||
border-bottom: 1px solid #E1001A;
|
||
}
|
||
}
|
||
|
||
.rc-obligation{
|
||
margin-top: 16px;
|
||
ul{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
li{
|
||
float: left;
|
||
|
||
}
|
||
img{
|
||
width: 44px;
|
||
height: 44px;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.rc-buy{
|
||
width: 100%;
|
||
height: 64px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
margin-top: 24px;
|
||
.rc-cord{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
img{
|
||
width: 32px;
|
||
height: 32px;
|
||
display: block;
|
||
}
|
||
em{
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
margin-left: 16px;
|
||
|
||
}
|
||
.rc-load{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
span{
|
||
display: block;
|
||
margin-right: 8px;
|
||
margin-top: -4px;
|
||
}
|
||
img{
|
||
width: 8px;
|
||
height: 16px;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//pc端
|
||
|
||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||
/deep/.el-dialog {
|
||
width: 440px;
|
||
height: 652px;
|
||
}
|
||
|
||
.rc-header{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-title{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
img{
|
||
width: 210px;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
}
|
||
}
|
||
}
|
||
.rc-main {
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
.rc-center {
|
||
width: 100%;
|
||
height: 180px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
display: none;
|
||
}
|
||
|
||
.rc-login {
|
||
width: 100%;
|
||
height: 112px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.rc-unlogin{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.rc-userlogin{
|
||
margin-left: 16px;
|
||
|
||
span{
|
||
font-size: 18px;
|
||
color: #333333;
|
||
display: block;
|
||
}
|
||
em{
|
||
font-size: 14px;
|
||
color:#666666;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
}
|
||
.rc-islogin{
|
||
span{
|
||
color: #E1001A;
|
||
font-size: 18px;
|
||
display: block;
|
||
}
|
||
}
|
||
.rc-people {
|
||
width: 64px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 2px solid #d7d7d7;
|
||
border-radius: 50%;
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
.usercord{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 80px;
|
||
border-bottom: 1px solid #D7D7D7;
|
||
em{
|
||
font-style: normal;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
|
||
}
|
||
span{
|
||
color:#E1001A;
|
||
font-size: 18px;
|
||
display: block;
|
||
}
|
||
}
|
||
.rc-cordd{
|
||
color:#333333;
|
||
font-size: 18px;
|
||
height: 133px;
|
||
margin-top: 32px;
|
||
|
||
color:#666666;
|
||
font-size: 14px;
|
||
span{
|
||
margin-top: 16px;
|
||
font-size: 18px;
|
||
text-align: left;
|
||
display: block;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
}
|
||
.rc-order{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
padding-bottom: 28px;
|
||
margin-top: 20px;
|
||
em{
|
||
font-style: normal;
|
||
font-size: 26px;
|
||
color: #333333;
|
||
}
|
||
span{
|
||
color:#E1001A;
|
||
font-size: 18px;
|
||
display: block;
|
||
|
||
}
|
||
}
|
||
|
||
.rc-obligation{
|
||
margin-top: 16px;
|
||
ul{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
li{
|
||
float: left;
|
||
|
||
}
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
display: block;
|
||
}
|
||
}
|
||
span{
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
.rc-usermain{
|
||
h2{
|
||
color: #333333;
|
||
font-size: 26px;
|
||
font-weight: normal;
|
||
display: block;
|
||
padding-bottom: 28px;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
text-align: left;
|
||
|
||
}
|
||
}
|
||
.rc-buymain{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
}
|
||
.rc-buy{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
text-align: center;
|
||
margin-top: 24px;
|
||
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
display: block;
|
||
}
|
||
em{
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #333333;
|
||
}
|
||
.rc-load{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
span{
|
||
display: block;
|
||
margin-right: 8px;
|
||
margin-top: -4px;
|
||
}
|
||
img{
|
||
width: 8px;
|
||
height: 16px;
|
||
display: block;
|
||
}
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |