hlm_pl_mall_h5/pages/home/special/editable_page_model/Model14.vue

<template>
<view class="model-14">
  <view class="top-search-form" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">
    <image mode="aspectFit" v-if="editablePageConfig.editable_page_config_content['if_show_logo']==1" class="logo" :src="config.site_mobile_logo" />
    <view class="top-search-box border-circle" style="background: rgb(232, 232, 232);">
      <input v-model="keyword" class="top-search-input" style="color: rgb(153, 153, 153);" placeholder="搜索">
      <text class="top-search-icon" @click="goSearch()">
        <text class="iconfont" style="color: rgb(153, 153, 153);">&#xe67e;
        </text>
      </text>
    </view>
    <view class="more" v-if="editablePageConfig.editable_page_config_content['if_show_more']==1">
		<view class="iconfont" @click="popupMore">&#xe680;</view>
		<header-more v-if="popupVisible"></header-more>
	</view>
  </view>
</view>

</template>

<script>
	import { mapState } from 'vuex'
	import HeaderMore from '../../../HeaderMore'
export default {
  name: 'Model14',
  data () {
    return {
		keyword:'',
      showIndex:1,
	  popupVisible: false,
    }
  },
  components: {
    HeaderMore
  },
  props: ['editablePageConfig','editablePage'],
  computed: {
    ...mapState({
      config: state => state.config.config,
    })
  },
  methods: {
	  goSearch(){
		  var url=this.editablePageConfig.editable_page_config_content.link
		  if(url.strpos('?')){
			  url+='&'
		  }else{
			  url+='?'
		  }
		  url+=this.keyword
		  uni.navigateTo({url:url})
	  },
    goAdUrl (url) {
      window.location.href = url
    },
    popupMore () {
      if (!this.popupVisible) {
        this.popupVisible = true
      } else {
        this.popupVisible = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.model-14 .top-search-form{
   display: flex;
   align-items: center;
   height: 38px;
   padding: 10px 5px;
   border-radius: 5px;
}
.model-14 .top-search-form .logo{
   margin-top:-3px;
   width: 71px;
   height:38px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   margin-right: 10px;
}
.model-14 .top-search-form .more{
   margin-left:10px;
   margin-right:5px;
   font-size: 20px;
}
.model-14 .top-search-form .top-search-box{
   flex:1;
   border-radius:3px;
   position:relative;
   height:38px;
   line-height:38px;
   overflow:hidden;
   margin-top: -3px;
   font-size: 0;
}
.model-14 .top-search-form .top-search-box .top-search-input{
   background: unset;
   width:100%;
   height: 100%;
   padding: 0 15px;
   box-sizing: border-box;
}
.model-14 .top-search-form .top-search-box .top-search-icon{
   display:block;
   position:absolute;
   width:30px;
   height:30px;
   right:6px;
   top:50%;
   margin-top:-15px;
   text-align: center;
   line-height: 30px;
}
.model-14 .top-search-form .top-search-box .top-search-icon i{
   font-size: 18px;
}
</style>