313 lines
6.9 KiB
Vue
313 lines
6.9 KiB
Vue
<template>
|
|
<view class="user-page ">
|
|
<u-navbar :is-back="false" :title="title" :title-color="titleColor"
|
|
:background="background" :border-bottom="false" :back-icon-color="backIconColor"></u-navbar>
|
|
<view class="top-section-box">
|
|
<view class="top-box">
|
|
<view class="user-box">
|
|
<view class="user-pic" @click="linkLoginF">
|
|
<image class="upic" :src="userInfo.avatar?userInfo.avatar:''"></image>
|
|
</view>
|
|
<view class="desc-box">
|
|
<view class="name">{{userInfo.name}}</view>
|
|
<view class="tel">{{userInfo.phone|hidePhone}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg_linec"></view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="pdlr18">
|
|
<view class="card-box flex-row">
|
|
<view class="p-list">
|
|
<view class="txt clamp">{{userInfo.username?userInfo.username:'——'}}</view>
|
|
<view class="tit">登录名</view>
|
|
</view>
|
|
<view class="p-list clamp">
|
|
<view class="txt">{{userInfo.department?userInfo.department:'——'}}</view>
|
|
<view class="tit">部门</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="nav_title">系统管理</view>
|
|
<view class="nav-box">
|
|
<view class="nav-list" @click="linnavF('/pages/user/password-edit')">
|
|
<view class="icon_img">
|
|
<u-icon name="lock-open" size="46"></u-icon>
|
|
</view>
|
|
<view class="item-c">
|
|
<view class="tname">修改密码</view>
|
|
<view class="arrow_R"></view>
|
|
</view>
|
|
</view>
|
|
<view v-auth="['endpoint.admin_roles.index']" class="nav-list" @click="linnavF('/pages/system/role')">
|
|
<view class="icon_img">
|
|
<u-icon name="man-add" size="46"></u-icon>
|
|
</view>
|
|
<view class="item-c" >
|
|
<view class="tname">角色管理</view>
|
|
<view class="arrow_R"></view>
|
|
</view>
|
|
</view>
|
|
<view v-auth="['endpoint.admin_users.index']" class="nav-list" @click="linnavF('/pages/system/account')">
|
|
<view class="icon_img">
|
|
<u-icon name="account" size="46"></u-icon>
|
|
</view>
|
|
<view class="item-c">
|
|
<view class="tname">账号管理</view>
|
|
<view class="arrow_R"></view>
|
|
</view>
|
|
</view>
|
|
<view v-auth="['endpoint.operation_log.index']" class="nav-list" @click="linnavF('/pages/system/log')">
|
|
<view class="icon_img">
|
|
<u-icon name="clock" size="46"></u-icon>
|
|
</view>
|
|
<view class="item-c">
|
|
<view class="tname">系统日志</view>
|
|
<view class="arrow_R"></view>
|
|
</view>
|
|
</view>
|
|
<view v-auth="['endpoint.friend_links.index']" class="nav-list" @click="linnavF('/pages/system/links')">
|
|
<view class="icon_img">
|
|
<u-icon name="attach" size="46"></u-icon>
|
|
</view>
|
|
<view class="item-c">
|
|
<view class="tname">友情链接</view>
|
|
<view class="arrow_R"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 退出 -->
|
|
<view class="yr-loginout">
|
|
<u-button type="error" :plain="true" @click="loginOut()">退出系统</u-button>
|
|
</view>
|
|
</view>
|
|
<u-modal v-model="show" :content="content" @confirm="handleLoginOut()" :show-cancel-button="true"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters,mapActions} from 'vuex'
|
|
import {USER_INFO} from '@/store/mutation-types.js'
|
|
import {showLoading,toast,setStorage,stringHide,clearStorageSync} from '@/com/utils.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
title:"个人中心",
|
|
titleColor:"#ffffff",
|
|
backIconColor:"#ffffff",
|
|
background:{
|
|
backgroundColor:"#2a7dc9"
|
|
},
|
|
show:false,
|
|
content:'是否确认退出系统?'
|
|
};
|
|
},
|
|
filters:{
|
|
hidePhone(val){
|
|
if(val){
|
|
return stringHide(val,3,8)
|
|
}
|
|
}
|
|
},
|
|
computed:{
|
|
...mapGetters(['userInfo'])
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
console.log(this.userInfo)
|
|
this.getUserInfo()
|
|
},
|
|
methods:{
|
|
getUserInfo(){
|
|
this.$http.get('/api/users/info').then(({data})=>{
|
|
if(data.code==200){
|
|
let user = data.data.info;
|
|
let userInfo = {...this.userInfo,...user};
|
|
console.log(userInfo,'=====bbb====')
|
|
this.$store.dispatch('USER_INFO',userInfo);
|
|
}
|
|
|
|
}).catch(err=>{
|
|
|
|
})
|
|
},
|
|
linnavF(uri){
|
|
const url = encodeURIComponent(`${uri}`)
|
|
uni.navigateTo({
|
|
url: `/pages/webview/index?url=${url}`,
|
|
})
|
|
// uni.navigateTo({
|
|
// url:url
|
|
// })
|
|
},
|
|
loginOut(){
|
|
this.show = true;
|
|
},
|
|
//退出
|
|
handleLoginOut(){
|
|
this.$http.delete('/api/users/logout').then(({data})=>{
|
|
if(data.code==200){
|
|
clearStorageSync();
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
}else{
|
|
toast('退出失败');
|
|
}
|
|
}).catch(()=>{
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top-section-box{
|
|
.top-box{
|
|
background-color: #2a7dc9;
|
|
}
|
|
.user-box{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
.user-pic{
|
|
flex: 0 0 134rpx;
|
|
width: 134rpx;
|
|
height: 134rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #FFFFFF;
|
|
.upic{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.desc-box{
|
|
flex: 1;
|
|
width: 0;
|
|
color: #FFFFFF;
|
|
padding-left: 24rpx;
|
|
.name{
|
|
font-size: 34rpx;
|
|
}
|
|
.tel{
|
|
font-size: 34rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.bg_linec{
|
|
width: 100%;
|
|
height: 110rpx;
|
|
background-color: #2a7dc9;
|
|
border-radius: 0 0 100% 100%;
|
|
margin-top: -60rpx;
|
|
}
|
|
.content-box{
|
|
padding: 0 20rpx;
|
|
.card-box{
|
|
min-height: 170rpx;
|
|
padding: 30rpx 20rpx;
|
|
background-color: #FFFFFF;
|
|
margin-bottom: 20rpx;
|
|
margin-top: -50rpx;
|
|
border-radius: 12rpx;
|
|
box-shadow:0 0 20rpx rgba(0,0,0,0.15);
|
|
justify-content: center;
|
|
.p-list{
|
|
margin: 10rpx 0;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
width: 33%;
|
|
text-align: center;
|
|
.tit{
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.txt{
|
|
color: #888;
|
|
}
|
|
}
|
|
}
|
|
.nav_title{
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
// font-weight: bold;
|
|
font-size: 24rpx;
|
|
}
|
|
.nav-box{
|
|
padding-top: 24rpx;
|
|
background-color: #FFFFFF;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
padding-bottom: 24rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
.nav-list{
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
padding-left: 10rpx;
|
|
position: relative;
|
|
&::after{
|
|
content:'';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
transform: scaleY(.5);
|
|
}
|
|
.icon_img{
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-right: 20rpx;
|
|
color: #666;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.item-c{
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-right: 36rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.arrow_R{
|
|
width: 15rpx;
|
|
height: 25rpx;
|
|
background: url(../../static/img/my_arrow_right.png) no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
&.noBorder{
|
|
.item-c{
|
|
&::after{
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.yr-loginout{
|
|
margin-top: 140rpx;
|
|
}
|
|
</style>
|