<template>
|
<div class="user-content">
|
<div class="user-head">
|
<div class="head-left">
|
<van-image
|
lazy-load
|
:src="userLogo" rel="external nofollow"
|
/>
|
</div>
|
<div class="head-right">
|
<p class="userName">{{userInfo.nickname}}</p>
|
<p class="userPhone">{{userInfo.ac_name}}</p>
|
</div>
|
</div>
|
<div class="user-body">
|
<div class="list-li" @click="loginoutEvent">退出登录</div>
|
</div>
|
<Tabbar :active="1"></Tabbar>
|
</div>
|
</template>
|
<script>
|
import { mapActions, mapState } from "vuex";
|
import Tabbar from "@/components/Tabbar";
|
export default {
|
components: { Tabbar },
|
data() {
|
return {
|
userLogo:require('@/assets/images/service.png'),
|
userInfo:""
|
};
|
},
|
created () {
|
this.load();
|
},
|
computed: {
|
...mapState({ token: "token" }),
|
},
|
methods: {
|
...mapActions({
|
loginout: "loginout", // 发送验证码
|
getUserInfo:"getUserInfo", //获取用户信息
|
set_token:"set_token"
|
}),
|
loginoutEvent(){
|
let _this = this;
|
_this.$dialog
|
.confirm({ message: "退出登录确认" })
|
.then(() => {
|
_this.loginout({ query: {} }).then(() => {
|
localStorage.removeItem("token");
|
_this.set_token({});
|
location.href = "/";
|
});
|
})
|
.catch(() => {});
|
},
|
load(){
|
let _this = this;
|
_this.getUserInfo({query:
|
{
|
token:_this.token,
|
}
|
}).then((res) =>{
|
if(res.user_info){
|
_this.userInfo = res.user_info;
|
if(res.user_info.head_img){
|
_this.userLogo = res.user_info.head_img;
|
}
|
}else{
|
|
}
|
}).catch(err => {
|
console.log(err,'失败')
|
_this.$toast.fail(err.msg)
|
});
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.user-content{
|
position: relative;
|
width: 100%;
|
height: 100%;
|
.user-head{
|
width: 750px;
|
height: 360px;
|
background: linear-gradient(180deg,#7ccdff, #4a90e2);
|
display: flex;
|
align-items: center;
|
padding-left: 51px;
|
.head-left{
|
width: 120px;
|
height: 120px;
|
border-radius: 100%;
|
margin-right: 28px;
|
/deep/ .van-image__img{
|
border-radius: 100%;
|
}
|
}
|
.head-right{
|
color: white;
|
font-size: 30px;
|
font-weight: 500;
|
.userName{
|
margin-bottom: 5px;
|
}
|
}
|
}
|
.list-li{
|
background-color: white;
|
height: 90px;
|
text-align: center;
|
line-height: 90px;
|
font-size: 30px;
|
color: #ff3512;
|
margin-top: 20px;
|
}
|
}
|
</style>
|
