feat: 实现页面间进度传递与首次流程引导

- 在 start 页面接收 progress 参数并更新进度显示
- 根据进度状态控制开始按钮跳转到首次体验流程
- 在 badge 页面接收 badge 参数并更新徽章解锁状态
- 在 first 页面完成流程后显示成功弹窗并返回更新后的进度
- 实现页面间通过 URL 参数传递进度数据

src/pages/badge/index.vue

 <script setup>
 import { ref, computed } from 'vue';
 import navBar from '@/components/navBar.vue';
+import { onLoad } from '@dcloudio/uni-app';
 
 const ASSETS = Object.freeze({
     blank: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/d7873615505b400abd996b7498aaa4b6wcS02B18DXFm131a1e3b221f4a5853c94500ebbe1dbf.webp',
@@ -29,7 +30,13 @@ const badges = computed(() => [
     { id: 5, title: '水质专家', sub: '完成全部关卡', iconKey: 'badge5', unlocked: badgeImgs.value >= 5 }
 ]);
 
-const badgeImgs = ref(5);
+const badgeImgs = ref(0);
+
+onLoad((options) => {
+  if (options.badge) {
+    badgeImgs.value = Number(options.badge);
+  }
+});
 
 const unlockedCount = computed(() => badgeImgs.value);
 

src/pages/first/index.vue

 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import GarbageCleanupZone from './components/garbageCleanup.vue';
 import OilFilmSeparationZone from './components/oilFilmSeparationZone.vue';
 import SelectReagents from './components/selectReagents.vue';
 import CompleteComponent from './components/complete.vue';
 import navBar from '@/components/navBar.vue';
+import success from '@/components/success.vue';
 
 const ASSETS = Object.freeze({
   bg1: '/static/first/oneBackground.png',
@@ -32,6 +33,7 @@ const isAcidBaseNeutralizationComplete = ref(false);
 const showPurificationValue = ref(false);
 const showCompletionModal = ref(false);
 const showCompleteComponent = ref(false);
+const showSuccess = ref(false);
 const purificationValueStyle = ref({
   top: '66%',
   left: '35%',
@@ -164,6 +166,12 @@ const closeCompletionModal = () => {
 
 // 下一步按钮点击
 const handleNextStep = () => {
+  // 如果已显示complete组件，点击下一步显示success弹窗
+  if (showCompleteComponent.value) {
+    showSuccess.value = true;
+    return;
+  }
+
   // 根据当前阶段执行不同的逻辑
   switch (currentStage.value) {
     case 'garbageCleanup':
@@ -220,6 +228,14 @@ const transitionToAcidBaseNeutralization = () => {
     uni.hideLoading();
   }, 1000);
 };
+
+// 成功弹窗确认按钮点击
+const handleSuccessConfirm = () => {
+  showSuccess.value = false;
+  uni.reLaunch({
+    url: '/pages/start/index?progress=1'
+  });
+};
 </script>
 
 <template>
@@ -297,6 +313,13 @@ const transitionToAcidBaseNeutralization = () => {
       />
     </view>
 
+    <success
+      :show="showSuccess"
+      :badge-index="1"
+      @close="showSuccess = false"
+      @confirm="handleSuccessConfirm"
+    />
+
     <!-- 底部内容（始终显示） -->
     <view class="bottomContent">
       <view class="progress">

src/pages/start/index.vue

 <script setup>
 import { ref } from 'vue';
 import { onShareAppMessage } from '@dcloudio/uni-app';
+import { onLoad } from '@dcloudio/uni-app';
 
 // 图片路径
 const ASSETS = Object.freeze ({
@@ -26,7 +27,14 @@ const ASSETS = Object.freeze ({
   finishBtn: '/static/start/finishBtn.webp',
 });
 
-const progressImgs = ref(5);
+const progressImgs = ref(0);
+
+// 接收页面参数
+onLoad((options) => {
+  if (options.progress) {
+    progressImgs.value = Number(options.progress);
+  }
+});
 
 const getProgressImage = () => {
   switch (progressImgs.value) {
@@ -49,6 +57,13 @@ const getProgressImage = () => {
 
 const badgeImgs = ref(0);
 
+// 接收页面参数
+onLoad((options) => {
+  if (options.progress) {
+    badgeImgs.value = Number(options.progress);
+  }
+});
+
 const getBadgeImage = () => {
   switch (badgeImgs.value) {
     case 0:
@@ -72,7 +87,11 @@ const getBadgeImage = () => {
 const isSidebarExpanded = ref(false);
 
 const handleStart = () => {
-
+  if (progressImgs.value === 0 && badgeImgs.value === 0) {
+    uni.navigateTo({
+      url: '/pages/first/index'
+    });
+  }
 };
 
 const handleRestart = () => {
@@ -80,8 +99,9 @@ const handleRestart = () => {
 };
 
 const navToBadgePage = () => {
+  const badge = progressImgs.value > 0 ? progressImgs.value : 0;
   uni.navigateTo({
-    url: '/pages/badge/index'
+    url: `/pages/badge/index?badge=${badge}`
   });
 };