smart-screen-demo-web/src/view/timing/timing-select-device.vue

<template>
  <div class="base-bg">
    <div class="zhp-title">
      <div class="zhp-title-text">选择空调</div>
    </div>
    <div class="card" style="overflow: auto">
      <div v-for="(item, i) in dList" :key="i">
        <div class="item-card" @click="onSelectDevice(item)">
          <div class="layout-top">
            <div class="name">{{ item.name }}</div>
            <div
              :class="{
                openBg: item.state,
                closeBg: !item.state,
              }"
            >
              <span v-if="item.state" class="stateText">开机</span>
              <span v-if="!item.state" class="stateText">关机</span>
            </div>
            <img
              v-show="item.imgState.includes(1)"
              class="pre_img"
              src="@/assets/imgs/show/icon_timing_fault.png"
            />
            <img
              v-show="item.imgState.includes(2)"
              class="pre_img"
              src="@/assets/imgs/show/icon_timing_killvirus.png"
            />
          </div>
          <div class="layout-btm">
            <div class="tem-btm">
              <span v-if="item.state" class="tem-openText">{{ item.tem }}</span>
              <span v-if="!item.state" class="tem-closeText">{{
                item.tem
              }}</span>
              <span v-if="item.state" class="tem-open">℃</span>
              <span v-if="!item.state" class="tem-close">℃</span>
            </div>
            <div>
              <img
                v-show="item.selectState"
                class="state-img"
                src="@/assets/imgs/show/icon_select.png"
              />
              <img
                v-show="!item.selectState"
                class="state-img"
                src="@/assets/imgs/show/icon_nomor.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-s-c">
      <div class="bottom-c" @click="onSelectClick(false)">取消</div>
      <div class="bottom-s" @click="onSelectClick(true)">确定</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// eslint-disable-next-line vue/no-export-in-script-setup
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const dList: any = ref<any[]>([]);

const onSelectDevice = (item: any) => {
  //开机状态可选
  if (item.state) {
    item.selectState = !item.selectState;
  }
};
const onSelectClick = (sure: boolean) => {
  if (sure) {
    let number = 0;
    dList.value.forEach((e: any) => {
      if (e.selectState) {
        number++;
      }
    });
    router.push({
      path: "/timingAdd",
      query: { pageType: "timingAdd", sListNum: number },
    });
  } else {
    router.push({
      path: "/timingAdd",
    });
  }
};
onMounted(() => {
  dList.value = [
    {
      name: "卧室空调",
      state: true,
      tem: "25",
      selectState: false,
      imgState: [0],
    },
    {
      name: "客房空调",
      state: false,
      tem: "23",
      selectState: false,
      imgState: [0],
    },
    {
      name: "厨房空调",
      state: true,
      tem: "27",
      selectState: false,
      imgState: [1],
    },
    {
      name: "书房空调",
      state: true,
      tem: "26",
      selectState: true,
      imgState: [1, 2],
    },
    {
      name: "次卧空调",
      state: true,
      tem: "28",
      selectState: true,
      imgState: [2],
    },
    {
      name: "主卫空调",
      state: false,
      tem: "25",
      selectState: false,
      imgState: [0],
    },
  ];
});
</script>

<style lang="scss" scoped>
.card {
  padding-bottom: 170px;
  margin-right: 24px;
  margin-left: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .item-card {
    margin-bottom: 20px;
    width: 326px;
    height: 145px;
    background: #20252e;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 24px 22px 10px 24px;
  }

  .layout-top {
    display: flex;
    align-items: center;
  }

  .name {
    font-size: 28px;
    color: white;
    font-weight: 400;
    margin-right: 10px;
  }

  .openBg {
    width: 56px;
    height: 32px;
    border-radius: 16px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: #3c75e5;
  }

  .closeBg {
    width: 56px;
    height: 32px;
    border-radius: 16px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgba($color: #ffffff, $alpha: 0.2);
  }

  .stateText {
    font-size: 18px;
    font-weight: 400;
    color: white;
  }

  .layout-btm {
    display: flex;
    justify-content: space-between;
    margin-top: 23px;
  }

  .tem-btm {
    align-items: end;

    .tem-openText {
      font-size: 54px;
      font-weight: 300;
      color: white;
    }

    .tem-closeText {
      font-size: 54px;
      font-weight: 300;
      color: rgba($color: #ffffff, $alpha: 0.4);
    }

    .tem-open {
      margin-left: 5px;
      font-size: 24px;
      font-weight: 300;
      color: white;
    }

    .tem-close {
      margin-left: 5px;
      font-size: 24px;
      font-weight: 300;
      color: rgba($color: #ffffff, $alpha: 0.4);
    }
  }

  .state-img {
    width: 60px;
    height: 60px;
  }

  .pre_img {
    margin-left: 10px;
    width: 30px;
    height: 30px;
  }
}
</style>