vue手机端项目-搜索页(未完成)

1.配置搜索页面路由

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 路由映射数组

const routes = [{

            path: '/search',

            name: 'search',

            component: () =>

                import ('@/views/search')

        },

        {

            path: '/login',

            name: 'login',

            component: () =>

                import ('@/views/login')

        },

        {

            path: '/',

            name: 'layout',

            component: () =>

                import ('@/views/layout'),

            children: [{

                    path: '',

                    name: 'home',

                    component: () =>

                        import ('@/views/home')

                },

                {

                    path: '/qa',

                    name: 'qa',

                    component: () =>

                        import ('@/views/qa')

                },

                {

                    path: '/video',

                    name: 'video',

                    component: () =>

                        import ('@/views/video')

                },

                {

                    path: '/my',

                    name: 'my',

                    component: () =>

                        import ('@/views/my')

                }

            ]

        },

    ]

    // 实例化路由对象

const router = new VueRouter({

    routes

})

export default router

2.配置搜索页面数据请求

import request from "@/utils/request";

export const getSearchSuggestions = (q) => {

    return request({

        method: 'GET',

        url: "/v1_0/suggestion",

        params: { q }

    })

}

export const getSearchResults = (params) => {

    return request({

        method: "GET",

        url: "/v1_0/search",

        params

    })

}

 

3.在views建立搜索页面

在home的input.vue里的导航栏添加导航 

<van-nav-bar class="page-nav-bar" fixed>

      <template #title>

      <van-button

        class="search-btn"

        slot="title"

        type="info"

        size="small"

        round

        icon="search"

        to="/search"

      >搜索</van-button>

      </template>

    </van-nav-bar>

<template>

  <div class="search-container">

        <!-- 搜索栏 -->

        <!--

          Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮

         -->

        <form class="search-form" action="/">

          <van-search

            v-model="searchText"

            show-action

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

            background="#3296fa"

            @search="onSearch"

            @cancel="onCancel"

          />

        </form>

        <!-- /搜索栏 -->

       

                <!-- 搜索结果 -->

          <search-result v-if="isResultShow" :search-text="searchText"></search-result>

        <!-- /搜索结果 -->

     

        <!-- 联想建议 -->

        <search-suggestion @search="onSearch" v-else-if="searchText" :search-text="searchText"></search-suggestion>

        <!-- /联想建议 -->

        <!-- 搜索历史记录 -->

        <search-history v-else></search-history>

        <!-- /搜索历史记录 -->    

  </div>

</template>

<script>

import SearchResult from './components/search-result'

import SearchHistory from './components/search-history'

import SearchSuggestion from './components/search-suggestion'

  export default {

    name: "SearchPage",

    components: {  

      SearchResult,

      SearchHistory,

      SearchSuggestion

      },

    props: {},

    data () {

        return {

          searchText: '', // 绑定输入框变量

          isResultShow:false,

        }

    },

    computed: {},

    watch: {},

    created() {},

    methods: {

        onSearch (val) {

           this.searchText=val,

           this.isResultShow=true

           console.log(val) // 输入的值

        },

        onCancel () {

            this.$router.back()

        }

    }

  };

</script>

<style scoped lang="less">

.search-container {

  padding-top: 108px;

  .van-search__action {

    color: #fff;

  }

  .search-form {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1;

  }

}

</style>

<template>

  <div class="search-history">

    <van-cell title="搜索历史">

      <span>全部删除</span>

      <span>完成</span>

      <van-icon name="delete" />

    </van-cell>

    <van-cell title="hello">

      <van-icon name="close" />

    </van-cell>

    <van-cell title="hello">

      <van-icon name="close" />

    </van-cell>

    <van-cell title="hello">

      <van-icon name="close" />

    </van-cell>

    <van-cell title="hello">

      <van-icon name="close" />

    </van-cell>

  </div>

</template>

<script>

export default {

  name: 'SearchHistory',

  components: {},

  props: {},

  data () {

    return {}

  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  methods: {}

}

</script>

<style scoped lang="less"></style>

<template>

  <div class="search-result">

    <van-list

      v-model="loading"

      :finished="finished"

      finished-text="没有更多了"

      @load="onLoad"

    >

      <van-cell v-for="(obj,index) in list" :key="index" :title="obj.title" />

    </van-list>

  </div>

</template>

<script>

import { getSearchResults } from "@/api/search";

export default {

  name: "SearchResult",

  components: {},

  props: {

    searchText: {

      type: String,

      require: true,

    },

  },

  data() {

    return {

      list: [],

      loading: false,

      finished: false,

      page: 1,

      per_page: 10,

    };

  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {

    async onLoad() {

      try {

        const { data } = await getSearchResults({

          page: this.page,

          per_page: this.per_page,

          q: this.searchText,

        });

        console.log(data);

        const {results} =data.data;

        this.list=[...this.list,...results]

        this.loading=false;

        if(results.length){

            this.page++

        }else{

            this.finished=true

        }

      } catch (error) {

        this.loading=false

        this.$toast("获取搜索结果失败");

      }

    },

  },

};

</script>

<style scoped lang="less"></style>

<template>

  <div class="search-suggestion">

    <van-cell icon="search"

    v-for="(text,index) in suggestions" :key="index"

    @click="$emit('search',text)">

    <div slot="title" v-html="highlight(text)"></div>

    </van-cell>

  </div>

</template>

<script>

import { getSearchSuggestions } from '@/api/search'

import { debounce } from "lodash"

export default {

  name: 'SearchSuggestion',

  components: {},

  props: {

      searchText:{

          type:String,

          required:true

      }

  },

  data () {

    return {

        suggestions:[]

    }

  },

  computed: {},

  watch: {

      searchText:{

          handler:debounce(function(val){

              this.loadSuggestions(val)

          },200),

        //   handler(val){

        //       console.log(val);

        //       this.loadSuggestions(val)

        //   },

          immediate:true

      }

  },

  created () {},

  mounted () {},

  methods: {

      async loadSuggestions(q){

          try{

              const {data}=await getSearchSuggestions(q)

              console.log(data);

              this.suggestions=data.data.options

          }catch (error){

              this.$toast('获取搜索联想数据失败')

          }

      },

      highlight(text){

          const highlightStr=`<span style="color:red">${this.searchText}</span>`

          const pattern=new RegExp(this.searchText,"gi")

          return text.replace(pattern,highlightStr)

      }

  }

}

</script>

<style scoped lang="less"></style>

历史搜索记录未完成