zhgdyunapp_vue3/pages/my/userInfo/userInfo.vue

<template>
	<view class="userInfo">
		<headers :showBack="true">
			<view class="headerName">
				个人中心
			</view>
		</headers>
		<view class="userBox">
			<!-- <image class="userImg" :src="defaultImg" @click="changeImg"></image> -->
			<u-image :src="defaultImg" @click="changeImg" style="width: 104rpx;height: 104rpx;" shape="circle"
				mode="scaleToFill">
				<image slot="error" class="userImg" src="@/static/userImg.png"></image>
			</u-image>
			<text v-if="uid">{{userInfo.realName}}</text>
			<text v-else>{{userInfo.account}}</text>
		</view>
		<view class="userInfo-boxs">
			<view class="userInfo-box">
				<view>账号名称</view>
				<view>{{uid ? userInfo.realName : userInfo.account}}</view>
			</view>
			<view class="userInfo-box">
				<view>姓名</view>
				<view>{{userInfo.realName ? userInfo.realName : ''}}</view>
			</view>
			<view class="userInfo-box">
				<view>性别</view>
				<view>{{userInfo.sex == 1?'男' : userInfo.sex == 2?'女':''}}</view>
			</view>
			<view class="userInfo-box">
				<view>电话号码</view>
				<view>{{userInfo.userTel ? userInfo.userTel : ''}}</view>
			</view>
			<view class="userInfo-box">
				<view>电子邮箱</view>
				<view>{{userInfo.personMail ? userInfo.personMail : '暂无邮箱,请修改个人信息'}}</view>
			</view>
			<view class="userInfo-box" @click="goChangePassword()">
				<view>修改密码</view>
				<view><uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2></view>
			</view>
			<view class="userInfo-box" @click="goChangeInfo()">
				<view>修改个人信息</view>
				<view><uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2></view>
			</view>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../../components/headers/headers.vue'
	export default {
		components: {
			headers
		},
		data() {
			return {
				userInfo: {},
				ui: "",
				defaultImg: "../../../static/userImg.png"
			}
		},
		onLoad() {
			this.uid = uni.getStorageSync('UID');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.log(this.userInfo);
		},
		onShow() {
			this.getInfoFn();
		},
		methods: {
			// 修改个人信息
			updateInfoFn() {
				let that = this;
				this.sendRequest({
					url: "xmgl/systemUser/edit",
					data: {
						...this.userInfo
					},
					method: "POST",
					success(res) {
						uni.showToast({
							title: "修改成功"
						})
						let originUserInfo = JSON.parse(uni.getStorageSync("userInfo"))
						uni.setStorageSync("userInfo", JSON.stringify({
							...originUserInfo,
							...that.userInfo
						}))
					}
				})
			},
			// 获取个人信息
			getInfoFn() {
				let that = this;
				this.sendRequest({
					url: "xmgl/systemUser/queryById",
					data: {
						id: this.userInfo.userId
					},
					method: "POST",
					success(res) {
						console.log(res)
						that.userInfo = {
							...res.result
						};
						if (that.userInfo.avatar) {
							that.defaultImg = that.url_config + 'image/' + res.result.avatar
						} else {
							that.defaultImg = "../../../static/userImg.png"
						}
					}
				})
			},
			changeImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.userInfo.avatar = data.url;
								that.defaultImg = that.url_config + 'image/' + data.url
								that.updateInfoFn();
								console.log("上传图片的信息：", that.defaultImg)
							}
						});
					}
				})
			},
			goChangeInfo() {
				uni.navigateTo({
					url: '/pages/my/changeInfo/changeInfo',
				})
			},
			goChangePassword() {
				console.log(11);
				uni.navigateTo({
					url: '/pages/my/changePassword/changePassword',
				})
			},
		}
	}
</script>

<style scoped>
	.userInfo {
		background-color: #F4F5FE;
		height: 100vh;
	}

	.userBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 80rpx 40rpx;
		font-size: 40rpx;
		background-color: white;
	}

	.userImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* margin-right: 20rpx; */
	}

	.userInfo-boxs {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		background-color: white;
	}

	.userInfo-box {
		height: 116rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.userInfo-boxs>.userInfo-box:last-child {
		border-bottom: 2rpx solid #F4F5FE;
	}
</style>