feat: 计划列表

pages/index/planList.vue

@@ -30,7 +30,7 @@
         @click="switchTab('completed')"
       >
         <view class="label">已完成计划</view>
-        <view class="count">12</view>
+        <view class="count">{{ completedPlanList.length }}</view>
       </view>
       <view
         class="tab-item"
@@ -38,7 +38,7 @@
         @click="switchTab('incomplete')"
       >
         <view class="label">未完成计划</view>
-        <view class="count">12</view>
+        <view class="count">{{ incompletePlanList.length }}</view>
       </view>
     </view>
 
@@ -63,7 +63,13 @@
           </view>
         </view>
       </view> -->
-      <view class="plan-item" v-for="(item, index) in planList" :key="index">
+      <view
+        class="plan-item"
+        v-for="(item, index) in activeTab === 'completed'
+          ? completedPlanList
+          : incompletePlanList"
+        :key="index"
+      >
         <view class="plan-header">
           <image
             src="/static/images/icon-date.png"
@@ -83,12 +89,20 @@
           </view>
         </view>
       </view>
+      <u-empty
+        v-if="
+          !loading &&
+          ((activeTab === 'completed' && completedPlanList.length === 0) ||
+            (activeTab === 'incomplete' && incompletePlanList.length === 0))
+        "
+        mode="list"
+      ></u-empty>
     </view>
 
+    <!--  :max-date="maxDate" -->
     <u-calendar
       v-model="showCalendar"
       mode="range"
-      :max-date="maxDate"
       @change="changeDate"
     ></u-calendar>
   </view>
@@ -102,27 +116,31 @@ import { getDateDiff } from "@/utils/utils";
 
 export default {
   data() {
+    const todayStr = GetNowTime(new Date());
+
     return {
       activeTab: "completed",
 
-      maxDate: "2049-12-31",
+      // maxDate: "2049-12-31", // 默认最大日期为当天
 
       showCalendar: false,
 
       // 请求参数
       params: {
-        // '0 1 2'
-        "Item1.IsCompleted": 0,
-        dateBegin: GetNowTime(new Date()),
-        dateEnd: GetNowTime(new Date()),
+        // "Item1.IsCompleted": 1, // '0 1 2'  0未完成 1已完成 2不用管
+        dateBegin: todayStr,
+        dateEnd: todayStr,
       },
 
       // 计划列表
-      planList: [],
+      completedPlanList: [],
+      incompletePlanList: [],
+      loading: false, // 添加加载状态
     };
   },
   onShow() {
-    this.getPlanList();
+    // 页面每次展示时都获取所有列表
+    this.fetchAllPlanLists();
   },
   methods: {
     getDateDiff,
@@ -137,15 +155,38 @@ export default {
     changeDate(e) {
       this.params.dateBegin = e.startDate;
       this.params.dateEnd = e.endDate;
-      this.getPlanList();
+      // 日期更改后，重新获取所有列表
+      this.fetchAllPlanLists();
     },
 
-    // 获取计划列表
-    async getPlanList() {
-      const res = await GetPlanList(this.params);
+    // 统一获取所有列表数据
+    async fetchAllPlanLists() {
+      if (this.loading) return; // 防止重复加载
+      this.loading = true;
+      uni.showLoading({ title: "加载中..." }); // 显示加载提示
+      try {
+        await Promise.all([this.fetchListData(1), this.fetchListData(0)]);
+      } catch (error) {
+        console.error("获取所有列表时出错:", error);
+      } finally {
+        this.loading = false;
+        uni.hideLoading(); // 隐藏加载提示
+      }
+    },
 
+    async fetchListData(status) {
+      const requestParams = {
+        ...this.params,
+        "Item1.IsCompleted": status, // 0未完成 1已完成 2不用管
+      };
+
+      const res = await GetPlanList(requestParams);
       if (res.succeed) {
-        this.planList = res.data;
+        if (status === 1) {
+          this.completedPlanList = res.data || [];
+        } else {
+          this.incompletePlanList = res.data || [];
+        }
       }
     },
   },
@@ -153,6 +194,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page {
+  background: #f7f8fc !important;
+}
 .content {
   // height: 100vh;
   padding-bottom: 100rpx;