application [child-coding-miniapp] view page [pages/progress] development

apps/child-coding-miniapp/src/pages.json

@@ -35,6 +35,12 @@
 			"style": {
 				"navigationBarTitleText": "游戏页面"
 			}
+		},
+		{
+			"path": "pages/progress",
+			"style": {
+				"navigationBarTitleText": "进度页面"
+			}
 		}
 	],
 	"globalStyle": {

apps/child-coding-miniapp/src/pages/progress.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="min-h-screen bg-gradient-to-b from-blue-100 to-purple-100 p-4">
+    <!-- 进度概述 -->
+    <view class="bg-white rounded-xl p-4 mb-4 shadow-md">
+      <text class="text-xl font-bold text-gray-800 mb-2">我的进度</text>
+      <view class="flex justify-between items-center">
+        <view class="text-center">
+          <text class="text-2xl font-bold text-blue-600">{{ totalLevels }}</text>
+          <text class="text-sm text-gray-600">总关卡</text>
+        </view>
+        <view class="text-center">
+          <text class="text-2xl font-bold text-green-600">{{ completedLevels }}</text>
+          <text class="text-sm text-gray-600">已完成</text>
+        </view>
+        <view class="text-center">
+          <text class="text-2xl font-bold text-yellow-600">{{ totalScore }}</text>
+          <text class="text-sm text-gray-600">总积分</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 关卡进度列表 -->
+    <view class="bg-white rounded-xl p-4 mb-4 shadow-md">
+      <text class="text-lg font-bold text-gray-800 mb-3">关卡进度</text>
+      <view v-for="progress in levelProgress" :key="progress.levelId" class="flex justify-between items-center py-2 border-b border-gray-100">
+        <view>
+          <text class="font-medium text-gray-800">{{ progress.levelTitle }}</text>
+          <text class="text-sm text-gray-600">难度: {{ progress.difficulty }}/5</text>
+        </view>
+        <view class="text-right">
+          <view v-if="progress.completed" class="flex items-center">
+            <text class="text-green-600 font-bold mr-2">✓</text>
+            <text class="text-sm text-gray-600">{{ progress.score }} 分</text>
+          </view>
+          <view v-else class="text-gray-500">
+            <text>未完成</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 成就 -->
+    <view class="bg-white rounded-xl p-4 shadow-md">
+      <text class="text-lg font-bold text-gray-800 mb-3">我的成就</text>
+      <view v-if="userAchievements.length === 0" class="text-center py-8">
+        <text class="text-gray-500">暂无成就，继续努力！</text>
+      </view>
+      <view v-else class="grid grid-cols-2 gap-4">
+        <view v-for="achievement in userAchievements" :key="achievement.id" class="bg-gradient-to-r from-yellow-200 to-yellow-400 rounded-lg p-3 text-center">
+          <text class="text-2xl mb-1">{{ achievement.icon || '🏆' }}</text>
+          <text class="font-bold text-sm">{{ achievement.title }}</text>
+          <text class="text-xs text-gray-700">{{ achievement.points }} 分</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { entities, auth } from '@/lib/nvwa'
+
+// 定义类型
+interface LevelProgress {
+  levelId: number
+  levelTitle: string
+  difficulty: number
+  completed: boolean
+  score?: number
+}
+
+interface UserAchievement {
+  id: number
+  title: string
+  icon?: string
+  points: number
+}
+
+// 响应式数据
+const totalLevels = ref(0)
+const completedLevels = ref(0)
+const totalScore = ref(0)
+const levelProgress = ref<LevelProgress[]>([])
+const userAchievements = ref<UserAchievement[]>([])
+
+onMounted(async () => {
+  const user = await auth.currentUser()
+  if (!user) {
+    // 如果未登录，跳转到登录页
+    uni.redirectTo({ url: '/pages/user/login' })
+    return
+  }
+
+  // 获取所有关卡
+  const { data: levels } = await entities.from('level').select('id, title, difficulty')
+  totalLevels.value = levels?.length || 0
+
+  // 获取用户关卡进度
+  const { data: progresses } = await entities.from('user_level_progress').select('level_id, completed, score').eq('user_id', user.id)
+
+  if (progresses) {
+    levelProgress.value = progresses.map(p => {
+      const level = levels?.find(l => l.id === p.level_id)
+      return {
+        levelId: p.level_id,
+        levelTitle: level?.title || '未知关卡',
+        difficulty: level?.difficulty || 1,
+        completed: p.completed,
+        score: p.score
+      }
+    })
+    completedLevels.value = progresses.filter(p => p.completed).length
+    totalScore.value = progresses.reduce((sum, p) => sum + (p.score || 0), 0)
+  }
+
+  // 获取用户成就
+  const { data: userAchievData } = await entities.from('user_achievement').select('achievement_id').eq('user_id', user.id)
+
+  if (userAchievData) {
+    const achievementIds = userAchievData.map(ua => ua.achievement_id)
+    if (achievementIds.length > 0) {
+      const { data: achievements } = await entities.from('achievement').select('id, title, icon, points').in('id', achievementIds)
+      if (achievements) {
+        userAchievements.value = achievements.map(a => ({
+          id: a.id,
+          title: a.title,
+          icon: a.icon,
+          points: a.points
+        }))
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+/* 可以添加额外样式 */
+</style>