From effc40477b9fb4988f0c99ec97cd66c41c227376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Fri, 23 May 2025 17:31:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(MineTask):=20=E6=B7=BB=E5=8A=A0=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E5=9B=BE=E5=88=86=E9=A1=B5=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在标题栏添加分页器组件
- 实现分页器的动态显示和切换
- 优化轮播图样式，使其更加美观
---
 src/views/Home/components/MineTask/Index.vue | 42 ++++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/views/Home/components/MineTask/Index.vue b/src/views/Home/components/MineTask/Index.vue
index e6c744a..029d67a 100644
--- a/src/views/Home/components/MineTask/Index.vue
+++ b/src/views/Home/components/MineTask/Index.vue
@@ -1,31 +1,56 @@
 <script setup lang="ts">
 import QuestionList from './components/QuestionList.vue';
-
+import { ref } from 'vue';
+const active = ref(0);
+const total = ref(0);
 const surveys = defineModel('surveys', { required: true });
+function setActive(act, tol) {
+  active.value = act;
+  total.value = tol;
+}
 </script>
 
 <template>
   <div class="carousel-container">
     <div class="title">
       <span>我的任务</span>
+      <div class="carousel-indicators">
+        <i
+          v-for="(item, index) in total"
+          class="van-swipe__indicator"
+          :class="active === index ? 'van-swipe__indicator--active' : ''"
+        ></i>
+      </div>
+      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
+    </div>
+    <div>
+      <van-swipe>
+        <van-swipe-item v-for="question in surveys" :key="question?.sn">
+          <question-list :survey="question" style="max-width: 100vw; overflow: hidden" />
+        </van-swipe-item>
+
+        <template #indicator="{ active, total }">
+          {{ setActive(active, total) }}
+        </template>
+      </van-swipe>
     </div>
-    <van-swipe>
-      <van-swipe-item v-for="question in surveys" :key="question?.sn">
-        <question-list :survey="question" style="max-width: 100vw; overflow: hidden" />
-      </van-swipe-item>
-    </van-swipe>
   </div>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/css/theme';
-
+.carousel-indicators {
+  position: relative;
+  display: flex;
+  transform: translate(-50%);
+}
 .carousel-container {
   background-color: #fff;
   overflow: hidden;
   margin-top: theme.$gap;
   border-radius: theme.$card-radius;
   padding: 10px;
+  position: relative;
 
   .title {
     color: black;
@@ -33,6 +58,9 @@ const surveys = defineModel('surveys', { required: true });
     font-family: PingFangSC-Heavy;
     font-weight: 900;
     line-height: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .carousel-item {