Dining_Hall/pages/mine/me/basicInfo.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!--    <view class="header">-->
		<!--      <view class="back-icon" @click="goBack">-->
		<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
		<!--      </view>-->
		<!--      <text class="title">基本信息</text>-->
		<!--    </view>-->

		<!-- 个人信息表单 -->
		<view class="form-container">
			<!-- 头像区域 -->
			<view class="avatar-section" @click="handleUpdateAvatar">
				<image class="avatar" :src="userInfo.avatar ? userInfo.avatar : defaultFace" mode="aspectFill"></image>
				<view class="camera-icon">
					<image class="icon" :src="require('@/static/images/my/camera.png')" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 信息列表 -->
			<view class="info-list">
				<!-- 姓名 -->
				<view class="info-item">
					<text class="label">姓名</text>
					<view class="value-wrapper">
						<text class="value">{{userInfo.nickName}}</text>
						<image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 手机号 -->
				<view class="info-item" @click="navigateTo('/pages/mine/me/bindingPhone')">
					<text class="label">手机号</text>
					<view class="value-wrapper">
						<text class="value">{{userInfo.phonenumber}}</text>
						<image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 生日 -->
				<view class="info-item">
					<text class="label">生日</text>
					<view class="value-wrapper" @click="selectBirthDay()">
						<text class="value" :class="userInfo.birthDay? '' :'placeholder'">{{userInfo.birthDay || '填写生日完善信息'}}</text>
						<image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<u-datetime-picker :minDate="minDate" :maxDate="maxDate" :show="dateShow" v-model="defaultDate" mode="date"
				:closeOnClickOverlay="true" :formatter="formatter" @cancel="dateShow = false" @confirm="birthDayConfirm">
			</u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import {
		getUserProfile,
		uploadAvatar,
		updateUserProfile
	} from "@/api/system/user"
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import {
		showConfirm
	} from '@/utils/common'
	export default {
		data() {
			return {
				dateShow: false,
				defaultFace: '/static/images/my/face.png',
				userInfo: {},
				defaultDate: Number(new Date()),
				minDate: 7200000,
				maxDate: Number(new Date())
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				getUserProfile().then(res => {
					this.userInfo = res.user
					console.log('this.userInfo',this.userInfo)
				})
			},
			
			goBack() {
				uni.navigateBack()
			},
			
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			
			selectBirthDay() {
				this.dateShow = true
			},
			
			birthDayConfirm(e) {
				this.userInfo.birthDay = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				uni.showModal({
					title: '提示',
					content: '是否确认修改生日信息',
					showCancel: false,
					success: res => {
						if(res.confirm) {
							delete this.userInfo.phonenumber
							updateUserProfile(this.userInfo).then(res => {
								uni.showToast({ title: '修改成功', icon: 'success' });
								this.getUserInfo()
							})
						}
					}
				});
				this.dateShow = false
			},
			
			handleUpdateAvatar() {
				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()
							}
						});
					}
				});
			},
			
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #FBFCFF;
	}

	.form-container {
		padding: 32rpx;
		background-color: #FBFCFF;
	}

	.avatar-section {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		margin: 50rpx auto 48rpx;

		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.camera-icon {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 48rpx;
			height: 48rpx;
			background: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

			.icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.info-list {
		background: #fff;
		border-radius: 16rpx;

		.info-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 1rpx solid #FFFFFF;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 32rpx;
				color: #333;
			}

			.value-wrapper {
				display: flex;
				align-items: center;

				.value {
					font-size: 32rpx;
					color: #333;
					margin-right: 16rpx;

					&.placeholder {
						color: #999;
					}
				}

				.arrow-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>