subject_gxj/xj_project_app/pages/mine/setting/index.vue

<template>
	<view class="container">
		<view class="back-btn" @click="backToBefore()">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto"></u-icon>

			<text class="back-text">编辑信息</text>
		</view>

		<view class="avatar" @click="changeAvatar()">
			<image src="@/static/images/profile.jpg" mode=""></image>

			<view class="avatar-description">更换</view>
		</view>

		<view class="info-area">
			<view class="info-item">
				姓名

				<input type="text" v-model="userName">
			</view>

			<view class="info-item" @click="showSexChoose()">
				性别

				<view class="info-item-content">
					<view v-if="userSex">{{userSex}}</view>
					<view v-else class="remind-text">请选择性别</view>
					<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
				</view>
			</view>

			<view class="info-item" @click="showBirChoose()">
				出生年月

				<view class="info-item-content">
					<view v-if="userBir">{{userBir}}</view>
					<view v-else class="remind-text">请选择出生年月</view>

					<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
				</view>
			</view>
		</view>

		<!-- 性别 -->
		<u-picker :show="sexShow" :columns="sexList" @confirm="sexClose" @cancel="sexClose"></u-picker>
		<!-- 年龄 -->
		<u-datetime-picker :show="birShow" @confirm="birClose" @cancel="birClose" v-model="userBirStamp"
			mode="date"></u-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		getInfo
	} from "@/api/login.js"

	import {
		timeFormat
	} from "@/utils/timeFormatter.js"

	function backToBefore() {
		uni.navigateBack({})
	};

	let userInfo = ref({})

	let userName = ref(null)
	let userSex = ref(null)
	let userBir = ref(null)

	// ====================================选择性别
	let sexList = ref([
		["男", "女"]
	])
	let sexShow = ref(false)

	function showSexChoose() {
		sexShow.value = true
	}

	function sexClose(e) {
		if (e) userSex.value = e.value[0];
		sexShow.value = false;
	}

	// ====================================选择年月
	let userBirStamp = ref(null)
	let birShow = ref(false)

	function showBirChoose() {
		birShow.value = true
	}

	function birClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			userBir.value = time
		}
		birShow.value = false
	}

	function changeAvatar() {
		uni.showToast({
			title: "功能建设中...",
			icon: "none",
			duration: 2000
		})
	}

	onLoad(() => {
		getInfo().then(res => {
			userInfo.value = res.data.user;
			userName.value = userInfo.value.realName;
		})
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #EAF0FA;
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #1869F6 0%, #EAF0FA 64%, #EAF0FA 100%);

		.back-btn {
			position: absolute;
			top: 8%;
			left: 4%;
			display: flex;
			font-size: 40rpx;
			font-weight: 500;
			color: #FFF;

			.back-text {
				margin-left: 28rpx;
			}
		}

		.avatar {
			position: absolute;
			top: 229rpx;
			left: 295rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background-color: #fff;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

			.avatar-description {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFF;
				text-align: center;
				background: rgba(24, 105, 246, 0.46);
			}
		}

		.info-area {
			position: absolute;
			top: 446rpx;
			left: 4%;
			width: 92%;
			height: 272rpx;
			padding: 31rpx 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 40rpx;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70rpx;
			color: #9E9E9E;
			font-size: 32rpx;

			input {
				text-align: right;
				font-size: 32rpx;
				color: #343437;
			}

			.info-item-content {
				display: flex;
				align-items: center;
				color: #343437;
				font-size: 32rpx;
			}

			.remind-text {
				color: #9E9E9E
			}
		}
	}
</style>