325 lines
7.7 KiB
Vue
325 lines
7.7 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="container">
|
|
<!-- 顶部标题 -->
|
|
<!-- <view class="header">
|
|
<text class="title">我的</text>
|
|
</view> -->
|
|
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info">
|
|
<view class="avatar-wrapper" @click="avatarClick()">
|
|
<image class="avatar" :src="headPortraitUrl ? headPortraitUrl : defaultFace" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="user-detail">
|
|
<text class="username">{{custName}}</text>
|
|
<view style="color: #666;font-size: 12px;padding: 4px 10px;">{{orgFullName}}</view>
|
|
</view>
|
|
<view class="star-icon" @click="goCollectPage">
|
|
<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">
|
|
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/personalInfo.png"></image>
|
|
</view>
|
|
<text class="icon-text">个人信息</text>
|
|
</view>
|
|
|
|
<!-- 通知公告 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/announcement/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
|
|
</view>
|
|
<text class="icon-text">通知公告</text>
|
|
</view>
|
|
|
|
<!-- 投诉建议 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/feedback/evaluate')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 120rpx;height: 120rpx;" 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">
|
|
<image style="width: 120rpx;height: 120rpx;" 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">
|
|
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/report.png"></image>
|
|
</view>
|
|
<text class="icon-text">健康监测</text>
|
|
</view>
|
|
|
|
<!-- 电子餐券 -->
|
|
<view class="grid-item" @click="navigateTo('/pages/mine/coupon/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/coupon.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 {
|
|
getUserHeaderPhoto,saveUserHeaderPhoto,
|
|
uploadAvatar,
|
|
} from "@/api/system/user"
|
|
import config from '@/config'
|
|
import { showConfirm } from '@/utils/common'
|
|
import { uploadBase64 } from "@/api/upload"
|
|
import { pathToBase64, base64ToPath } from 'image-tools';
|
|
export default {
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
orgFullName:uni.getStorageSync('orgFullName') || '',
|
|
custName: "zzz",
|
|
headPortraitUrl:"",
|
|
defaultFace: '/static/images/my/face.png',
|
|
avatarShow: false,
|
|
list: [{
|
|
name: '上传头像',
|
|
val: 1
|
|
}, {
|
|
name: '查看头像',
|
|
val: 2
|
|
}]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.custName = uni.getStorageSync('custName') ? uni.getStorageSync('custName') : ""
|
|
this.getUserHeaderImg()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
getUserHeaderImg() {
|
|
getUserHeaderPhoto({"custId":uni.getStorageSync('custId'),"sourceType": "7"}).then(res => {
|
|
console.log(res)
|
|
this.headPortraitUrl=res.headPortraitUrl;
|
|
if(!this.headPortraitUrl) {
|
|
this.headPortraitUrl = this.defaultFace
|
|
}
|
|
})
|
|
},
|
|
avatarClick() {
|
|
this.avatarShow = true
|
|
},
|
|
avatarSelect(e) {
|
|
if (e.val == 1) {
|
|
//上传头像
|
|
uni.chooseImage({//选择图片
|
|
count: 1,
|
|
success: resImage => {
|
|
console.log(resImage)
|
|
// this.headPortraitUrl = resImage.tempFilePaths[0]
|
|
//转base64
|
|
this.imgToBase64(resImage.tempFilePaths[0]).then(base64 => {
|
|
console.log(base64)
|
|
//base64上传
|
|
this.uploadHeadImg(base64)
|
|
})
|
|
}
|
|
});
|
|
}else if(e.val == 2) {
|
|
//查看头像
|
|
uni.previewImage({
|
|
urls: [this.headPortraitUrl]
|
|
});
|
|
}
|
|
},
|
|
imgToBase64(data) {
|
|
return new Promise((resolve, reject) => {
|
|
pathToBase64(data).then(base64 => {
|
|
resolve(base64)
|
|
}).catch(error => {
|
|
console.error(error)
|
|
reject(error)
|
|
})
|
|
})
|
|
},
|
|
//base64上传
|
|
uploadHeadImg(base64){
|
|
let param = {
|
|
"MERCHANT-ID":"378915229716713472",
|
|
"uploadKey":'cust',
|
|
"base64File":base64
|
|
}
|
|
uploadBase64(param).then(res => {
|
|
console.log(res)
|
|
if(res.code==200){
|
|
this.saveHeadImg(res.data)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//头像保存接口
|
|
async saveHeadImg(data){
|
|
let param = {
|
|
"headPortraitUrl": data.fileNameUrl,
|
|
"custId": uni.getStorageSync('custId')
|
|
}
|
|
const res = await saveUserHeaderPhoto(param)
|
|
if(res.code==200){
|
|
uni.showToast({
|
|
title: "上传成功",
|
|
icon: 'none'
|
|
})
|
|
setTimeout(()=>{
|
|
this.getUserHeaderImg()
|
|
},200)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
},
|
|
goCollectPage(){
|
|
uni.navigateTo({url: "/pages/mine/collect/index"})
|
|
},
|
|
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">
|
|
.container {
|
|
height: 90vh;
|
|
background-color: #F9FBFF;
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
.header {
|
|
padding: 14px 16px 16px;
|
|
background: #F9FBFF;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
background: #fff;
|
|
margin-bottom: 20px;
|
|
|
|
.avatar-wrapper {
|
|
margin-right: 12px;
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
}
|
|
}
|
|
|
|
.user-detail {
|
|
flex: 1;
|
|
|
|
.username {
|
|
margin-left: 12px;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.star-icon {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.services {
|
|
background: #fff;
|
|
padding: 16px;
|
|
height: 80vh;
|
|
|
|
.services-title {
|
|
font-size: 32rpx;
|
|
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: 28rpx;
|
|
color: #0F274B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |