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-calendar v-model="showCalendar" mode="range" :max-date="maxDate" @change="changeDate"></u-calendar>
    </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">12</view>
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'incomplete' }"
        @click="switchTab('incomplete')"
      >
        <view class="label">未完成计划</view>
        <view class="count">12</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">
        <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>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "completed",

      maxDate: "2049-12-31",

      showCalendar: false,
      dateRange: "",
    };
  },
  created() {},
  methods: {
    toggleDate() {
      this.showCalendar = !this.showCalendar;
    },
    switchTab(tab) {
      this.activeTab = tab;
    },

    changeDate(e) {
      console.log('333',e);
      
      this.dateRange = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  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>