<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="搜索" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="coreshop-padding-15 coreshop-margin-bottom-15 coreshop-bg-white coreshop-solid-bottom">
|
<u-search placeholder="请输入关键字搜索" v-model="key" :show-action="true" action-text="搜索" :animation="false" @search="search" @custom="search"></u-search>
|
</view>
|
|
<!--搜索区域-->
|
<view class="coreshop-padding-15 coreshop-margin-15">
|
<!--搜索记录-->
|
<view class="coreshop-margin-bottom-15" v-show="keys.length > 0">
|
<coreshop-section title="历史搜索" font-size="16" sub-title="删除" :arrow="false" @click="deleteKey"></coreshop-section>
|
<view class="coreshop-margin-top-15 coreshop-margin-bottom-15 coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-justify-start">
|
<view class="coreshop-width-fit-content coreshop-margin-right-5" v-for="(item, key) in keys" :key="key">
|
<u-tag class="coreshop-padding-10" size="mini" :text="item" type="info" @click="toNav(item)" />
|
</view>
|
</view>
|
</view>
|
|
<!--推荐搜索-->
|
<view class="coreshop-margin-bottom-15" v-show="recommend && recommend.length > 0">
|
<coreshop-section title="推荐搜索" :right="false" font-size="16"></coreshop-section>
|
<view class="coreshop-margin-top-15 coreshop-margin-bottom-15 coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-justify-start">
|
<view class="coreshop-width-fit-content coreshop-margin-right-5" v-for="(item, key) in recommend" :key="key">
|
<u-tag class="coreshop-padding-10" size="mini" :text="item" type="info" @click="toNav(item)" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
keys: [],
|
key: '',
|
navType: 'toNav',
|
focus: true,
|
}
|
},
|
computed: {
|
recommend() {
|
return this.$store.state.config.recommendKeys
|
}
|
},
|
methods: {
|
//搜索
|
search: function () {
|
let keys = this.key;
|
if (keys != '') {
|
let search_key = this.$db.get('search_key');
|
if (!search_key) {
|
search_key = [];
|
}
|
let flag = true;
|
for (var key in search_key) {
|
if (search_key[key] == keys) {
|
flag = false;
|
}
|
}
|
if (flag) {
|
search_key.unshift(keys);
|
}
|
this.$db.set('search_key', search_key);
|
this.$db.set('search_term', keys);
|
this.$u.route('/pages/category/list/list?key=' + keys);
|
} else {
|
this.$refs.uToast.show({
|
message: '请输入要查询的关键字',
|
type: 'warning',
|
})
|
}
|
},
|
|
//清除
|
deleteKey: function () {
|
//删除显示
|
this.keys = [];
|
//删除存储
|
this.$db.del('search_key');
|
},
|
|
//跳转操作
|
toNav: function (keys) {
|
this.$db.set('search_term', keys);
|
let search_key = this.$db.get('search_key');
|
if (!search_key) {
|
search_key = [];
|
}
|
var flag = true;
|
for (var key in search_key) {
|
if (search_key[key] == keys) {
|
flag = false;
|
}
|
}
|
if (flag) {
|
search_key.unshift(keys);
|
}
|
this.$db.set('search_key', search_key);
|
this.$u.route('/pages/category/list/list?key=' + keys);
|
},
|
},
|
//加载触发
|
onShow(e) {
|
this.keys = this.$db.get('search_key');
|
this.focus = true;
|
},
|
//页面卸载触发
|
onUnload() {
|
this.$db.set('search_term', '');
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page { background: #fff; }
|
</style>
|
