InspectionCleaning/pages/index/planList.vue

<template>
  <view class="content">
    <u-navbar
      :is-back="false"
      title="计划列表"
      title-color="black"
      :background="{ backgroundColor: '#F7F8FC' }"
      :border-bottom="false"
    >
      <view slot="right">
        <image
          src="/static/images/icon-date.png"
          mode="scaleToFill"
          style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
          @click="toggleDate"
        />
      </view>
    </u-navbar>

    <view
      class="selectTab"
      :class="{
        'tab-completed': activeTab === 'completed',
        'tab-incomplete': activeTab === 'incomplete',
      }"
    >
      <view
        class="tab-item"
        :class="{ active: activeTab === 'completed' }"
        @click="switchTab('completed')"
      >
        <view class="label">已完成计划</view>
        <view class="count">{{ completedPlanList.length }}</view>
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'incomplete' }"
        @click="switchTab('incomplete')"
      >
        <view class="label">未完成计划</view>
        <view class="count">{{ incompletePlanList.length }}</view>
      </view>
    </view>

    <view class="planList" :class="{ activeList: activeTab === 'incomplete' }">
      <!-- <view class="plan-item">
        <view class="plan-header">
          <image
            src="/static/images/icon-date.png"
            mode="scaleToFill"
            style="width: 40rpx; height: 40rpx"
          />
          <view class="date">05-21</view>
          <view>1天前</view>
        </view>
        <view class="plan-content">
          <view class="plan-content-top">
            <view class="place">校门A区教学楼</view>
            <u-tag text="9:00~12:00" type="info" border-color="transparent" />
          </view>
          <view class="plan-content-main">
            北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
          </view>
        </view>
      </view> -->
      <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"
            mode="scaleToFill"
            style="width: 40rpx; height: 40rpx"
          />
          <view class="date">{{ item.date }}</view>
          <view>{{ item.date ? getDateDiff(item.date) : "-" }}</view>
        </view>
        <view class="plan-content">
          <view class="plan-content-top">
            <view class="place">{{ item.name }}</view>
            <u-tag text="9:00~12:00" type="info" border-color="transparent" />
          </view>
          <view class="plan-content-main">
            {{ item.areas }}
          </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"
      @change="changeDate"
    ></u-calendar>
    <u-tabbar :list="vuex_tabbar"></u-tabbar>
  </view>
</template>

<script>
import { GetPlanList } from "@/api/apiList";

import { GetNowTime } from "@/utils/common";
import { getDateDiff } from "@/utils/utils";

export default {
  data() {
    const todayStr = GetNowTime(new Date());

    return {
      activeTab: "completed",

      // maxDate: "2049-12-31", // 默认最大日期为当天

      showCalendar: false,

      // 请求参数
      params: {
        // "Item1.IsCompleted": 1, // '0 1 2'  0未完成 1已完成 2不用管
        dateBegin: todayStr,
        dateEnd: todayStr,
      },

      // 计划列表
      completedPlanList: [],
      incompletePlanList: [],
      loading: false, // 添加加载状态
    };
  },
  onShow() {
    // 页面每次展示时都获取所有列表
    this.fetchAllPlanLists();
  },
  methods: {
    getDateDiff,

    toggleDate() {
      this.showCalendar = !this.showCalendar;
    },
    switchTab(tab) {
      this.activeTab = tab;
    },

    changeDate(e) {
      this.params.dateBegin = e.startDate;
      this.params.dateEnd = e.endDate;
      // 日期更改后，重新获取所有列表
      this.fetchAllPlanLists();
    },

    // 统一获取所有列表数据
    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) {
        if (status === 1) {
          this.completedPlanList = res.data || [];
        } else {
          this.incompletePlanList = res.data || [];
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f7f8fc !important;
}
.content {
  // height: 100vh;
  padding-bottom: 100rpx;
  background: #f7f8fc;
  .selectTab {
    display: flex;
    // background: url("@/static/images/plan-tab2.png") no-repeat 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: opacity 0.3s ease;
    border-radius: 16rpx;
    padding: 32rpx 0;
    margin: 0 32rpx 32rpx;

    .tab-item {
      flex: 1;
      text-align: center;
      position: relative;
      transition: all 0.3s;
      position: relative;
      z-index: 1;

      .label {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 8rpx;
      }

      .count {
        font-size: 36rpx;
        color: #ffffff;
        font-weight: 500;
      }

      &.active {
        .label {
          color: #ffffff;
          font-weight: 500;
        }

        // &::after {
        //   content: "";
        //   position: absolute;
        //   bottom: -46rpx;
        //   left: 50%;
        //   transform: translateX(-50%) rotate(45deg);
        //   width: 32rpx;
        //   height: 32rpx;
        //   background: #383edd;
        //   border-radius: 10rpx;
        //   z-index: 1;
        // }

        // &::before {
        //   content: "";
        //   position: absolute;
        //   bottom: -34rpx;
        //   left: 50%;
        //   transform: translateX(-50%);
        //   width: 8rpx;
        //   height: 8rpx;
        //   background: #ffffff;
        //   border-radius: 4rpx;
        //   z-index: 2;
        // }
      }
    }
  }

  .tab-completed {
    background-image: url("/static/images/plan-tab1.png");
  }

  .tab-incomplete {
    background-image: url("/static/images/plan-tab2.png");
  }

  .planList {
    padding: 0 32rpx;
    .plan-item {
      border-radius: 16rpx;
      margin-top: 32rpx;
      background: linear-gradient(
        to bottom,
        #edf2ff 0%,
        #fafcff 30%,
        #ffffff 100%
      );
      .plan-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20rpx;
        padding: 20rpx;
        border-bottom: 1px solid #f2f2f2;
      }
      .plan-content {
        padding: 20rpx;
        padding-bottom: 32rpx;
        &-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .place {
            font-size: 32rpx;
            color: #333;
          }
        }
        &-main {
          margin-top: 32rpx;
          background-color: #f3f3f3;
          padding: 32rpx;
          border-radius: 16rpx;
        }
      }
    }
    &.activeList {
      .plan-item {
        background: linear-gradient(
          to bottom,
          #fef7ec 0%,
          #fffdfa 30%,
          #ffffff 100%
        );
      }
    }
  }
}
</style>