hlm_pl_mall_h5/pages/home/common/HomeCommonSearch.vue

<template>
  <view class="div">
    <view class="div header-holder"></view>
    <view :style="'height:'+navHeight+'px'"></view>
    <view class="product-list-header-wrapper">
      <title-header />
      <view class="div product-list-header" :class="'logo'">
        <view class="div slot" v-if='config' >
          <image mode="aspectFit" class="img" v-if="from=='home'" :src='config.site_mobile_logo'>
          <view class="div" v-else style="text-align: left"><text class="span iconfont" @click="goBack()">&#xe67f;</text></view>
        </view>
        <view class="div common-search">
          <input v-if="from=='search'" type="text" placeholder="请输入您要搜索的商品" v-model="keyword" @confirm="goSearch(keyword)">
          <input v-else-if="from=='store'" type="text" placeholder="搜索店铺商品" v-model="keyword" @confirm="goStoreGoods(keyword)">
          <input v-else type="text" placeholder="请输入您要搜索的商品" readonly="true" autocomplete="off" v-model="keyword" @click="onSearch">
        </view>
        <view class="div right iconfont popup-menu-area" @click="popupMore">&#xe680;<view v-if="showDot" class="div dot"></view></view>

      </view>
    </view>
    <header-more v-show="popupVisible" @blur.native="popupVisible = false" :showDot="showDot"></header-more>

  </view>
</template>

<script>
  import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import { getChatCount } from '../../../api/memberInstantMessage'
import HeaderMore from '../../HeaderMore'
export default {
  name:'HomeCommonSearch',
  components: {
    HeaderMore,
    TitleHeader
  },
  props: ['value', 'from'],
  watch: {
    value: function (value) {
      if (value) {
        this.keyword = value
      }
    }
  },
  data () {
    return {
      navHeight: 0,
      query:{},
      keyword: this.value ? this.value : '', // 关键字
      popupVisible: false,
      showDot: false
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    if (this.isOnline) {
      getChatCount().then(res => {
        if (res.result) {
          if (!this.showDot) {
            this.showDot = {}
          }
          this.showDot['chat'] = true
        }
      })
    }
  },
  computed: {
    ...mapState({
      config: state => state.config.config,
      isOnline: state => state.member.isOnline,
      currenKeywords: state => state.homesearch.currenKeywords
    })
  },
  methods:{
    ...mapMutations({
      'saveKeywords': 'saveKeywords'
    }),
    goBack(){uni.navigateBack({delta:1})},
    onSearch () {
      uni.navigateTo({url: '/pages/home/search/Search', params: { isFromHome: true } })
    },
    goStoreGoods () {
      uni.navigateTo({url: '/pages/home/storegoodslist/Goodslist'+'?'+urlencode( { id: this.query.id, keyword: this.keyword })})
    },
    goSearch (value) {
      if (value.replace(/\s+/g, '').length <= 0) {
        uni.showToast({icon:'none',title: '请输入您要搜索的关键字'})
        return false
      } else {
        this.keywords = value
      }
      if (value) {
        let data = this.utils.arrayFilter(this.currenKeywords.concat(value))
        this.saveKeywords(data)
      }
      uni.navigateTo({url: '/pages/home/goodslist/Goodslist'+'?'+urlencode( { keywords: this.keywords })})
    },
    popupMore () {
      if (!this.popupVisible) {
        this.popupVisible = true
      } else {
        this.popupVisible = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dot{position:absolute;width:.5rem;height:.5rem;background:red;border-radius:50%;top:.2rem;right:0;}
  .product-list-header.logo{
  .slot{width:2.5rem;height: 1.6rem;text-align:center;line-height:1.6rem;
    .img{max-height:100%;max-width:100%;}
  }
  .common-search{
    padding:0;
    padding-left: $pageSpace;
    padding-right: $pageSpace;
  }
  }
  .header-holder{height: $headerHeight;}
  .product-list-header-wrapper{
    position: fixed;
    left:0;
    right:0;
    top:0;
    padding-top:var(--status-bar-height);
    z-index: 10;
    background: #fff;
  }
  .product-list-header {
    display: flex;
    height: $headerHeight;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: $pageSpace;
    padding-right: $pageSpace;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 4px 4px #f7f7f7;
    box-sizing: border-box;
  .slot{width:1.6rem;font-size:$h2}
  }
  .common-search{
    flex:1;
    padding: 0.35rem 0.3rem 0.35rem 0;
  }
  .common-search input {
    box-sizing: border-box;
    width: 100%;
    height: 1.6rem;
    border-radius: 1.6rem;
    background: #F4F4F4 url(../../../static/image/home/icon_search.png) no-repeat 0.6rem center;
    background-size:0.55rem;
    font-size:$fontSize;
    color: #999;
    padding-left:1.6rem;
    border: 0;
  }
  .right{width:1.6rem;height: 1.6rem;text-align:center;line-height: 1.6rem;position:relative}
</style>