فهرست منبع

'全局搜索'

zhangyu 4 سال پیش
والد
کامیت
78eec2aa00
2فایلهای تغییر یافته به همراه124 افزوده شده و 6 حذف شده
  1. BIN
      src/assets/images/search_null.png
  2. 124 6
      src/views/GlobalSearch.vue

BIN
src/assets/images/search_null.png


+ 124 - 6
src/views/GlobalSearch.vue

@@ -1,13 +1,38 @@
 <template>
-  <div>
-    <van-search v-model="value" show-action shape="round" placeholder="请输入搜索内容" @search="onSearch" @cancel="onCancel" />
+  <div class="search-box">
+    <van-search v-model="keyWord" show-action shape="round" placeholder="请输入搜索内容" @search="onSearch" @cancel="onCancel"
+      @input="onInput" />
+    <div class="quick-entry">
+      <p class="title-style">快捷入口</p>
+      <div class="quick-entry-list">
+        <p class="quick-entry-item">机房平面布置图</p>
+        <p class="quick-entry-item">配电室低压出线柜及出线明细</p>
+        <p class="quick-entry-item">电井(间)控制商铺范围</p>
+        <p class="quick-entry-item">更多设备</p>
+      </div>
+    </div>
+    <div v-if="equipList.length" class="equip-box">
+      <p class="equip-box-interval"></p>
+      <p class="title-style equip-box-title">设备</p>
+      <div class="equip-box-list">
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <van-cell v-for="(item, index) in equipList" :key="index" :title="item.eqName" />
+        </van-list>
+      </div>
+    </div>
+    <div v-else-if="!equipList.length && !flag" class="equip-null">
+      <div class="equip-null-img">
+        <img src="../assets/images/search_null.png" alt>
+      </div>
+      <p class="equip-null-text">搜索结果为空</p>
+    </div>
   </div>
 </template>
 <script>
 import Vue from 'vue'
 import { mapGetters } from 'vuex'
-import { Search } from 'vant'
-Vue.use(Search)
+import { Search, List, Cell } from 'vant'
+Vue.use(Search).use(List).use(Cell);
 export default {
   name: 'GlobalSearch',
   props: {},
@@ -17,7 +42,14 @@ export default {
   },
   data() {
     return {
-      value: ""
+      keyWord: "", //搜索关键字
+      flag: true, //是否触发搜索标记
+      loading: false,
+      finished: false,
+      refreshing: false,
+      equipList: [{
+        eqName: "地下一层/强电井/1#/配电箱120-1"
+      }], //设备列表
     }
   },
   props: {},
@@ -30,10 +62,34 @@ export default {
     onSearch() {
 
     },
+    // 修改输入内容
+    onInput() {
+      this.equipList = [];
+      this.flag = true;
+    },
     // 取消搜索
     onCancel() {
       this.$router.go(-1)
-    }
+    },
+    onLoad() {
+      // 异步更新数据
+      // setTimeout 仅做示例,真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          this.equipList.push({
+            eqName: "地下一层/强电井/1#/配电箱120-1"
+          });
+        }
+
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.equipList.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
   },
   watch: {
 
@@ -41,4 +97,66 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.search-box {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  .title-style {
+    color: #979797;
+    font-size: 12px;
+  }
+  .quick-entry {
+    padding: 15px 16px;
+    .quick-entry-list {
+      display: flex;
+      flex-wrap: wrap;
+      .quick-entry-item {
+        font-size: 14px;
+        height: 24px;
+        line-height: 24px;
+        padding: 0 8px;
+        margin-right: 12px;
+        margin-top: 12px;
+        color: #666666;
+        background: #eff0f1;
+        border-radius: 2px;
+      }
+    }
+  }
+  .equip-box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: calc(100% - 172px);
+    .equip-box-interval {
+      height: 10px;
+      background: #f5f6f7;
+    }
+    .equip-box-title {
+      margin: 15px 16px;
+    }
+    .equip-box-list {
+      flex: 1;
+      height: calc(100% - 56px);
+      overflow-y: auto;
+    }
+  }
+  .equip-null {
+    flex: 1;
+    padding: 20px 16px;
+    .equip-null-img {
+      width: 78px;
+      margin: 63px auto 10px;
+    }
+    .equip-null-text {
+      font-size: 14px;
+      color: #262626;
+      text-align: center;
+    }
+  }
+}
+/deep/ .van-search__action {
+  color: #025baa;
+}
 </style>