微信小程序优选商城首部搜索

<style lang="less">
  .searchpage{
    .searchbox{
      background-color: #f00;
      padding: 30rpx 0;
      text-align: center;
      .inputtag{
        display: inline-block;
        width: 80%;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        padding: 0 40rpx;
        background-color: #fff;
        text-align: left;
        font-size: 26rpx;
        color: #666666;
      }
    }

    .databox{
      color: #666666;
      font-size: 28rpx;
      line-height: 60rpx;
      .dataitem{
        overflow: hidden;
        height: 60rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>

<template>
  <div class="searchpage">
    <view class="searchbox">
      <input type="text" v-model.trim="query" class="inputtag" placeholder="请输入搜索的内容" bindinput="inputHandle"/>
      <!-- <input type="text" v-model.trim="query" class="inputtag" placeholder="请输入搜索的内容" bindconfirm="searchHandle"/> -->
    </view>
    <view class="databox">
      <view class="dataitem" bindtap="toDetail" data-id="{{item.goods_id}}" wx:for="{{goodsData}}" wx:key="goods_id">{{item.goods_name}}</view>
    </view>
    <view class="historybox" wx:if="{{!goodsData.length && historyData.length}}">
      <button bindtap="deleteAll">删除全部</button>
            <view bindtap="searchHistory" data-item="{{item}}" class="historyitem"  wx:for="{{historyData}}" wx:key="*this"><text >{{item}}</text> <text catchtap="deleteSingle" data-index="{{index}}">删除</text></view>
      <!-- <view class="historyitem"  wx:for="{{historyData}}" wx:key="*this"><text bindtap="searchHistory" data-item="{{item}}">{{item}}</text> <text bindtap="deleteSingle" data-index="{{index}}">删除</text></view> -->
    </view>
  </div>
</template>

<script>
  import wepy from '@wepy/core'
  
  import axiosapi from '../request/request'
  wepy.page({
    data: {
      query: '',
      goodsData: [],
      historyData: [],
      timeInt: null
    },
    onShow(){
      // 从缓存获取数据 用于渲染
      this.historyData = wx.getStorageSync('history') || []
    },

    methods:{
      // 防抖 dobounce  节流 throgle

        inputHandle(){
          if(this.timeInt){
            clearTimeout(this.timeInt)
          }
          this.timeInt = setTimeout(()=>{
            this.searchHandle()
          },1000)
        },
      // 用户点击搜索
      searchHandle(){
        // 判断为空
        if(!this.query){
          wx.showToast({
            title: '不能为空',
            icon: "none"
          })
          this.goodsData = []
          return
        }

        // 判断重复
        let index = this.historyData.findIndex(item=>{
          return item == this.query
        })

        if(index>-1){
          this.historyData.splice(index,1)
        }

        // 最多只能添加8个
        if(this.historyData.length>=8){
          this.historyData.splice(this.historyData.length-1,1)
        }

        // 添加缓存

        // let arr = wx.getStorageSync('history') || []

        // arr.unshift(this.query) // 数组头部添加一个元素

        this.historyData.unshift(this.query)

        wx.setStorageSync('history',this.historyData)

        this.getData()
      },
      getData(){
        //   axiosapi({url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query='+this.query}).then(res=>{
        //     this.goodsData = res
        // })

        axiosapi({url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch',data: {
          query: this.query
        }}).then(res=>{
            this.goodsData = res
        })
      },
     
      searchHistory(e){
        let {item} = e.currentTarget.dataset
        this.query = item
        this.searchHandle()
      },
      //  删除单个
      deleteSingle(e){
        let {index} = e.currentTarget.dataset
        this.historyData.splice(index,1)
        wx.setStorageSync('history',this.historyData)
      },
      deleteAll(){
        this.historyData=[]
        wx.setStorageSync('history',this.historyData)
      },
      // 去详情
      toDetail(e){
        // let {id} = e.currentTarget.dataset
        wx.navigateTo({
          url: "/pages/detail?id="+e.currentTarget.dataset.id
        })
      }
    }

    
  });
</script>
<config>
{
    navigationBarTitleText: '优购商城',
    usingComponents: {
     
    }
}
</config>