CommunityApp/pagesM/pages/search.vue

<template>
  <view class="pageBg">
    <view class="top">
      <view class="head">
        <view class="search">
          <image class="search_icon" src="http://139.9.103.171:1888/img/image/search_icon.png"></image>
          <input class="search_input" :value="searchValue" @confirm="tapSearch(searchValue.length>0?searchValue:'')" @input="inputSearch" placeholder="请输入搜索的商品" placeholder-style="color:#B5B5B5;"  @blur="searchBlur"/>
          <image v-if="searchValue" @tap="tapClearInput" class="search-close" src="http://139.9.103.171:1888/img/image/close2.png" mode="widthFix"></image>
        </view>
		<view @tap="tapSearch(searchValue.length>0?searchValue:'')" class="search_text">搜索</view>
      </view>
      <view class="condition" v-if="!showHistory">
        <view class="item" :class="{'active':curActive==0}" @tap="tapActive(0)">
          <view>默认</view>
        </view>
        <view class="item" :class="{'active':curActive==1}"  @tap="tapActive(1)">
          <view>销量</view>
          <image v-if="curActive!=1" src="http://139.9.103.171:1888/img/image/sort_arrow_icon.png"></image>
          <block v-else>
            <image v-if="typeList[curActive].v==1" src="http://139.9.103.171:1888/img/image/sort_down_arrow.png"></image>
            <image v-else src="http://139.9.103.171:1888/img/image/sort_up_arrow.png"></image>
          </block>
        </view>
        <view class="item" :class="{'active':curActive==2}"  @tap="tapActive(2)">
          <view>价格</view>
          <image v-if="curActive!=2" src="http://139.9.103.171:1888/img/image/sort_arrow_icon.png"></image>
          <block v-else>
            <image v-if="typeList[curActive].v==1" src="http://139.9.103.171:1888/img/image/sort_down_arrow.png"></image>
            <image v-else src="http://139.9.103.171:1888/img/image/sort_up_arrow.png"></image>
          </block>
        </view>
      </view>
    </view>

	<view class="pre_tip_keyword" v-if="showHistory && history.length>0">
	  <view class="top_height"></view>
	  <view class="item_wrap">
		<view class="item_type">历史搜索</view>
		<view class="item_value_box">
		  <view v-for="(item,idx) in history" :key="idx" 
			class="item_value"
			@tap="tapSearch(item)">{{item.keyword}}</view>
		</view>
	  </view>
	</view>

    <view class="search_results" v-if="!showHistory">
      <view class="top_height"></view>
      <view v-if="emptyType==0" class="goods_list_result">
        <DtGoodsList :dataList="dataList"/>
      </view>
      <DtNoMore v-if="isNoMore" />
      <DtEmpty :type="emptyType" />
    </view>
  </view>
</template>
<script>
import DtGoodsList from '../comps/dt_goods_list.vue'
import DtEmpty from '../comps/dt_empty.vue'
import DtNoMore from '../comps/dt_no_more.vue'
export default {
  components: {
    DtGoodsList,
    DtEmpty,
    DtNoMore
  },
  data() {
    return {
      hisItem:{},
      searchValue: '',
      showHistory:true,
      memberId:'',
      dataList:[],
      history:[],
      hots:[], // 热门暂时没有接口
      curActive:0,
      typeList:{
        0:null,
        1:{
          k:'sales',
          t:3,
          v:1
        },
        2:{
          k:'price',
          t:3,
          v:1
        }
      },  // 当 curActive->curType  ===>  0->0  1,2->3
    }
  },
  
  methods: {
    tapActive(idx){
      this.curActive = idx
      if(idx==1 || idx==2){
        let typeList = this.typeList
        if(typeList[idx].v == 1){
          typeList[idx].v = -1
        }else{
          typeList[idx].v = 1
        }
        this.typeList = typeList
      }
      this.pageIndex = 0
      this.dataList.length = 0
      this.queryDataList()
    },
    tapClearInput(){
      this.searchValue = ''
      this.showHistory = true
    },
    inputSearch(e) {
      this.searchValue = e.detail.value;
      if(!this.searchValue){
        this.showHistory = true
      }
    },
    searchBlur(){
    },
    tapSearch(item){
      console.log(129,item)
	  if(item && item.keyword){
	    this.hisItem = item
	    this.searchValue = item.keyword
	  }else{
	    this.hisItem = {}
	  }
      // if(!this.searchValue || !this.searchValue.trim()){
      //   this.$dialog.toast('请输入搜索关键字!')
      //   return 
      // }
      this.showHistory = false
      this.isNoMore = false
      this.pageIndex = 0
      this.dataList.length = 0
      this.queryDataList()
    },
    
    getParams(){
      let history = this.history.slice(0)
      let value = this.searchValue.trim()
      
      let baseParam = null
      if(value){
        let productCategoryId = ''
        let isInclude = -1
        let hisIdInclude = false
        for(let i=0,his;his = history[i]; i++){
          if(his.keyword.indexOf(value)!=-1 || value.indexOf(his.keyword)!=-1){
            isInclude = i
            if(his.id){
              productCategoryId = his.id || ''
            }else if(this.loadOptions.productCategoryId){
              productCategoryId = this.loadOptions.productCategoryId || ''
              his.id = this.loadOptions.productCategoryId
            }
            break;
          }else{
            if(this.loadOptions.productCategoryId == his.id){
              hisIdInclude = true
            }
          }
        }

        if(isInclude==-1){
          if(hisIdInclude){
            productCategoryId = ''
          }else{
            productCategoryId = this.loadOptions.productCategoryId
          }
          history.unshift({
            id: productCategoryId,
            keyword: value
          })
          if(history.length>10){
            history.splice(10,history.length-10)
          }
        }else{
          let aim = history.splice(isInclude,1)
          history.unshift(...aim)
        }

        if(productCategoryId){
          console.log(productCategoryId);
          baseParam = {
            k:'productCategory.id',
            t:1,
            v:parseInt(productCategoryId)
          }
        }else{
          baseParam = {
            k:'name',
            t:0,
            v:value
          }
        }

        this.history = history
        this.$storage.history = history
      }
      
      let param = this.typeList[this.curActive] 
      let resParams = []
      if(param){
        resParams.unshift(param)
      }
      if(baseParam){
        resParams.unshift(baseParam)
      }
      return resParams
    },
    // 搜索
    async queryDataList(){
      let params = this.getParams()
      let resp = await this.$api.searchProduct({
        _isShowLoading:true,
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        memberId: this.memberId,
        params: params
      })
      let list = this.getDataList(resp)
      this.dataList = this.dataList.concat(list)
    },
    onLoadPage(options){
	  wx.hideShareMenu();
      if(this.isLoad){
		this.placeholder = options.placeholder?options.placeholder:'请输入搜索的商品';
        this.memberId = this.$auth.getMemberId()
        this.history = this.$storage.history || []
        console.log(159,this.history)
        if(options.keyword){
          this.searchValue = options.keyword || ''
          this.showHistory = false
          this.queryDataList()
        }
      }
      if(this.isReach){
        this.queryDataList()
      }
    },
  },
  onReachBottom(){
    this.onReachBottomPage()
  },
}
</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  .head {
    padding: 20upx 0 20upx 30upx;
    background: #fff;
	display: flex;
	align-items: center;
    .search {
		width: 588upx;
      height: 60upx;
      border-radius: 25px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: rgba(242, 242, 242, 1);
      font-size: 30upx;
      // border: 1upx solid #ccc;

      .search_icon {
        width: 26upx;
        height: 26upx;
        padding: 20upx;
      }
      .search_input {
        flex: 1;
        height: 65upx;
        padding-right: 20upx;
        font-size: 24upx;
      }
      .search-close{
        width:30upx;
        height:30upx;
		padding-right: 20upx;
      }
    }
	.search_text {
	  font-size: 28upx;
	  color: #333333;
	  width: 122upx;
	  text-align: center;
	}
  }
  .condition {
	  margin-bottom: 20upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 68upx;
    justify-content: space-around;
    background: #fff;
    .item {
      font-size: 28upx;
      color: #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
      justify-content: center;
      height: 100%;
      image {
        width: 11upx;
        height: 15upx;
        margin-left: 10upx;
      }
    }
    .active {
      color: $dt-color-primary;
    }
  }
}

.pre_tip_keyword {
  display: flex;
  flex-direction: column;
  padding: 30upx;
  background: #fff;
  .top_height {
    height: 105upx;
  }
  .item_wrap {
    display: flex;
    flex-direction: column;
    .item_type {
      font-size: 28upx;
      color: #999999;
      margin-bottom: 20upx;
    }
    .item_value_box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .item_value {
        margin-right: 20upx;
        margin-bottom: 20upx;
        padding: 8upx 20upx;
        font-size: 24upx;
        color: #333333;
        background-color: #F7F7F7;
        border-radius: 25px;
      }
    }
    .item_category_box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      padding-bottom: 30upx;
      .item_category {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30upx;
        image {
          width: 80upx;
          height: 80upx;
          border-radius: 50%;
        }
        .item_text {
          margin-top: 10upx;
          font-size: 22upx;
          color: #353535;
        }
      }
    }
  }
}

.search_results {
  .top_height {
    height: 165upx;
  }
  .goods_list_result {
    background: #fff;
  }
  .no_data_wrap {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>