ソースを参照

fix:搜索页面

chenzhen2 1 年間 前
コミット
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>
 {

ファイルの差分が大きいため隠しています
+ 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>

ファイルの差分が大きいため隠しています
+ 4 - 0
static/page-search/space-icon.svg