profile.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926
  1. <template>
  2. <view class="container">
  3. <!-- 未登录 -->
  4. <view v-if="!isLoggedIn" class="login-prompt">
  5. <text class="prompt-icon">👤</text>
  6. <text class="prompt-title">登录浠艾福</text>
  7. <text class="prompt-desc">登录后查看个人资料、积分记录等</text>
  8. <button class="login-btn" @click="goLogin">登录 / 注册</button>
  9. </view>
  10. <!-- 已登录 -->
  11. <template v-else>
  12. <!-- 退出切换 -->
  13. <view class="exit-switch" v-if="isSwitchedChild" @click="onExitSwitch">
  14. <text>🔄 退出切换</text>
  15. </view>
  16. <!-- 用户身份卡片 -->
  17. <view class="user-card">
  18. <view class="user-card-left">
  19. <view class="avatar-wrap" @click="goToEditInfo">
  20. <image v-if="userInfo.avatar" class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
  21. <text v-else class="avatar-text">{{ nickname.charAt(0) || '👤' }}</text>
  22. </view>
  23. <view class="user-meta">
  24. <view class="user-name-row">
  25. <text class="nickname">{{ nickname || '未设置昵称' }}</text>
  26. <text class="role-tag">{{ roleLabel }}</text>
  27. </view>
  28. <view class="user-sub" v-if="memberLevel">
  29. <text class="level-badge" :class="'level-' + memberLevel">{{ memberLevelText }}</text>
  30. <text v-if="membershipDays > 0 && membershipDays <= 30" class="days-left">剩余 {{ membershipDays }} 天</text>
  31. </view>
  32. <view class="user-sub" v-else>
  33. <text class="days-left">开通会员解锁更多权益</text>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="user-card-right">
  38. <view class="points-box" @click="goToPoints">
  39. <text class="points-num">{{ totalPoints }}</text>
  40. <text class="points-label">积分</text>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- 核心数据概览 -->
  45. <view class="stats-bar">
  46. <view class="stat-item" @click="goToTasks">
  47. <text class="stat-num">{{ pendingTasks }}</text>
  48. <text class="stat-label">待完成任务</text>
  49. </view>
  50. <view class="stat-divider"></view>
  51. <view class="stat-item" @click="goToCheckin">
  52. <text class="stat-num">{{ streakDays }}</text>
  53. <text class="stat-label">连续打卡</text>
  54. </view>
  55. <view class="stat-divider"></view>
  56. <view class="stat-item" @click="goToFamily">
  57. <text class="stat-num">{{ familyCount }}</text>
  58. <text class="stat-label">家庭成员</text>
  59. </view>
  60. <view class="stat-divider"></view>
  61. <view class="stat-item" @click="goToChallenges">
  62. <text class="stat-num">{{ activeChallenges }}</text>
  63. <text class="stat-label">进行中挑战</text>
  64. </view>
  65. </view>
  66. <!-- 商城订单快捷 -->
  67. <view class="mall-section" v-if="totalPoints > 0">
  68. <view class="mall-header" @click="goToOrders">
  69. <text class="mall-title">🛒 商城订单</text>
  70. <text class="mall-more">全部订单 ›</text>
  71. </view>
  72. <view class="mall-grid">
  73. <view class="mall-item" @click="goToOrders">
  74. <text class="mall-item-num" v-if="orderPending > 0">{{ orderPending }}</text>
  75. <text class="mall-item-num" v-else>0</text>
  76. <text class="mall-item-label">待审核</text>
  77. </view>
  78. <view class="mall-item" @click="goToOrders">
  79. <text class="mall-item-num" v-if="orderUnpaid > 0">{{ orderUnpaid }}</text>
  80. <text class="mall-item-num" v-else>0</text>
  81. <text class="mall-item-label">待付款</text>
  82. </view>
  83. <view class="mall-item" @click="goToOrders">
  84. <text class="mall-item-num" v-if="orderShipped > 0">{{ orderShipped }}</text>
  85. <text class="mall-item-num" v-else>0</text>
  86. <text class="mall-item-label">待发货</text>
  87. </view>
  88. <view class="mall-item" @click="goToOrders">
  89. <text class="mall-item-num" v-if="orderAfterSale > 0">{{ orderAfterSale }}</text>
  90. <text class="mall-item-num" v-else>0</text>
  91. <text class="mall-item-label">售后</text>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- 推广中心快捷 -->
  96. <view class="mall-section" v-if="commissionBalance > 0 || referralCount > 0 || teamCount > 0">
  97. <view class="mall-header" @click="goToPromotion">
  98. <text class="mall-title">💰 推广中心</text>
  99. <text class="mall-more">进入 ›</text>
  100. </view>
  101. <view class="mall-grid">
  102. <view class="mall-item" @click="goToPromotion">
  103. <text class="mall-item-num">{{ commissionBalance }}</text>
  104. <text class="mall-item-label">可提现</text>
  105. </view>
  106. <view class="mall-item" @click="goToPromotion">
  107. <text class="mall-item-num">{{ referralCount }}</text>
  108. <text class="mall-item-label">邀请人数</text>
  109. </view>
  110. <view class="mall-item" @click="goToPromotion">
  111. <text class="mall-item-num">{{ teamCount }}</text>
  112. <text class="mall-item-label">团队人数</text>
  113. </view>
  114. </view>
  115. </view>
  116. <!-- 五维能量 -->
  117. <view class="energy-section" v-if="sandboxData">
  118. <view class="section-header">
  119. <text class="section-title">🌟 五维能量</text>
  120. <text class="section-more" @click="goToEnergySandbox">详情 ›</text>
  121. </view>
  122. <view class="energy-row">
  123. <view class="energy-item" v-for="dim in energyDims" :key="dim.code">
  124. <view class="energy-circle" :style="{ background: dim.color }">
  125. <text class="energy-val">{{ dim.score || 0 }}</text>
  126. </view>
  127. <text class="energy-label">{{ dim.label }}</text>
  128. </view>
  129. </view>
  130. </view>
  131. <!-- 待办提醒 -->
  132. <view class="reminders-section" v-if="hasReminders">
  133. <view class="section-header">
  134. <text class="section-title">📌 待办提醒</text>
  135. </view>
  136. <view class="reminder-item" v-if="pendingTasks > 0" @click="goToTasks">
  137. <text class="reminder-icon">📋</text>
  138. <text class="reminder-text">有 {{ pendingTasks }} 个任务待完成</text>
  139. <text class="reminder-arrow">›</text>
  140. </view>
  141. <view class="reminder-item" v-if="activeChallenges > 0" @click="goToChallenges">
  142. <text class="reminder-icon">🔥</text>
  143. <text class="reminder-text">{{ activeChallenges }} 个挑战进行中</text>
  144. <text class="reminder-arrow">›</text>
  145. </view>
  146. <view class="reminder-item" v-if="profileProgress < 14" @click="goToEditInfo">
  147. <text class="reminder-icon">📝</text>
  148. <text class="reminder-text">个人信息待完善({{ profileProgress }}/14)</text>
  149. <text class="reminder-arrow">›</text>
  150. </view>
  151. </view>
  152. <!-- 功能菜单 -->
  153. <view class="menu-section">
  154. <!-- 家庭 -->
  155. <view class="menu-group">
  156. <view class="menu-group-title">家庭</view>
  157. <view class="menu-item" @click="goToFamily">
  158. <text class="menu-icon">👨‍👩‍👧‍👦</text>
  159. <text class="menu-text">家庭成员</text>
  160. <text class="arrow">›</text>
  161. </view>
  162. <view class="menu-item" @click="goToChildren">
  163. <text class="menu-icon">👶</text>
  164. <text class="menu-text">孩子管理</text>
  165. <text class="arrow">›</text>
  166. </view>
  167. <view class="menu-item" v-if="role === 'parent'" @click="goToAppointments">
  168. <text class="menu-icon">📅</text>
  169. <text class="menu-text">测评预约</text>
  170. <text class="arrow">›</text>
  171. </view>
  172. <view class="menu-item" @click="goToChallenges">
  173. <text class="menu-icon">🔥</text>
  174. <text class="menu-text">家庭挑战</text>
  175. <text class="arrow">›</text>
  176. </view>
  177. </view>
  178. <!-- 成长 -->
  179. <view class="menu-group">
  180. <view class="menu-group-title">成长</view>
  181. <view class="menu-item" @click="goToTasks">
  182. <text class="menu-icon">📋</text>
  183. <text class="menu-text">每日任务</text>
  184. <text class="arrow">›</text>
  185. </view>
  186. <view class="menu-item" @click="goToGrowth">
  187. <text class="menu-icon">📈</text>
  188. <text class="menu-text">成长档案</text>
  189. <text class="arrow">›</text>
  190. </view>
  191. <view class="menu-item" @click="goToReport">
  192. <text class="menu-icon">📊</text>
  193. <text class="menu-text">健康报告</text>
  194. <text class="arrow">›</text>
  195. </view>
  196. </view>
  197. <!-- 商城 -->
  198. <view class="menu-group" v-if="showServices">
  199. <view class="menu-group-title">商城</view>
  200. <view class="menu-item" @click="goToPromotion">
  201. <text class="menu-icon">💰</text>
  202. <text class="menu-text">推广中心</text>
  203. <text class="arrow">›</text>
  204. </view>
  205. <view class="menu-item" @click="goToOrders">
  206. <text class="menu-icon">🛒</text>
  207. <text class="menu-text">我的订单</text>
  208. <text class="badge" v-if="orderPending + orderUnpaid + orderShipped + orderAfterSale > 0">{{ orderPending + orderUnpaid + orderShipped + orderAfterSale }}</text>
  209. <text class="arrow">›</text>
  210. </view>
  211. <view class="menu-item" @click="goToCart">
  212. <text class="menu-icon">🛍️</text>
  213. <text class="menu-text">购物车</text>
  214. <text class="badge" v-if="cartCount > 0">{{ cartCount }}</text>
  215. <text class="arrow">›</text>
  216. </view>
  217. <view class="menu-item" @click="goToCoupons">
  218. <text class="menu-icon">🎫</text>
  219. <text class="menu-text">优惠券</text>
  220. <text class="arrow">›</text>
  221. </view>
  222. </view>
  223. <!-- 更多 -->
  224. <view class="menu-group">
  225. <view class="menu-group-title">更多</view>
  226. <view class="menu-item" v-if="role === 'parent'" @click="showInviteActionSheet">
  227. <text class="menu-icon">📨</text>
  228. <text class="menu-text">邀请加入</text>
  229. <text class="arrow">›</text>
  230. </view>
  231. <view class="menu-item" @click="goToSettings">
  232. <text class="menu-icon">⚙️</text>
  233. <text class="menu-text">设置</text>
  234. <text class="arrow">›</text>
  235. </view>
  236. <view class="menu-item" @click="logout">
  237. <text class="menu-icon">🚪</text>
  238. <text class="menu-text">退出登录</text>
  239. <text class="arrow">›</text>
  240. </view>
  241. </view>
  242. </view>
  243. </template>
  244. <AIFloatingAvatar />
  245. </view>
  246. </template>
  247. <script>
  248. import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
  249. import {
  250. getChildren, getVisibleFamilyMembers, getFamilyEnergySandbox,
  251. getTodayTasksByCategory, getChallengeList, getMyMembership,
  252. verifyPassword, getPointsBalance, getUserInfo,
  253. cartCount, getOrderCounts, getCommissionSummary, getReferralSummary
  254. } from '../../utils/api.js'
  255. export default {
  256. components: { AIFloatingAvatar },
  257. data() {
  258. return {
  259. nickname: '',
  260. role: 'parent',
  261. isSwitchedChild: false,
  262. userInfo: {},
  263. memberLevel: null,
  264. membershipDays: 0,
  265. totalPoints: 0,
  266. pendingTasks: 0,
  267. streakDays: 0,
  268. familyCount: 0,
  269. activeChallenges: 0,
  270. profileProgress: 0,
  271. sandboxData: null,
  272. energyDims: [],
  273. // 商城
  274. cartCount: 0,
  275. orderPending: 0,
  276. orderUnpaid: 0,
  277. orderShipped: 0,
  278. orderAfterSale: 0,
  279. // 推广中心
  280. commissionBalance: 0,
  281. referralCount: 0,
  282. teamCount: 0
  283. }
  284. },
  285. computed: {
  286. isLoggedIn() {
  287. return !!uni.getStorageSync('token')
  288. },
  289. roleLabel() {
  290. var map = { parent: '家长', child: '孩子', teacher: '规划师' }
  291. return map[this.role] || '用户'
  292. },
  293. memberLevelText() {
  294. var map = { GOLD: '金卡', PLATINUM: '白金', DIAMOND: '钻石' }
  295. return map[this.memberLevel] || this.memberLevel || ''
  296. },
  297. hasReminders() {
  298. return this.pendingTasks > 0 || this.activeChallenges > 0 || this.profileProgress < 14
  299. }
  300. },
  301. onShow() {
  302. if (!this.isLoggedIn) {
  303. this.loadAllData()
  304. return
  305. }
  306. var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
  307. if (role === 'teacher') {
  308. uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
  309. return
  310. }
  311. this.role = role
  312. this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
  313. this.nickname = (uni.getStorageSync('userInfo') || {}).nickname || ''
  314. this.loadAllData()
  315. },
  316. methods: {
  317. loadAllData() {
  318. this.loadUserInfo()
  319. this.loadMembership()
  320. this.loadPoints()
  321. this.loadFamily()
  322. this.loadSandbox()
  323. this.loadTasks()
  324. this.loadChallenges()
  325. this.loadOrderCounts()
  326. this.loadCartCount()
  327. this.loadPromotion()
  328. },
  329. loadUserInfo() {
  330. var self = this
  331. getUserInfo().then(function(res) {
  332. if (res && res.code === 200 && res.data) {
  333. self.userInfo = res.data
  334. if (!self.nickname) self.nickname = res.data.nickname || ''
  335. }
  336. }).catch(function() {})
  337. },
  338. loadMembership() {
  339. var self = this
  340. getMyMembership().then(function(res) {
  341. if (res && res.data) {
  342. self.memberLevel = res.data.memberLevel || res.data.levelCode || null
  343. self.membershipDays = res.data.membershipDays || res.data.daysRemaining || 0
  344. }
  345. }).catch(function() {})
  346. },
  347. loadPoints() {
  348. var self = this
  349. var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')
  350. if (!memberId) return
  351. getPointsBalance(memberId).then(function(res) {
  352. if (res && res.data) {
  353. self.totalPoints = res.data.totalPoints || res.data.points || 0
  354. }
  355. }).catch(function() {})
  356. },
  357. loadFamily() {
  358. var self = this
  359. var childrenRes = getChildren()
  360. var membersRes = getVisibleFamilyMembers()
  361. Promise.all([childrenRes, membersRes]).then(function(results) {
  362. var children = results[0].data || []
  363. var members = results[1].data || []
  364. self.familyCount = members.length || children.length
  365. self.streakDays = parseInt(uni.getStorageSync('streakDays') || 0)
  366. }).catch(function() {
  367. self.familyCount = 0
  368. })
  369. },
  370. loadSandbox() {
  371. var self = this
  372. getFamilyEnergySandbox().then(function(res) {
  373. if (res && res.data) {
  374. self.sandboxData = res.data
  375. var dims = res.data.dimensions || []
  376. self.energyDims = dims.map(function(d) {
  377. return {
  378. code: d.code,
  379. label: d.label || d.code,
  380. score: d.score || 0,
  381. color: self.getDimColor(d.code)
  382. }
  383. })
  384. }
  385. }).catch(function() {})
  386. },
  387. loadTasks() {
  388. var self = this
  389. var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')
  390. if (!memberId) return
  391. if (self.role === 'child' && memberId) {
  392. getTodayTasksByCategory(memberId, 'action').then(function(res) {
  393. if (res && res.data) {
  394. self.pendingTasks = Array.isArray(res.data) ? res.data.length : 0
  395. }
  396. }).catch(function() {})
  397. }
  398. self.pendingTasks = parseInt(uni.getStorageSync('pendingTaskCount') || 0)
  399. },
  400. loadChallenges() {
  401. var self = this
  402. getChallengeList({}).then(function(res) {
  403. if (res && res.data) {
  404. self.activeChallenges = Array.isArray(res.data) ? res.data.length : 0
  405. }
  406. }).catch(function() {})
  407. },
  408. loadOrderCounts() {
  409. var self = this
  410. getOrderCounts().then(function(res) {
  411. if (res && res.data) {
  412. self.orderPending = res.data.pending || 0
  413. self.orderUnpaid = res.data.unpaid || res.data.paid || 0
  414. self.orderShipped = res.data.shipped || 0
  415. self.orderAfterSale = res.data.refunding || res.data.afterSale || 0
  416. }
  417. }).catch(function() {})
  418. },
  419. loadCartCount() {
  420. var self = this
  421. cartCount().then(function(res) {
  422. if (res && res.data != null) {
  423. self.cartCount = res.data || 0
  424. }
  425. }).catch(function() {})
  426. },
  427. loadPromotion() {
  428. var self = this
  429. getCommissionSummary().then(function(res) {
  430. if (res && res.data) {
  431. self.commissionBalance = res.data.availableAmount || res.data.balance || 0
  432. }
  433. }).catch(function() {})
  434. getReferralSummary().then(function(res) {
  435. if (res && res.data) {
  436. self.referralCount = res.data.totalCount || res.data.count || 0
  437. }
  438. }).catch(function() {})
  439. },
  440. getDimColor: function(code) {
  441. var map = {
  442. body: '#FF8C42', mind: '#FF6B9D', wisdom: '#6366F1',
  443. action: '#10B981', wealth: '#F59E0B'
  444. }
  445. return map[code] || '#999'
  446. },
  447. goLogin: function() {
  448. uni.navigateTo({ url: '/pages/login/login' })
  449. },
  450. goToEditInfo: function() {
  451. uni.navigateTo({ url: '/pages/user-edit/user-edit' })
  452. },
  453. goToPoints: function() {
  454. uni.navigateTo({ url: '/pages/points/points' })
  455. },
  456. goToTasks: function() {
  457. uni.navigateTo({ url: '/pages/tasks/tasks' })
  458. },
  459. goToCheckin: function() {
  460. uni.navigateTo({ url: '/pages/health/daily-checkin' })
  461. },
  462. goToFamily: function() {
  463. uni.navigateTo({ url: '/pages/profile-extra/family-members' })
  464. },
  465. goToChildren: function() {
  466. uni.navigateTo({ url: '/pages/profile-extra/children' })
  467. },
  468. goToAppointments: function() {
  469. uni.navigateTo({ url: '/pages/parent/appointments' })
  470. },
  471. goToChallenges: function() {
  472. uni.navigateTo({ url: '/pages/health/challenge-manage' })
  473. },
  474. goToGrowth: function() {
  475. uni.navigateTo({ url: '/pages/growth-main/index' })
  476. },
  477. goToReport: function() {
  478. uni.navigateTo({ url: '/pages/profile/report-management' })
  479. },
  480. goToMembership: function() {
  481. uni.navigateTo({ url: '/pages/membership/index' })
  482. },
  483. goToPromotion: function() {
  484. uni.navigateTo({ url: '/pages/promotion/index' })
  485. },
  486. goToCart: function() {
  487. uni.navigateTo({ url: '/pages/shop/cart/cart' })
  488. },
  489. goToOrders: function() {
  490. uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
  491. },
  492. goToCoupons: function() {
  493. uni.navigateTo({ url: '/pages/profile-extra/coupons' })
  494. },
  495. goToEnergySandbox: function() {
  496. uni.switchTab({ url: '/pages/index-home/index' })
  497. },
  498. goToSettings: function() {
  499. uni.showActionSheet({
  500. itemList: ['设置密码', '隐私设置', '关于浠艾福'],
  501. success: function(res) {
  502. if (res.tapIndex === 0) {
  503. uni.navigateTo({ url: '/pages/profile/settings' })
  504. }
  505. }
  506. })
  507. },
  508. onSwitchMode: function() {
  509. var self = this
  510. if (self.role === 'child') {
  511. uni.showModal({
  512. title: '验证密码',
  513. content: '请输入家长密码',
  514. editable: true,
  515. success: function(res) {
  516. if (res.confirm && res.content) {
  517. verifyPassword(res.content).then(function(result) {
  518. if (result.code === 200) {
  519. self.doSwitchMode()
  520. } else {
  521. uni.showToast({ title: '密码错误', icon: 'none' })
  522. }
  523. }).catch(function() {
  524. uni.showToast({ title: '验证失败', icon: 'none' })
  525. })
  526. }
  527. }
  528. })
  529. } else {
  530. this.doSwitchMode()
  531. }
  532. },
  533. doSwitchMode: function() {
  534. var self = this
  535. getChildren().then(function(res) {
  536. var children = res.data || []
  537. if (children.length === 0) {
  538. uni.showModal({
  539. title: '提示',
  540. content: '您还没有添加孩子,请先在家庭成员中添加',
  541. success: function(r) { if (r.confirm) uni.navigateTo({ url: '/pages/profile-extra/family-members' }) }
  542. })
  543. return
  544. }
  545. if (children.length === 1) {
  546. self.$store.commit('switchToChild', children[0].id)
  547. self.role = 'child'
  548. self.isSwitchedChild = true
  549. uni.showToast({ title: '已切换为孩子模式', icon: 'success' })
  550. return
  551. }
  552. uni.showActionSheet({
  553. itemList: children.map(function(c) { return c.nickname }),
  554. success: function(res) {
  555. var sel = children[res.tapIndex]
  556. self.$store.commit('switchToChild', sel.id)
  557. self.role = 'child'
  558. self.isSwitchedChild = true
  559. uni.showToast({ title: '已切换为' + sel.nickname + '模式', icon: 'success' })
  560. }
  561. })
  562. }).catch(function() {})
  563. },
  564. onExitSwitch: function() {
  565. var self = this
  566. uni.showModal({
  567. title: '退出切换',
  568. content: '请输入家长密码以确认退出',
  569. editable: true,
  570. success: function(res) {
  571. if (res.confirm && res.content) {
  572. verifyPassword(res.content).then(function(result) {
  573. if (result.code === 200) {
  574. self.$store.commit('switchBackToParent')
  575. self.isSwitchedChild = false
  576. self.role = 'parent'
  577. uni.showToast({ title: '已退出切换', icon: 'success' })
  578. uni.reLaunch({ url: '/pages/index-home/index' })
  579. } else {
  580. uni.showToast({ title: '密码错误', icon: 'none' })
  581. }
  582. }).catch(function() {
  583. uni.showToast({ title: '验证失败', icon: 'none' })
  584. })
  585. }
  586. }
  587. })
  588. },
  589. showInviteActionSheet: function() {
  590. var self = this
  591. var ui = uni.getStorageSync('userInfo') || {}
  592. var items = ['👨‍👩‍👧‍👦 邀请家人', '👨‍🏫 邀请成长规划师']
  593. uni.showActionSheet({
  594. itemList: items,
  595. success: function(res) {
  596. var type = res.tapIndex === 0 ? 'family' : 'guide'
  597. var title = (ui.nickname || '家人') + ' 邀请你加入家庭'
  598. var path = type === 'guide'
  599. ? '/pages/login/login?invite_type=guide'
  600. : '/pages/login/login?invite_type=family'
  601. self.$emit('invite-generate', { title: title, path: path, imageUrl: '/static/invite-card.png' })
  602. uni.showToast({ title: '点击右上角转发', icon: 'none' })
  603. }
  604. })
  605. },
  606. logout: function() {
  607. uni.showModal({
  608. title: '确认退出',
  609. content: '确定要退出登录吗?',
  610. success: function(res) {
  611. if (res.confirm) {
  612. this.$store.commit('logout')
  613. uni.reLaunch({ url: '/pages/index-home/index' })
  614. }
  615. }.bind(this)
  616. })
  617. }
  618. }
  619. }
  620. </script>
  621. <style scoped>
  622. .container {
  623. min-height: 100vh;
  624. background: #f5f7fa;
  625. padding-bottom: 120rpx;
  626. }
  627. /* 登录 */
  628. .login-prompt {
  629. display: flex;
  630. flex-direction: column;
  631. align-items: center;
  632. padding: 200rpx 60rpx;
  633. }
  634. .prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
  635. .prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
  636. .prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 60rpx; }
  637. .login-btn {
  638. background: linear-gradient(135deg, #667eea, #764ba2);
  639. color: #fff;
  640. border-radius: 50rpx;
  641. font-size: 30rpx;
  642. padding: 24rpx 80rpx;
  643. }
  644. /* 退出切换 */
  645. .exit-switch {
  646. margin: 0 30rpx 16rpx;
  647. background: linear-gradient(135deg, #667eea, #764ba2);
  648. color: #fff;
  649. padding: 16rpx;
  650. border-radius: 12rpx;
  651. text-align: center;
  652. font-size: 26rpx;
  653. }
  654. /* 用户卡片 */
  655. .user-card {
  656. margin: 30rpx;
  657. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  658. border-radius: 24rpx;
  659. padding: 36rpx 32rpx;
  660. display: flex;
  661. justify-content: space-between;
  662. align-items: center;
  663. box-shadow: 0 8rpx 32rpx rgba(102,126,234,0.3);
  664. }
  665. .user-card-left {
  666. display: flex;
  667. align-items: center;
  668. flex: 1;
  669. }
  670. .avatar-wrap {
  671. width: 110rpx;
  672. height: 110rpx;
  673. border-radius: 50%;
  674. background: rgba(255,255,255,0.2);
  675. display: flex;
  676. align-items: center;
  677. justify-content: center;
  678. margin-right: 24rpx;
  679. overflow: hidden;
  680. border: 4rpx solid rgba(255,255,255,0.3);
  681. }
  682. .avatar-img {
  683. width: 110rpx;
  684. height: 110rpx;
  685. border-radius: 50%;
  686. }
  687. .avatar-text {
  688. font-size: 48rpx;
  689. color: #fff;
  690. }
  691. .user-meta { flex: 1; }
  692. .user-name-row {
  693. display: flex;
  694. align-items: center;
  695. gap: 12rpx;
  696. margin-bottom: 8rpx;
  697. }
  698. .nickname {
  699. font-size: 36rpx;
  700. font-weight: bold;
  701. color: #fff;
  702. }
  703. .role-tag {
  704. font-size: 22rpx;
  705. background: rgba(255,255,255,0.2);
  706. color: #fff;
  707. padding: 4rpx 16rpx;
  708. border-radius: 20rpx;
  709. }
  710. .user-sub {
  711. display: flex;
  712. align-items: center;
  713. gap: 12rpx;
  714. }
  715. .level-badge {
  716. font-size: 26rpx;
  717. padding: 6rpx 20rpx;
  718. border-radius: 20rpx;
  719. font-weight: bold;
  720. box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
  721. border: 2rpx solid rgba(255,255,255,0.3);
  722. }
  723. .level-GOLD { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
  724. .level-PLATINUM { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
  725. .level-DIAMOND { background: linear-gradient(135deg, #EC4899, #DB2777); color: #fff; }
  726. .days-left {
  727. font-size: 24rpx;
  728. color: rgba(255,255,255,0.8);
  729. }
  730. .user-card-right {
  731. display: flex;
  732. flex-direction: column;
  733. align-items: center;
  734. gap: 16rpx;
  735. }
  736. .points-box {
  737. text-align: center;
  738. background: rgba(255,255,255,0.15);
  739. padding: 16rpx 24rpx;
  740. border-radius: 16rpx;
  741. }
  742. /* 数据概览 */
  743. .stats-bar {
  744. margin: 0 30rpx 20rpx;
  745. background: #fff;
  746. border-radius: 20rpx;
  747. display: flex;
  748. align-items: center;
  749. padding: 28rpx 0;
  750. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  751. }
  752. .stat-item {
  753. flex: 1;
  754. display: flex;
  755. flex-direction: column;
  756. align-items: center;
  757. gap: 8rpx;
  758. }
  759. .stat-num {
  760. font-size: 40rpx;
  761. font-weight: bold;
  762. color: #667eea;
  763. }
  764. .stat-label {
  765. font-size: 24rpx;
  766. color: #999;
  767. }
  768. .stat-divider {
  769. width: 1rpx;
  770. height: 60rpx;
  771. background: #f0f0f0;
  772. }
  773. /* 五维能量 */
  774. .energy-section {
  775. margin: 0 30rpx 20rpx;
  776. background: #fff;
  777. border-radius: 20rpx;
  778. padding: 28rpx;
  779. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  780. }
  781. .section-header {
  782. display: flex;
  783. justify-content: space-between;
  784. align-items: center;
  785. margin-bottom: 20rpx;
  786. }
  787. .section-title {
  788. font-size: 30rpx;
  789. font-weight: bold;
  790. color: #333;
  791. }
  792. .section-more {
  793. font-size: 24rpx;
  794. color: #999;
  795. }
  796. .energy-row {
  797. display: flex;
  798. justify-content: space-around;
  799. }
  800. .energy-item {
  801. display: flex;
  802. flex-direction: column;
  803. align-items: center;
  804. gap: 10rpx;
  805. }
  806. .energy-circle {
  807. width: 88rpx;
  808. height: 88rpx;
  809. border-radius: 50%;
  810. display: flex;
  811. align-items: center;
  812. justify-content: center;
  813. box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.15);
  814. }
  815. .energy-val {
  816. font-size: 28rpx;
  817. font-weight: bold;
  818. color: #fff;
  819. }
  820. .energy-label {
  821. font-size: 24rpx;
  822. color: #666;
  823. }
  824. /* 待办提醒 */
  825. .reminders-section {
  826. margin: 0 30rpx 20rpx;
  827. }
  828. .reminder-item {
  829. background: #fff;
  830. border-radius: 16rpx;
  831. padding: 24rpx 28rpx;
  832. margin-bottom: 12rpx;
  833. display: flex;
  834. align-items: center;
  835. gap: 16rpx;
  836. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  837. }
  838. .reminder-icon { font-size: 36rpx; }
  839. .reminder-text { flex: 1; font-size: 28rpx; color: #333; }
  840. .reminder-arrow { font-size: 32rpx; color: #ccc; }
  841. /* 菜单 */
  842. .menu-section {
  843. margin: 0 30rpx;
  844. }
  845. .menu-group {
  846. background: #fff;
  847. border-radius: 20rpx;
  848. margin-bottom: 20rpx;
  849. overflow: hidden;
  850. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  851. }
  852. .menu-group-title {
  853. padding: 16rpx 28rpx 8rpx;
  854. font-size: 22rpx;
  855. color: #999;
  856. }
  857. .menu-item {
  858. display: flex;
  859. align-items: center;
  860. padding: 26rpx 28rpx;
  861. border-bottom: 1rpx solid #f5f5f5;
  862. }
  863. .menu-item:last-child { border-bottom: none; }
  864. .menu-icon { font-size: 36rpx; margin-right: 16rpx; }
  865. .menu-text { flex: 1; font-size: 28rpx; color: #333; }
  866. .arrow { font-size: 32rpx; color: #ccc; }
  867. .badge {
  868. background: #FF4D4F;
  869. color: #fff;
  870. font-size: 22rpx;
  871. padding: 2rpx 12rpx;
  872. border-radius: 20rpx;
  873. margin-right: 12rpx;
  874. min-width: 36rpx;
  875. text-align: center;
  876. }
  877. .mall-section {
  878. margin: 0 30rpx 20rpx;
  879. background: #fff;
  880. border-radius: 20rpx;
  881. overflow: hidden;
  882. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  883. }
  884. .mall-header {
  885. display: flex;
  886. justify-content: space-between;
  887. align-items: center;
  888. padding: 24rpx 28rpx 16rpx;
  889. border-bottom: 1rpx solid #f5f5f5;
  890. }
  891. .mall-title { font-size: 30rpx; font-weight: bold; color: #333; }
  892. .mall-more { font-size: 24rpx; color: #999; }
  893. .mall-grid { display: flex; padding: 20rpx 16rpx; }
  894. .mall-item {
  895. flex: 1;
  896. display: flex;
  897. flex-direction: column;
  898. align-items: center;
  899. gap: 8rpx;
  900. padding: 16rpx 0;
  901. }
  902. .mall-item-num { font-size: 36rpx; font-weight: bold; color: #F97316; }
  903. .mall-item-label { font-size: 22rpx; color: #999; }
  904. </style>