witcarbon-app/src/views/home.vue

<template>
  <div class="page_home">
    <div class="home_bg">
      <div class="bg_title">
        <div class="title_info">
          <van-image
            :src="require('@/assets/position.svg')"
            width="16"
            height="16"
            fit="contain"
          />
          <span>{{ name }}</span>
          <van-image
            :src="require('@/assets/arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </div>
        <div class="user_info" @click="toPath">
          <van-image
            :src="require('@/assets/user.svg')"
            width="16"
            height="16"
            fit="contain"
          />
        </div>
      </div>
    </div>
    <div class="home_info">
      <div class="info_content">
        <div
          class="content_item"
          v-for="(item, index) in functionList"
          :key="index"
        >
          <van-image :src="item.src" width="36" height="36" fit="contain" />
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="card_list">
      <div class="sub_title">
        <span>工单待办</span>
        <div class="function_btn">
          <span>立即处理</span>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </div>
      </div>
      <div class="list_item">
        <div
          class="item_info"
          v-for="(item, index) in workList"
          :key="item + '_' + index"
        >
          <span class="label">{{ item.label }}</span>
          <v-count-up
            :end-val="Number(item['count'])"
            class="count_up"
            :options="item['options']"
          />
        </div>
      </div>
      <div class="sub_title">
        <span>设备异常</span>
        <div class="function_btn">
          <span>立即处理</span>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </div>
      </div>
      <div class="list_item">
        <div
          class="item_info"
          v-for="(item, index) in deviceErrorList"
          :key="item + '-' + index"
        >
          <span class="label">{{ item.label }}</span>
          <v-count-up
            :end-val="Number(item['count'])"
            class="count_up"
            :options="item['options']"
            style="color: #fa5555"
          />
        </div>
      </div>
      <div class="sub_title">
        <span>欠费待收</span>
        <div class="function_btn">
          <span>立即处理</span>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </div>
      </div>
      <div class="list_item list_table">
        <div class="table_info">
          <div class="table_header">
            <span>欠费类型</span>
            <span>欠费租户数</span>
            <span>累计欠费</span>
          </div>
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              :error="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-row v-for="item in list" :key="item.id">
                <van-cell :value="item.type" />
                <van-cell :value="item.fee" />
                <van-cell :value="item.totalFee" />
              </van-row>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <van-tabbar
      v-model="activeTab"
      active-color="#5776E6"
      inactive-color="#333333"
    >
      <van-tabbar-item name="home" :icon="require('@/assets/home.svg')" to=""
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        name="rentBill"
        :icon="require('@/assets/rent-bill.svg')"
        to=""
        >租户账单</van-tabbar-item
      >
      <van-tabbar-item
        name="remoteControl"
        :icon="require('@/assets/remote-control.svg')"
        to=""
        >远程管控</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
import VCountUp from "./CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      name: "电商园四期-B座",
      activeTab: "rentBill",
      functionList: [
        { src: require("@/assets/repair-online.svg"), label: "线上报修" },
        { src: require("@/assets/check-review.svg"), label: "巡检记录" },
        { src: require("@/assets/reduce-record.svg"), label: "扣缴记录" },
      ],
      workList: [
        {
          label: "待指派",
          count: 3,
          options: {
            separator: ",",
          },
        },
        {
          label: "待维修",
          count: 2,
          options: {
            separator: ",",
          },
        },
        {
          label: "已维修",
          count: 1,
          options: {
            separator: ",",
          },
        },
      ],
      deviceErrorList: [
        {
          label: "异常总数",
          count: 7,
          options: {
            separator: ",",
          },
        },
        {
          label: "电表异常",
          count: 5,
          options: {
            separator: ",",
          },
        },
        {
          label: "水表异常",
          count: 2,
          options: {
            separator: ",",
          },
        },
      ],
      list: [],
      loading: false,
      refreshing: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing.value) {
          this.list.value = [];
          this.refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.value.push(this.list.value.length + 1);
        }
        this.loading.value = false;

        if (this.list.value.length >= 40) {
          this.finished.value = true;
        }
      }, 1000);
    },

    onRefresh() {
      // 清空列表数据
      this.finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading.value = true;
      this.onLoad();
    },
    toPath() {
      this.$router.push("/userInfo");
    },
  },
};
</script>
<style lang="scss" scoped>
.page_home {
  position: relative;
  .home_bg {
    width: 100%;
    height: 102px;
    background: #5c8fff;
    border-radius: 0px 0px 16px 16px;
    padding-top: 12px;
    margin-bottom: 42px;
    .bg_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      .title_info {
        display: flex;
        align-items: center;
        span {
          height: 24px;
          font-size: 16px;
          font-weight: 600;
          color: #ffffff;
          line-height: 24px;
          text-align: center;
          text-indent: 4px;
          text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
        }
      }

      .user-info {
      }
    }
  }
  .home_info {
    position: absolute;
    top: 52px;
    width: calc(100% - 32px);
    padding: 0 16px;
    .info_content {
      background: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 30px;
      .content_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span {
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #697081;
          line-height: 20px;
          margin-top: 4px;
        }
      }
    }
  }
  .card_list {
    padding: 0 16px;
    .sub_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 12px 0 6px 0;
      span {
        height: 20px;
        font-size: 14px;
        font-weight: 600;
        color: #0c1935;
        line-height: 20px;
      }
      .function_btn {
        display: flex;
        align-items: center;
        span {
          height: 16px;
          font-size: 12px;
          font-weight: 400;
          color: #2e69eb;
          line-height: 16px;
        }
      }
    }
    .list_item {
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.08);
      border-radius: 4px;
      padding: 16px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item_info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .label {
          height: 16px;
          font-size: 12px;
          font-weight: 400;
          color: #697081;
          line-height: 16px;
        }
        .count_up {
          margin-top: 4px;
          height: 22px;
          font-size: 20px;
          font-weight: 500;
          color: #0c1935;
          line-height: 22px;
        }
      }
    }
    .list_table {
      padding: 16px 20px;
      .table_info {
        .table_header {
          display: flex;
          justify-content: space-between;
          padding-bottom: 8px;
          border-bottom: 1px solid #eeeeee;

          span {
            height: 16px;
            font-size: 12px;
            font-weight: 600;
            color: #9da0ac;
            line-height: 16px;
          }
        }
      }
    }
  }
}
</style>