cfc/zxyj-frontend/pages/user-edit/user-edit.vue

<template>
	<view class="user-edit-container">
		<view class="header">
			<text class="title">完善个人信息</text>
			<text class="subtitle">以下信息可帮助您更好地使用服务</text>
		</view>

		<view class="form-section">
			<!-- 头像 -->
			<view class="form-item avatar-item">
				<text class="label">头像</text>
				<view class="avatar-upload" @click="chooseAvatar">
					<image v-if="form.avatar" :src="form.avatar" class="avatar-preview"></image>
					<view v-else class="avatar-placeholder">
						<text class="iconfont icon-plus">+</text>
					</view>
				</view>
			</view>

			<!-- 昵称 -->
			<view class="form-item">
				<text class="label">昵称 <text class="required">*</text></text>
				<input type="text" v-model="form.nickname" placeholder="请输入昵称" class="input" maxlength="20" />
			</view>

			<!-- 真实姓名 -->
			<view class="form-item">
				<text class="label">真实姓名</text>
				<input type="text" v-model="form.realName" placeholder="选填，用于家庭管理" class="input" maxlength="20" />
			</view>

			<!-- 角色选择 -->
			<view class="form-item">
				<text class="label">我是</text>
				<radio-group class="role-select" @change="onRoleChange">
					<label class="role-option">
						<radio value="parent" :checked="form.role === 'parent'" />
						<text>家长</text>
					</label>
					<label class="role-option">
						<radio value="child" :checked="form.role === 'child'" />
						<text>孩子</text>
					</label>
				</radio-group>
			</view>

			<!-- 性别选择 -->
			<view class="form-item">
				<text class="label">性别</text>
				<radio-group class="role-select" @change="onGenderChange">
					<label class="role-option">
						<radio value="male" :checked="form.gender === 'male'" />
						<text>男</text>
					</label>
					<label class="role-option">
						<radio value="female" :checked="form.gender === 'female'" />
						<text>女</text>
					</label>
				</radio-group>
			</view>

			<!-- 身份证号 -->
			<view class="form-item">
				<text class="label">身份证号</text>
				<input type="idcard" v-model="form.idCard" placeholder="选填，填写后自动生成生日" class="input" maxlength="18" @input="onIdCardInput" />
			</view>

			<!-- 生日（可选，如果填了身份证则自动填充） -->
			<view class="form-item">
				<text class="label">生日</text>
				<picker mode="date" :value="form.birthday" @change="onBirthdayChange">
					<view class="picker-input">{{ form.birthday || '请选择生日' }}</view>
				</picker>
			</view>
		</view>

		<view class="family-section">
			<view class="section-title">家庭绑定</view>

			<!-- 邀请码输入 -->
			<view class="form-item">
				<text class="label">家庭邀请码</text>
				<input type="text" v-model="form.inviteCode" placeholder="选填，如有邀请码请输入" class="input" maxlength="8" />
			</view>

			<view class="family-actions">
				<button v-if="form.inviteCode" class="btn btn-primary" @click="joinFamilyAction" :loading="loading">
					加入家庭
				</button>
				<button v-else class="btn btn-primary" @click="createFamilyAction" :loading="loading">
					创建新家庭
				</button>
				<button class="btn btn-skip" @click="skip">
					跳过
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { updateUserInfo, joinFamily, createFamily } from '../../utils/api.js'

export default {
	data() {
		return {
			form: {
				avatar: '',
				nickname: '',
				realName: '',
				role: 'parent',
				gender: '',
				idCard: '',
				birthday: '',
				inviteCode: ''
			},
			loading: false,
			token: '',
			userId: null
		}
	},
	onLoad(options) {
		// 从登录页面传递过来的参数
		this.token = options.token || ''
		this.userId = options.userId || null
		// 从本地存储获取用户信息
		const userInfo = uni.getStorageSync('userInfo')
		if (userInfo) {
			this.form.nickname = userInfo.nickname || ''
			this.form.avatar = userInfo.avatar || ''
		}
	},
	methods: {
		// 选择头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.form.avatar = res.tempFilePaths[0]
				}
			})
		},

		// 角色选择
		onRoleChange(e) {
			this.form.role = e.detail.value
		},

		// 性别选择
		onGenderChange(e) {
			this.form.gender = e.detail.value
		},

		// 生日选择
		onBirthdayChange(e) {
			this.form.birthday = e.detail.value
		},

		// 身份证输入 - 自动提取生日
		onIdCardInput(e) {
			const idCard = e.detail.value
			if (idCard.length === 15) {
				// 15位身份证：1985年07月08日 -> 19850708
				const birthYear = '19' + idCard.substring(6, 8)
				const birthMonth = idCard.substring(8, 10)
				const birthDay = idCard.substring(10, 12)
				this.form.birthday = `${birthYear}-${birthMonth}-${birthDay}`
			} else if (idCard.length === 18) {
				// 18位身份证：1985年07月08日 -> 19850708
				const birthYear = idCard.substring(6, 10)
				const birthMonth = idCard.substring(10, 12)
				const birthDay = idCard.substring(12, 14)
				this.form.birthday = `${birthYear}-${birthMonth}-${birthDay}`
			}
		},

		// 加入现有家庭
		async joinFamilyAction() {
			if (!this.form.inviteCode) {
				uni.showToast({ title: '请输入邀请码', icon: 'none' })
				return
			}
			await this.saveUserInfo('join')
		},

		// 创建新家庭
		async createFamilyAction() {
			await this.saveUserInfo('create')
		},

		// 跳过
		async skip() {
			await this.saveUserInfo('skip')
		},

		// 保存用户信息
		async saveUserInfo(action) {
			if (!this.form.nickname) {
				uni.showToast({ title: '请输入昵称', icon: 'none' })
				return
			}

			this.loading = true

			try {
				// 1. 更新用户信息（包括新字段：role, gender, birthday, idCard）
				await updateUserInfo({
					nickname: this.form.nickname,
					avatar: this.form.avatar,
					realName: this.form.realName,
					role: this.form.role,
					gender: this.form.gender,
					birthday: this.form.birthday,
					idCard: this.form.idCard
				})

				// 2. 根据 action 处理家庭绑定
				if (action === 'join' && this.form.inviteCode) {
					await joinFamily(this.form.inviteCode)
				} else if (action === 'create') {
					await createFamily('我的家庭')
				}
				// action === 'skip' 时不做处理，使用自动创建的默认家庭

				uni.showToast({ title: '保存成功', icon: 'success' })

				// 更新本地存储的用户信息
				uni.setStorageSync('userInfo', {
					nickname: this.form.nickname,
					avatar: this.form.avatar
				})
				uni.setStorageSync('role', this.form.role)

  // 跳转到首页
  setTimeout(() => {
    // 根据角色跳转到对应的首页
    const role = uni.getStorageSync('role') || 'parent'
    if (role === 'parent') {
      uni.reLaunch({
        url: '/pages/index/parent-index'
      })
    } else {
      uni.reLaunch({
        url: '/pages/index/child-index'
      })
    }
  }, 1000)
			} catch (error) {
				uni.showToast({ title: error.message || '保存失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.user-edit-container {
	min-height: 100vh;
	background: #f8f8f8;
	padding: 40rpx;
}

.header {
	text-align: center;
	margin-bottom: 60rpx;

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #999;
	}
}

.form-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
}

.form-item {
	margin-bottom: 40rpx;

	&:last-child {
		margin-bottom: 0;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;

		.required {
			color: #ff6b6b;
		}
	}

	.input {
		width: 100%;
		height: 80rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
	}

	.picker-input {
		width: 100%;
		height: 80rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #333;
	}
}

.role-select {
	display: flex;
	gap: 40rpx;
	padding: 10rpx 0;
}

.role-option {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.avatar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.avatar-upload {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;

		.avatar-preview {
			width: 100%;
			height: 100%;
		}

		.avatar-placeholder {
			font-size: 48rpx;
			color: #ccc;
		}
	}
}

.family-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
}

.family-actions {
	margin-top: 40rpx;

	.btn {
		width: 100%;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.btn-primary {
		background: #ff6b6b;
		color: #fff;
	}

	.btn-skip {
		background: #f8f8f8;
		color: #999;
	}
}
</style>