234 lines
6.2 KiB
Vue
234 lines
6.2 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="top-view">
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info">
|
|
<view class="avatar-wrapper">
|
|
<image class="avatar" :src="headPortraitUrl" mode="aspectFill" @error="avatarError"></image>
|
|
</view>
|
|
<view class="user-detail">
|
|
<view class="username">{{userName}}</view>
|
|
<view class="phone">{{phonenumber}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="center-box">
|
|
<!-- 我的服务区域 -->
|
|
<view class="services">
|
|
<view class="grid-container">
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/proxyManage/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/people-right.png"></image>
|
|
<text class="icon-text">代办人管理</text>
|
|
</view>
|
|
<view style="padding-right: 40rpx;">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/changPassword/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/Key.png"></image>
|
|
<text class="icon-text">修改密码</text>
|
|
</view>
|
|
<view style="padding-right: 40rpx;">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/feedback/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/Help.png"></image>
|
|
<text class="icon-text">问题反馈</text>
|
|
</view>
|
|
<view style="padding-right: 40rpx;">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/aboutMe/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/Attention.png"></image>
|
|
<text class="icon-text">关于证途通</text>
|
|
</view>
|
|
<view style="padding-right: 40rpx;">
|
|
<image style="width: 40rpx;height: 40rpx;" src="/static/images/my/arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-button shape="circle" color="#3888FF" @click="onLoginOut" style="width: 90%;margin: 0 auto;height: 40px;position:absolute;bottom: 50px;left: 5%;font-size: 30rpx;">
|
|
退出登录
|
|
</u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserHeaderPhoto,saveUserHeaderPhoto,uploadAvatar,getUserInfo} from "@/api/system/user";
|
|
import ImageCompressor from 'image-compressor.js';
|
|
import Cookies from "js-cookie";
|
|
import { pathToBase64, base64ToPath } from 'image-tools';
|
|
export default {
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
userName: "admin",
|
|
phonenumber:"18355171062",
|
|
headPortraitUrl:"/static/images/my/face.png",
|
|
defaultImg: '/static/images/my/face.png',
|
|
list: [{
|
|
name: '上传头像',
|
|
val: 1
|
|
}, {
|
|
name: '查看头像',
|
|
val: 2
|
|
}],
|
|
accountAllBal: 0 ,// 钱包余额
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
getUserInfo().then(res => {
|
|
this.headPortraitUrl= res.user.avatar||"/static/images/my/face.png";
|
|
this.userName = res.user.userName;
|
|
this.phonenumber = res.user.phonenumber;
|
|
})
|
|
},
|
|
//退出
|
|
onLoginOut() {
|
|
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
|
Cookies.remove('token')
|
|
Cookies.remove('App-Token')
|
|
uni.removeStorageSync('token')
|
|
uni.removeStorageSync('App-Token')
|
|
uni.reLaunch({ url: '/pages/login' })
|
|
// this.$store.dispatch('LogOut').then(() => {
|
|
// Cookies.remove('token')
|
|
// Cookies.remove('App-Token')
|
|
// uni.reLaunch({ url: '/pages/login' })
|
|
// })
|
|
})
|
|
},
|
|
navigateTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
},
|
|
// onUnload() {
|
|
// uni.switchTab({
|
|
// url: '/pages/index'
|
|
// })
|
|
// },
|
|
// onBackPress(e) {
|
|
// //e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
|
|
// if (e.from === 'backbutton') {
|
|
// //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
|
|
// uni.switchTab({
|
|
// url: '/pages/index'
|
|
// })
|
|
// //如果要限制必须写成true
|
|
// return true;
|
|
// }
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.top-view{
|
|
width: 100%;
|
|
height: 30vh;
|
|
background: linear-gradient( 180deg, #3888FF 0%, rgba(56,136,255,0) 100%);
|
|
position: relative;
|
|
}
|
|
.user-info {
|
|
height: 26vh;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
|
|
.avatar-wrapper {
|
|
margin-right: 30rpx;
|
|
|
|
.avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 40px;
|
|
}
|
|
}
|
|
|
|
.user-detail {
|
|
flex: 1;
|
|
|
|
.username {
|
|
margin-left: 15px;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #FFF;
|
|
}
|
|
.phone{
|
|
margin-left: 15px;
|
|
margin-top:15px;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
.star-icon {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
.header {
|
|
padding: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
.header-text {
|
|
font-size: 38rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.center-box{
|
|
// margin-top: 30rpx;
|
|
width: 100%;
|
|
height: 74vh;
|
|
background: rgba(255,255,255,0.3);
|
|
opacity: 0.8;
|
|
border-radius: 80rpx 80rpx 0rpx 0rpx;
|
|
border: 1px solid #fff;
|
|
margin-top: -10vh;
|
|
padding: 20rpx 20rpx;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.services {
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
.grid-container {
|
|
width: 100%;
|
|
height: auto;
|
|
.grid-item {
|
|
width: 100%;
|
|
height: 6vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid rgba(209,211,215,0.5);
|
|
.icon-wrapper {
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 40rpx;
|
|
}
|
|
.icon-text {
|
|
margin-left: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #2A2B2F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |