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

<template>
	<view class="user-edit-container" :style="{ '--font-scale': fontScale }">
		<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 v-if="isEdit && (!isNewUserFlow || hasFamily)" :class="isEdit && form.role !== 'teacher' && isNewUserFlow ? 'user-form-wrap' : ''">
		<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" mode="aspectFill"></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 address-row" @click="openRegionPicker">
			<text class="label">所在地区</text>
			<view class="address-value-wrap">
				<text v-if="form.address" class="address-value">{{ form.address }}</text>
				<text v-else class="address-placeholder">请选择省市区</text>
				<text class="address-arrow">›</text>
			</view>
		</view>

		<!-- 详细地址 -->
		<view class="form-item">
			<text class="label">详细地址</text>
			<input type="text" v-model="form.street" placeholder="请输入详细地址（选填）" class="input" maxlength="100" @input="updateFullAddress" />
		</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>

		<!-- 助手选择（会员专属；新用户流程不展示，避免注册时被助手选择打扰） -->
		<view class="family-section" v-if="isEdit && !isNewUserFlow && memberLevel !== 'FREE'">
			<view class="section-title">🤖 选择助手</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 && !isNewUserFlow && memberLevel === 'FREE'">
			<view class="mascot-locked-hint" @click="goUpgrade">
				<text class="locked-icon">🔒</text>
				<text class="locked-text">开通会员解锁更多能力</text>
				<text class="locked-arrow">›</text>
			</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" :disabled="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" :disabled="loading">
					提交申请
				</button>
			</view>
		</view>
		</view>
		<view v-else-if="isEdit">
			<FamilyEmptyState type="card" />
		</view>

		<!-- 区域选择弹窗：统一使用 components/address-picker.vue（3 级省市区） -->
		<address-picker
			ref="addressPicker"
			:levels="3"
			:show-trigger="false"
			:initial="regionInitial"
			@change="onRegionChange"
		/>
	</view>
</template>

<script>
import { updateUserInfo, createFamily, directRegister, getUserInfo, requestJoinByCode, getMyMembership, bindReferralIfNotSelf } from '../../utils/api.js'
import AddressPicker from '@/components/address-picker.vue'
import { pickImage } from '@/utils/image-picker.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
	components: { AddressPicker },
	data() {
		return {
			isEdit: false,
			showRoleSelect: true,
			isNewUserFlow: false,  // 是否是新用户注册流程
			memberLevel: 'FREE', // 会员等级，用于判断是否解锁助手
			form: {
				role: '',
				avatar: '',
				nickname: '',
				realName: '',
				gender: '',
				idCard: '',
				birthday: '',
				birthHour: '',
				inviteCode: '',
				familyRole: '', // 家庭角色：爸爸/妈妈/爷爷/奶奶/姥爷/姥姥/其他（可选）
				mascot: '',
				phone: '',
				teacherNo: '',
				teacherPhoto: '',
				certificateImage: '',
				ethnicity: '',
				bloodType: '',
				highestEducation: '',
				maritalStatus: '',
				hobbies: '',
				dietPreferences: '',
				address: '',
				province: '',
				city: '',
				district: '',
				street: ''
			},
			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: ['未婚','已婚','离异','丧偶'],
			familyRoleOptions: ['爸爸', '妈妈', '爷爷', '奶奶', '姥爷', '姥姥', '其他'],
			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)
    },
    familyRoleIndex: {
      get() {
        return this.familyRoleOptions.indexOf(this.form.familyRole)
      },
      set(val) {
        this.form.familyRole = this.familyRoleOptions[val] || ''
      }
    },
    hasFamily: function() {
      if (this.token) return true
      return this.$store.getters.hasFamily
    },
    // 编辑回显：把已保存的省/市/区县名称传给统一地址组件，打开时按名称回选
    regionInitial() {
      return {
        province: this.form.province || '',
        city: this.form.city || '',
        district: this.form.district || ''
      }
    }
  },
	onLoad(options) {
		// 注册零填写改造：本页仅保留「个人中心编辑资料」用途
		// 新用户注册不再跳转本页（autoParent / needsRoleSelect 参数已废弃，不再处理）
		this.showRoleSelect = false
		this.isEdit = true
		this.isNewUserFlow = false
		// 加载已有用户信息
		this.loadUserInfo()
		// 加载会员等级（用于助手解锁）
		var self = this
		getMyMembership().then(function(res) {
			if (res.data && res.data.memberLevel) {
				self.memberLevel = res.data.memberLevel
			}
		}).catch(function() {})
	},
	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() {
			pickImage({
				count: 1,
				success: (res) => {
					this.form.avatar = res.tempFilePaths[0]
				}
			})
		},
		chooseTeacherPhoto() {
			pickImage({
				count: 1,
				success: (res) => {
					this.form.teacherPhoto = res.tempFilePaths[0]
				}
			})
		},
		chooseCertificate() {
			pickImage({
				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]
		},
		onFamilyRoleChange(e) {
			this.form.familyRole = this.familyRoleOptions[e.detail.value] || ''
		},
	selectMascot(code) {
		this.form.mascot = code
	},
	goUpgrade() {
		uni.navigateTo({ url: '/pages/membership/upgrade' })
	},
	// ===== 区域选择（统一组件 components/address-picker.vue） =====
	openRegionPicker() {
		if (this.$refs.addressPicker) {
			this.$refs.addressPicker.open()
		}
	},
	onRegionChange(data) {
		this.form.province = data.province || ''
		this.form.city = data.city || ''
		this.form.district = data.district || ''
		this.updateFullAddress()
	},
	updateFullAddress() {
		this.form.address = (this.form.province || '') + (this.form.city || '') + (this.form.district || '') + (this.form.street || '')
	},
	// 加载已有用户信息
		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 || ''
			this.form.province = userData.province || ''
			this.form.city = userData.city || ''
			this.form.district = userData.district || ''
			this.form.street = userData.street || ''
			// 若无完整地址文本但有省市区，则拼接
			if (!this.form.address && (this.form.province || this.form.city || this.form.district)) {
				this.updateFullAddress()
			}
			}
			} catch (e) {
				console.error('加载用户信息失败', e)
			}
		},
		// 保存修改
		async saveUserInfo() {
			if (this.loading) return
			// 新用户流程：昵称可跳过（跳过时用默认昵称）；老用户流程：昵称必填
			if (!this.isNewUserFlow && !this.form.nickname) {
				uni.showToast({ title: '请输入昵称', icon: 'none' })
				return
			}
			if (this.isNewUserFlow && !this.form.nickname) {
				var phone = this.form.phone || ''
				this.form.nickname = phone ? '用户' + phone.substring(phone.length - 4) : '微信用户'
			}

		// 从省市区街道字段同步完整地址文本
		this.updateFullAddress()

		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,
				province: this.form.province,
				city: this.form.city,
				district: this.form.district,
				street: this.form.street
			})
			
			uni.showToast({ title: '保存成功', icon: 'success' })
			setTimeout(() => {
				if (this.isNewUserFlow) {
					this.navigateToHome()
				} else {
					uni.navigateBack()
				}
			}, 1500)
		} catch (e) {
			uni.showToast({ title: '保存失败', icon: 'none' })
		} finally {
			this.loading = false
		}
	},
		async submitTeacherInfo() {
			if (this.loading) return
			// 验证必填字段
			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/index-home/index' })
				}, 1500)
			} catch (e) {
				uni.showToast({ title: '提交失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		async joinFamilyAction() {
			if (this.loading) return
			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)
					// 邀请码注册不写入 familyId（加入需管理员审批）
				} else {
					await updateUserInfo(this.form)
					await requestJoinByCode(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)
					// 注册不写入 familyId（后端根据 userId 获取）
				} else {
					await updateUserInfo(this.form)
					const famRes = await createFamily(this.form.nickname + '的家庭')
					// 同步 familyId 到 store（hasFamily getter 依赖）
					if (famRes && famRes.data) {
						this.$store.commit('setFamilyId', famRes.data)
					}
				}
				
				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 存储，供聊天页读取
			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)
				}
			}
			// 新用户流程：消费分享者推荐码，绑定推荐人（推荐码统一为 refCode storage）
			// 登录页 completeLogin 在 needsRoleSelect=true 时直接跳本页，跳过了 handleReferralBind，
			// 因此在此处统一消费 storage 中的 refCode/inviteCode，避免推荐人绑定丢失
			var refCode = uni.getStorageSync('refCode')
			var inviteCode = uni.getStorageSync('inviteCode')
			var inviteType = uni.getStorageSync('inviteType')
			var code = refCode || (inviteCode && inviteType !== 'team' ? inviteCode : '')
			if (code) {
				var self = this
bindReferralIfNotSelf(code).then(function(res) {
					if (res && res.code === 200) {
						console.log('新用户绑定推荐人成功', code)
					}
				}).catch(function(e) {
					// 后端 Result.error(code=500) → request() 已 toast 业务消息
					if (e && e.code !== undefined && e.code !== 401) {
						console.log('新用户绑定推荐人业务拒绝', code, e.message || '')
					} else {
						console.log('新用户绑定推荐人失败', e)
					}
				})
			}
			uni.removeStorageSync('refCode')
			uni.removeStorageSync('inviteCode')
			uni.removeStorageSync('inviteType')
			// 用 switchTab 跳转带底部 TabBar 的首页（行/身/智/心/富）
            // parent-index/child-index 是分包页面（非 TabBar 页），用 navigateTo 会丢失底部 TabBar
			uni.switchTab({ url: '/pages/index-home/index' })
		}
	}
}
</script>

<style scoped lang="scss">
.user-edit-container {
	min-height: 100vh;
	background: $facade-fill-2;
	padding: $uni-space-page;
}

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

.title {
	font-size: calc(40rpx * var(--font-scale, 1));
	font-weight: bold;
	color: $facade-text-strong;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: calc(28rpx * var(--font-scale, 1));
	color: $facade-text-muted;
}

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

.role-card {
	background: $app-surface;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2rpx solid transparent;
	transition: border-color 0.3s, background-color 0.3s;
}

.role-card.active {
	border-color: $mat-green;
	background: #f8fdf8;
}

.role-icon {
	font-size: calc($uni-font-size-5xl * var(--font-scale, 1));
	margin-bottom: 16rpx;
}

.role-name {
	font-size: calc(32rpx * var(--font-scale, 1));
	font-weight: bold;
	color: $facade-text-strong;
	margin-bottom: 8rpx;
}

.role-desc {
	font-size: calc(24rpx * var(--font-scale, 1));
	color: $facade-text-muted;
}

.btn-next {
	background: $mat-green;
	color: $app-surface;
	border-radius: 24rpx;
	margin-top: 20rpx;
}

/* 表单 */
.form-section {
	background: $app-surface;
	border-radius: 16rpx;
	padding: $uni-space-page;
	margin-bottom: $uni-space-lg;
}

.form-section-title {
	font-size: calc(30rpx * var(--font-scale, 1));
	font-weight: bold;
	color: $facade-text-strong;
	margin-bottom: 20rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid $facade-fill;
}

.form-item {
	margin-bottom: $uni-space-lg;
}

.label {
	display: block;
	font-size: calc(28rpx * var(--font-scale, 1));
	color: $facade-text-strong;
	margin-bottom: 16rpx;
}

.required {
	color: $mat-red;
}

.input, .picker-input {
	padding: 20rpx;
	background: $facade-fill-2;
	border-radius: 16rpx;
	font-size: calc(28rpx * var(--font-scale, 1));
}

.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: $facade-fill-2;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc($uni-font-size-4xl * var(--font-scale, 1));
	color: $facade-text-ghost;
}

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

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

.photo-placeholder {
	width: 300rpx;
	height: 200rpx;
	background: $facade-fill-2;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.plus-icon {
	font-size: calc($uni-font-size-4xl * var(--font-scale, 1));
	color: $facade-text-ghost;
}

.placeholder-text {
	font-size: calc(24rpx * var(--font-scale, 1));
	color: $facade-text-muted;
	margin-top: 8rpx;
}

/* 助手选择 */
.mascot-cards {
	display: flex;
	gap: 20rpx;
	margin-top: 16rpx;
}
.mascot-card {
	flex: 1;
	background: $facade-fill-page;
	border-radius: 16rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	gap: 16rpx;
	border: 2rpx solid transparent;
	transition: border-color 0.3s, background-color 0.3s;
}
.mascot-card.active {
	border-color: $mat-green;
	background: $status-success-tint-2;
}
.mascot-card-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(36rpx * var(--font-scale, 1));
	flex-shrink: 0;
}
.xibao-bg {
	background: linear-gradient(135deg, #FFF0DB, #FFD6A5);
}
.fubao-bg {
	background: linear-gradient(135deg, $mat-amber-tint, $accent-amber-light);
}
.mascot-card-info {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}
.mascot-card-name {
	font-size: calc(30rpx * var(--font-scale, 1));
	font-weight: bold;
	color: $facade-text-strong;
}
.mascot-card-desc {
	font-size: calc(22rpx * var(--font-scale, 1));
	color: $facade-text-muted;
}

/* 家庭绑定 */
.family-section {
	background: $app-surface;
	border-radius: 16rpx;
	padding: $uni-space-page;
}

.section-title {
	font-size: calc(30rpx * var(--font-scale, 1));
	font-weight: bold;
	color: $facade-text-strong;
	margin-bottom: 20rpx;
}

.family-actions {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-top: $uni-space-lg;
}

/* 新用户流程（接受家庭邀请）：提交申请/跳过固定悬浮页面底部，不随滚动消失 */
.family-actions-fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	margin-top: 0;
	padding: 20rpx 32rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: $app-surface;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
}

/* 新用户流程表单底部留白，避免内容被固定悬浮按钮遮挡 */
.user-form-wrap {
	padding-bottom: 340rpx;
}

.btn {
	border-radius: 24rpx;
	font-size: calc(30rpx * var(--font-scale, 1));
}

.btn-primary {
	background: $mat-green;
	color: $app-surface;
}

.btn-skip {
	background: $facade-fill-2;
	color: $facade-text-muted;
}

/* ===== 地址行（所在地区） ===== */
.address-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.address-value-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}
.address-value {
	font-size: calc(28rpx * var(--font-scale, 1));
	color: $facade-text-strong;
}
.address-placeholder {
	font-size: calc(28rpx * var(--font-scale, 1));
	color: $facade-text-muted;
}
.address-arrow {
	font-size: calc(28rpx * var(--font-scale, 1));
	color: $facade-text-ghost;
	margin-left: 8rpx;
}

/* 助手锁定提示 */
.mascot-locked-hint {
	display: flex;
	align-items: center;
	padding: 28rpx 32rpx;
	background: linear-gradient(135deg, $status-warning-soft, $status-warning-light);
	border-radius: 24rpx;
	margin-top: 16rpx;
}
.locked-icon {
	font-size: calc(36rpx * var(--font-scale, 1));
	margin-right: 16rpx;
}
.locked-text {
	flex: 1;
	font-size: calc(28rpx * var(--font-scale, 1));
	font-weight: 600;
	color: $status-warning-strong;
}
.locked-arrow {
	font-size: calc(32rpx * var(--font-scale, 1));
	color: $status-warning-strong;
	margin-left: 8rpx;
}
</style>