hlm_pl_mall_h5/pages/home/search/Search.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <home-base :show="false"><view class="div search-wrapper">
    <home-common-search :from="'search'" ref='header' :value="keywords"></home-common-search>
    <view class="div search-body">

      <view class="div list current-search" v-if='currenKeywords.length > 0'>
        <view class="div list-header">
          <text class="span">最近搜索</text>
          <image mode="aspectFit" class="img" src="../../../static/image/home/home-search-delete1.png" v-on:click='deleteCurrent()'>
        </view>
        <view class="ul">
          <view class="li item" v-for="(item, index) in currenKeywords" v-on:click='getKey(item)' :key="index">{{item}}</view>
        </view>
      </view>

        <view class="div list hot-wrapper" v-if="hotKeywords[0]">
        <view class="div list-header">
          <text class="span">热门搜索</text>
        </view>
        <view class="ul">
          <view class="li item" v-for='(item, index) in hotKeywords' :key='index' v-on:click='getKey(item)'>{{ item}}</view>
        </view>
      </view>
    </view>
  </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import HomeBase from '../HomeBase'
import { mapState, mapMutations } from 'vuex'
import HomeCommonSearch from '../common/HomeCommonSearch'
import { searchKeywordList } from '../../../api/homesearch'
export default {
  data () {
    return {
      hotKeywords: [],
      keywords: this.$store.state.homesearch.currentKey ? this.$store.state.homesearch.currentKey : ''
    }
  },
  components:{
    HomeBase,
    HomeCommonSearch
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      currentKey: state => state.homesearch.currentKey,
      currenKeywords: state => state.homesearch.currenKeywords
    })
  },

  created () {
    this.getHotKeywords()
  },

  methods: {
    ...mapMutations({
      'changeKey': 'changeKey',
      'saveKeywords': 'saveKeywords'
    }),

    getHotKeywords () {
      searchKeywordList().then(res => {
        this.hotKeywords = Object.assign([], res.result.list, this.hotKeywords)
      })
    },

    getKey (item) {
      if (item.content) {
        this.keywords = item.content
      } else {
        this.keywords = item
      }
      this.changeKey(this.keywords)
      this.$refs.header.goSearch(this.keywords)
    },

    deleteCurrent () {
      this.saveKeywords([])
    },
  }
}
</script>

<style lang='scss' scoped>
	.search-wrapper{
		height: auto;
		width: auto;
		.search-body {
			.div.list {
              padding-top: 0.75rem;
              padding-bottom: 0.75rem;
              padding-left: $pageSpace;
              padding-right: $pageSpace;
		background-color: #fff;
				.list-header {
					display: flex;
		    		justify-content: space-between;
		    		align-content: center;
		    		align-items: center;
					.span {
						color: #333;
						font-size: $h3;
						background: url('../../../static/image/home/home-search-history.png') no-repeat left center;
						background-size: 0.8rem;
		    			padding-left: 1.25rem;
		    			align-self: flex-end;
					}
					.img {
						width: 1rem;
						height:1rem;
						cursor: pointer;
					}
				}
				.ul {
		    		display: flex;
		    		padding-top: 0.65rem;
		    		flex-wrap: wrap;
		    		.li {
		    			padding: 0.4rem;
		    			background-color: #F4F4F4;
		    			color: $descTextColor;
		    			font-size: $fontSize;
		    			margin-right: 0.8rem;
		    			margin-bottom: 0.8rem;
		    			border-radius:.2rem;
		    		}
		    	}
			}
			.div.hot-wrapper {
				.list-header{
					.span{
						background: url('../../../static/image/home/home-search-hot.png') no-repeat left center;
						background-size: 0.8rem;
					}
				}
			}
		}
	}
</style>