Browse Source

fix:搜索页面

chenzhen2 1 năm trước cách đây
mục cha
commit
3afd5a2cb8

+ 12 - 1
src/packagesEnv/api/mapApi.js

@@ -32,8 +32,19 @@ function getMapInfo(params) {
     })
 }
 
+// 找一找
+function findControllSpace(params) {
+    return $http({
+        url: `http://192.168.4.29:52015/controlSpaceUser/findControllSpace`,
+        // url: `${config.setupService}controlSpaceUser/findControllSpace`,
+        method: 'GET',
+        params: params,
+        isComParams: false    // 是否携带通用的参数
+    })
+}
 export {
     getFloorList,
     getBuildingList,
-    getMapInfo
+    getMapInfo,
+    findControllSpace
 }

+ 266 - 97
src/packagesEnv/pages/search/index.wpy

@@ -1,92 +1,170 @@
 <style lang="less">
-   page {
-    width:100%;
-   }
-  .page-search {
+page {
+  width: 100%;
+}
+.page-search {
+  position: relative;
+  padding-top: 136rpx;
+  .input-wrap {
+    box-sizing: border-box;
+    display: flex;
     position: relative;
-    padding-top: 136rpx;
-    .input-wrap {
-      box-sizing:border-box;
-      display: flex;
-      position: relative;
-      margin:40rpx auto;
-      width: 670rpx;
-      height: 96rpx;
-      line-height: 96rpx;
-      background: #F4F5F6;
-      border-radius: 82rpx;
-    }
+    margin: 40rpx auto;
+    margin-bottom: 32rpx;
+    width: 670rpx;
+    height: 96rpx;
+    line-height: 96rpx;
+    background: #f4f5f6;
+    border-radius: 82rpx;
+  }
+  .highlight {
+    background-color: yellow;
+  }
 
-    .input-wrap input,
-    textarea {
-      padding-left:120rpx;
-      padding-right:40rpx;
-      box-sizing:border-box;
-      width: 100%;
-      height:48rpx;
-      margin-top:24rpx;
-     line-height: 48rpx;
-      background-color: transparent;
-      font-size: 14px;
-    }
+  .input-wrap input,
+  textarea {
+    padding-left: 95rpx;
+    padding-right: 40rpx;
+    box-sizing: border-box;
+    width: 100%;
+    height: 48rpx;
+    margin-top: 24rpx;
+    line-height: 48rpx;
+    background-color: transparent;
+    font-size: 14px;
+  }
 
-    .input-wrap .icon {
-      width: 48rpx;
-      height: 48rpx;
-      display: block;
-    }
+  .input-wrap .icon {
+    width: 48rpx;
+    height: 48rpx;
+    display: block;
+  }
 
-    .input-wrap .icon-search-wrap {
-      position: absolute;
-      left: 40rpx;
-      top: 24rpx;
-    }
+  .input-wrap .icon-search-wrap {
+    position: absolute;
+    left: 40rpx;
+    top: 24rpx;
+  }
 
-    .input-wrap .icon-close-wrap {
-      position: absolute;
-      right: 32rpx;
-      top: 24rpx;
-    }
-    .search-box{
-       box-sizing:border-box; 
-       padding-top:32rpx;
-       padding-bottom:16rpx;
-       padding-left:34rpx;
-       padding-right:56rpx;
-       line-height:60rpx;
-       color: #8B949E;
+  .input-wrap .icon-close-wrap {
+    position: absolute;
+    right: 32rpx;
+    top: 24rpx;
+  }
+  .search-box {
+    box-sizing: border-box;
+    // padding-top: 32rpx;
+    padding-bottom: 48rpx;
+    padding-left: 56rpx;
+    padding-right: 56rpx;
+    line-height: 60rpx;
+    color: #8b949e;
 
-       .title{
-         padding-left:22rpx;
-        label {
-        display:block;  
-        color: #8B949E;
+    .title {
+      // padding-left: 22rpx;
+      label {
+        display: block;
+        color: #8b949e;
         font-family: PingFang SC;
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
-        padding:8rpx 0;
-       
+        padding: 8rpx 0;
+
         letter-spacing: 0px;
         text-align: left;
-        border-bottom: 1px solid #C4C9CF4D
+        border-bottom: 1px solid #c4c9cf4d;
+      }
+    }
+    .content {
+      box-sizing: border-box;
+      width: 100%;
+      .content-item {
+        display: inline-block;
+        vertical-align: middle;
+        width: 48.2%;
+        margin-left: 3.6%;
+        height: 48rpx;
+        // background: #ccc;
+        padding: 24rpx 0;
+        margin-top: 16rpx;
+        &:nth-child(2n + 1) {
+          margin-left: 0;
+        }
+        image {
+          display: inline-block;
+          vertical-align: middle;
+          width: 40rpx;
+          height: 40rpx;
         }
-       }
-       .content{
-        width:100%;
-        .content-item{
-          display:inline-block;
-          vertical-align:middle;
-          margin-left:22rpx;
-          width:308rpx;
-          height:48rpx;
-          padding:24rpx 0;
+        view {
+          box-sizing: border-box;
+          display: inline-block;
+          vertical-align: middle;
+          width: 244rpx;
+          padding-left: 8rpx;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          font-family: PingFang SC;
+          font-size: 32rpx;
+          font-weight: 400;
+          line-height: 48rpx;
+          letter-spacing: 0px;
         }
-       }
+      }
+      .active {
+        border-radius: 16rpx;
+        background: #f1f4f6;
+      }
     }
-}
+  }
+  .search-top {
+    // padding-top: 48rpx;
+  }
 
+  .searchable-box {
+    .title {
+      padding-left: 48rpx;
+      label {
+        display: block;
+        color: #8b949e;
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        padding: 8rpx 0;
 
+        letter-spacing: 0px;
+        text-align: left;
+        border-bottom: 1px solid #c4c9cf4d;
+      }
+    }
+    .searchable-item {
+      padding-left: 48rpx;
+      padding-top: 28rpx;
+      padding-bottom: 28rpx;
+      image {
+        display: inline-block;
+        vertical-align: middle;
+        width: 40rpx;
+        height: 40rpx;
+      }
+      .searchable {
+        display: inline-block;
+        vertical-align: middle;
+        padding-left: 16rpx;
+        font-family: PingFang SC;
+        font-size: 32rpx;
+        font-weight: 400;
+        line-height: 48rpx;
+        text {
+          color: #1b2129;
+        }
+      }
+    }
+  }
+}
 </style>
 
 <template>
@@ -94,7 +172,8 @@
       
 <page-top-bar 
       titleColor="#1B2129" 
-      bgColor="#ffffff"></page-top-bar>
+      bgColor="#ffffff">
+</page-top-bar>
       <!--搜索框-->
       <view class="input-wrap">
         <label for="spaceSearchInputId" class="icon-search-wrap">
@@ -117,43 +196,66 @@
         </label>
       </view>
 
-       <!--最近搜索-->
-      <view class="search-box">
+      <view v-if="!inputValue">
+         <!--最近搜索-->
+      <view v-if="histroyData && histroyData.length" class="search-box">
          <view class="title">
           <label>最近搜索</label>
          </view>
          <view class="content">
           <view class="content-item" 
           :key="index"
-          v-for="(item,index) in 20">
-            ddgggggg
+          v-for="(item,index) in histroyData">
+          <image src="{{h5StaticPath+'metting-icon.svg'}}" alt=""/>
+          <view>ddgggggg</view>
           </view>
          </view> 
       </view> 
 
       <!--会议室-->
-      <view class="search-box">
+      <view v-if="meetingData && meetingData.length" class="search-box search-top">
          <view class="title">
-           <label>所有会议室</span>
+           <label>所有会议室</label>
          </view>
          <view class="content">
-          <view class="content-item" v-for="item in 20">
-            ddgggggg
+          <view class="content-item" 
+          :key="'metting'+index"
+          :class="{'active':(activeId==item.permanentSpaceId)}"
+          @click.stop="checkSpace(item)"
+          v-for="(item,index) in meetingData">
+          <image src="{{h5StaticPath+'metting-icon.svg'}}" alt=""/>
+          <view>{{ item.permanentSpaceName }}</view>
           </view>
          </view> 
       </view> 
+      </view>
+     
+      <view v-else-if="serachData && serachData.length" class="searchable-box">
+          <view class="title">
+          <label>匹配结果</label>
+         </view>
+          <view class="searchable-item" :key="index+'serach'" v-for="(item,index) in serachData">
+            <image src="{{h5StaticPath+'metting-icon.svg'}}" alt=""/>
+            <view class="searchable">
+              <!-- {{ item.name?item.name:item.permanentSpaceName }} -->
+              <text wx:for="{{item.searchArray}}" wx:for-item="item2"  wx:key="index2" style="{{item2 == inputValue?'color:#1DB1B2':''}}">{{item2}}</text>
+            </view>
+          </view>
+      </view>
+      
    </view>
 </template>
 
 <script>
 import config from '@/config';
-import wepy from '@wepy/core'
-import eventHub from '@/common/eventHub'
-import { mapState } from '@wepy/x'
-import store from '@/store'
-import testMixin from '@/mixins/test'
+import wepy from '@wepy/core';
+import eventHub from '@/common/eventHub';
+import { mapState } from '@wepy/x';
+import store from '@/store';
+import { findControllSpace } from '@/packagesEnv/api/mapApi';
+import testMixin from '@/mixins/test';
 
-let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
+let h5StaticPath = config.h5StaticPath + '/page-search/';
 
 wepy.page({
   store,
@@ -162,42 +264,109 @@ wepy.page({
   },
 
   data: {
-     inputValue: '',
-      autoFocus: false,
+    inputValue: '',
+    autoFocus: false,
     h5StaticPath,
+    histroyData: [],
+    activeId: '',
+    meetingData: [],
+    serachData: []
   },
-  onLoad(){
-    
+  computed: {
+    ...mapState({
+      userInfo: state => state.user.userInfo
+    })
+  },
+  onLoad() {
+    this.init();
   },
   onReady() {
     this.autoFocus = true;
   },
   methods: {
-     getInputValue(e) {
+    init() {
+      this.getMeeting();
+    },
+    getHilightStrArray(str, key) {
+      return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
+    },
+    // 获取租户下的会议室
+    getMeeting() {
+      console.log('获取到会议室数据d');
+      let params = {
+        companyId: this.userInfo.companyId,
+        projectId: this.userInfo.projectId
+      };
+      findControllSpace(params).then(res => {
+        console.log('获取到会议室数据--', res);
+        this.meetingData = res.data || [];
+      });
+    },
+    // 空间搜索结果
+    getSearchData() {
+      let params = {
+        companyId: this.userInfo.companyId,
+        param: this.inputValue,
+        projectId: this.userInfo.projectId
+      };
+      findControllSpace(params).then(res => {
+        console.log('获取到会议室数据--', res);
+        this.serachData = res.data || [];
+        let that = this;
+        this.serachData.map(item => {
+          //高亮字符串数组
+          item.searchArray = that.getHilightStrArray(
+            item.name ? item.name : item.permanentSpaceName,
+            this.inputValue
+          );
+        });
+      });
+    },
+    checkSpace(item) {
+      this.activeId = item.permanentSpaceId;
+      // 去地图页面
+      wx.navigateTo({
+        url: `/packagesEnv/pages/officehome/index?from='FindIt'
+        &=floorId=${item.floorId}
+        &buildingId=${item.buildingId}&spaceId=${item.permanentSpaceId}`
+      });
+    },
+    // 搜索
+    getInputValue(e) {
       let keyword = e.$wx.detail.value || '';
       keyword = keyword.trim();
       let searchResultList = [];
       this.inputValue = keyword;
-
+      if (this.inputValue) {
+        this.getSearchData();
+      } else {
+        this.serachData = [];
+      }
+    },
+    // 清除了
+    clearInput() {
+      this.inputValue = '';
+      this.serachData = [];
     },
     goEnv() {
       wx.navigateTo({
-        url: '/packagesEnv/pages/officehome/index?spaceId=Sp1101080259b3510e26e7dd4dd9bf9784f06f3feb68'
-      })
+        url:
+          '/packagesEnv/pages/officehome/index?spaceId=Sp1101080259b3510e26e7dd4dd9bf9784f06f3feb68'
+      });
     },
     goPortrait() {
       wx.navigateTo({
         url: '/packagesEnv/pages/portrait/home'
-      })
+      });
     },
     goPersonCenter() {
       wx.navigateTo({
         url: '/packagesEnv/pages/personalCenter/index'
-      })
+      });
     }
   },
   created() {}
-})
+});
 </script>
 <config>
 {

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 7 - 0
static/page-search/metting-icon.svg


+ 5 - 0
static/page-search/person-icon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.25C6.27208 3.25 3.25 6.27208 3.25 10C3.25 13.7279 6.27208 16.75 10 16.75C13.7279 16.75 16.75 13.7279 16.75 10C16.75 6.27208 13.7279 3.25 10 3.25ZM1.75 10C1.75 5.44365 5.44365 1.75 10 1.75C14.5563 1.75 18.25 5.44365 18.25 10C18.25 14.5563 14.5563 18.25 10 18.25C5.44365 18.25 1.75 14.5563 1.75 10Z" fill="#C4C9CF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99967 7.24984C9.30932 7.24984 8.74967 7.80948 8.74967 8.49984C8.74967 9.19019 9.30932 9.74984 9.99967 9.74984C10.69 9.74984 11.2497 9.19019 11.2497 8.49984C11.2497 7.80948 10.69 7.24984 9.99967 7.24984ZM7.24967 8.49984C7.24967 6.98105 8.48089 5.74984 9.99967 5.74984C11.5185 5.74984 12.7497 6.98105 12.7497 8.49984C12.7497 10.0186 11.5185 11.2498 9.99967 11.2498C8.48089 11.2498 7.24967 10.0186 7.24967 8.49984Z" fill="#C4C9CF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99974 11.3502C8.66916 11.3502 7.5578 12.2959 7.30418 13.5523C7.22222 13.9583 6.82663 14.221 6.4206 14.139C6.01458 14.0571 5.75188 13.6615 5.83384 13.2555C6.22596 11.313 7.94118 9.85018 9.99974 9.85018C12.0583 9.85018 13.7735 11.313 14.1656 13.2555C14.2476 13.6615 13.9849 14.0571 13.5789 14.139C13.1729 14.221 12.7773 13.9583 12.6953 13.5523C12.4417 12.2959 11.3303 11.3502 9.99974 11.3502Z" fill="#C4C9CF"/>
+</svg>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 4 - 0
static/page-search/space-icon.svg