fix:select

student-vol/mock/actDetails.json

@@ -11,8 +11,8 @@
       "publisher": "福州大学至诚学院团委",
       "hour": 4,
       "total": 50,
-      "canApply": true,
-      "applyStatus": 0
+      "canApply": false,
+      "applyStatus": 1
     }
   }
 }

student-vol/mock/actList.json

@@ -12,7 +12,7 @@
         "endTime": 1671697800000,
         "palce": "福州大学至诚学院",
         "isYourSchool": true,
-        "canApply": true,
+        "canApply": false,
         "actPic": "./imgs/actImg.jpeg"
       },
       {

student-vol/mock/myApplyList.json

@@ -36,7 +36,7 @@
         "isYourSchool": false,
         "canApply": false,
         "actPic": "./imgs/actImg.jpeg",
-        "applyStatus": 2
+        "applyStatus": 1
       }
     ]
   }

student-vol/src/components/Home/ActItem.vue

@@ -23,9 +23,18 @@
 import moment from "moment";
 
 export default {
-    props: ["data"],
+    props: ["data", "isMyApply"],
+    data() {
+        return {
+            applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
+            bgColorMap: ["", "#1989fa", "#07c160", "#f6352c"],
+        };
+    },
     methods: {
         getTagStyle(data) {
+            if (this.isMyApply && data.applyStatus !== undefined) {
+                return { backgroundColor: this.bgColorMap[data.applyStatus] };
+            }
             return { backgroundColor: data.canApply ? "#07c160" : "#999" };
         },
         formatDate(value) {
@@ -35,6 +44,9 @@ export default {
             this.$emit("goDetails", id);
         },
         getTagTxt(data) {
+            if (this.isMyApply && data.applyStatus !== undefined) {
+                return this.applyStatusMap[data.applyStatus];
+            }
             return data.canApply ? "进行中" : "已结束";
         },
     },

student-vol/src/style.css

@@ -24,8 +24,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -59,10 +57,13 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1280px;
+  max-width: 414px;
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  padding: 0;
+  text-align: left;
+  min-height: 100vh;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+  overflow-x: hidden;
 }
 
 @media (prefers-color-scheme: light) {

student-vol/src/views/ActDetails.vue

@@ -109,6 +109,11 @@ export default {
                     const { error, msg } = response.data;
                     if (error === 0) {
                         showSuccessToast("操作成功");
+                        if (payload.isApplay === false) {
+                            that.data.applyStatus = 0; // Simulate status change to 'not applied'
+                        } else {
+                            that.data.applyStatus = 1; // Simulate status change to 'under review'
+                        }
                         that.fetchDetails();
                     } else {
                         showFailToast(msg || "网络错误，请稍后重试");

student-vol/src/views/MyApply.vue

@@ -18,14 +18,14 @@
         <div class="list">
             <van-list
                 v-model:loading="loading"
-                :finished="finished"
+                :finished="true"
                 finished-text="没有更多了"
-                @load="onLoad"
             >
                 <ActItem
                     v-for="item in actList"
                     :key="item.id"
                     :data="item"
+                    :isMyApply="true"
                     @goDetails="goDetails"
                 />
             </van-list>
@@ -44,58 +44,42 @@ export default {
     data() {
         return {
             curTab: 0,
-            actList: [],
+            allActList: [],
             loading: false,
-            finished: false,
-            currentPage: 1,
         };
     },
+    computed: {
+        actList() {
+            if (this.curTab === 0) {
+                return this.allActList;
+            }
+            return this.allActList.filter(item => item.applyStatus === this.curTab);
+        }
+    },
     methods: {
         tabClick(value) {
             this.curTab = value;
-            this.currentPage = 1;
-            this.fetchApplyList(1);
         },
-        fetchApplyList(currentPage = 1) {
-            const that = this;
-            const payload = {
-                currentPage,
-                pageSize: 10,
-                type: this.curTab,
-            };
-
+        fetchApplyList() {
             this.loading = true;
             axios
-                .get("/api/myApplyList", { params: payload })
-                .then(function (response) {
+                .get("/api/myApplyList")
+                .then((response) => {
                     const { error, data = {} } = response.data;
                     if (error === 0) {
-                        const currentPage = data.current;
-                        const list = data.list;
-
-                        if (currentPage === 1) {
-                            that.actList = list;
-                        } else {
-                            that.actList.push(...list);
-                        }
-
-                        that.currentPage = currentPage;
-                        that.finished = data.pageCount === currentPage;
+                        this.allActList = data.list || [];
                     }
                 })
-                .finally(function () {
-                    that.loading = false;
+                .finally(() => {
+                    this.loading = false;
                 });
         },
-        onLoad() {
-            this.fetchApplyList(this.currentPage + 1);
-        },
         goDetails(id) {
             this.$router.push("/actDetails?id=" + id);
         },
     },
     mounted() {
-        this.fetchApplyList(1);
+        this.fetchApplyList();
     },
 };
 </script>