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

<template>
	<view class="user-edit-container">
		<view class="header">
			<text class="title">{{ isEdit ? '完善个人信�' : '选择角色' }}</text>
			<text class="subtitle">{{ isEdit ? '以下信��帮助您更好地使用�� : '请选择您的身份类型' }}</text>
		</view>

		<!-- 角色选择（新用户首次登录时显示） -->
		<view class="role-select-section" v-if="!isEdit && showRoleSelect">
			<view 
				class="role-card" 
				:class="{ active: form.role === 'parent' }"
				@click="selectRole('parent')"
			>
				<text class="role-icon">👨�👩��/text>
				<text class="role-name">家长</text>
				<text class="role-desc">管�孩�任务�审核奖�/text>
			</view>
			
			<view 
				class="role-card" 
				:class="{ active: form.role === 'child' }"
				@click="selectRole('child')"
			>
				<text class="role-icon">👶</text>
				<text class="role-name">å­©å­�</text>
				<text class="role-desc">执行任务�赚�积�/text>
			</view>
			
			<view 
				class="role-card" 
				:class="{ active: form.role === 'teacher' }"
				@click="selectRole('teacher')"
			>
				<text class="role-icon">👨��/text>
				<text class="role-name">�长规划�/text>
				<text class="role-desc">DAN测评�制定�长方�/text>
			</view>

			<button class="btn-next" @click="confirmRole" :disabled="!form.role">
				下一�
			</button>
		</view>

		<!-- 详细信�填写（选择角色�显示） -->
		<view class="form-section" v-if="isEdit">
			<!-- 头� -->
			<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 class="required" v-if="form.role === 'teacher'">*</text></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 class="required" v-if="form.role === 'teacher'">*</text></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 class="form-item">
				<text class="label">出生时辰</text>
				<picker mode="selector" :range="birthHourOptions" :value="birthHourIndex" @change="onBirthHourChange">
					<view class="picker-input">{{ form.birthHour || '请选择出生时辰' }}</view>
				</picker>
			</view>

			<!-- æ°‘æ—� -->
			<view class="form-item">
				<text class="label">æ°‘æ—�</text>
				<picker mode="selector" :range="ethnicityOptions" :value="ethnicityIndex" @change="onEthnicityChange">
					<view class="picker-input">{{ form.ethnicity || '请选择民�' }}</view>
				</picker>
			</view>

			<!-- 血�-->
			<view class="form-item">
				<text class="label">血�/text>
				<picker mode="selector" :range="bloodTypeOptions" :value="bloodTypeIndex" @change="onBloodTypeChange">
					<view class="picker-input">{{ form.bloodType || '请选择血� }}</view>
				</picker>
			</view>

			<!-- 最高学�-->
			<view class="form-item">
				<text class="label">最高学�/text>
				<picker mode="selector" :range="educationOptions" :value="educationIndex" @change="onEducationChange">
					<view class="picker-input">{{ form.highestEducation || '请选择最高学� }}</view>
				</picker>
			</view>

			<!-- 婚姻状�-->
			<view class="form-item">
				<text class="label">婚姻状�/text>
				<picker mode="selector" :range="maritalOptions" :value="maritalIndex" @change="onMaritalChange">
					<view class="picker-input">{{ form.maritalStatus || '请选择婚姻状� }}</view>
				</picker>
			</view>

			<!-- 地�选择 -->
			<view class="form-item">
				<text class="label">所在地�<text class="required" v-if="isNewUserFlow">*</text></text>
				<AddressPicker ref="addressPicker" />
			</view>

			<!-- 兴趣爱好 -->
			<view class="form-item">
				<text class="label">兴趣爱好</text>
				<input type="text" v-model="form.hobbies" placeholder="� 阅读��动�音� class="input" maxlength="200" />
			</view>

			<!-- 饮食�好 -->
			<view class="form-item">
				<text class="label">饮食�好</text>
				<input type="text" v-model="form.dietPreferences" placeholder="� 清淡�无辣�低� class="input" maxlength="200" />
			</view>

			<!-- �长规划师�外字�-->
			<view class="form-section-title" v-if="form.role === 'teacher'">�长规划师信�/view>
			
			<!-- �长规划师�书�（�长规划师必填�-->
			<view class="form-item" v-if="form.role === 'teacher'">
				<text class="label">�长规划师�书� <text class="required">*</text></text>
				<input type="text" v-model="form.teacherNo" placeholder="请输入�长规划师�书� class="input" maxlength="50" />
			</view>

			<!-- �长规划师照片（�长规划师必填） -->
			<view class="form-item" v-if="form.role === 'teacher'">
				<text class="label">�长规划师照�<text class="required">*</text></text>
				<view class="photo-upload" @click="chooseTeacherPhoto">
					<image v-if="form.teacherPhoto" :src="form.teacherPhoto" class="photo-preview" mode="aspectFill"></image>
					<view v-else class="photo-placeholder">
						<text class="plus-icon">+</text>
						<text class="placeholder-text">上传照片</text>
					</view>
				</view>
			</view>

			<!-- �长规划师�书照片（�长规划师必填） -->
			<view class="form-item" v-if="form.role === 'teacher'">
				<text class="label">�长规划师��<text class="required">*</text></text>
				<view class="photo-upload" @click="chooseCertificate">
					<image v-if="form.certificateImage" :src="form.certificateImage" class="photo-preview" mode="aspectFill"></image>
					<view v-else class="photo-placeholder">
						<text class="plus-icon">+</text>
						<text class="placeholder-text">上传�书</text>
					</view>
				</view>
			</view>
		</view>

		<!-- AI助手选择（新用户注册或编辑资料时显示�-->
		<view class="family-section" v-if="isEdit">
			<view class="section-title">🤖 选择AI助手</view>
			<view class="mascot-cards">
				<view class="mascot-card" :class="{ active: form.mascot === 'xibao' }" @click="selectMascot('xibao')">
					<view class="mascot-card-icon xibao-bg">🌟</view>
					<view class="mascot-card-info">
						<text class="mascot-card-name">浠�</text>
						<text class="mascot-card-desc">温柔活泼的阳光女�/text>
					</view>
				</view>
				<view class="mascot-card" :class="{ active: form.mascot === 'fubao' }" @click="selectMascot('fubao')">
					<view class="mascot-card-icon fubao-bg">💪</view>
					<view class="mascot-card-info">
						<text class="mascot-card-name">��</text>
						<text class="mascot-card-desc">开朗自信的阳光男孩</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 家庭绑定（新用户注册时显示） -->
		<view class="family-section" v-if="isEdit && form.role !== 'teacher' && isNewUserFlow">
			<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 class="family-section" v-if="isEdit && !isNewUserFlow && form.role !== 'teacher'">
			<view class="family-actions">
				<button class="btn btn-primary" @click="saveUserInfo" :loading="loading">
					�存修改
				</button>
			</view>
		</view>

		<!-- �长规划师�交按�-->
		<view class="family-section" v-if="isEdit && form.role === 'teacher' && isNewUserFlow">
			<view class="family-actions">
				<button class="btn btn-primary" @click="submitTeacherInfo" :loading="loading">
					�交申请
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { updateUserInfo, joinFamily, createFamily, directRegister, getUserInfo } from '../../utils/api.js'
import AddressPicker from '../../components/address-picker.vue'

export default {
	components: {
		AddressPicker
	},
	data() {
		return {
			isEdit: false,
			showRoleSelect: true,
			isNewUserFlow: false,  // 是�是新用户注册�程
			form: {
				role: '',
				avatar: '',
				nickname: '',
				realName: '',
				gender: '',
				idCard: '',
				birthday: '',
				birthHour: '',
				inviteCode: '',
				mascot: '',
				phone: '',
				teacherNo: '',
				teacherPhoto: '',
				certificateImage: '',
				ethnicity: '',
				bloodType: '',
				highestEducation: '',
				maritalStatus: '',
				hobbies: '',
				dietPreferences: '',
				address: '',
				addressId: null
			},
			ethnicityOptions: ['汉�','蒙��,'回�','��','维�尔�','苗�','��','壮�','布��,'�鲜�,'满�','侗�','瑶�','白�','土家�,'哈尼�,'哈�克�','傣�','黎�','其他'],
			bloodTypeOptions: ['A','B','AB','O','未知'],
			birthHourOptions: ['�时(23-01)','丑时(01-03)','寅时(03-05)','�时(05-07)','辰时(07-09)','巳时(09-11)','�时(11-13)','未时(13-15)','申时(15-17)','酉时(17-19)','戌时(19-21)','亥时(21-23)'],
			birthHourValues: ['�,'�,'�,'�,'�,'�,'�,'�,'�,'�,'�,'�],
			educationOptions: ['�学','�中','高中','中专','大专','本科','硕士','�士'],
			maritalOptions: ['未婚','已婚','离异','丧�'],
			loading: false,
			userId: '',
			token: ''
		}
	},
	computed: {
		ethnicityIndex() {
			return this.ethnicityOptions.indexOf(this.form.ethnicity)
		},
		bloodTypeIndex() {
			return this.bloodTypeOptions.indexOf(this.form.bloodType)
		},
		birthHourIndex() {
			return this.birthHourValues.indexOf(this.form.birthHour)
		},
		educationIndex() {
			return this.educationOptions.indexOf(this.form.highestEducation)
		},
		maritalIndex() {
			return this.maritalOptions.indexOf(this.form.maritalStatus)
		},
	},
	onLoad(options) {
		if (options.token && options.userId) {
			this.token = options.token
			this.userId = options.userId

			if (options.autoParent === 'true') {
				// 首次登录：跳过角色选择，默�parent，直接进入信�补充页
				this.showRoleSelect = false
				this.isEdit = true
				this.isNewUserFlow = true
				this.form.role = 'parent'
			} else {
				// 检查是�需�选择角色（新用户� �有明确传�needsRoleSelect=true �显示选择
				this.showRoleSelect = options.needsRoleSelect === 'true'
				this.isEdit = !this.showRoleSelect
				this.isNewUserFlow = options.needsRoleSelect === 'true'
			}
		} else if (options.phone && (options.autoParent === 'true' || options.needsRoleSelect === 'true')) {
			// 测试环境：没有token，�有手机�，是新用户注册��
			this.showRoleSelect = options.needsRoleSelect === 'true'
			this.isEdit = !this.showRoleSelect
			this.isNewUserFlow = true
			if (options.autoParent === 'true') {
				this.form.role = 'parent'
			}
			// 将手机�传递给表�
			this.form.phone = options.phone
		} else {
			// 其他情况：默认进入编辑模�（如从"我的"页�进入�
			this.showRoleSelect = false
			this.isEdit = true
			this.isNewUserFlow = false
		}
		
		// �新用户�程时，加载已有用户信�
		if (this.isEdit && !this.isNewUserFlow) {
			this.loadUserInfo()
		}
	},
	methods: {
		selectRole(role) {
			this.form.role = role
		},
		confirmRole() {
			if (!this.form.role) {
				uni.showToast({ title: '请选择角色', icon: 'none' })
				return
			}
			this.showRoleSelect = false
			this.isEdit = true
			
			// 测试环境：直接注册用户（�需�验���
			if (!this.token && this.form.phone) {
				// 自动进入家庭绑定�程
			}
		},
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.form.avatar = res.tempFilePaths[0]
				}
			})
		},
		chooseTeacherPhoto() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.form.teacherPhoto = res.tempFilePaths[0]
				}
			})
		},
		chooseCertificate() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.form.certificateImage = res.tempFilePaths[0]
				}
			})
		},
		onGenderChange(e) {
			this.form.gender = e.detail.value
		},
		onIdCardInput(e) {
			const idCard = e.detail.value
			if (idCard.length === 18) {
				// 根�身份��自动��生日
				const year = idCard.substring(6, 10)
				const month = idCard.substring(10, 12)
				const day = idCard.substring(12, 14)
				this.form.birthday = `${year}-${month}-${day}`
			}
		},
		onBirthdayChange(e) {
			this.form.birthday = e.detail.value
		},
		onEthnicityChange(e) {
			this.form.ethnicity = this.ethnicityOptions[e.detail.value]
		},
		onBloodTypeChange(e) {
			this.form.bloodType = this.bloodTypeOptions[e.detail.value]
		},
		onBirthHourChange(e) {
			this.form.birthHour = this.birthHourValues[e.detail.value]
		},
		onEducationChange(e) {
			this.form.highestEducation = this.educationOptions[e.detail.value]
		},
		onMaritalChange(e) {
			this.form.maritalStatus = this.maritalOptions[e.detail.value]
		},
		selectMascot(code) {
			this.form.mascot = code
		},
		// 加载已有用户信�
		async loadUserInfo() {
			try {
				const res = await getUserInfo()
				if (res.code === 200 && res.data) {
					const userData = res.data
					this.form.nickname = userData.nickname || ''
					this.form.realName = userData.realName || ''
					this.form.gender = userData.gender || ''
					this.form.idCard = userData.idCard || ''
				// 生日��日期部分，去掉时间和 ISO 格��T 分隔�
				this.form.birthday = userData.birthday ? String(userData.birthday).split(/[T ]/)[0] : ''
					this.form.avatar = userData.avatar || ''
					this.form.role = userData.role || ''
					this.form.phone = userData.phone || ''
					this.form.ethnicity = userData.ethnicity || ''
					this.form.bloodType = userData.bloodType || ''
					this.form.highestEducation = userData.highestEducation || ''
					this.form.maritalStatus = userData.maritalStatus || ''
					this.form.hobbies = userData.hobbies || ''
					this.form.dietPreferences = userData.dietPreferences || ''
					this.form.mascot = userData.mascot || ''
				this.form.address = userData.address || ''
				}
			} catch (e) {
				console.error('加载用户信�失败', e)
			}
		},
		// �存修改
		async saveUserInfo() {
			if (!this.form.nickname) {
				uni.showToast({ title: '请输入昵�, icon: 'none' })
				return
			}
			
			// �AddressPicker 读�地�文本
			if (this.$refs.addressPicker && this.$refs.addressPicker.fullAddress) {
				this.form.address = this.$refs.addressPicker.fullAddress
			}

			this.loading = true
			try {
				await updateUserInfo({
					nickname: this.form.nickname,
					realName: this.form.realName,
					gender: this.form.gender,
					idCard: this.form.idCard,
					birthday: this.form.birthday,
					avatar: this.form.avatar,
					mascot: this.form.mascot,
					ethnicity: this.form.ethnicity,
					bloodType: this.form.bloodType,
					highestEducation: this.form.highestEducation,
					maritalStatus: this.form.maritalStatus,
					hobbies: this.form.hobbies,
					dietPreferences: this.form.dietPreferences,
					address: this.form.address
				})
				uni.showToast({ title: '�存�功', icon: 'success' })
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} catch (e) {
				uni.showToast({ title: '�存失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		async submitTeacherInfo() {
			// 验�必填字段
			if (!this.form.nickname) {
				uni.showToast({ title: '请输入昵�, icon: 'none' })
				return
			}
			if (!this.form.gender) {
				uni.showToast({ title: '请选择性别', icon: 'none' })
				return
			}
			if (!this.form.idCard) {
				uni.showToast({ title: '请输入身份��, icon: 'none' })
				return
			}
			if (!this.form.teacherNo) {
				uni.showToast({ title: '请输入�长规划师�书�, icon: 'none' })
				return
			}
			if (!this.form.teacherPhoto) {
				uni.showToast({ title: '请上传�长规划师照片', icon: 'none' })
				return
			}
			if (!this.form.certificateImage) {
				uni.showToast({ title: '请上传�长规划师�书', icon: 'none' })
				return
			}

			this.loading = true
			try {
				await updateUserInfo({
					...this.form,
					roles: this.form.role
				})
				uni.showToast({ title: '�交�功，请等待审核' })
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/parent-index'
					})
				}, 1500)
			} catch (e) {
				uni.showToast({ title: '�交失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		async joinFamilyAction() {
			if (!this.form.inviteCode) {
				uni.showToast({ title: '请输入邀请�', icon: 'none' })
				return
			}
			
			if (!this.form.nickname) {
				uni.showToast({ title: '请输入昵�, icon: 'none' })
				return
			}
			
			this.loading = true
			try {
				let userId = this.userId
				
				// 测试环境：没有token，需�先注册用户
				if (!this.token && this.form.phone) {
					const regRes = await directRegister({
						phone: this.form.phone,
						nickname: this.form.nickname,
						avatar: this.form.avatar,
						role: this.form.role,
						mascot: this.form.mascot,
						birthday: this.form.birthday,
						gender: this.form.gender,
						inviteCode: this.form.inviteCode
					})
					userId = regRes.data.userId
					// �存登录信�
					uni.setStorageSync('token', regRes.data.token)
					uni.setStorageSync('userId', userId)
					uni.setStorageSync('role', regRes.data.role)
					uni.setStorageSync('familyId', regRes.data.familyId)
				} else {
					await updateUserInfo(this.form)
					await joinFamily(this.form.inviteCode)
				}
				
				uni.showToast({ title: '加入�功' })
				setTimeout(() => {
					this.navigateToHome()
				}, 1500)
			} catch (e) {
				uni.showToast({ title: e.message || '加入失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		async createFamilyAction() {
			if (!this.form.nickname) {
				uni.showToast({ title: '请输入昵�, icon: 'none' })
				return
			}
			
			this.loading = true
			try {
				let userId = this.userId
				
				// 测试环境：没有token，需�先注册用户
				if (!this.token && this.form.phone) {
					const regRes = await directRegister({
						phone: this.form.phone,
						nickname: this.form.nickname,
						avatar: this.form.avatar,
						role: this.form.role,
						mascot: this.form.mascot,
						birthday: this.form.birthday,
						gender: this.form.gender
					})
					userId = regRes.data.userId
					// �存登录信�
					uni.setStorageSync('token', regRes.data.token)
					uni.setStorageSync('userId', userId)
					uni.setStorageSync('role', regRes.data.role)
					uni.setStorageSync('familyId', regRes.data.familyId)
				} else {
					await updateUserInfo(this.form)
					await createFamily(this.form.nickname + '的家�)
				}
				
				uni.showToast({ title: '创建�功' })
				setTimeout(() => {
					this.navigateToHome()
				}, 1500)
			} catch (e) {
				uni.showToast({ title: e.message || '创建失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		skip() {
			this.navigateToHome()
		},
		navigateToHome() {
			// �存 mascot �userInfo 存储，供 AI �天页读�
			if (this.form.mascot) {
				try {
					const userInfo = uni.getStorageSync('userInfo') || {}
					userInfo.mascot = this.form.mascot
					uni.setStorageSync('userInfo', userInfo)
				} catch (e) {
					console.error('�存 mascot 失败', e)
				}
			}
			const role = this.form.role || 'parent'
			if (role === 'parent') {
				uni.switchTab({ url: '/pages/home/parent-index' })
			} else if (role === 'child') {
				uni.switchTab({ url: '/pages/home/child-index' })
			} else if (role === 'teacher') {
				uni.switchTab({ url: '/pages/teacher/index' })
			}
		}
	}
}
</script>

<style scoped>
.user-edit-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 30rpx;
}

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

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

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

/* 角色选择 */
.role-select-section {
	margin-bottom: 40rpx;
}

.role-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2rpx solid transparent;
	transition: all 0.3s;
}

.role-card.active {
	border-color: #4CAF50;
	background: #f8fdf8;
}

.role-icon {
	font-size: 80rpx;
	margin-bottom: 16rpx;
}

.role-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.role-desc {
	font-size: 24rpx;
	color: #999;
}

.btn-next {
	background: #4CAF50;
	color: #fff;
	border-radius: 40rpx;
	margin-top: 20rpx;
}

/* 表� */
.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.form-section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.form-item {
	margin-bottom: 30rpx;
}

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

.required {
	color: #f44336;
}

.input, .picker-input {
	padding: 20rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	font-size: 28rpx;
}

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

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

/* 头�上传 */
.avatar-upload {
	width: 150rpx;
	height: 150rpx;
}

.avatar-preview {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
}

.avatar-placeholder {
	width: 150rpx;
	height: 150rpx;
	background: #f5f5f5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60rpx;
	color: #ccc;
}

/* 照片上传 */
.photo-upload {
	width: 300rpx;
	height: 200rpx;
}

.photo-preview {
	width: 300rpx;
	height: 200rpx;
	border-radius: 12rpx;
}

.photo-placeholder {
	width: 300rpx;
	height: 200rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.plus-icon {
	font-size: 60rpx;
	color: #ccc;
}

.placeholder-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

/* AI助手选择 */
.mascot-cards {
	display: flex;
	gap: 20rpx;
	margin-top: 16rpx;
}
.mascot-card {
	flex: 1;
	background: #f8f8f8;
	border-radius: 16rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	gap: 16rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s;
}
.mascot-card.active {
	border-color: #4CAF50;
	background: #f0fdf4;
}
.mascot-card-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	flex-shrink: 0;
}
.xibao-bg {
	background: linear-gradient(135deg, #FFF0DB, #FFD6A5);
}
.fubao-bg {
	background: linear-gradient(135deg, #FFF8E1, #FCD34D);
}
.mascot-card-info {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}
.mascot-card-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}
.mascot-card-desc {
	font-size: 22rpx;
	color: #999;
}

/* 家庭绑定 */
.family-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
}

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

.family-actions {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-top: 30rpx;
}

.btn {
	border-radius: 40rpx;
	font-size: 30rpx;
}

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

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