mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
437 lines
11 KiB
Vue
437 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
<!-- <tabs></tabs> -->
|
||
<div class="rc-top"></div>
|
||
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
|
||
<div class="rc-column">
|
||
<!-- <div class="rc-title">
|
||
<img src="../../assets/image/rc-cat.png" alt="" />
|
||
<span>{{ userorder }}</span>
|
||
</div> -->
|
||
<div class="rc-max-width--xl">
|
||
<div class="rc-center">
|
||
<img :src='userimage' />
|
||
</div>
|
||
</div>
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<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/`" class="ts-right-arr">
|
||
<span>会员权益</span>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="online bold"></div>
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="usercord">
|
||
<em>当前积分:{{ rcrcord }}</em>
|
||
<span class="ts-right-arr" @click="userinter">积分明细</span>
|
||
</div>
|
||
|
||
<div class="rc-cordd">
|
||
<span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
|
||
<div class="block">
|
||
<div class="ts-point-tag rc-md-up">0</div>
|
||
<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>
|
||
<div class="online bold"></div>
|
||
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="rc-order">
|
||
<em>我的订单</em>
|
||
|
||
|
||
<span class="ts-right-arr" @click="findall" >查看全部</span>
|
||
|
||
</div>
|
||
<div class="rc-obligation rc-max-width--lg">
|
||
<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>
|
||
|
||
<div class="online bold"></div>
|
||
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="rc-usermain">
|
||
<h2>服务工具</h2>
|
||
<div class="rc-buymain rc-max-width--lg ts-special-padding">
|
||
<div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(item,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 class="online bold"></div>
|
||
<div class="ts-btn" v-if="!islogin">
|
||
<div class="ts-standard-btn center" @click="logout">退出登录</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:visible.sync="dialogInfo1"
|
||
hegight="700px"
|
||
:before-close="handleClose"
|
||
@open="open"
|
||
>
|
||
<div class="rc-full-width rc-max-width--xl rc-text--center">
|
||
<div class="rc-title rc-text--center rc-margin-bottom--md">
|
||
<img src="../../assets/error.png" alt="">
|
||
</div>
|
||
<div class="rc-logmain">
|
||
<h3>温馨提示</h3>
|
||
<span>{{usermessage}}</span>
|
||
|
||
</div>
|
||
|
||
<div class="userer">
|
||
<img src="/images/qrcode-aichong.jpg" alt="" class="rc-margin-y--xs">
|
||
<span>微信扫一扫，识别二维码</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
|
||
|
||
<FixRight></FixRight>
|
||
<MyFooter></MyFooter>
|
||
</div>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from '~/components/header.vue'
|
||
import MyFooter from '~/components/rc-footer.vue'
|
||
import FixRight from "~/components/fixed-right.vue";
|
||
import tabs from "@/components/tabs.vue";
|
||
import { mapMutations } from "vuex";
|
||
export default {
|
||
middleware: 'metaTitle',
|
||
// middleware: 'metaTitle',
|
||
meta: {title: '个人中心'},
|
||
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,
|
||
MyFooter,
|
||
tabs,
|
||
FixRight
|
||
},
|
||
watch:{
|
||
|
||
},
|
||
methods: {
|
||
...mapMutations(["logoutSystem","checkIsLogin"]),
|
||
logout() {
|
||
this.logoutSystem();
|
||
this.$router.push({
|
||
path: "/",
|
||
});
|
||
},
|
||
userinter(){
|
||
let user= this.$store.state.userInfo;
|
||
if(!user){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
} else {
|
||
this.$router.push({
|
||
path: "/personal/integral/",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
}
|
||
},
|
||
findall(){
|
||
console.log('PPP');
|
||
console.log(this.userid.length);
|
||
|
||
let user= localStorage.getItem("userInfo");
|
||
if(user==undefined||user==null||user==''){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
|
||
}else{
|
||
this.$router.push({
|
||
path: "/personal/useraddress/",
|
||
query: {
|
||
stype: 0,
|
||
},
|
||
});
|
||
}
|
||
|
||
},
|
||
//地址的跳转
|
||
obligation(item,index){
|
||
console.log(index);
|
||
console.log(item);
|
||
let user= localStorage.getItem("userInfo");
|
||
if(user==undefined||user==null||user==''){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
|
||
|
||
}else{
|
||
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,
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
|
||
|
||
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)) {
|
||
if(this.userlog==true){
|
||
this.usermessage='关注皇家爱宠荟，修改个人资料',
|
||
this.dialogInfo1=true;
|
||
}else{
|
||
this.dialogInfo1=false;
|
||
this.usermessage='关注皇家爱宠荟，兑换更多福利';
|
||
}
|
||
return false;
|
||
} else {
|
||
this.dialogInfo1=false;
|
||
return true;
|
||
}
|
||
},
|
||
openaddress(item,index){
|
||
let user= localStorage.getItem("userInfo");
|
||
if(user==undefined||user==null||user==''){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return
|
||
|
||
}else{
|
||
if(item.title=='收货地址'){
|
||
this.$router.push({
|
||
path: `/useraddress/openaddress/`
|
||
})
|
||
}
|
||
if(index==0){
|
||
this.userlog=true
|
||
let isMobile = this.ifadroind();
|
||
if(isMobile)
|
||
window.location.href="weixin://dl/business/?t=BE1OA2AngRs";
|
||
}
|
||
|
||
if(index==1){
|
||
this.$router.push({
|
||
path: `/personal/discount/`
|
||
})
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
opendialog(){
|
||
|
||
this.ifadroind();
|
||
}
|
||
},
|
||
mounted() {
|
||
this.checkIsLogin();
|
||
let userwidth=0;
|
||
this.ifadroind();
|
||
let user= this.$store.state.userInfo;
|
||
if(user){
|
||
this.userid=user.data;
|
||
this.islogin=false;
|
||
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+'%';
|
||
let tagEle=document.querySelector('.ts-point-tag');
|
||
if(tagEle){
|
||
tagEle.innerText=this.userid.availiblePoint;
|
||
let tagEleLeft=userwidth-1;
|
||
if(tagEleLeft<=0)
|
||
tagEleLeft=0;
|
||
tagEle.style.left=tagEleLeft+"%";
|
||
}
|
||
} else {
|
||
this.userid='';
|
||
}
|
||
|
||
if(this.userid==undefined ||this.userid==''||this.userid==null){
|
||
this.islogin=true;
|
||
}
|
||
},
|
||
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import url("@/assets/css/global.less");
|
||
@import url("@/assets/css/mypersonal.less");
|
||
</style> |