|
|
@@ -1,321 +1,321 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- Tabbar 切换过渡页 -->
|
|
|
- <tab-transition v-if="showTabTransition" dimCode="wealth" ref="tabTransition" @close="showTabTransition = false" />
|
|
|
-
|
|
|
- <!-- ===== 未登录状态 ===== -->
|
|
|
- <view v-if="!isLoggedIn" class="login-prompt">
|
|
|
- <view class="prompt-icon">👤</view>
|
|
|
- <text class="prompt-title">登录浠艾福</text>
|
|
|
- <text class="prompt-desc">登录后可查看个人资料、积分记录等</text>
|
|
|
- <button class="login-btn" @click="goLogin">登录 / 注册</button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- ===== 已登录状态 ===== -->
|
|
|
- <template v-else>
|
|
|
- <!-- 用户卡片 -->
|
|
|
- <ProfileHeader @avatar-click="goToEditInfo" />
|
|
|
-
|
|
|
- <!-- 个人信息完善卡片（全部填满后隐藏） -->
|
|
|
- <view class="profile-card" v-if="isLoggedIn && profileProgress < 14" @click="goToEditInfo">
|
|
|
- <view class="profile-card-left">
|
|
|
- <text class="profile-card-title">个人信息</text>
|
|
|
- <text class="profile-card-desc">已完善 {{ profileProgress }}/14 个字段，点击继续补充</text>
|
|
|
- </view>
|
|
|
- <text class="profile-card-arrow">›</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 成长报告 -->
|
|
|
- <ProfileGrowth />
|
|
|
-
|
|
|
- <!-- 成就徽章 -->
|
|
|
- <ProfileBadges />
|
|
|
-
|
|
|
- <!-- 健康等级称号（P2-1） -->
|
|
|
- <HealthBadge
|
|
|
- v-if="levelInfo"
|
|
|
- :levelInfo="levelInfo"
|
|
|
- :score="score"
|
|
|
- :progress="progress"
|
|
|
- :nextLevel="nextLevel"
|
|
|
- :streakDays="streakDays" />
|
|
|
-
|
|
|
- <!-- 健康故事时间线（P2-1） -->
|
|
|
- <HealthTimeline :events="timelineEvents" />
|
|
|
-
|
|
|
- <!-- 菜单列表（仅个人信息 + 设置，不含服务/商城板块） -->
|
|
|
- <ProfileMenu :role="role" :show-services="false" @invite-generate="onInviteGenerate" />
|
|
|
- </template>
|
|
|
- <AIFloatingAvatar />
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import TabTransition from '../../components/tab-transition.vue'
|
|
|
-import ProfileHeader from './components/ProfileHeader.vue'
|
|
|
-import ProfileBadges from './components/ProfileBadges.vue'
|
|
|
-import ProfileGrowth from './components/ProfileGrowth.vue'
|
|
|
-import ProfileMenu from './components/ProfileMenu.vue'
|
|
|
-import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
|
|
|
-import HealthBadge from '../../components/HealthBadge.vue'
|
|
|
-import HealthTimeline from '../../components/HealthTimeline.vue'
|
|
|
-import { getHealthScoreInfo, getHealthTimeline, getUserInfo } from '../../utils/api.js'
|
|
|
-
|
|
|
-export default {
|
|
|
-components: {
|
|
|
-TabTransition,
|
|
|
-ProfileHeader,
|
|
|
-ProfileBadges,
|
|
|
-ProfileGrowth,
|
|
|
-ProfileMenu,
|
|
|
-AIFloatingAvatar,
|
|
|
-HealthBadge,
|
|
|
-HealthTimeline
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- Tabbar 切换过渡页 -->
|
|
|
+ <tab-transition v-if="showTabTransition" dimCode="wealth" ref="tabTransition" @close="showTabTransition = false" />
|
|
|
+
|
|
|
+ <!-- ===== 未登录状态 ===== -->
|
|
|
+ <view v-if="!isLoggedIn" class="login-prompt">
|
|
|
+ <view class="prompt-icon">👤</view>
|
|
|
+ <text class="prompt-title">登录浠艾福</text>
|
|
|
+ <text class="prompt-desc">登录后可查看个人资料、积分记录等</text>
|
|
|
+ <button class="login-btn" @click="goLogin">登录 / 注册</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- ===== 已登录状态 ===== -->
|
|
|
+ <template v-else>
|
|
|
+ <!-- 用户卡片 -->
|
|
|
+ <ProfileHeader @avatar-click="goToEditInfo" />
|
|
|
+
|
|
|
+ <!-- 个人信息完善卡片（全部填满后隐藏） -->
|
|
|
+ <view class="profile-card" v-if="isLoggedIn && profileProgress < 14" @click="goToEditInfo">
|
|
|
+ <view class="profile-card-left">
|
|
|
+ <text class="profile-card-title">个人信息</text>
|
|
|
+ <text class="profile-card-desc">已完善 {{ profileProgress }}/14 个字段，点击继续补充</text>
|
|
|
+ </view>
|
|
|
+ <text class="profile-card-arrow">›</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 成长报告 -->
|
|
|
+ <ProfileGrowth />
|
|
|
+
|
|
|
+ <!-- 成就徽章 -->
|
|
|
+ <ProfileBadges />
|
|
|
+
|
|
|
+ <!-- 健康等级称号（P2-1） -->
|
|
|
+ <HealthBadge
|
|
|
+ v-if="levelInfo"
|
|
|
+ :levelInfo="levelInfo"
|
|
|
+ :score="score"
|
|
|
+ :progress="progress"
|
|
|
+ :nextLevel="nextLevel"
|
|
|
+ :streakDays="streakDays" />
|
|
|
+
|
|
|
+ <!-- 健康故事时间线（P2-1） -->
|
|
|
+ <HealthTimeline :events="timelineEvents" />
|
|
|
+
|
|
|
+ <!-- 菜单列表（仅个人信息 + 设置，不含服务/商城板块） -->
|
|
|
+ <ProfileMenu :role="role" :show-services="false" @invite-generate="onInviteGenerate" />
|
|
|
+ </template>
|
|
|
+ <AIFloatingAvatar />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TabTransition from '../../components/tab-transition.vue'
|
|
|
+import ProfileHeader from './components/ProfileHeader.vue'
|
|
|
+import ProfileBadges from './components/ProfileBadges.vue'
|
|
|
+import ProfileGrowth from './components/ProfileGrowth.vue'
|
|
|
+import ProfileMenu from './components/ProfileMenu.vue'
|
|
|
+import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
|
|
|
+import HealthBadge from '../../components/HealthBadge.vue'
|
|
|
+import HealthTimeline from '../../components/HealthTimeline.vue'
|
|
|
+import { getHealthScoreInfo, getHealthTimeline, getUserInfo } from '../../utils/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+components: {
|
|
|
+TabTransition,
|
|
|
+ProfileHeader,
|
|
|
+ProfileBadges,
|
|
|
+ProfileGrowth,
|
|
|
+ProfileMenu,
|
|
|
+AIFloatingAvatar,
|
|
|
+HealthBadge,
|
|
|
+HealthTimeline
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- shareData: null,
|
|
|
- showTabTransition: true,
|
|
|
- selectedMascot: '',
|
|
|
- currentMascotName: '小助手',
|
|
|
- // P2-1 身份重塑
|
|
|
- levelInfo: null,
|
|
|
- score: 0,
|
|
|
- progress: 0,
|
|
|
- nextLevel: null,
|
|
|
- streakDays: 0,
|
|
|
- timelineEvents: [],
|
|
|
- // 个人信息完善进度（0-14 字段）
|
|
|
- profileProgress: 0
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- isLoggedIn() {
|
|
|
- return !!uni.getStorageSync('token')
|
|
|
- },
|
|
|
- role() {
|
|
|
- return uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
|
|
|
- }
|
|
|
- },
|
|
|
- onShareAppMessage() {
|
|
|
- if (this.shareData) {
|
|
|
- return {
|
|
|
- title: this.shareData.title,
|
|
|
- path: this.shareData.path,
|
|
|
- imageUrl: '/static/invite-card.png'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.showTabTransition = true
|
|
|
-
|
|
|
- if (!uni.getStorageSync('token')) {
|
|
|
- this._watchPageReady()
|
|
|
- return
|
|
|
- }
|
|
|
- this.loadMascot()
|
|
|
- const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
|
|
|
- if (currentRole === 'teacher') {
|
|
|
- uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
|
|
|
- }
|
|
|
- this.loadHealthScoreData()
|
|
|
- this.loadProfileProgress()
|
|
|
- this._watchPageReady()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goLogin() {
|
|
|
- uni.navigateTo({ url: '/pages/login/login' })
|
|
|
- },
|
|
|
- onInviteGenerate(shareData) {
|
|
|
- this.shareData = shareData
|
|
|
- },
|
|
|
- changeMascot(mascot) {
|
|
|
- if (this.selectedMascot === mascot) return;
|
|
|
- uni.request({
|
|
|
- url: this.$config.API_BASE_URL + '/api/user/mascot/set',
|
|
|
- method: 'POST',
|
|
|
- header: { Authorization: 'Bearer ' + uni.getStorageSync('token') },
|
|
|
- data: { mascot },
|
|
|
- success: (res) => {
|
|
|
- if (res.data.code === 200 || res.data.code === 0) {
|
|
|
- this.selectedMascot = mascot;
|
|
|
- this.currentMascotName = mascot === 'xibao' ? '浠宝' : '福宝';
|
|
|
- // 同步更新 localStorage 以便 AIFloatingAvatar 等组件能读到最新值
|
|
|
- var userInfo = uni.getStorageSync('userInfo') || {};
|
|
|
- userInfo.mascot = mascot;
|
|
|
- uni.setStorageSync('userInfo', userInfo);
|
|
|
- uni.showToast({ title: '已更换' });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- loadMascot() {
|
|
|
- var userInfo = uni.getStorageSync('userInfo');
|
|
|
- if (userInfo && userInfo.mascot) {
|
|
|
- this.selectedMascot = userInfo.mascot;
|
|
|
- this.currentMascotName = userInfo.mascot === 'xibao' ? '浠宝' : '福宝';
|
|
|
- }
|
|
|
- },
|
|
|
- _watchPageReady() {
|
|
|
- var self = this
|
|
|
- this.$nextTick(function() {
|
|
|
- if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
|
|
|
- })
|
|
|
- },
|
|
|
- loadHealthScoreData() {
|
|
|
- var memberId = uni.getStorageSync('currentChildId') || null
|
|
|
- if (!memberId) return
|
|
|
- var self = this
|
|
|
- getHealthScoreInfo({ memberId: memberId }).then(function(res) {
|
|
|
- if (res.code === 200 && res.data) {
|
|
|
- self.levelInfo = res.data.level || null
|
|
|
- self.score = res.data.score || 0
|
|
|
- self.progress = res.data.progress || 0
|
|
|
- self.nextLevel = res.data.nextLevel || null
|
|
|
- self.streakDays = res.data.streakDays || 0
|
|
|
- }
|
|
|
- }).catch(function() {})
|
|
|
- getHealthTimeline({ memberId: memberId }).then(function(res) {
|
|
|
- if (res.code === 200 && Array.isArray(res.data)) {
|
|
|
- self.timelineEvents = res.data.slice(0, 10)
|
|
|
- }
|
|
|
- }).catch(function() {})
|
|
|
- },
|
|
|
- loadProfileProgress() {
|
|
|
- var self = this
|
|
|
- getUserInfo().then(function(res) {
|
|
|
- if (res && res.code === 200 && res.data) {
|
|
|
- var user = res.data
|
|
|
- var fields = ['nickname', 'avatar', 'realName', 'gender', 'birthday', 'birthHour', 'ethnicity', 'bloodType', 'highestEducation', 'maritalStatus', 'address', 'hobbies', 'dietPreferences', 'phone']
|
|
|
- var filled = 0
|
|
|
- for (var i = 0; i < fields.length; i++) {
|
|
|
- var v = user[fields[i]]
|
|
|
- if (v !== null && v !== undefined && v !== '') filled++
|
|
|
- }
|
|
|
- self.profileProgress = filled
|
|
|
- }
|
|
|
- }).catch(function() {})
|
|
|
- },
|
|
|
- // 修复：ProfileHeader 头像点击进入编辑页（原方法缺失）
|
|
|
- goToEditInfo() {
|
|
|
- uni.navigateTo({ url: '/pages/user-edit/user-edit' })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.container {
|
|
|
- min-height: 100vh;
|
|
|
- background: #f5f7fa;
|
|
|
- padding-bottom: 120rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.login-prompt {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 200rpx 60rpx;
|
|
|
-}
|
|
|
-.prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
|
|
|
-.prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
|
|
|
-.prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 60rpx; }
|
|
|
-.login-btn {
|
|
|
- width: 80%;
|
|
|
- background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
- color: #fff;
|
|
|
- border-radius: 50rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- padding: 24rpx;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
-
|
|
|
-.mascot-selector {
|
|
|
- margin: 20rpx 0;
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
-}
|
|
|
-.selector-header {
|
|
|
- margin-bottom: 20rpx;
|
|
|
-}
|
|
|
-.selector-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1F2937;
|
|
|
-}
|
|
|
-.selector-subtitle {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #6366F1;
|
|
|
- margin-left: 16rpx;
|
|
|
-}
|
|
|
-.mascot-cards {
|
|
|
- display: flex;
|
|
|
- gap: 20rpx;
|
|
|
-}
|
|
|
-.mascot-card {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 24rpx 0;
|
|
|
- border: 2rpx solid #E5E7EB;
|
|
|
- border-radius: 12rpx;
|
|
|
-}
|
|
|
-.mascot-card.active {
|
|
|
- border-color: #6366F1;
|
|
|
- background: #EEF2FF;
|
|
|
-}
|
|
|
-.card-icon {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-}
|
|
|
-.card-icon.xibao {
|
|
|
- background: linear-gradient(135deg, #FF8C42, #FF6B9D);
|
|
|
-}
|
|
|
-.card-icon.fubao {
|
|
|
- background: linear-gradient(135deg, #6366F1, #10B981);
|
|
|
-}
|
|
|
-.card-name {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #374151;
|
|
|
-}
|
|
|
-
|
|
|
-.profile-card {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 20rpx 30rpx;
|
|
|
- padding: 28rpx 32rpx;
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
-}
|
|
|
-.profile-card-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.profile-card-title {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-.profile-card-desc {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-top: 8rpx;
|
|
|
-}
|
|
|
-.profile-card-arrow {
|
|
|
- font-size: 40rpx;
|
|
|
- color: #ccc;
|
|
|
-}
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shareData: null,
|
|
|
+ showTabTransition: true,
|
|
|
+ selectedMascot: '',
|
|
|
+ currentMascotName: '小助手',
|
|
|
+ // P2-1 身份重塑
|
|
|
+ levelInfo: null,
|
|
|
+ score: 0,
|
|
|
+ progress: 0,
|
|
|
+ nextLevel: null,
|
|
|
+ streakDays: 0,
|
|
|
+ timelineEvents: [],
|
|
|
+ // 个人信息完善进度（0-14 字段）
|
|
|
+ profileProgress: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isLoggedIn() {
|
|
|
+ return !!uni.getStorageSync('token')
|
|
|
+ },
|
|
|
+ role() {
|
|
|
+ return uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage() {
|
|
|
+ if (this.shareData) {
|
|
|
+ return {
|
|
|
+ title: this.shareData.title,
|
|
|
+ path: this.shareData.path,
|
|
|
+ imageUrl: '/static/invite-card.png'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.showTabTransition = true
|
|
|
+
|
|
|
+ if (!uni.getStorageSync('token')) {
|
|
|
+ this._watchPageReady()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loadMascot()
|
|
|
+ const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
|
|
|
+ if (currentRole === 'teacher') {
|
|
|
+ uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
|
|
|
+ }
|
|
|
+ this.loadHealthScoreData()
|
|
|
+ this.loadProfileProgress()
|
|
|
+ this._watchPageReady()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goLogin() {
|
|
|
+ uni.navigateTo({ url: '/pages/login/login' })
|
|
|
+ },
|
|
|
+ onInviteGenerate(shareData) {
|
|
|
+ this.shareData = shareData
|
|
|
+ },
|
|
|
+ changeMascot(mascot) {
|
|
|
+ if (this.selectedMascot === mascot) return;
|
|
|
+ uni.request({
|
|
|
+ url: this.$config.API_BASE_URL + '/api/user/mascot/set',
|
|
|
+ method: 'POST',
|
|
|
+ header: { Authorization: 'Bearer ' + uni.getStorageSync('token') },
|
|
|
+ data: { mascot },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code === 200 || res.data.code === 0) {
|
|
|
+ this.selectedMascot = mascot;
|
|
|
+ this.currentMascotName = mascot === 'xibao' ? '浠宝' : '福宝';
|
|
|
+ // 同步更新 localStorage 以便 AIFloatingAvatar 等组件能读到最新值
|
|
|
+ var userInfo = uni.getStorageSync('userInfo') || {};
|
|
|
+ userInfo.mascot = mascot;
|
|
|
+ uni.setStorageSync('userInfo', userInfo);
|
|
|
+ uni.showToast({ title: '已更换' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadMascot() {
|
|
|
+ var userInfo = uni.getStorageSync('userInfo');
|
|
|
+ if (userInfo && userInfo.mascot) {
|
|
|
+ this.selectedMascot = userInfo.mascot;
|
|
|
+ this.currentMascotName = userInfo.mascot === 'xibao' ? '浠宝' : '福宝';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ _watchPageReady() {
|
|
|
+ var self = this
|
|
|
+ this.$nextTick(function() {
|
|
|
+ if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadHealthScoreData() {
|
|
|
+ var memberId = uni.getStorageSync('currentChildId') || null
|
|
|
+ if (!memberId) return
|
|
|
+ var self = this
|
|
|
+ getHealthScoreInfo({ memberId: memberId }).then(function(res) {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.levelInfo = res.data.level || null
|
|
|
+ self.score = res.data.score || 0
|
|
|
+ self.progress = res.data.progress || 0
|
|
|
+ self.nextLevel = res.data.nextLevel || null
|
|
|
+ self.streakDays = res.data.streakDays || 0
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ getHealthTimeline({ memberId: memberId }).then(function(res) {
|
|
|
+ if (res.code === 200 && Array.isArray(res.data)) {
|
|
|
+ self.timelineEvents = res.data.slice(0, 10)
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ loadProfileProgress() {
|
|
|
+ var self = this
|
|
|
+ getUserInfo().then(function(res) {
|
|
|
+ if (res && res.code === 200 && res.data) {
|
|
|
+ var user = res.data
|
|
|
+ var fields = ['nickname', 'avatar', 'realName', 'gender', 'birthday', 'birthHour', 'ethnicity', 'bloodType', 'highestEducation', 'maritalStatus', 'address', 'hobbies', 'dietPreferences', 'phone']
|
|
|
+ var filled = 0
|
|
|
+ for (var i = 0; i < fields.length; i++) {
|
|
|
+ var v = user[fields[i]]
|
|
|
+ if (v !== null && v !== undefined && v !== '') filled++
|
|
|
+ }
|
|
|
+ self.profileProgress = filled
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ // 修复：ProfileHeader 头像点击进入编辑页（原方法缺失）
|
|
|
+ goToEditInfo() {
|
|
|
+ uni.navigateTo({ url: '/pages/user-edit/user-edit' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-prompt {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 200rpx 60rpx;
|
|
|
+}
|
|
|
+.prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
|
|
|
+.prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
|
|
|
+.prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 60rpx; }
|
|
|
+.login-btn {
|
|
|
+ width: 80%;
|
|
|
+ background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.mascot-selector {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+.selector-header {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.selector-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1F2937;
|
|
|
+}
|
|
|
+.selector-subtitle {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #6366F1;
|
|
|
+ margin-left: 16rpx;
|
|
|
+}
|
|
|
+.mascot-cards {
|
|
|
+ display: flex;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+.mascot-card {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border: 2rpx solid #E5E7EB;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+.mascot-card.active {
|
|
|
+ border-color: #6366F1;
|
|
|
+ background: #EEF2FF;
|
|
|
+}
|
|
|
+.card-icon {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+.card-icon.xibao {
|
|
|
+ background: linear-gradient(135deg, #FF8C42, #FF6B9D);
|
|
|
+}
|
|
|
+.card-icon.fubao {
|
|
|
+ background: linear-gradient(135deg, #6366F1, #10B981);
|
|
|
+}
|
|
|
+.card-name {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+ padding: 28rpx 32rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+.profile-card-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.profile-card-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.profile-card-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 8rpx;
|
|
|
+}
|
|
|
+.profile-card-arrow {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
</style>
|
