feat：添加搜索页面
ewall
5 years ago
parent
821723d51b
commit
d2f1f416e6
@ -1,7 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import ImagePic from './ImagePic'
|
||||
import BackTop from './BackTop'
|
||||
import NavBar from './NavBar'
|
||||
|
||||
// 注册一些常用的组件到全局
|
||||
Vue.component('image-pic', ImagePic)
|
||||
Vue.component('back-top', BackTop)
|
||||
Vue.component('nav-bar', NavBar)
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
const state = {
|
||||
searchKey: []
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
SET_KEY(state, keyarr) {
|
||||
state.searchKey = keyarr
|
||||
localStorage.setItem('searchKey', JSON.stringify(keyarr.slice(0, 20)))
|
||||
},
|
||||
DEL_KEY(state) {
|
||||
state.searchKey = []
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
// 保存搜索词
|
||||
setKey({ commit, state }, key) {
|
||||
if (state.searchKey.length <= 0) {
|
||||
const rlt = JSON.parse(localStorage.getItem('searchKey')) || []
|
||||
if (rlt.indexOf(key) < 0) {
|
||||
rlt.unshift(key)
|
||||
commit('SET_KEY', rlt)
|
||||
}
|
||||
} else {
|
||||
const rlt = [...state.searchKey]
|
||||
if (rlt.indexOf(key) < 0) {
|
||||
rlt.unshift(key)
|
||||
commit('SET_KEY', rlt)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 删除搜索词
|
||||
delKey({ commit }) {
|
||||
localStorage.removeItem('searchKey')
|
||||
commit('DEL_KEY')
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<van-search
|
||||
v-model="value"
|
||||
placeholder="请输入搜索关键词"
|
||||
show-action
|
||||
clearable
|
||||
autofocus
|
||||
@search="onSearch"
|
||||
@cancel="$router.back()"
|
||||
/>
|
||||
|
||||
<search-words @input="onSearch($event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchWords from './modules/Words'
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: {
|
||||
SearchWords
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch(value) {
|
||||
this.$store.dispatch('search/setKey', value)
|
||||
this.$router.push({
|
||||
path: '/search/list',
|
||||
query: {
|
||||
key: value,
|
||||
t: +new Date()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="search-list">
|
||||
11111
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="search-words">
|
||||
<!-- history -->
|
||||
<div class="history" v-if="searchKey.length > 0">
|
||||
<h3 class="history__title">
|
||||
<p class="history__title__left">
|
||||
<van-icon name="underway-o" size="16" />
|
||||
<span class="text">最近搜索</span>
|
||||
</p>
|
||||
<p class="history__title__right" @click="onDelete">
|
||||
<van-icon name="delete" size="16" />
|
||||
</p>
|
||||
</h3>
|
||||
<div class="history__main">
|
||||
<p
|
||||
class="history__main__item"
|
||||
v-for="(item,idx) in searchKey"
|
||||
:key="idx"
|
||||
@click="onSearch(item)"
|
||||
>{{item}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- hot -->
|
||||
<div class="hot" v-if="true">
|
||||
<h3 class="hot__title">
|
||||
<div class="hot__title__left">
|
||||
<van-icon name="fire-o" size="16" />
|
||||
<span class="text">热门搜索</span>
|
||||
</div>
|
||||
</h3>
|
||||
<div class="hot__main">
|
||||
<p class="hot__main__item" v-for="(item,idx) in 10" :key="idx" @click="onSearch(item)">裤子衣服</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['searchKey'])
|
||||
},
|
||||
methods: {
|
||||
onDelete() {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
title: '提示',
|
||||
message: '确定清空所有搜索记录吗？'
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('search/delKey')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
onSearch(value) {
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/variables.scss";
|
||||
|
||||
.search-words {
|
||||
.history,
|
||||
.hot {
|
||||
.history__title,
|
||||
.hot__title {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $small;
|
||||
.history__title__left,
|
||||
.hot__title__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history__main,
|
||||
.hot__main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 0 24px;
|
||||
.history__main__item,
|
||||
.hot__main__item {
|
||||
font-size: $mini;
|
||||
background: #f5f5f5;
|
||||
padding: 8px 12px;
|
||||
color: $gray;
|
||||
border-radius: 6px;
|
||||
margin: 0 24px 24px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue