vue 移动端 仿淘宝实现查询历史记录功能

当前项目基于vue+vant ui 的  移动端项目,搜索框点击后,跳转到当前页面,输入查询条件后,携参数返回到列表页,或者选中历史查询条件后,返回到列表页

<template>

   <div class="pageInfos">

      <div class="headers">

        <div @click="back"><van-icon name="arrow-left" size="18px"/></div>

        <div style="width:100%;background:linear-gradient(#096ee0, #6aa9ff);padding:2% 0 2.2%;">

            <form @submit.prevent="onSearch" action="javascript:return true">

                <input

                type="search"

                class="searchInput"

                placeholder="请输入搜索关键词"

                ref="searchInput"

                v-model="value" />

            <button class="sousuo" @click="onSearch">搜索</button>

        </form>

        </div>

      </div>

      <div class="searchInfo">

         <div class="search-title">

            <span>搜索历史</span>

            <van-icon name="delete-o" @click="clears"/>

         </div>

         <div class="search-text">

            <span v-for="(item,index) in nowSearch" :key="index" @click="chooseText(item)">{{item}}</span>

         </div>

      </div>

   </div>

</template>

<script>

import Vue from 'vue'

import { Icon, Dialog } from 'vant'

Vue.use(Icon)

Vue.use(Dialog)

export default {

  data () {

    return {

      value: '',

      nowSearch: []

    }

  },

  mounted () {

    if (this.$store.state.user.historyInfo != undefined && this.$store.state.user.historyInfo != '') {

      this.nowSearch = this.nowSearch.concat(this.$store.state.user.historyInfo)

    }

    this.$refs.searchInput.focus()

  },

  methods: {

    clears () {

      Dialog.confirm({

        title: '确认',

        message: '确定要清空搜索记录吗'

      }).then(() => {

        this.$store.commit('searchHistory', '')

        this.nowSearch = []

      }).catch(() => {

        // on cancel

      })

    },

    chooseText (text) {

      if (this.$route.query.beforePage == 'classification') {

        this.$router.push({

          name: 'classification',

          params: {

            searchInfo: text

          }

        })

      } else {

        localStorage.searchs = text

        this.$router.push({

          path: '/pageInfo',

          query: {

            searchInfo: text

          }

        })

      }

    },

    back () {

        this.$router.push({

          path: '/pageInfo',

          query: {

            types: this.$route.query.types

          }

    },

    onSearch (e) {

      this.nowSearch.unshift(this.value)

      if (this.value != '') {

        this.nowSearch = Array.from(new Set(this.nowSearch))

        console.log(this.nowSearch)

        this.$store.commit('searchHistory', this.nowSearch)

      }

      if (this.$route.query.beforePage == 'classification') {

        this.$router.push({

          name: 'classification',

          params: {

            searchInfo: this.value

          }

        })

      } else {

        localStorage.searchs = this.value

        this.$router.push({

          path: '/pageInfo',

          query: {

            searchInfo: this.value,

            types: this.$route.query.types

          }

        })

      }

    }

  }

}

</script>

<style scoped>

    .pageInfos{

        background: #ffffff;

        width: 100%;

        height: 100%;

        position: absolute;

    }

    .van-contents-spe i{font-size: 20px;color:red;font-style: normal;}

    .van-contents{

        width:96%;

        background: #fff;

        margin:2% auto;

        border-radius: 7px;

    }

    .van-contents ul{

        list-style-type: none;

        display: flex;

        width:96%;

        padding:2% 0 2% 0;

        border-bottom:1px solid #f1f1f1;

        margin:auto;

    }

    .van-contents ul li{float: left;}

    .van-contents-left{width:88px;max-height: 111px;padding-bottom: 5px;}

    .van-contents-left img{

        width:100%;

        height: 100%;

        margin-left: 10%;

        max-height: 110px;

    }

    .van-empty{

        background: #fff;

    }

    .van-contents-middle{width:70%;}

    .van-contents-right{

        position:absolute;

        padding-top:21%;

        right:5%;

    }

    .van-contents-middle-title{

        font-size: 15px;

        color:#333;

        margin: 0 !important;

    }

    .van-contents-middle span{

        display: block;

        width:100%;

        text-align: left;

        margin:0.8% 0 0 8%;

    }

    .van-contents-little-title{

        font-size: 14px;

        color:#777;

        text-align: left;

        display: block;

    }

    .van-contents-spe{

        font-size:12px;

        color:#999;

    }

    .van-contents-right span{

        background:#5bb1f5;

        font-size: 23px;

        color:#fff;

        padding:0px 0px 2px 1px;

        border-radius: 100%;

        display: block;

        margin-right: 14%;

        width:23px;

        height: 23px;

    }

    .headers{

        height : 50px;

         background: -webkit-linear-gradient(#096ee0, #6aa9ff);

        /*  Safari 5.1 到 6.0 */

        background: -o-linear-gradient(#096ee0, #6aa9ff);

        /*  Opera 11.6 到 12.0 */

        background: -moz-linear-gradient(#096ee0, #6aa9ff);

        /*  Fx 3.6 到 15 */

        background: linear-gradient(#096ee0, #6aa9ff);

        display : flex;

        justify-content: space-between;

        align-items : center;

        color : #fff;

        overflow: hidden;

    }

    /* .header>div:nth-child() */

    .headers>div:nth-child(1){

        /* padding-top : 8px; */

        padding-left : 8px;

        width : 60px;

        height : 100%;

        display : flex;

        align-items : center;

    }

    .headers>div:nth-child(3){

        width : 60px;

        height : 100%;

        display : flex;

        align-items : center;

        padding-right : 8px;

    }

    /deep/ .van-icon-add{

        font-size: 23px;

    }

    /deep/ .van-search{

        padding:8px 12px;

    }

    /deep/ .headers>div:nth-child(1){

        width:17px;

    }

    .searchs{

        float: left;

        width:90%;

    }

    /deep/ .van-pull-refresh__track{

        margin-top:56px;

    }

    .pleaseLogin{

        text-align: left;

        margin-top:7px;

    }

    .pleaseLogin span{

        background: #fff5dc;

        color:#f2b725;

        border:1px solid #fee6bf;

        padding:2px 3px;

        font-size: 13px;

        border-radius: 5px;

        width:100px;

        text-align: center;

    }

   .van-search{

       background: -webkit-linear-gradient(#096ee0, #6aa9ff);

        /*  Safari 5.1 到 6.0 */

        background: -o-linear-gradient(#096ee0, #6aa9ff);

        /*  Opera 11.6 到 12.0 */

        background: -moz-linear-gradient(#096ee0, #6aa9ff);

        /*  Fx 3.6 到 15 */

        background: linear-gradient(#096ee0, #6aa9ff);

    }

    .zengdiv{

        width: 93%;

        display: flex;

        margin-left: 8%;

    }

    .zeng,.xinpin,.yibao,.rexiao{

        width:40px !important;

        height: 16px;

        border-radius: 5px;

        border:1px solid red;

        color:red;

        font-size: 12px;

        display: block;

        text-align: center !important;

        float: left;

        line-height: 17px;

        margin: 2px 2% 0 0 !important;

    }

     .xinpin,.yibao,.rexiao{

      width:21px !important;

      margin: 2px 2% 0 0 !important;

      height: 16px;

      line-height: 17px;

    }

    .yibao{

      border:1px solid #1989fa;

      color: #1989fa;

    }

    .xinpin{

      color: #ff6034;

      border:1px solid #ff6034;

    }

    .sousuo{

      width: 60px;

      height: 29px;

      background: linear-gradient(to right,#499dfb, #4389e8);

      color: #fff;

      border:0;

      border-radius: 30px;

      font-size:14px;

      float: right;

      margin: -32px 15px 0 0;

      position: relative;

      z-index: 2;

    }

    .searchInput{

      height: 34px;

      padding:0 5px;

      width: 94%;

      border:0;

      margin: auto;

      line-height: 34px;

      border-radius: 30px;

      background: #fff;

      text-indent: 15px;

      font-size: 14px;

      color: #333;

    }

    .searchInfo{

        width: 92%;

        margin: 2.5% auto;

    }

    .search-title{

        width: 100%;

        display: flex;

        justify-content: space-between;

    }

    .search-title span{

        font-size: 15px;

        font-weight: 550;

        color: #333;

    }

    .search-text{

        width: 100%;

        margin: 1% auto;

    }

    .search-text span{

        padding: 1% 3%;

        border-radius: 30px;

        background: #f0f6ff;

        margin: 1.5% 2% 1% 0;

        color: #827e7e;

        font-size: 14px;

        float: left;

        display: block;

        width:25%;

    }

</style>