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