InspectionCleaning/pages/index/cleanPlan.vue

<template>
  <view class="content">
    <u-navbar
      :is-back="false"
      title=""
      :background="{ backgroundColor: '#DFEEFD' }"
      :border-bottom="false"
    >
      <view class="slot-wrap">
        <u-dropdown :title-size="42" active-color="#211D2F">
          <u-dropdown-item
            v-model="dropdownValue"
            title="保洁计划"
            :options="dropdownOptions"
          ></u-dropdown-item>
        </u-dropdown>
      </view>
    </u-navbar>
    <view class="area-info">
      <view class="name">2024年11月21号</view>
      <view class="position"> 08：30~11：30</view>
      <view class="tabs">
        <view
          @click="changeTab(i)"
          class="tab-item"
          v-for="(v, i) in selectTabs"
          :key="i"
          :class="{ select: selectIdx === i }"
        >
          {{ v.name }}
        </view>
      </view>
    </view>
    <view class="arealist">
      <view class="block-info">
        <view class="schedule">待保洁</view>
        <view class="name">
          <u-icon size="40" :name="posIcon"></u-icon>
          <view class="text">东大门北侧_门2</view>
        </view>
        <view class="type">
          <view class="value">区域类型</view>
          <u-tag
            text="室外"
            class="tag"
            border-color="transparent"
            type="success"
          />
          <u-tag text="特殊" border-color="transparent" type="warning" />
        </view>
        <view class="illustrate">
          {{ "需要清理整个户外通道/保持跑道整洁花坛边落叶清扫" }}
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      posIcon: require("@/static/images/pos-icon.png"),
      selectIdx: 0,
      dropdownValue: 1,
      dropdownOptions: [
        {
          label: "保洁计划1",
          value: 1,
        },
        {
          label: "保洁计划2",
          value: 2,
        },
        {
          label: "保洁计划3",
          value: 3,
        },
        {
          label: "保洁计划4",
          value: 4,
        },
      ],
      selectTabs: [
        {
          name: "全部",
          value: 0,
        },
        {
          name: "待保洁",
          value: 1,
        },
      ],

      paramsId: "",
    };
  },

  onLoad(options) {
    this.paramsId = options.id;
  },

  created() {
    this.getPlanInfoAreaList();
  },

  methods: {
    changeTab(i) {
      console.log(i);
      this.selectIdx = i;
    },

    // 获取计划区域列表
    async getPlanInfoAreaList() {
      const res = await GetPlanInfoAreaList({
        id: this.paramsId,
        // isCompleted: false,
      });
      if (res.succeed) {
        console.log("res...", res);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #f7f8fc;
  .slot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    /deep/ .u-dropdown-item__options {
      width: 100%;
    }
  }
  .title {
    line-height: 1;
    border-left: 10rpx solid #5a7ee9;
    padding-left: 16rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
  }
  .area-info {
    padding: 24rpx 32rpx;
    padding-top: 72rpx;
    display: flex;
    flex-direction: column;
    background: url("@/static/images/plan-icon-bg2.png") no-repeat 95% 40%;
    background-size: 40%;
    background-color: #dfeefd;
    .name {
      font-weight: 800;
      font-size: 48rpx;
      color: #1d1d1d;
    }
    .position {
      margin-top: 40rpx;
      font-weight: 500;
      font-size: 34rpx;
      color: #465161;
    }
    .tabs {
      margin-top: 38rpx;
      display: flex;
      justify-content: space-between;
      .tab-item {
        z-index: 99;
        pointer-events: auto; /* 确保可点击 */
        background: #ffffff;
        border-radius: 30rpx;
        padding: 12rpx 0;
        width: 48%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #383535;
      }
      .select {
        color: #ffffff;
        background: #4278f4;
      }
    }
  }
  .arealist {
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    .block-info {
      position: relative;
      background: #ffffff;
      border-radius: 18rpx;
      padding: 65rpx 46rpx;
      .schedule {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #feeded; /* 背景颜色 */
        color: white;
        width: 160rpx;
        height: 45rpx;
        font-size: 30rpx;
        color: #db3636;
        border-bottom-left-radius: 500rpx; /* 切角 */
      }
      .name {
        display: flex;
        align-items: center;
        .text {
          margin-left: 20rpx;
          font-size: 38rpx;
          color: #32353b;
        }
      }
      .type {
        display: flex;
        margin: 38rpx 0;
        .value {
          margin-right: 10rpx;
          font-size: 32rpx;
          color: #8896b4;
        }
        .tag {
          margin: 0 16rpx;
        }
      }
      .illustrate {
        padding: 46rpx;
        background: #f3f6f7;
        border-radius: 21rpx;
        font-size: 32rpx;
        color: #353535;
        line-height: 57rpx;
      }
    }
  }
}
</style>