profile.vue 29 KB

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