sooka_consult_uniapp/pages/me/me.vue

<template>
	<!-- pages/me.wxml -->
	<view class="uni-container" style="padding: 0;">
		<view class="uni-header-logo header-custom">
			<img
				@headImg="uploadHeadImg"
				@click="updateImg"
				class="uni-header-image"
				:src="!initInfo.headImg || initInfo.headImg == '' ? loadImgSrcLocalhost(testPic) : loadImgSrcLocalhost(initInfo.headImg)"
				style="margin-left: 5%;border-radius: 45px;border: 1px solid #89DDFF;"
			/>
			<view class="userInfo">
				<span>{{ initInfo.name == null || initInfo.name == '' ? initInfo.wechatName : initInfo.name }}</span>
				<text>积分：{{ initInfo.scoreNum }}</text>
			</view>
		</view>
		<view class="panel-contain">
			<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="goDetailPage(item.id)">
					<text class="uni-panel-text">{{ item.name }}</text>
					<text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{ item.pages ? '&#xe581;' : '&#xe470;' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getScore, getUserInfo, uploadHeadImg } from '@/api/me/me.js';
import { getToken } from '@/utils/auth';
export default {
	data() {
		return {
			testPic:'/profile/upload/2024/03/14/9dvR5kqPY4D64a27be3ba1f2bd3095eaa1ad61221bed_20240314150249A005.jpg',
			headers: {
				Authorization: 'Bearer ' + getToken()
			},
			initImgPath: 'https://sookajs.top:8888/profile/upload/moren.png',
			initInfo: {
				id: getApp().globalData.userId,
				scoreNum: 0,
				wechatName: '微信用户',
				name: null,
				headImg: null
			},
			list: [
				{
					id: 'me/meOperate/meOperate', //id是文件路径
					name: '积分流水',
					open: false
				},
				{
					id: 'demo/wenba/wenba',
					name: '我的问答',
					open: false
				},
				{
					id: 'me/nameAuthentication/nameAuthentication',
					name: '实名认证',
					open: false
				},
				{
					id: 'me/officialAuthentication/officialAuthentication',
					name: '官方认证',
					open: false
				},
				{
					id: 'matters/matters',
					name: '我的事项',
					open: false
				},
				{
					id: 'me/myPayKnow/myPayKnow',
					name: '付费知识',
					open: false
				}
			],
		};
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {
		this.getUserInfoByUserId(this.initInfo.id);
		this.getScoreForMe(this.initInfo.id);
	},
	methods: {
		goDetailPage(e) {
			const url = '/pages/' + e;
			uni.navigateTo({
				url: url
			});
		},
		//获取用户信息：用户名称：头像
		getUserInfoByUserId(userId) {
			console.log(userId)
			getUserInfo(userId).then((res) => {
				this.initInfo.wechatName = res.data.wechatName;
				this.initInfo.name = res.data.name;
				this.initInfo.headImg = res.data.headImg;
			});
		},
		//获取当前积分
		getScoreForMe(userId) {
			console.log(userId)
			getScore(userId).then((res) => {
				this.initInfo.scoreNum = res.data.scoreNum;
			});
		},
		updateImg() {
			let _this = this;
			uni.chooseImage({
				success(resp) {
					uni.uploadFile({
						url: _this.$HTTP + `/common/upload`,
						filePath: resp.tempFilePaths[0],
						name: 'file',
						formData: {},
						header: _this.headers,
						success: (res) => {
							// 判断是否json字符串，将其转为json格式
							let data = JSON.parse(res.data);
							if (![200].includes(data.code)) {
								_this.$modal.msg(data.msg);
							} else {
								_this.initInfo.headImg = data.fileName;
								_this.uploadImg();
								_this.$modal.msg('更新成功');
							}
						},
						fail: (e) => {
							debugger;
							console.log(e);
							_this.$modal.msg('上传失败！');
						}
					});
				}
			});
		},
		uploadImg(){
			//更新数据库
			uploadHeadImg(this.initInfo).then((res) => {
				console.log(res);
				if (res.code === 200) {
					console.log(this.initInfo)
				}
			});
		}
	}
};
</script>
<style>
@import './me.css';
.header-custom{
	margin: 0;
	padding: 0;
	background-color: #07C160;
	height: 30vh;
	padding-top: 8%;
}
.panel-contain{
	position: absolute;
	top: 25%;
	z-index: 100;
	width: 100%;
	height: 75vh;
	padding-top: 30%;
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
	background-color: #fff;
}
.uni-panel {
	position: relative;
    width: 90%;
    margin: auto;
    margin-bottom: 12px;
	border-bottom: 3px solid #FCFCFC;
}
.uni-panel::after{
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	top: 28%;
	right: 0%;
	background: url('@/static/images/more/enter.png');
	background-size: 100% 100%;
}
.userInfo{
	position: absolute;
	top: 7%;
	left: 32%;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}
.userInfo text {
	display: block;
	margin-top: 11%;
	font-size: 15px;
	font-weight: 100;
}
</style>