个人中心

src/pages/profile/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '次元中心'
+}

src/pages/profile/index.vue

@@ -1,47 +1,257 @@
 <template>
-    <view class="profile-page">
-      <view class="title">个人中心</view>
-      <nut-empty description="正在开发中..." image="empty" />
+  <view class="profile-page">
+    <!-- 用户信息卡片 -->
+    <view class="user-card">
+      <view class="user-avatar">
+        <image :src="userStore.avatar || defaultAvatar" mode="aspectFill"></image>
+      </view>
+      <view class="user-info">
+        <view class="user-name">{{ userStore.nickname || '未登录' }}</view>
+        <view class="user-id">玩家ID: {{ userStore.openid ? userStore.openid.substring(0, 8) : '未登录' }}</view>
+      </view>
     </view>
-    <Tabbar></Tabbar>
-  </template>
+    
+    <!-- 数据统计 -->
+    <view class="stats-card">
+      <view class="stat-item">
+        <view class="stat-value">{{ userStore.gameCount }}</view>
+        <view class="stat-label">参与游戏</view>
+      </view>
+      <view class="stat-item">
+        <view class="stat-value">{{ userStore.roomCount }}</view>
+        <view class="stat-label">创建房间</view>
+      </view>
+    </view>
+    
+    <!-- 积分与经验 -->
+    <view class="points-card">
+      <view class="points-header">
+        <view class="points-title">嘻元</view>
+      </view>
+      
+      <view class="points-info">
+        <view class="points-row">
+          <view class="points-count">{{ userStore.points }}</view>
+        </view>
+        
+        <view class="exp-bar">
+          <view class="exp-progress" :style="{ width: userStore.expPercentage + '%' }"></view>
+        </view>
+        <view class="level-tag">Lv.{{ userStore.level }}</view>
+      </view>
+    </view>
+    
+    <!-- 底部版权信息 -->
+    <view class="footer">
+      <view class="app-version">LineJoy v1.0</view>
+      <view class="copyright">© 2025 灵嘻次元工作室</view>
+    </view>
+  </view>
   
-  <script lang="ts">
-  import Taro from '@tarojs/taro'
-  import Tabbar from '@/components/Tabbar.vue'
+  <Tabbar></Tabbar>
+</template>
 
-  export default {
-    components: {
-      Tabbar
-    },
+<script lang="ts">
+import { ref, onMounted } from 'vue'
+import Taro from '@tarojs/taro'
+import { useUserStore } from '@/stores/user'
+import Tabbar from '@/components/Tabbar.vue'
+
+export default {
+  components: {
+    Tabbar
+  },
+
+  onShow() {
+    Taro.hideHomeButton()
+  },
+  
+  setup() {
+    const userStore = useUserStore()
+    const defaultAvatar = 'https://upload-bbs.mihoyo.com/upload/2022/01/22/76b32c01af33a4b6c6d0926675df26f7_3499695120008689147.png'
     
-    // 页面显示时的生命周期钩子
-    onShow() {
-      // 隐藏返回首页按钮
-      Taro.hideHomeButton()
-      console.log('已隐藏返回首页按钮')
-    },
+    // 初始化
+    onMounted(() => {
+      // 确保用户数据已加载
+      if (!userStore.isRegistered) {
+        userStore.initUser()
+      }
+    })
     
-    // setup函数用于Composition API
-    setup() {
-      // 这里可以添加其他响应式数据和方法
+    return {
+      userStore,
+      defaultAvatar
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.profile-page {
+  padding: $spacing-base;
+  background-color: $background-color-base;
+  min-height: 100vh;
+  padding-bottom: $spacing-large * 4; // 为底部tabbar留出空间
+  
+  // 用户信息卡片
+  .user-card {
+    background-color: $background-color-light;
+    border-radius: $border-radius-small;
+    padding: $spacing-large;
+    margin-bottom: $spacing-large;
+    box-shadow: $shadow-light;
+    display: flex;
+    align-items: center;
+    
+    .user-avatar {
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: $spacing-large;
+      border: 2px solid $primary-color;
+      
+      image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    
+    .user-info {
+      flex: 1;
+      
+      .user-name {
+        font-size: $font-size-large;
+        color: $text-color-primary;
+        font-weight: $font-weight-bold;
+        margin-bottom: $spacing-mini;
+      }
       
-      return {
-        // 返回需要在模板中使用的数据和方法
+      .user-id {
+        font-size: $font-size-small;
+        color: $text-color-secondary;
       }
     }
   }
-  </script>
   
-  <style lang="scss">
-  .profile-page {
-    padding: 20px;
-    
-    .title {
-      font-size: 20px;
-      font-weight: bold;
-      margin-bottom: 20px;
+  // 数据统计卡片
+  .stats-card {
+    background-color: $background-color-light;
+    border-radius: $border-radius-small;
+    padding: $spacing-large;
+    margin-bottom: $spacing-large;
+    box-shadow: $shadow-light;
+    display: flex;
+    
+    .stat-item {
+      flex: 1;
       text-align: center;
+      padding: $spacing-base 0;
+      
+      .stat-value {
+        font-size: 24px;
+        color: $primary-color;
+        font-weight: $font-weight-bold;
+        margin-bottom: $spacing-small;
+      }
+      
+      .stat-label {
+        font-size: $font-size-small;
+        color: $text-color-secondary;
+      }
+    }
+  }
+  
+  // 积分卡片
+  .points-card {
+    background-color: $background-color-light;
+    border-radius: $border-radius-small;
+    padding: $spacing-large;
+    margin-bottom: $spacing-large;
+    box-shadow: $shadow-light;
+    
+    .points-header {
+      margin-bottom: $spacing-large;
+      
+      .points-title {
+        font-size: $font-size-medium;
+        color: $text-color-primary;
+        font-weight: $font-weight-medium;
+      }
+    }
+    
+    .points-info {
+      position: relative;
+      
+      .points-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: $spacing-large;
+        
+        .points-label {
+          font-size: $font-size-medium;
+          color: $text-color-secondary;
+          margin-right: $spacing-base;
+        }
+        
+        .points-count {
+          font-size: 24px;
+          color: $primary-color;
+          font-weight: $font-weight-bold;
+        }
+      }
+      
+      .exp-bar {
+        height: 8px;
+        background-color: $background-color-gray;
+        border-radius: 4px;
+        margin-bottom: $spacing-small;
+        overflow: hidden;
+        
+        .exp-progress {
+          height: 100%;
+          background-color: $success-color;
+          border-radius: 4px;
+          transition: width 0.3s;
+        }
+      }
+      
+      .exp-info {
+        font-size: $font-size-small;
+        color: $text-color-secondary;
+      }
+      
+      .level-tag {
+        position: absolute;
+        top: 0;
+        right: 0;
+        background-color: $warning-color;
+        color: white;
+        font-size: $font-size-small;
+        padding: $spacing-mini $spacing-base;
+        border-radius: $border-radius-small;
+        font-weight: $font-weight-medium;
+      }
+    }
+  }
+  
+  // 底部版权信息
+  .footer {
+    text-align: center;
+    padding: $spacing-large 0;
+    margin-top: auto;
+    
+    .app-version {
+      font-size: $font-size-small;
+      color: $text-color-secondary;
+      margin-bottom: $spacing-small;
+    }
+    
+    .copyright {
+      font-size: $font-size-small;
+      color: $text-color-secondary;
     }
   }
-  </style>
+}
+</style>

src/stores/user.ts

@@ -18,6 +18,16 @@ export const useUserStore = defineStore('user', () => {
   const loading = ref(false)
   const error = ref<string | null>(null)
   
+  // 经验值系统
+  const points = ref(0)      // 积分
+  const exp = ref(0)         // 经验值
+  const level = ref(1)       // 等级
+  const nextLevelExp = ref(100) // 下一级所需经验
+  
+  // 游戏统计数据
+  const gameCount = ref(0)   // 参与游戏数量
+  const roomCount = ref(0)   // 创建房间数量
+  
   // 计算属性
   const userInfo = computed<UserInfo>(() => ({
     openid: openid.value,
@@ -26,6 +36,11 @@ export const useUserStore = defineStore('user', () => {
     role: role.value
   }))
   
+  // 经验值百分比
+  const expPercentage = computed(() => {
+    return (exp.value / nextLevelExp.value) * 100
+  })
+  
   // 保存用户状态到本地存储
   function saveUserToStorage() {
     const userData = {
@@ -35,6 +50,14 @@ export const useUserStore = defineStore('user', () => {
       role: role.value,
       currentRoom: currentRoom.value,
       isRegistered: isRegistered.value,
+      // 经验值系统数据
+      points: points.value,
+      exp: exp.value,
+      level: level.value,
+      nextLevelExp: nextLevelExp.value,
+      // 统计数据
+      gameCount: gameCount.value,
+      roomCount: roomCount.value
     }
     
     Taro.setStorageSync('userInfo', JSON.stringify(userData))
@@ -55,6 +78,16 @@ export const useUserStore = defineStore('user', () => {
       isRegistered.value = !!data.isRegistered
       currentRoom.value = data.currentRoom || null
       
+      // 加载经验值系统数据
+      points.value = data.points || 0
+      exp.value = data.exp || 0
+      level.value = data.level || 1
+      nextLevelExp.value = data.nextLevelExp || 100
+      
+      // 加载统计数据
+      gameCount.value = data.gameCount || 0
+      roomCount.value = data.roomCount || 0
+      
       return true
     } catch (error) {
       console.error('加载用户信息失败:', error)
@@ -225,6 +258,51 @@ export const useUserStore = defineStore('user', () => {
     saveUserToStorage()
   }
   
+  // 经验值系统相关方法
+  
+  // 增加积分
+  function addPoints(amount: number) {
+    points.value += amount
+    saveUserToStorage()
+  }
+  
+  // 增加经验值
+  function addExp(amount: number) {
+    exp.value += amount
+    
+    // 检查是否升级
+    checkLevelUp()
+    
+    saveUserToStorage()
+    return { level: level.value, exp: exp.value, nextLevelExp: nextLevelExp.value }
+  }
+  
+  // 检查是否升级
+  function checkLevelUp() {
+    while (exp.value >= nextLevelExp.value) {
+      // 升级
+      level.value++
+      exp.value -= nextLevelExp.value
+      
+      // 调整下一级所需经验值 (每级增加20%)
+      nextLevelExp.value = Math.floor(nextLevelExp.value * 1.2)
+    }
+  }
+  
+  // 统计数据相关方法
+  
+  // 记录参与游戏
+  function recordGameParticipation() {
+    gameCount.value++
+    saveUserToStorage()
+  }
+  
+  // 记录创建房间
+  function recordRoomCreation() {
+    roomCount.value++
+    saveUserToStorage()
+  }
+  
   return {
     // 状态
     openid,
@@ -238,6 +316,17 @@ export const useUserStore = defineStore('user', () => {
     error,
     userInfo,
     
+    // 经验值系统
+    points,
+    exp,
+    level,
+    nextLevelExp,
+    expPercentage,
+    
+    // 游戏统计
+    gameCount,
+    roomCount,
+    
     // 方法
     initUser,
     registerUser,
@@ -246,6 +335,14 @@ export const useUserStore = defineStore('user', () => {
     logout,
     setCurrentGame,
     resetToPlayer,
-    clearGameSession
+    clearGameSession,
+    
+    // 经验值系统方法
+    addPoints,
+    addExp,
+    
+    // 统计方法
+    recordGameParticipation,
+    recordRoomCreation
   }
 })