风测回调页面优化

src/views/EvaluationResult.vue

@@ -1,57 +1,99 @@
 <script setup>
+import { ref, onMounted } from 'vue';
 import { useRoute } from "vue-router";
-import apiUser from '@/api/modules/user'
+import apiUser from '@/api/modules/user';
 import { Toast } from 'tdesign-mobile-vue';
 
-const route = useRoute()
+const route = useRoute();
+const countdown = ref(3); // 倒计时初始值，单位：秒
+let countdownInterval = null; // 倒计时器
 
 async function handleSaveResult() {
   if (!route.query.result) {
     Toast({
       theme: 'error',
       message: '未携带测评结果',
-    })
-    return
+    });
+    return;
   }
-  const res=await apiUser.saveEvaluationResult({ data: decodeURIComponent(route.query.result)})
-  if(res.Ret!==200||(res.Ret===200&&res.ErrCode!==0)){
+  const res = await apiUser.saveEvaluationResult({ data: decodeURIComponent(route.query.result) });
+  if (res.Ret !== 200 || (res.Ret === 200 && res.ErrCode !== 0)) {
     setTimeout(() => {
-      Toast(res.Msg)
+      Toast(res.Msg);
     }, 500);
   }
-
 }
-handleSaveResult()
-
+handleSaveResult();
 function handleBack() {
+  countdown.value = 0
+  clearInterval(countdownInterval); // 清除倒计时器
   wx.miniProgram.switchTab({
     url: `/pages/index/index`,
   });
 }
 
+function startCountdown() {
+  countdownInterval = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(countdownInterval); // 清除倒计时器
+      handleBack(); // 返回首页
+    }
+  }, 1000);
+}
 
+onMounted(() => {
+  startCountdown(); // 启动倒计时
+});
 </script>
 
 <template>
   <div class="evaluation-result-page">
+    <div class="success-img">
+      <img src="@/assets/imgs/evaluation-successful.png" alt="" class="img" />
+    </div>
+    <div class="success-text">
+      <p>您已完成风险测评，</p>
+      <p>请点击返回首页或等待页面自动返回！</p>
+    </div>
     <t-button
       class="btn"
       theme="primary"
       block
       shape="round"
       @click="handleBack"
-      >返回首页</t-button
     >
+      <span class="go-back">返回首页</span>
+      <span v-if="countdown > 0">{{ countdown }}s</span>
+    </t-button>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .evaluation-result-page {
+  .success-img {
+    width: 100%;
+    margin-top: 200px;
+    display: flex;
+    justify-content: center;
+    .img {
+      width: 640px;
+      height: 480px;
+    }
+  }
+  .success-text {
+    color: #053CC9;
+    margin-top: 50px;
+    text-align: center;
+  }
   .btn {
     position: fixed;
     left: 10vw;
     width: 80vw;
-    bottom: 200px;
+    bottom: 300px;
+    .go-back {
+      margin-right: 10px;
+    }
   }
 }
 </style>