hlm_pl_mall_h5/pages/member/order/OrderSearch.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false"><view class="div search-wrapper">
  <view class="common-header">
  	<view class="div slot" >
  	  <view class="div" style="text-align: left"><text class="span iconfont" @click="goBack()">&#xe67f;</text></view>
  	</view>
  	<view class="common-search">
  	  <input  type="text" v-model="orderkeyword" placeholder="请输入您要搜索的订单商品名称">
  	</view>
	<view class="search_btn" @click="goOrderSearch(orderkeyword)">搜索</view>
  </view>
    
    <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>
  </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import MemberBase from '../MemberBase'
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import { searchKeywordList } from '../../../api/homesearch'
export default {
  data () {
    return {
      orderkeyword: ''
    }
  },
  components:{
    MemberBase
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      currenKeywords: state => state.homesearch.currenKeywords
    })
  },

  created () {
    
  },

  methods: {
    ...mapMutations({
      'changeKey': 'changeKey',
      'saveKeywords': 'saveKeywords'
    }),
	goBack(){
	uni.navigateBack({delta:1})
	},
	goOrderSearch (value) {
	  if (value.replace(/\s+/g, '').length <= 0) {
	    uni.showToast({icon:'none',title: '请输入您要搜索的关键字'})
	    return false
	  } else {
	    this.orderkeyword = value
	  }
	  if (value) {
	    let data = this.utils.arrayFilter(this.currenKeywords.concat(value))
	    this.saveKeywords(data)
	  }
	  uni.navigateTo({url: '/pages/member/order/OrderList'+'?'+urlencode( { keyword: this.orderkeyword })})
	},

    getKey (item) {
      if (item.content) {
        this.orderkeyword = item.content
      } else {
        this.orderkeyword = item
      }
      this.changeKey(this.orderkeyword)
	  this.goOrderSearch(this.orderkeyword)
    },

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

<style lang='scss' scoped>
	.search-wrapper{
		height: auto;
		width: auto;
		background-color: #fff;
		.common-header{
			display: flex;
			height: 2rem;
			padding: 0.25rem .6rem;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0px 4px 4px #f7f7f7;
			box-sizing: border-box;
			.slot{width:2.5rem;height: 1.6rem;text-align:center;line-height:1.6rem;font-size: .8rem;}
			.common-search{
			  padding:0;
			  padding-left: $pageSpace;
			  padding-right: $pageSpace;
			  flex:1;
			  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;
			  }
			}
			.search_btn{background-color: $primaryColor;padding: .3rem .7rem;color:#fff;border-radius: 1.2rem;font-size: .7rem;margin-right: .6rem;}
		}
		.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>