286 lines
7.4 KiB
Vue
286 lines
7.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 顶部标题 -->
|
|
<!-- <view class="header">
|
|
<text class="title">我的</text>
|
|
</view> -->
|
|
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info">
|
|
<view class="avatar-wrapper">
|
|
<image class="avatar" @click="avatarClick()" :src="userInfo.avatar" mode="aspectFill" @error="avatarError"></image>
|
|
</view>
|
|
<view class="user-detail">
|
|
<text class="username">{{userInfo.nickName}}</text>
|
|
</view>
|
|
<view class="star-icon">
|
|
<uni-icons type="star" size="24" color="#ff9900"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的服务区域 -->
|
|
<view class="services">
|
|
<text class="services-title">我的服务</text>
|
|
<view class="grid-container">
|
|
<!-- 个人信息 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/me/index')">
|
|
|
|
<view class="icon-wrapper">
|
|
<!-- <uni-icons type="person" size="24" color="#666"></uni-icons>-->
|
|
<image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
|
|
</view>
|
|
<text class="icon-text">个人信息</text>
|
|
</view>
|
|
|
|
<!-- 通知公告 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/announcement/index')">
|
|
<view class="icon-wrapper">
|
|
<!-- <uni-icons type="notification" size="24" color="#666"></uni-icons>-->
|
|
<image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
|
|
</view>
|
|
<text class="icon-text">通知公告</text>
|
|
</view>
|
|
|
|
<!-- 投诉建议 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/feedback/index')">
|
|
<view class="icon-wrapper">
|
|
<!-- <uni-icons type="chat" size="24" color="#666"></uni-icons>-->
|
|
<image style="width: 28px;height: 28px;" src="/static/images/my/complaints.png"></image>
|
|
</view>
|
|
<text class="icon-text">投诉建议</text>
|
|
</view>
|
|
|
|
<!-- 食堂评价 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/review/index')">
|
|
<view class="icon-wrapper">
|
|
<!-- <uni-icons type="star" size="24" color="#666"></uni-icons>-->
|
|
<image style="width: 28px;height: 28px;" src="/static/images/my/evaluation.png"></image>
|
|
</view>
|
|
<text class="icon-text">食堂评价</text>
|
|
</view>
|
|
|
|
<!-- 体检报告 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/survey/index')">
|
|
<view class="icon-wrapper">
|
|
<!-- <uni-icons type="help" size="24" color="#666"></uni-icons>-->
|
|
<image style="width: 28px;height: 28px;" src="/static/images/my/report.png"></image>
|
|
</view>
|
|
<text class="icon-text">体检报告</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-action-sheet :actions="list" :show="avatarShow" safeAreaInsetBottom closeOnClickOverlay cancelText="取消"
|
|
round="10" @close="avatarShow = false" @select="avatarSelect"></u-action-sheet>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserProfile,
|
|
uploadAvatar
|
|
} from "@/api/system/user"
|
|
import config from '@/config'
|
|
import { getToken } from '@/utils/auth'
|
|
import { showConfirm } from '@/utils/common'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
defaultImg: '/static/images/my/face.png',
|
|
avatarShow: false,
|
|
list: [{
|
|
name: '上传头像',
|
|
val: 1
|
|
}, {
|
|
name: '查看头像',
|
|
val: 2
|
|
}]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.userInfo = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : {}
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
avatarClick() {
|
|
this.avatarShow = true
|
|
},
|
|
|
|
avatarSelect(e) {
|
|
if (e.val == 1) {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: chooseImageRes => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
uni.uploadFile({
|
|
url: config.baseUrl + '/system/user/profile/avatar',
|
|
filePath: chooseImageRes.tempFilePaths[0],
|
|
name: 'avatarfile',
|
|
header: {
|
|
'Authorization': 'Bearer ' + getToken()
|
|
},
|
|
success: (uploadFileRes) => {
|
|
console.log(uploadFileRes);
|
|
if(uploadFileRes.statusCode == 200) {
|
|
let reslut = JSON.parse(uploadFileRes.data)
|
|
console.log('reslut',reslut)
|
|
if(reslut.code == 200) {
|
|
uni.showToast({ title: reslut.msg,icon: 'none' });
|
|
this.getUserInfo()
|
|
}else{
|
|
uni.showToast({ title: reslut.msg,icon: 'none' });
|
|
}
|
|
}else if(uploadFileRes.statusCode == 401) {
|
|
showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
|
|
if (res.confirm) {
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
}
|
|
})
|
|
}else{
|
|
uni.showToast({ title: uploadFileRes.errMsg,icon: 'none' });
|
|
}
|
|
uni.hideLoading()
|
|
},
|
|
fail: (uploadFileErr) => {
|
|
let { message } = uploadFileErr
|
|
if (message == 'Network Error') {
|
|
message = '后端接口连接异常'
|
|
} else if (message.includes('timeout')) {
|
|
message = '系统接口请求超时'
|
|
} else if (message.includes('Request failed with status code')) {
|
|
message = '系统接口' + message.substr(message.length - 3) + '异常'
|
|
}
|
|
uni.showToast({ title: message,icon: 'none' });
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}else if(e.val == 2) {
|
|
uni.previewImage({
|
|
urls: [this.userInfo.avatar]
|
|
});
|
|
}
|
|
},
|
|
|
|
getUserInfo() {
|
|
getUserProfile().then(res => {
|
|
this.userInfo = res.user
|
|
if(!this.userInfo.avatar) {
|
|
this.userInfo.avatar = this.defaultImg
|
|
}
|
|
console.log('this.userInfo',this.userInfo)
|
|
uni.setStorageSync('userInfo', this.userInfo)
|
|
})
|
|
},
|
|
|
|
avatarError(e) {
|
|
console.log(e)
|
|
if (e.type == 'error') {
|
|
this.userInfo.avatar = this.defaultImg
|
|
}
|
|
},
|
|
|
|
navigateTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
min-height: 10vh;
|
|
background-color: #F9FBFF;
|
|
}
|
|
|
|
.header {
|
|
padding: 14px 16px 16px;
|
|
background: #F9FBFF;
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
background: #fff;
|
|
margin-bottom: 10px;
|
|
|
|
.avatar-wrapper {
|
|
margin-right: 12px;
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
}
|
|
}
|
|
|
|
.user-detail {
|
|
flex: 1;
|
|
|
|
.username {
|
|
margin-left: 12px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.star-icon {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.services {
|
|
background: #fff;
|
|
padding: 16px;
|
|
|
|
.services-title {
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin-bottom: 26px;
|
|
|
|
font-weight: 400;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.icon-wrapper {
|
|
width: 48px;
|
|
height: 48px;
|
|
//border-radius: 24px;
|
|
//background: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.icon-text {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |