|
@@ -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>
|