user-edit.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077
  1. <template>
  2. <view class="user-edit-container">
  3. <view class="header">
  4. <text class="title">{{ isEdit ? '完善个人信息' : '选择角色' }}</text>
  5. <text class="subtitle">{{ isEdit ? '以下信息可帮助您更好地使用服务' : '请选择您的身份类型' }}</text>
  6. </view>
  7. <!-- 角色选择(新用户首次登录时显示) -->
  8. <view class="role-select-section" v-if="!isEdit && showRoleSelect">
  9. <view
  10. class="role-card"
  11. :class="{ active: form.role === 'parent' }"
  12. @click="selectRole('parent')"
  13. >
  14. <text class="role-icon">👨‍👩‍👧</text>
  15. <text class="role-name">家长</text>
  16. <text class="role-desc">管理家庭成员任务、审核奖励</text>
  17. </view>
  18. <view
  19. class="role-card"
  20. :class="{ active: form.role === 'child' }"
  21. @click="selectRole('child')"
  22. >
  23. <text class="role-icon">👶</text>
  24. <text class="role-name">成员</text>
  25. <text class="role-desc">执行任务、赚取积分</text>
  26. </view>
  27. <view
  28. class="role-card"
  29. :class="{ active: form.role === 'teacher' }"
  30. @click="selectRole('teacher')"
  31. >
  32. <text class="role-icon">👨‍🏫</text>
  33. <text class="role-name">成长规划师</text>
  34. <text class="role-desc">DAN测评、制定成长方案</text>
  35. </view>
  36. <button class="btn-next" @click="confirmRole" :disabled="!form.role">
  37. 下一步
  38. </button>
  39. </view>
  40. <!-- 详细信息填写(选择角色后显示) -->
  41. <view v-if="isEdit && (!isNewUserFlow || hasFamily)" :class="isEdit && form.role !== 'teacher' && isNewUserFlow ? 'user-form-wrap' : ''">
  42. <view class="form-section">
  43. <!-- 头像 -->
  44. <view class="form-item avatar-item">
  45. <text class="label">头像</text>
  46. <view class="avatar-upload" @click="chooseAvatar">
  47. <image v-if="form.avatar" :src="form.avatar" class="avatar-preview"></image>
  48. <view v-else class="avatar-placeholder">
  49. <text class="iconfont icon-plus">+</text>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 昵称 -->
  54. <view class="form-item">
  55. <text class="label">昵称 <text class="required">*</text></text>
  56. <input type="text" v-model="form.nickname" placeholder="请输入昵称" class="input" maxlength="20" />
  57. </view>
  58. <!-- 真实姓名 -->
  59. <view class="form-item">
  60. <text class="label">真实姓名</text>
  61. <input type="text" v-model="form.realName" placeholder="选填,用于家庭管理" class="input" maxlength="20" />
  62. </view>
  63. <!-- 性别(成长规划师必填) -->
  64. <view class="form-item">
  65. <text class="label">性别 <text class="required" v-if="form.role === 'teacher'">*</text></text>
  66. <radio-group class="role-select" @change="onGenderChange">
  67. <label class="role-option">
  68. <radio value="male" :checked="form.gender === 'male'" />
  69. <text>男</text>
  70. </label>
  71. <label class="role-option">
  72. <radio value="female" :checked="form.gender === 'female'" />
  73. <text>女</text>
  74. </label>
  75. </radio-group>
  76. </view>
  77. <!-- 身份证号(成长规划师必填) -->
  78. <view class="form-item">
  79. <text class="label">身份证号 <text class="required" v-if="form.role === 'teacher'">*</text></text>
  80. <input type="idcard" v-model="form.idCard" placeholder="选填,填写后自动生成生日" class="input" maxlength="18" @input="onIdCardInput" />
  81. </view>
  82. <!-- 生日 -->
  83. <view class="form-item">
  84. <text class="label">生日</text>
  85. <picker mode="date" :value="form.birthday" @change="onBirthdayChange">
  86. <view class="picker-input">{{ form.birthday || '请选择生日' }}</view>
  87. </picker>
  88. </view>
  89. <!-- 出生时辰 -->
  90. <view class="form-item">
  91. <text class="label">出生时辰</text>
  92. <picker mode="selector" :range="birthHourOptions" :value="birthHourIndex" @change="onBirthHourChange">
  93. <view class="picker-input">{{ form.birthHour || '请选择出生时辰' }}</view>
  94. </picker>
  95. </view>
  96. <!-- 民族 -->
  97. <view class="form-item">
  98. <text class="label">民族</text>
  99. <picker mode="selector" :range="ethnicityOptions" :value="ethnicityIndex" @change="onEthnicityChange">
  100. <view class="picker-input">{{ form.ethnicity || '请选择民族' }}</view>
  101. </picker>
  102. </view>
  103. <!-- 血型 -->
  104. <view class="form-item">
  105. <text class="label">血型</text>
  106. <picker mode="selector" :range="bloodTypeOptions" :value="bloodTypeIndex" @change="onBloodTypeChange">
  107. <view class="picker-input">{{ form.bloodType || '请选择血型' }}</view>
  108. </picker>
  109. </view>
  110. <!-- 最高学历 -->
  111. <view class="form-item">
  112. <text class="label">最高学历</text>
  113. <picker mode="selector" :range="educationOptions" :value="educationIndex" @change="onEducationChange">
  114. <view class="picker-input">{{ form.highestEducation || '请选择最高学历' }}</view>
  115. </picker>
  116. </view>
  117. <!-- 婚姻状态 -->
  118. <view class="form-item">
  119. <text class="label">婚姻状态</text>
  120. <picker mode="selector" :range="maritalOptions" :value="maritalIndex" @change="onMaritalChange">
  121. <view class="picker-input">{{ form.maritalStatus || '请选择婚姻状态' }}</view>
  122. </picker>
  123. </view>
  124. <!-- 所在地区(省市区三级联动,与订单收货人地址一致) -->
  125. <view class="form-item address-row" @click="openRegionPicker">
  126. <text class="label">所在地区</text>
  127. <view class="address-value-wrap">
  128. <text v-if="form.address" class="address-value">{{ form.address }}</text>
  129. <text v-else class="address-placeholder">请选择省市区</text>
  130. <text class="address-arrow">›</text>
  131. </view>
  132. </view>
  133. <!-- 详细地址 -->
  134. <view class="form-item">
  135. <text class="label">详细地址</text>
  136. <input type="text" v-model="form.street" placeholder="请输入详细地址(选填)" class="input" maxlength="100" @input="updateFullAddress" />
  137. </view>
  138. <!-- 兴趣爱好 -->
  139. <view class="form-item">
  140. <text class="label">兴趣爱好</text>
  141. <input type="text" v-model="form.hobbies" placeholder="如: 阅读、运动、音乐" class="input" maxlength="200" />
  142. </view>
  143. <!-- 饮食偏好 -->
  144. <view class="form-item">
  145. <text class="label">饮食偏好</text>
  146. <input type="text" v-model="form.dietPreferences" placeholder="如: 清淡、无辣、低糖" class="input" maxlength="200" />
  147. </view>
  148. <!-- 成长规划师额外字段 -->
  149. <view class="form-section-title" v-if="form.role === 'teacher'">成长规划师信息</view>
  150. <!-- 成长规划师证书号(成长规划师必填) -->
  151. <view class="form-item" v-if="form.role === 'teacher'">
  152. <text class="label">成长规划师证书号 <text class="required">*</text></text>
  153. <input type="text" v-model="form.teacherNo" placeholder="请输入成长规划师证书号" class="input" maxlength="50" />
  154. </view>
  155. <!-- 成长规划师照片(成长规划师必填) -->
  156. <view class="form-item" v-if="form.role === 'teacher'">
  157. <text class="label">成长规划师照片 <text class="required">*</text></text>
  158. <view class="photo-upload" @click="chooseTeacherPhoto">
  159. <image v-if="form.teacherPhoto" :src="form.teacherPhoto" class="photo-preview" mode="aspectFill"></image>
  160. <view v-else class="photo-placeholder">
  161. <text class="plus-icon">+</text>
  162. <text class="placeholder-text">上传照片</text>
  163. </view>
  164. </view>
  165. </view>
  166. <!-- 成长规划师证书照片(成长规划师必填) -->
  167. <view class="form-item" v-if="form.role === 'teacher'">
  168. <text class="label">成长规划师证书 <text class="required">*</text></text>
  169. <view class="photo-upload" @click="chooseCertificate">
  170. <image v-if="form.certificateImage" :src="form.certificateImage" class="photo-preview" mode="aspectFill"></image>
  171. <view v-else class="photo-placeholder">
  172. <text class="plus-icon">+</text>
  173. <text class="placeholder-text">上传证书</text>
  174. </view>
  175. </view>
  176. </view>
  177. </view>
  178. <!-- 助手选择(会员专属;新用户流程不展示,避免注册时被助手选择打扰) -->
  179. <view class="family-section" v-if="isEdit && !isNewUserFlow && memberLevel !== 'FREE'">
  180. <view class="section-title">🤖 选择助手</view>
  181. <view class="mascot-cards">
  182. <view class="mascot-card" :class="{ active: form.mascot === 'xibao' }" @click="selectMascot('xibao')">
  183. <view class="mascot-card-icon xibao-bg">🌟</view>
  184. <view class="mascot-card-info">
  185. <text class="mascot-card-name">浠宝</text>
  186. <text class="mascot-card-desc">温柔活泼的阳光女孩</text>
  187. </view>
  188. </view>
  189. <view class="mascot-card" :class="{ active: form.mascot === 'fubao' }" @click="selectMascot('fubao')">
  190. <view class="mascot-card-icon fubao-bg">💪</view>
  191. <view class="mascot-card-info">
  192. <text class="mascot-card-name">福宝</text>
  193. <text class="mascot-card-desc">开朗自信的阳光男孩</text>
  194. </view>
  195. </view>
  196. </view>
  197. </view>
  198. <!-- 免费用户提示(新用户首次注册信息完善时不展示,注册流程不推送会员) -->
  199. <view class="family-section" v-if="isEdit && !isNewUserFlow && memberLevel === 'FREE'">
  200. <view class="mascot-locked-hint" @click="goUpgrade">
  201. <text class="locked-icon">🔒</text>
  202. <text class="locked-text">开通会员解锁更多能力</text>
  203. <text class="locked-arrow">›</text>
  204. </view>
  205. </view>
  206. <!-- 修改个人资料保存按钮(非新用户流程时显示) -->
  207. <view class="family-section" v-if="isEdit && !isNewUserFlow && form.role !== 'teacher'">
  208. <view class="family-actions">
  209. <button class="btn btn-primary" @click="saveUserInfo" :loading="loading" :disabled="loading">
  210. 保存修改
  211. </button>
  212. </view>
  213. </view>
  214. <!-- 成长规划师提交按钮 -->
  215. <view class="family-section" v-if="isEdit && form.role === 'teacher' && isNewUserFlow">
  216. <view class="family-actions">
  217. <button class="btn btn-primary" @click="submitTeacherInfo" :loading="loading" :disabled="loading">
  218. 提交申请
  219. </button>
  220. </view>
  221. </view>
  222. </view>
  223. <view v-else-if="isEdit">
  224. <FamilyEmptyState type="card" />
  225. </view>
  226. <!-- 区域选择弹窗:统一使用 components/address-picker.vue(3 级省市区) -->
  227. <address-picker
  228. ref="addressPicker"
  229. :levels="3"
  230. :show-trigger="false"
  231. :initial="regionInitial"
  232. @change="onRegionChange"
  233. />
  234. </view>
  235. </template>
  236. <script>
  237. import { updateUserInfo, createFamily, directRegister, getUserInfo, requestJoinByCode, getMyMembership, bindReferralIfNotSelf } from '../../utils/api.js'
  238. import AddressPicker from '@/components/address-picker.vue'
  239. export default {
  240. components: { AddressPicker },
  241. data() {
  242. return {
  243. isEdit: false,
  244. showRoleSelect: true,
  245. isNewUserFlow: false, // 是否是新用户注册流程
  246. memberLevel: 'FREE', // 会员等级,用于判断是否解锁助手
  247. form: {
  248. role: '',
  249. avatar: '',
  250. nickname: '',
  251. realName: '',
  252. gender: '',
  253. idCard: '',
  254. birthday: '',
  255. birthHour: '',
  256. inviteCode: '',
  257. familyRole: '', // 家庭角色:爸爸/妈妈/爷爷/奶奶/姥爷/姥姥/其他(可选)
  258. mascot: '',
  259. phone: '',
  260. teacherNo: '',
  261. teacherPhoto: '',
  262. certificateImage: '',
  263. ethnicity: '',
  264. bloodType: '',
  265. highestEducation: '',
  266. maritalStatus: '',
  267. hobbies: '',
  268. dietPreferences: '',
  269. address: '',
  270. province: '',
  271. city: '',
  272. district: '',
  273. street: ''
  274. },
  275. ethnicityOptions: ['汉族','蒙古族','回族','藏族','维吾尔族','苗族','彝族','壮族','布依族','朝鲜族','满族','侗族','瑶族','白族','土家族','哈尼族','哈萨克族','傣族','黎族','其他'],
  276. bloodTypeOptions: ['A','B','AB','O','未知'],
  277. 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)'],
  278. birthHourValues: ['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'],
  279. educationOptions: ['小学','初中','高中','中专','大专','本科','硕士','博士'],
  280. maritalOptions: ['未婚','已婚','离异','丧偶'],
  281. familyRoleOptions: ['爸爸', '妈妈', '爷爷', '奶奶', '姥爷', '姥姥', '其他'],
  282. loading: false,
  283. userId: '',
  284. token: ''
  285. }
  286. },
  287. computed: {
  288. ethnicityIndex() {
  289. return this.ethnicityOptions.indexOf(this.form.ethnicity)
  290. },
  291. bloodTypeIndex() {
  292. return this.bloodTypeOptions.indexOf(this.form.bloodType)
  293. },
  294. birthHourIndex() {
  295. return this.birthHourValues.indexOf(this.form.birthHour)
  296. },
  297. educationIndex() {
  298. return this.educationOptions.indexOf(this.form.highestEducation)
  299. },
  300. maritalIndex() {
  301. return this.maritalOptions.indexOf(this.form.maritalStatus)
  302. },
  303. familyRoleIndex: {
  304. get() {
  305. return this.familyRoleOptions.indexOf(this.form.familyRole)
  306. },
  307. set(val) {
  308. this.form.familyRole = this.familyRoleOptions[val] || ''
  309. }
  310. },
  311. hasFamily: function() {
  312. if (this.token) return true
  313. return this.$store.getters.hasFamily
  314. },
  315. // 编辑回显:把已保存的省/市/区县名称传给统一地址组件,打开时按名称回选
  316. regionInitial() {
  317. return {
  318. province: this.form.province || '',
  319. city: this.form.city || '',
  320. district: this.form.district || ''
  321. }
  322. }
  323. },
  324. onLoad(options) {
  325. // 注册零填写改造:本页仅保留「个人中心编辑资料」用途
  326. // 新用户注册不再跳转本页(autoParent / needsRoleSelect 参数已废弃,不再处理)
  327. this.showRoleSelect = false
  328. this.isEdit = true
  329. this.isNewUserFlow = false
  330. // 加载已有用户信息
  331. this.loadUserInfo()
  332. // 加载会员等级(用于助手解锁)
  333. var self = this
  334. getMyMembership().then(function(res) {
  335. if (res.data && res.data.memberLevel) {
  336. self.memberLevel = res.data.memberLevel
  337. }
  338. }).catch(function() {})
  339. },
  340. methods: {
  341. selectRole(role) {
  342. this.form.role = role
  343. },
  344. confirmRole() {
  345. if (!this.form.role) {
  346. uni.showToast({ title: '请选择角色', icon: 'none' })
  347. return
  348. }
  349. this.showRoleSelect = false
  350. this.isEdit = true
  351. // 测试环境:直接注册用户(不需要验证码)
  352. if (!this.token && this.form.phone) {
  353. // 自动进入家庭绑定流程
  354. }
  355. },
  356. chooseAvatar() {
  357. uni.chooseImage({
  358. count: 1,
  359. success: (res) => {
  360. this.form.avatar = res.tempFilePaths[0]
  361. }
  362. })
  363. },
  364. chooseTeacherPhoto() {
  365. uni.chooseImage({
  366. count: 1,
  367. success: (res) => {
  368. this.form.teacherPhoto = res.tempFilePaths[0]
  369. }
  370. })
  371. },
  372. chooseCertificate() {
  373. uni.chooseImage({
  374. count: 1,
  375. success: (res) => {
  376. this.form.certificateImage = res.tempFilePaths[0]
  377. }
  378. })
  379. },
  380. onGenderChange(e) {
  381. this.form.gender = e.detail.value
  382. },
  383. onIdCardInput(e) {
  384. const idCard = e.detail.value
  385. if (idCard.length === 18) {
  386. // 根据身份证号自动提取生日
  387. const year = idCard.substring(6, 10)
  388. const month = idCard.substring(10, 12)
  389. const day = idCard.substring(12, 14)
  390. this.form.birthday = `${year}-${month}-${day}`
  391. }
  392. },
  393. onBirthdayChange(e) {
  394. this.form.birthday = e.detail.value
  395. },
  396. onEthnicityChange(e) {
  397. this.form.ethnicity = this.ethnicityOptions[e.detail.value]
  398. },
  399. onBloodTypeChange(e) {
  400. this.form.bloodType = this.bloodTypeOptions[e.detail.value]
  401. },
  402. onBirthHourChange(e) {
  403. this.form.birthHour = this.birthHourValues[e.detail.value]
  404. },
  405. onEducationChange(e) {
  406. this.form.highestEducation = this.educationOptions[e.detail.value]
  407. },
  408. onMaritalChange(e) {
  409. this.form.maritalStatus = this.maritalOptions[e.detail.value]
  410. },
  411. onFamilyRoleChange(e) {
  412. this.form.familyRole = this.familyRoleOptions[e.detail.value] || ''
  413. },
  414. selectMascot(code) {
  415. this.form.mascot = code
  416. },
  417. goUpgrade() {
  418. uni.navigateTo({ url: '/pages/membership/upgrade' })
  419. },
  420. // ===== 区域选择(统一组件 components/address-picker.vue) =====
  421. openRegionPicker() {
  422. if (this.$refs.addressPicker) {
  423. this.$refs.addressPicker.open()
  424. }
  425. },
  426. onRegionChange(data) {
  427. this.form.province = data.province || ''
  428. this.form.city = data.city || ''
  429. this.form.district = data.district || ''
  430. this.updateFullAddress()
  431. },
  432. updateFullAddress() {
  433. this.form.address = (this.form.province || '') + (this.form.city || '') + (this.form.district || '') + (this.form.street || '')
  434. },
  435. // 加载已有用户信息
  436. async loadUserInfo() {
  437. try {
  438. const res = await getUserInfo()
  439. if (res.code === 200 && res.data) {
  440. const userData = res.data
  441. this.form.nickname = userData.nickname || ''
  442. this.form.realName = userData.realName || ''
  443. this.form.gender = userData.gender || ''
  444. this.form.idCard = userData.idCard || ''
  445. // 生日只取日期部分,去掉时间和 ISO 格式的 T 分隔符
  446. this.form.birthday = userData.birthday ? String(userData.birthday).split(/[T ]/)[0] : ''
  447. this.form.avatar = userData.avatar || ''
  448. this.form.role = userData.role || ''
  449. this.form.phone = userData.phone || ''
  450. this.form.ethnicity = userData.ethnicity || ''
  451. this.form.bloodType = userData.bloodType || ''
  452. this.form.highestEducation = userData.highestEducation || ''
  453. this.form.maritalStatus = userData.maritalStatus || ''
  454. this.form.hobbies = userData.hobbies || ''
  455. this.form.dietPreferences = userData.dietPreferences || ''
  456. this.form.mascot = userData.mascot || ''
  457. this.form.address = userData.address || ''
  458. this.form.province = userData.province || ''
  459. this.form.city = userData.city || ''
  460. this.form.district = userData.district || ''
  461. this.form.street = userData.street || ''
  462. // 若无完整地址文本但有省市区,则拼接
  463. if (!this.form.address && (this.form.province || this.form.city || this.form.district)) {
  464. this.updateFullAddress()
  465. }
  466. }
  467. } catch (e) {
  468. console.error('加载用户信息失败', e)
  469. }
  470. },
  471. // 保存修改
  472. async saveUserInfo() {
  473. if (this.loading) return
  474. // 新用户流程:昵称可跳过(跳过时用默认昵称);老用户流程:昵称必填
  475. if (!this.isNewUserFlow && !this.form.nickname) {
  476. uni.showToast({ title: '请输入昵称', icon: 'none' })
  477. return
  478. }
  479. if (this.isNewUserFlow && !this.form.nickname) {
  480. var phone = this.form.phone || ''
  481. this.form.nickname = phone ? '用户' + phone.substring(phone.length - 4) : '微信用户'
  482. }
  483. // 从省市区街道字段同步完整地址文本
  484. this.updateFullAddress()
  485. this.loading = true
  486. try {
  487. await updateUserInfo({
  488. nickname: this.form.nickname,
  489. realName: this.form.realName,
  490. gender: this.form.gender,
  491. idCard: this.form.idCard,
  492. birthday: this.form.birthday,
  493. avatar: this.form.avatar,
  494. mascot: this.form.mascot,
  495. ethnicity: this.form.ethnicity,
  496. bloodType: this.form.bloodType,
  497. highestEducation: this.form.highestEducation,
  498. maritalStatus: this.form.maritalStatus,
  499. hobbies: this.form.hobbies,
  500. dietPreferences: this.form.dietPreferences,
  501. address: this.form.address,
  502. province: this.form.province,
  503. city: this.form.city,
  504. district: this.form.district,
  505. street: this.form.street
  506. })
  507. uni.showToast({ title: '保存成功', icon: 'success' })
  508. setTimeout(() => {
  509. if (this.isNewUserFlow) {
  510. this.navigateToHome()
  511. } else {
  512. uni.navigateBack()
  513. }
  514. }, 1500)
  515. } catch (e) {
  516. uni.showToast({ title: '保存失败', icon: 'none' })
  517. } finally {
  518. this.loading = false
  519. }
  520. },
  521. async submitTeacherInfo() {
  522. if (this.loading) return
  523. // 验证必填字段
  524. if (!this.form.nickname) {
  525. uni.showToast({ title: '请输入昵称', icon: 'none' })
  526. return
  527. }
  528. if (!this.form.gender) {
  529. uni.showToast({ title: '请选择性别', icon: 'none' })
  530. return
  531. }
  532. if (!this.form.idCard) {
  533. uni.showToast({ title: '请输入身份证号', icon: 'none' })
  534. return
  535. }
  536. if (!this.form.teacherNo) {
  537. uni.showToast({ title: '请输入成长规划师证书号', icon: 'none' })
  538. return
  539. }
  540. if (!this.form.teacherPhoto) {
  541. uni.showToast({ title: '请上传成长规划师照片', icon: 'none' })
  542. return
  543. }
  544. if (!this.form.certificateImage) {
  545. uni.showToast({ title: '请上传成长规划师证书', icon: 'none' })
  546. return
  547. }
  548. this.loading = true
  549. try {
  550. await updateUserInfo({
  551. ...this.form,
  552. roles: this.form.role
  553. })
  554. uni.showToast({ title: '提交成功,请等待审核' })
  555. setTimeout(() => {
  556. uni.switchTab({ url: '/pages/index-home/index' })
  557. }, 1500)
  558. } catch (e) {
  559. uni.showToast({ title: '提交失败', icon: 'none' })
  560. } finally {
  561. this.loading = false
  562. }
  563. },
  564. async joinFamilyAction() {
  565. if (this.loading) return
  566. if (!this.form.inviteCode) {
  567. uni.showToast({ title: '请输入邀请码', icon: 'none' })
  568. return
  569. }
  570. if (!this.form.nickname) {
  571. uni.showToast({ title: '请输入昵称', icon: 'none' })
  572. return
  573. }
  574. this.loading = true
  575. try {
  576. let userId = this.userId
  577. // 测试环境:没有token,需要先注册用户
  578. if (!this.token && this.form.phone) {
  579. const regRes = await directRegister({
  580. phone: this.form.phone,
  581. nickname: this.form.nickname,
  582. avatar: this.form.avatar,
  583. role: this.form.role,
  584. mascot: this.form.mascot,
  585. birthday: this.form.birthday,
  586. gender: this.form.gender,
  587. inviteCode: this.form.inviteCode
  588. })
  589. userId = regRes.data.userId
  590. // 保存登录信息
  591. uni.setStorageSync('token', regRes.data.token)
  592. uni.setStorageSync('userId', userId)
  593. uni.setStorageSync('role', regRes.data.role)
  594. // 邀请码注册不写入 familyId(加入需管理员审批)
  595. } else {
  596. await updateUserInfo(this.form)
  597. await requestJoinByCode(this.form.inviteCode)
  598. }
  599. uni.showToast({ title: '申请已提交,等待管理员审批' })
  600. setTimeout(() => {
  601. this.navigateToHome()
  602. }, 1500)
  603. } catch (e) {
  604. uni.showToast({ title: e.message || '加入失败', icon: 'none' })
  605. } finally {
  606. this.loading = false
  607. }
  608. },
  609. async createFamilyAction() {
  610. if (!this.form.nickname) {
  611. uni.showToast({ title: '请输入昵称', icon: 'none' })
  612. return
  613. }
  614. this.loading = true
  615. try {
  616. let userId = this.userId
  617. // 测试环境:没有token,需要先注册用户
  618. if (!this.token && this.form.phone) {
  619. const regRes = await directRegister({
  620. phone: this.form.phone,
  621. nickname: this.form.nickname,
  622. avatar: this.form.avatar,
  623. role: this.form.role,
  624. mascot: this.form.mascot,
  625. birthday: this.form.birthday,
  626. gender: this.form.gender
  627. })
  628. userId = regRes.data.userId
  629. // 保存登录信息
  630. uni.setStorageSync('token', regRes.data.token)
  631. uni.setStorageSync('userId', userId)
  632. uni.setStorageSync('role', regRes.data.role)
  633. // 注册不写入 familyId(后端根据 userId 获取)
  634. } else {
  635. await updateUserInfo(this.form)
  636. const famRes = await createFamily(this.form.nickname + '的家庭')
  637. // 同步 familyId 到 store(hasFamily getter 依赖)
  638. if (famRes && famRes.data) {
  639. this.$store.commit('setFamilyId', famRes.data)
  640. }
  641. }
  642. uni.showToast({ title: '创建成功' })
  643. setTimeout(() => {
  644. this.navigateToHome()
  645. }, 1500)
  646. } catch (e) {
  647. uni.showToast({ title: e.message || '创建失败', icon: 'none' })
  648. } finally {
  649. this.loading = false
  650. }
  651. },
  652. skip() {
  653. // 跳过时不清理邀请码,用户可后续重新进入编辑页提交申请
  654. this.navigateToHome()
  655. },
  656. navigateToHome() {
  657. // 保存 mascot 到 userInfo 存储,供聊天页读取
  658. if (this.form.mascot) {
  659. try {
  660. const userInfo = uni.getStorageSync('userInfo') || {}
  661. userInfo.mascot = this.form.mascot
  662. uni.setStorageSync('userInfo', userInfo)
  663. } catch (e) {
  664. console.error('保存 mascot 失败', e)
  665. }
  666. }
  667. // 新用户流程:消费分享者推荐码,绑定推荐人(推荐码统一为 refCode storage)
  668. // 登录页 completeLogin 在 needsRoleSelect=true 时直接跳本页,跳过了 handleReferralBind,
  669. // 因此在此处统一消费 storage 中的 refCode/inviteCode,避免推荐人绑定丢失
  670. var refCode = uni.getStorageSync('refCode')
  671. var inviteCode = uni.getStorageSync('inviteCode')
  672. var inviteType = uni.getStorageSync('inviteType')
  673. var code = refCode || (inviteCode && inviteType !== 'team' ? inviteCode : '')
  674. if (code) {
  675. var self = this
  676. bindReferralIfNotSelf(code).then(function(res) {
  677. if (res && res.code === 200) {
  678. console.log('新用户绑定推荐人成功', code)
  679. }
  680. }).catch(function(e) {
  681. // 后端 Result.error(code=500) → request() 已 toast 业务消息
  682. if (e && e.code !== undefined && e.code !== 401) {
  683. console.log('新用户绑定推荐人业务拒绝', code, e.message || '')
  684. } else {
  685. console.log('新用户绑定推荐人失败', e)
  686. }
  687. })
  688. }
  689. uni.removeStorageSync('refCode')
  690. uni.removeStorageSync('inviteCode')
  691. uni.removeStorageSync('inviteType')
  692. // 用 switchTab 跳转带底部 TabBar 的首页(行/身/智/心/富)
  693. // parent-index/child-index 是分包页面(非 TabBar 页),用 navigateTo 会丢失底部 TabBar
  694. uni.switchTab({ url: '/pages/index-home/index' })
  695. }
  696. }
  697. }
  698. </script>
  699. <style scoped>
  700. .user-edit-container {
  701. min-height: 100vh;
  702. background: #f5f5f5;
  703. padding: 30rpx;
  704. }
  705. .header {
  706. margin-bottom: 40rpx;
  707. text-align: center;
  708. }
  709. .title {
  710. font-size: 40rpx;
  711. font-weight: bold;
  712. color: #333;
  713. display: block;
  714. margin-bottom: 10rpx;
  715. }
  716. .subtitle {
  717. font-size: 28rpx;
  718. color: #999;
  719. }
  720. /* 角色选择 */
  721. .role-select-section {
  722. margin-bottom: 40rpx;
  723. }
  724. .role-card {
  725. background: #fff;
  726. border-radius: 16rpx;
  727. padding: 40rpx;
  728. margin-bottom: 20rpx;
  729. display: flex;
  730. flex-direction: column;
  731. align-items: center;
  732. border: 2rpx solid transparent;
  733. transition: border-color 0.3s, background-color 0.3s;
  734. }
  735. .role-card.active {
  736. border-color: #4CAF50;
  737. background: #f8fdf8;
  738. }
  739. .role-icon {
  740. font-size: 80rpx;
  741. margin-bottom: 16rpx;
  742. }
  743. .role-name {
  744. font-size: 32rpx;
  745. font-weight: bold;
  746. color: #333;
  747. margin-bottom: 8rpx;
  748. }
  749. .role-desc {
  750. font-size: 24rpx;
  751. color: #999;
  752. }
  753. .btn-next {
  754. background: #4CAF50;
  755. color: #fff;
  756. border-radius: 40rpx;
  757. margin-top: 20rpx;
  758. }
  759. /* 表单 */
  760. .form-section {
  761. background: #fff;
  762. border-radius: 16rpx;
  763. padding: 30rpx;
  764. margin-bottom: 30rpx;
  765. }
  766. .form-section-title {
  767. font-size: 30rpx;
  768. font-weight: bold;
  769. color: #333;
  770. margin-bottom: 20rpx;
  771. padding-bottom: 16rpx;
  772. border-bottom: 1rpx solid #f0f0f0;
  773. }
  774. .form-item {
  775. margin-bottom: 30rpx;
  776. }
  777. .label {
  778. display: block;
  779. font-size: 28rpx;
  780. color: #333;
  781. margin-bottom: 16rpx;
  782. }
  783. .required {
  784. color: #f44336;
  785. }
  786. .input, .picker-input {
  787. padding: 20rpx;
  788. background: #f5f5f5;
  789. border-radius: 12rpx;
  790. font-size: 28rpx;
  791. }
  792. .role-select {
  793. display: flex;
  794. gap: 40rpx;
  795. }
  796. .role-option {
  797. display: flex;
  798. align-items: center;
  799. gap: 8rpx;
  800. }
  801. /* 头像上传 */
  802. .avatar-upload {
  803. width: 150rpx;
  804. height: 150rpx;
  805. }
  806. .avatar-preview {
  807. width: 150rpx;
  808. height: 150rpx;
  809. border-radius: 50%;
  810. }
  811. .avatar-placeholder {
  812. width: 150rpx;
  813. height: 150rpx;
  814. background: #f5f5f5;
  815. border-radius: 50%;
  816. display: flex;
  817. align-items: center;
  818. justify-content: center;
  819. font-size: 60rpx;
  820. color: #ccc;
  821. }
  822. /* 照片上传 */
  823. .photo-upload {
  824. width: 300rpx;
  825. height: 200rpx;
  826. }
  827. .photo-preview {
  828. width: 300rpx;
  829. height: 200rpx;
  830. border-radius: 12rpx;
  831. }
  832. .photo-placeholder {
  833. width: 300rpx;
  834. height: 200rpx;
  835. background: #f5f5f5;
  836. border-radius: 12rpx;
  837. display: flex;
  838. flex-direction: column;
  839. align-items: center;
  840. justify-content: center;
  841. }
  842. .plus-icon {
  843. font-size: 60rpx;
  844. color: #ccc;
  845. }
  846. .placeholder-text {
  847. font-size: 24rpx;
  848. color: #999;
  849. margin-top: 8rpx;
  850. }
  851. /* 助手选择 */
  852. .mascot-cards {
  853. display: flex;
  854. gap: 20rpx;
  855. margin-top: 16rpx;
  856. }
  857. .mascot-card {
  858. flex: 1;
  859. background: #f8f8f8;
  860. border-radius: 16rpx;
  861. padding: 24rpx;
  862. display: flex;
  863. align-items: center;
  864. gap: 16rpx;
  865. border: 2rpx solid transparent;
  866. transition: border-color 0.3s, background-color 0.3s;
  867. }
  868. .mascot-card.active {
  869. border-color: #4CAF50;
  870. background: #f0fdf4;
  871. }
  872. .mascot-card-icon {
  873. width: 72rpx;
  874. height: 72rpx;
  875. border-radius: 50%;
  876. display: flex;
  877. align-items: center;
  878. justify-content: center;
  879. font-size: 36rpx;
  880. flex-shrink: 0;
  881. }
  882. .xibao-bg {
  883. background: linear-gradient(135deg, #FFF0DB, #FFD6A5);
  884. }
  885. .fubao-bg {
  886. background: linear-gradient(135deg, #FFF8E1, #FCD34D);
  887. }
  888. .mascot-card-info {
  889. display: flex;
  890. flex-direction: column;
  891. gap: 4rpx;
  892. }
  893. .mascot-card-name {
  894. font-size: 30rpx;
  895. font-weight: bold;
  896. color: #333;
  897. }
  898. .mascot-card-desc {
  899. font-size: 22rpx;
  900. color: #999;
  901. }
  902. /* 家庭绑定 */
  903. .family-section {
  904. background: #fff;
  905. border-radius: 16rpx;
  906. padding: 30rpx;
  907. }
  908. .section-title {
  909. font-size: 30rpx;
  910. font-weight: bold;
  911. color: #333;
  912. margin-bottom: 20rpx;
  913. }
  914. .family-actions {
  915. display: flex;
  916. flex-direction: column;
  917. gap: 20rpx;
  918. margin-top: 30rpx;
  919. }
  920. /* 新用户流程(接受家庭邀请):提交申请/跳过固定悬浮页面底部,不随滚动消失 */
  921. .family-actions-fixed {
  922. position: fixed;
  923. left: 0;
  924. right: 0;
  925. bottom: 0;
  926. z-index: 100;
  927. margin-top: 0;
  928. padding: 20rpx 32rpx;
  929. padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  930. background: #ffffff;
  931. box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
  932. }
  933. /* 新用户流程表单底部留白,避免内容被固定悬浮按钮遮挡 */
  934. .user-form-wrap {
  935. padding-bottom: 340rpx;
  936. }
  937. .btn {
  938. border-radius: 40rpx;
  939. font-size: 30rpx;
  940. }
  941. .btn-primary {
  942. background: #4CAF50;
  943. color: #fff;
  944. }
  945. .btn-skip {
  946. background: #f5f5f5;
  947. color: #999;
  948. }
  949. /* ===== 地址行(所在地区) ===== */
  950. .address-row {
  951. display: flex;
  952. justify-content: space-between;
  953. align-items: center;
  954. }
  955. .address-value-wrap {
  956. display: flex;
  957. align-items: center;
  958. flex: 1;
  959. justify-content: flex-end;
  960. }
  961. .address-value {
  962. font-size: 28rpx;
  963. color: #333;
  964. }
  965. .address-placeholder {
  966. font-size: 28rpx;
  967. color: #999;
  968. }
  969. .address-arrow {
  970. font-size: 28rpx;
  971. color: #ccc;
  972. margin-left: 8rpx;
  973. }
  974. /* 助手锁定提示 */
  975. .mascot-locked-hint {
  976. display: flex;
  977. align-items: center;
  978. padding: 28rpx 32rpx;
  979. background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  980. border-radius: 20rpx;
  981. margin-top: 16rpx;
  982. }
  983. .locked-icon {
  984. font-size: 36rpx;
  985. margin-right: 16rpx;
  986. }
  987. .locked-text {
  988. flex: 1;
  989. font-size: 28rpx;
  990. font-weight: 600;
  991. color: #92400e;
  992. }
  993. .locked-arrow {
  994. font-size: 32rpx;
  995. color: #92400e;
  996. margin-left: 8rpx;
  997. }
  998. </style>