基本完成第三关

src/pages/third/components/BottomActionBar.vue

@@ -5,32 +5,91 @@
         
         <image class="bar-bg" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp" mode="scaleToFill"></image>
         <text class="test-status">当前测试: <text class="highlight">{{ statusText }}</text></text>
-        <view class="start-btn-wrapper" @click="handleStartTest">
+        <view class="start-btn-wrapper" @click="handleStartTest" :class="{ 'disabled': isDisabled }">
             <image class="start-btn-img" :src="btnImage" mode="scaleToFill"></image>
         </view>
     </view>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const props = defineProps({
     isTesting: {
         type: Boolean,
         default: false
+    },
+    isSecondTest: {
+        type: Boolean,
+        default: false
+    },
+    isResultShown: {
+        type: Boolean,
+        default: false
+    },
+    isProgressFinished: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['startTest', 'restartTest', 'showFinalCard', 'showCompletionPopup']);
+
+const isDisabled = ref(false);
+
+const statusText = computed(() => {
+    if (props.isSecondTest) return '2/2';
+    return props.isTesting ? '1/2' : '0/2';
+});
+
+const btnImage = computed(() => {
+    if (props.isSecondTest) {
+        if (props.isResultShown) {
+            return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/f8df9974d93a478f8c6b760fd32e15aaGroup%20348447439.webp';
+        }
+        if (props.isTesting) {
+            return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp';
+        }
+        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
     }
+    if (props.isTesting && props.isProgressFinished && !props.isResultShown) {
+        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp';
+    }
+    return props.isTesting 
+        ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp' 
+        : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
 });
 
-const emit = defineEmits(['startTest']);
+watch(() => props.isTesting, (newVal) => {
+    if (newVal) {
+        isDisabled.value = true;
+    }
+});
 
-const statusText = computed(() => props.isTesting ? '1/2' : '0/2');
+watch(() => props.isProgressFinished, (newVal) => {
+    if (newVal) {
+        isDisabled.value = false;
+    }
+});
 
-const btnImage = computed(() => props.isTesting 
-    ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp' 
-    : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp');
+watch(() => props.isResultShown, (newVal) => {
+    if (newVal) {
+        isDisabled.value = false;
+    }
+});
 
 const handleStartTest = () => {
-    emit('startTest');
+    if (isDisabled.value) return;
+
+    if (!props.isTesting) {
+        emit('startTest');
+    } else if (props.isTesting && props.isProgressFinished && !props.isResultShown) {
+        emit('showFinalCard');
+    } else if (props.isResultShown && props.isSecondTest) {
+        emit('showCompletionPopup');
+    } else if (props.isResultShown && !props.isSecondTest) {
+        emit('restartTest');
+    }
 };
 </script>
 

src/pages/third/components/beaker.vue

 <template>
     <view class="main-content">
         <view class="beaker-section">
-            <view class="beaker-item polluted-beaker">
+            <view class="beaker-item polluted-beaker" :class="{ 'no-transform': isSecondTest }">
                 <view class="beaker-img-wrapper">
                     <image class="beaker-img"
                         :class="{ 'img-hidden': isTesting }"
@@ -41,17 +41,33 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
 const props = defineProps({
     isTesting: {
         type: Boolean,
         default: false
+    },
+    isSecondTest: {
+        type: Boolean,
+        default: false
     }
 });
 
 const pollutedImageDefault = 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2729bd9ca6249728c29c66a6e7f1baf%E7%83%A7%E6%9D%AF_%E6%B1%A1%E6%9F%93%E6%B0%B4%E7%89%88%202.webp';
-const pollutedImageTesting = 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d775e2166f2d426f857e69dc3d115d47%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE2%201.webp';
 const purifiedImageDefault = 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/048d81b1821442c3b80d312e4ef7c1e4%E7%83%A7%E6%9D%AF_%E6%B0%B4%E9%9D%A2%E5%B9%B3%E6%95%B4%E7%89%88%201.webp';
-const purifiedImageTesting = 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/c18364684a82445382105028ec6d8f44%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE1%201.webp';
+
+const pollutedImageTesting = computed(() => {
+    return props.isSecondTest 
+        ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a277ce4fb175493c9cedd60f6aa788d1%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8%201.webp'
+        : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d775e2166f2d426f857e69dc3d115d47%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE2%201.webp';
+});
+
+const purifiedImageTesting = computed(() => {
+    return props.isSecondTest
+        ? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b1c0214a1344946908e8de7ddaaea5e%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8_%E5%87%80%E5%8C%96%E6%B0%B4%201.webp'
+        : 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/c18364684a82445382105028ec6d8f44%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE1%201.webp';
+});
 </script>
 
 <style scoped lang="scss">
@@ -106,7 +122,7 @@ const purifiedImageTesting = 'https://userone-oss-cdn.angelgroup.com.cn/static/2
             }
         }
 
-        &.polluted-beaker .beaker-img-overlay {
+        &.polluted-beaker:not(.no-transform) .beaker-img-overlay {
             transform: scale(1.03) translateY(25rpx);
             transform-origin: center bottom;
         }

src/pages/third/index.vue

@@ -6,14 +6,18 @@
 			<image class="title" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e9ddd6b498fe452b9254e86c04596df3Group%20348447251.webp" mode="heightFix"></image>
 		</view>
 
-		<Beaker :isTesting="isTesting"/>
+		<Beaker :isTesting="isTesting" :isSecondTest="isSecondTest"/>
 
 		<view class="bottom-panel">
 
-		<TabsInstructionsPanel :isTesting="isTesting"/>
+		<TabsInstructionsPanel :isTesting="isTesting" :isSecondTest="isSecondTest" :triggerShowFinalCard="triggerShowFinalCard" @resultShown="handleResultShown" @progressFinished="handleProgressFinished"/>
 
-		<BottomActionBar :isTesting="isTesting" @startTest="startTest"/>
+		<BottomActionBar :isTesting="isTesting" :isSecondTest="isSecondTest" :isResultShown="isResultShown" :isProgressFinished="isProgressFinished" @startTest="startTest" @restartTest="restartTest" @showFinalCard="handleShowFinalCard" @showCompletionPopup="handleShowCompletion"/>
 		</view>
+
+        <view class="completion-overlay" v-if="showCompletion" @click="closeCompletion">
+            <image class="completion-img" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d204d71cf2a54b18a6404e6132618cd6%E5%AE%8C%E6%88%90%E5%BC%B9%E7%AA%97.webp" mode="scaleToFill" @click.stop="closeCompletion"></image>
+        </view>
 	</view>
 </template>
 
@@ -26,6 +30,11 @@ import BottomActionBar from './components/BottomActionBar.vue';
 
 const statusBarHeight = ref(20);
 const isTesting = ref(false);
+const isSecondTest = ref(false);
+const isResultShown = ref(false);
+const isProgressFinished = ref(false);
+const triggerShowFinalCard = ref(false);
+const showCompletion = ref(false);
 
 onLoad(() => {
 	const systemInfo = uni.getSystemInfoSync();
@@ -45,6 +54,37 @@ const goBack = () => {
 const startTest = () => {
 	console.log('Start detection');
 	isTesting.value = true;
+	isProgressFinished.value = false;
+	triggerShowFinalCard.value = false;
+};
+
+const handleResultShown = () => {
+	isResultShown.value = true;
+};
+
+const handleProgressFinished = () => {
+	isProgressFinished.value = true;
+};
+
+const handleShowFinalCard = () => {
+	triggerShowFinalCard.value = true;
+};
+
+const restartTest = () => {
+	console.log('Restart detection');
+	isTesting.value = false;
+	isResultShown.value = false;
+	isProgressFinished.value = false;
+	triggerShowFinalCard.value = false;
+	isSecondTest.value = true;
+};
+
+const handleShowCompletion = () => {
+	showCompletion.value = true;
+};
+
+const closeCompletion = () => {
+	showCompletion.value = false;
 };
 </script>
 
@@ -111,6 +151,23 @@ const startTest = () => {
 		}
 	}
 
+    .completion-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .completion-img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
 	.bottom-panel {
 		width: 100%;
 		height: 48vh;