单页面

src/App.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="main">
     <router-view> </router-view>
@@ -54,4 +53,7 @@
     }
   }
 }
+:root {
+  --van-border-radius-sm: 4px;
+}
 </style>

src/router/index.js

@@ -52,8 +52,7 @@ const routes = [
     meta: {
       title: '巡检记录',
     },
-  }
-  ,
+  },
   {
     name: 'reduceRecord',
     path: '/reduceRecord',
@@ -61,6 +60,31 @@ const routes = [
     meta: {
       title: '扣缴记录',
     },
+  },
+  {
+    name: 'deviceError',
+    path: '/deviceError',
+    component: () => import('../views/deviceError'),
+    meta: {
+      title: '设备异常',
+    },
+  },
+  {
+    name: 'lackFee',
+    path: '/lackFee',
+    component: () => import('../views/lackFee'),
+    meta: {
+      title: '欠费待收',
+    },
+  }
+  ,
+  {
+    name: 'remoteControl',
+    path: '/remoteControl',
+    component: () => import('../views/remoteControl'),
+    meta: {
+      title: '远程管控',
+    },
   }
   // {
   //   path: '/alllist',

src/utils/index.js

@@ -0,0 +1,22 @@
+export function isEmpty(v) {
+    switch (typeof v) {
+        case 'undefined':
+            return true;
+        case 'string':
+            if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+            break;
+        case 'boolean':
+            if (!v) return true;
+            break;
+        case 'number':
+            if (isNaN(v)) return true;
+            break;
+        case 'object':
+            if (null === v || v.length === 0) return true;
+            for (var i in v) {
+                return false;
+            }
+            return true;
+    }
+    return false;
+}

src/views/deviceError.vue

@@ -0,0 +1,307 @@
+<template>
+  <van-nav-bar
+    title="设备异常"
+    left-arrow
+    @click-left="onClickLeft"
+    safe-area-inset-top
+  />
+  <div class="page_check">
+    <div class="search_pannel">
+      <div class="pannel_left">
+        <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="pannel_right" @click="toPath">
+        <van-image
+          :src="require('@/assets/search.svg')"
+          width="16"
+          height="16"
+          fit="contain"
+        />
+      </div>
+    </div>
+    <div class="drop_down">
+      <van-dropdown-menu active-color="#1989fa">
+        <van-dropdown-item
+          v-model="checkType"
+          @change="handelChange('checkType', checkType)"
+          :title="checkTypeTitle"
+          :options="checkTypeList"
+        />
+        <van-dropdown-item
+          v-model="checkPerson"
+          @change="handelChange('checkPerson', checkPerson)"
+          :title="checkPersonTitle"
+          :options="checkPersonList"
+        />
+      </van-dropdown-menu>
+    </div>
+    <div class="list_total">
+      <span>共有</span>
+      <v-count-up
+        :end-val="total"
+        class="count_up"
+        options="{ separator: ',' }"
+      />
+      <span>条记录</span>
+    </div>
+    <div class="check_info">
+      <div class="info_list">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model:loading="loading"
+            :finished="finished"
+            :error="error"
+            error-text="请求失败，点击重新加载"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <div v-for="item in list" :key="item.id" class="list_item">
+              <span class="header">{{ item.name }}</span>
+              <span>空间信息：{{ item.position }}</span>
+              <span>设备编号：{{ item.deviceNo }}</span>
+              <span style="color: #fa5555">告警原因：{{ item.reason }}</span>
+              <span>告警内容：{{ item.content }}</span>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty } from "@/utils/index.js";
+import VCountUp from "./CountUp";
+export default {
+  components: {
+    "v-count-up": VCountUp,
+  },
+  data() {
+    return {
+      loading: false,
+      name: "电商园四期-B座",
+      checkType: "",
+      checkPerson: "",
+      checkTypeTitle: "巡检类型",
+      checkPersonTitle: "巡检人员",
+      checkTypeList: [
+        { text: "安保", value: 1 },
+        { text: "保洁", value: 2 },
+      ],
+      checkPersonList: [
+        { text: "张三", value: 1 },
+        { text: "李四", value: 2 },
+      ],
+      total: 3,
+      list: [
+        {
+          name: "B座13楼女卫生间电表",
+          position: "电商园四期-B座-13层",
+          deviceNo: "A32445",
+          reason: "温度≥ 40℃",
+          content: "实时温度 52℃",
+        },
+      ],
+      loading: false,
+      refreshing: false,
+      finished: false,
+    };
+  },
+
+  methods: {
+    reduceType_filter(val) {
+      if (isEmpty(val)) {
+        return {};
+      }
+      if (val == 1) {
+        return { label: "预存", color: "#30D3A2" };
+      }
+      if (val == 2) {
+        return { label: "补助", color: "#09C700" };
+      }
+      if (val == 3) {
+        return { label: "退费", color: "#FA5555" };
+      }
+      if (val == 4) {
+        return { label: "核缴（水）", color: "#FF9C27" };
+      }
+      if (val == 4) {
+        return { label: "核缴（电）", color: "#FF9C27" };
+      }
+      if (val == 4) {
+        return { label: "核缴（物业）", color: "#FF9C27" };
+      }
+    },
+    onLoad() {
+      setTimeout(() => {
+        if (this.refreshing) {
+          this.list = [];
+          this.refreshing = false;
+        }
+
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + 1);
+        }
+        this.loading = false;
+
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
+
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = true;
+      this.onLoad();
+    },
+    // change事件可以拿到的是value
+    handelChange(type, val) {
+      console.log(type, val);
+      if (type == "checkType") {
+        // 这里打印出来的值就是我们想要的text
+        this.checkTypeTitle = this.checkTypeList.filter(
+          (item) => item.value === val
+        )[0].text;
+      }
+      if (type == "checkPerson") {
+        // 这里打印出来的值就是我们想要的text
+        this.checkPersonTitle = this.checkPersonList.filter(
+          (item) => item.value === val
+        )[0].text;
+      }
+    },
+    onClickLeft() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_check {
+  height: 100%;
+  .search_pannel {
+    padding: 10px 16px;
+    background: #5c8fff;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+    display: flex;
+    align-items: center;
+    .pannel_left {
+      display: flex;
+      align-items: center;
+      span {
+        height: 24px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+        text-indent: 4px;
+      }
+    }
+    .pannel_left,
+    .pannel_right {
+      flex: 1;
+    }
+    .pannel_right {
+      text-align: right;
+    }
+  }
+  .drop_down {
+    /deep/ {
+      --van-gray-4: #999999;
+      --van-dropdown-menu-title-text-color: #0c1935;
+    }
+  }
+  .list_total {
+    padding: 0 16px;
+    margin: 8px 0;
+    display: flex;
+    text-align: left;
+    span {
+      height: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 16px;
+    }
+    .count_up {
+      font-size: 16px;
+      font-weight: 500;
+      color: #fa5555;
+      margin: 0 2px;
+    }
+  }
+  .check_info {
+    padding: 0 16px;
+    height: calc(
+      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
+    );
+    .info_list {
+      height: 100%;
+      overflow-y: auto;
+      .list_item {
+        background: #ffffff;
+        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
+        border-radius: 4px;
+        margin-bottom: 12px;
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        position: relative;
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        .header {
+          height: 22px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #313836;
+          line-height: 22px;
+          margin-bottom: 8px;
+        }
+        span {
+          height: 18px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 18px;
+          margin-bottom: 4px;
+          &:nth-last-child(1) {
+            margin-bottom: 0;
+          }
+        }
+        .reduce_type {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 48px;
+          height: 24px;
+          border-radius: 0px 4px 0px 10px;
+          span {
+            height: 16px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/lackFee.vue

@@ -0,0 +1,356 @@
+<template>
+  <van-nav-bar
+    title="欠费待收"
+    left-arrow
+    @click-left="onClickLeft"
+    safe-area-inset-top
+  />
+  <div class="page_check">
+    <div class="search_pannel">
+      <div class="pannel_left">
+        <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="pannel_right" @click="toPath">
+        <van-image
+          :src="require('@/assets/search.svg')"
+          width="16"
+          height="16"
+          fit="contain"
+        />
+      </div>
+    </div>
+    <div class="drop_down">
+      <van-dropdown-menu active-color="#1989fa">
+        <van-dropdown-item
+          v-model="lackType"
+          @change="handelChange('lackType', lackType)"
+          :title="lackTypeTitle"
+          :options="lackTypeList"
+        />
+        <van-dropdown-item
+          v-model="lackStatus"
+          @change="handelChange('lackStatus', lackStatus)"
+          :title="lackStatusTitle"
+          :options="lackStatusList"
+        />
+      </van-dropdown-menu>
+    </div>
+    <div class="list_total">
+      <span>共有</span>
+      <v-count-up
+        :end-val="total"
+        class="count_up"
+        options="{ separator: ',' }"
+      />
+      <span>条记录</span>
+    </div>
+    <div class="check_info">
+      <div class="info_list">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model:loading="loading"
+            :finished="finished"
+            :error="error"
+            error-text="请求失败，点击重新加载"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <div v-for="item in list" :key="item.id" class="list_item">
+              <div
+                class="reduce_type"
+                :style="{
+                  'background-color': `${
+                    lackStatus_filter(item.lackStatus)['color']
+                  }`,
+                }"
+              >
+                <span>{{
+                  `${lackStatus_filter(item.lackStatus)["label"]}`
+                }}</span>
+              </div>
+              <span class="header">{{ item.name }}</span>
+              <span style="color: #fa5555"
+                >欠费金额：￥{{ item.lackMoney }}</span
+              >
+              <span>计费周期：{{ item.feeRange }}</span>
+              <span style="color: #fa5555">欠费天数：{{ item.lackDays }}</span>
+              <span>欠费类型：{{ `${lackType_filter(item.lackType)}` }}</span>
+              <span>联系电话：{{ item.tel }}</span>
+              <span>最近一次催费时间：{{ item.lastHastenTime }}</span>
+              <div class="list_btn">
+                <van-button plain type="primary" size="small">{{
+                  `${lackStatus_filter(item.lackStatus)["btn_1"]}`
+                }}</van-button>
+                <van-button plain type="primary" size="small">{{
+                  `${lackStatus_filter(item.lackStatus)["btn_2"]}`
+                }}</van-button>
+                <van-button plain type="primary" size="small">催费</van-button>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty } from "@/utils/index.js";
+import VCountUp from "./CountUp";
+export default {
+  components: {
+    "v-count-up": VCountUp,
+  },
+  data() {
+    return {
+      loading: false,
+      name: "电商园四期-B座",
+      lackType: "",
+      lackStatus: "",
+      lackTypeTitle: "欠费类型",
+      lackStatusTitle: "保水保电",
+      lackTypeList: [
+        { text: "电费", value: 1 },
+        { text: "水费", value: 2 },
+      ],
+      lackStatusList: [
+        { text: "保水", value: 1 },
+        { text: "保电", value: 2 },
+      ],
+      total: 3,
+      list: [
+        {
+          name: "合肥市传秀科技有限公司",
+          lackStatus: 1,
+          lackMoney: 3454,
+          feeRange: "2022-09",
+          lackDays: 42,
+          lackType: 1,
+          tel: 15829347573,
+          lastHastenTime: "2022-11-16 10:23:45",
+        },
+      ],
+      loading: false,
+      refreshing: false,
+      finished: false,
+    };
+  },
+
+  methods: {
+    lackStatus_filter(val) {
+      if (isEmpty(val)) {
+        return {};
+      }
+      if (val == 1) {
+        return {
+          label: "未保电",
+          color: "#FF9C27",
+          btn_1: "保电",
+          btn_2: "断闸",
+        };
+      }
+      if (val == 2) {
+        return {
+          label: "已保电",
+          color: "#30D3A2",
+          btn_1: "取消保电",
+          btn_2: "开闸",
+        };
+      }
+    },
+    lackType_filter(val) {
+      if (isEmpty(val)) {
+        return "";
+      }
+      if (val == 1) {
+        return "电费";
+      }
+      if (val == 2) {
+        return "水费";
+      }
+    },
+    onLoad() {
+      setTimeout(() => {
+        if (this.refreshing) {
+          this.list = [];
+          this.refreshing = false;
+        }
+
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + 1);
+        }
+        this.loading = false;
+
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
+
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = true;
+      this.onLoad();
+    },
+    // change事件可以拿到的是value
+    handelChange(type, val) {
+      console.log(type, val);
+      if (type == "lackType") {
+        // 这里打印出来的值就是我们想要的text
+        this.lackTypeTitle = this.lackTypeList.filter(
+          (item) => item.value === val
+        )[0].text;
+      }
+      if (type == "lackStatus") {
+        // 这里打印出来的值就是我们想要的text
+        this.lackStatusTitle = this.lackStatusList.filter(
+          (item) => item.value === val
+        )[0].text;
+      }
+    },
+    onClickLeft() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_check {
+  height: 100%;
+  .search_pannel {
+    padding: 10px 16px;
+    background: #5c8fff;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+    display: flex;
+    align-items: center;
+    .pannel_left {
+      display: flex;
+      align-items: center;
+      span {
+        height: 24px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+        text-indent: 4px;
+      }
+    }
+    .pannel_left,
+    .pannel_right {
+      flex: 1;
+    }
+    .pannel_right {
+      text-align: right;
+    }
+  }
+  .drop_down {
+    /deep/ {
+      --van-gray-4: #999999;
+      --van-dropdown-menu-title-text-color: #0c1935;
+    }
+  }
+  .list_total {
+    padding: 0 16px;
+    margin: 8px 0;
+    display: flex;
+    text-align: left;
+    span {
+      height: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 16px;
+    }
+    .count_up {
+      font-size: 16px;
+      font-weight: 500;
+      color: #fa5555;
+      margin: 0 2px;
+    }
+  }
+  .check_info {
+    padding: 0 16px;
+    height: calc(
+      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
+    );
+    .info_list {
+      height: 100%;
+      overflow-y: auto;
+      .list_item {
+        background: #ffffff;
+        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
+        border-radius: 4px;
+        margin-bottom: 12px;
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        position: relative;
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        .header {
+          height: 22px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #313836;
+          line-height: 22px;
+          margin-bottom: 8px;
+        }
+        span {
+          height: 18px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 18px;
+          margin-bottom: 4px;
+          &:nth-last-child(1) {
+            margin-bottom: 0;
+          }
+        }
+        .reduce_type {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 48px;
+          height: 24px;
+          border-radius: 0px 4px 0px 10px;
+          span {
+            height: 16px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 16px;
+          }
+        }
+        .list_btn {
+          width: 100%;
+          text-align: right;
+          margin-top: 8px;
+          padding-top: 10px;
+          border-top: 1px solid #d8d8d8;
+          .van-button {
+            &:nth-child(2) {
+              margin: 0 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/reduceRecord.vue

@@ -94,6 +94,7 @@
   </div>
 </template>
 <script>
+import { isEmpty } from "@/utils/index.js";
 import VCountUp from "./CountUp";
 export default {
   components: {
@@ -119,7 +120,7 @@ export default {
       list: [
         {
           name: "合肥市传秀科技有限公司",
-          reduceType: 1,
+          reduceType: 2,
           reduceMoney: 100,
           accountMoney: 100,
           tel: 13212341111,
@@ -135,6 +136,9 @@ export default {
 
   methods: {
     reduceType_filter(val) {
+      if (isEmpty(val)) {
+        return {};
+      }
       if (val == 1) {
         return { label: "预存", color: "#30D3A2" };
       }

src/views/remoteControl.vue

@@ -0,0 +1,334 @@
+<template>
+  <van-nav-bar
+    title="远程管控"
+    left-arrow
+    @click-left="onClickLeft"
+    safe-area-inset-top
+  />
+  <div class="page_check">
+    <div class="search_pannel">
+      <div class="pannel_left">
+        <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="pannel_right" @click="toPath">
+        <van-image
+          :src="require('@/assets/search.svg')"
+          width="16"
+          height="16"
+          fit="contain"
+        />
+      </div>
+    </div>
+    <div class="drop_down">
+      <van-dropdown-menu active-color="#1989fa">
+        <van-dropdown-item
+          v-model="deviceType"
+          @change="handelChange('deviceType', deviceType)"
+          :title="deviceTypeTitle"
+          :options="deviceTypeList"
+        />
+        <van-dropdown-item
+          v-model="deviceStatus"
+          @change="handelChange('deviceStatus', deviceStatus)"
+          :title="deviceStatusTitle"
+          :options="deviceStatusList"
+        />
+      </van-dropdown-menu>
+    </div>
+    <div class="list_total">
+      <span>共有</span>
+      <v-count-up
+        :end-val="total"
+        class="count_up"
+        options="{ separator: ',' }"
+      />
+      <span>条记录</span>
+    </div>
+    <div class="check_info">
+      <div class="info_list">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model:loading="loading"
+            :finished="finished"
+            :error="error"
+            error-text="请求失败，点击重新加载"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <div v-for="item in list" :key="item.id" class="list_item">
+              <div
+                class="reduce_type"
+                :style="{
+                  'background-color': `${
+                    deviceStatus_filter(item.deviceStatus)['color']
+                  }`,
+                }"
+              >
+                <span>{{
+                  `${deviceStatus_filter(item.deviceStatus)["label"]}`
+                }}</span>
+              </div>
+              <span class="header">{{ item.name }}</span>
+              <span 
+                >空间信息：{{ item.position }}</span
+              >
+              <span>设备编号：{{ item.deviceNo }}</span>
+              <span>实时读数：{{ item.realReaders }}</span>
+              <span>所属租户：{{ item.rentNum }}</span>
+              <div class="list_btn">
+                <van-button plain type="primary" size="small">{{
+                  `${deviceStatus_filter(item.deviceStatus)["btn"]}`
+                }}</van-button>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty } from "@/utils/index.js";
+import VCountUp from "./CountUp";
+export default {
+  components: {
+    "v-count-up": VCountUp,
+  },
+  data() {
+    return {
+      loading: false,
+      name: "电商园四期-B座",
+      deviceType: "",
+      deviceStatus: "",
+      deviceTypeTitle: "设备类型",
+      deviceStatusTitle: "设备状态",
+      deviceTypeList: [
+        { text: "空调", value: 1 },
+        { text: "水表", value: 2 },
+        { text: "电表", value: 3 },
+      ],
+      deviceStatusList: [
+        { text: "连接中", value: 1 },
+        { text: "断连中", value: 2 },
+      ],
+      total: 3,
+      list: [
+        {
+          name: "B座13楼女卫生间电表",
+          deviceStatus:1,
+          position: "电商园四期-B座-13层",
+          deviceNo: "A32445",
+          realReaders: "281kwh",
+          rentNum: 50,
+        },
+      ],
+      loading: false,
+      refreshing: false,
+      finished: false,
+    };
+  },
+
+  methods: {
+    deviceStatus_filter(val) {
+      if (isEmpty(val)) {
+        return {};
+      }
+      if (val == 1) {
+        return {
+          label: "连接中",
+          color: "#09C700",
+          btn: "断闸",
+        };
+      }
+      if (val == 2) {
+        return {
+          label: "断连中",
+          color: "#FA5555",
+          btn: "开闸",
+        };
+      }
+    },
+    onLoad() {
+      setTimeout(() => {
+        if (this.refreshing) {
+          this.list = [];
+          this.refreshing = false;
+        }
+
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + 1);
+        }
+        this.loading = false;
+
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
+
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = true;
+      this.onLoad();
+    },
+    // change事件可以拿到的是value
+    handelChange(type, val) {
+      console.log(type, val);
+      if (type == "lackType") {
+        // 这里打印出来的值就是我们想要的text
+        this.lackTypeTitle = this.lackTypeList.filter(
+          (item) => item.value === val
+        )[0].text;
+      }
+      if (type == "lackStatus") {
+        // 这里打印出来的值就是我们想要的text
+        this.lackStatusTitle = this.lackStatusList.filter(
+          (item) => item.value === val
+        )[0].text;
+      }
+    },
+    onClickLeft() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_check {
+  height: 100%;
+  .search_pannel {
+    padding: 10px 16px;
+    background: #5c8fff;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+    display: flex;
+    align-items: center;
+    .pannel_left {
+      display: flex;
+      align-items: center;
+      span {
+        height: 24px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+        text-indent: 4px;
+      }
+    }
+    .pannel_left,
+    .pannel_right {
+      flex: 1;
+    }
+    .pannel_right {
+      text-align: right;
+    }
+  }
+  .drop_down {
+    /deep/ {
+      --van-gray-4: #999999;
+      --van-dropdown-menu-title-text-color: #0c1935;
+    }
+  }
+  .list_total {
+    padding: 0 16px;
+    margin: 8px 0;
+    display: flex;
+    text-align: left;
+    span {
+      height: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 16px;
+    }
+    .count_up {
+      font-size: 16px;
+      font-weight: 500;
+      color: #fa5555;
+      margin: 0 2px;
+    }
+  }
+  .check_info {
+    padding: 0 16px;
+    height: calc(
+      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
+    );
+    .info_list {
+      height: 100%;
+      overflow-y: auto;
+      .list_item {
+        background: #ffffff;
+        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
+        border-radius: 4px;
+        margin-bottom: 12px;
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        position: relative;
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        .header {
+          height: 22px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #313836;
+          line-height: 22px;
+          margin-bottom: 8px;
+        }
+        span {
+          height: 18px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 18px;
+          margin-bottom: 4px;
+          &:nth-last-child(1) {
+            margin-bottom: 0;
+          }
+        }
+        .reduce_type {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 48px;
+          height: 24px;
+          border-radius: 0px 4px 0px 10px;
+          span {
+            height: 16px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 16px;
+          }
+        }
+        .list_btn {
+          position: absolute;
+          bottom: 15px;
+          right: 12px;
+          .van-button {
+            &:nth-child(2) {
+              margin: 0 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>