sagacloud-sagacare-weChat/src/packagesEnv/pages/search/index.wpy

<style lang="less">
   page {
    width:100%;
   }
  .page-search {
    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;
    }

    .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 .icon {
      width: 48rpx;
      height: 48rpx;
      display: block;
    }

    .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;

       .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;
       
        letter-spacing: 0px;
        text-align: left;
        border-bottom: 1px solid #C4C9CF4D
        }
       }
       .content{
        width:100%;
        .content-item{
          display:inline-block;
          vertical-align:middle;
          margin-left:22rpx;
          width:308rpx;
          height:48rpx;
          padding:24rpx 0;
        }
       }
    }
}


</style>

<template>
<view class="page-search">
      
<page-top-bar 
      titleColor="#1B2129" 
      bgColor="#ffffff"></page-top-bar>
      <!--搜索框-->
      <view class="input-wrap">
        <label for="spaceSearchInputId" class="icon-search-wrap">
          <image class="icon" src="{{h5StaticPath+ 'icon_search.svg'}}" />
        </label>
        <input
          id="spaceSearchInputId"
          value="{{inputValue}}"
          bindinput="getInputValue"
          placeholder="输入人名/地点"
          focus="{{autoFocus}}"
        />
        <label for="spaceSearchInputId" class="icon-close-wrap">
          <image
            wx:if="{{inputValue}}"
            bindtap="clearInput"
            class="icon"
            src="{{h5StaticPath+ 'icon_close.svg'}}"
          />
        </label>
      </view>

       <!--最近搜索-->
      <view 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
          </view>
         </view> 
      </view> 

      <!--会议室-->
      <view class="search-box">
         <view class="title">
           <label>所有会议室</span>
         </view>
         <view class="content">
          <view class="content-item" v-for="item in 20">
            ddgggggg
          </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'

let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';

wepy.page({
  store,
  config: {
    navigationBarTitleText: 'test'
  },

  data: {
     inputValue: '',
      autoFocus: false,
    h5StaticPath,
  },
  onLoad(){
    
  },
  onReady() {
    this.autoFocus = true;
  },
  methods: {
     getInputValue(e) {
      let keyword = e.$wx.detail.value || '';
      keyword = keyword.trim();
      let searchResultList = [];
      this.inputValue = keyword;

    },
    goEnv() {
      wx.navigateTo({
        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>
{
  "navigationBarTitleText": "公司身份选择",
  "backgroundColor": "#EBF5FA",
  navigationStyle:"custom",
  usingComponents: {
    'page-top-bar': '~@/components/common/page-top-bar',      
  },
  componentPlaceholder:{
    'page-top-bar': 'view'
  }
}
</config>