hookehuyr

fix 产品中心侧边搜索框逻辑全部修改

<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-29 14:25:29
* @LastEditTime: 2024-10-29 14:48:43
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -16,7 +16,7 @@
</el-breadcrumb>
</div>
<hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
<hager-h1 v-else :title="'与“' + search_keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
<hager-h1 v-else :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
<el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
<el-col :span="6">
<div class="product-nav-wrapper">
......@@ -65,38 +65,21 @@ export default {
mixins: [mixin.init],
data () {
return {
search_keyword: this.$route.query.search_keyword,
search_keyword: '',
keyword: '',
activeNames: [],
parent_name: '',
category_name: '',
category_name_en: '',
cate_list: [{
title: '低压主配电',
name: '1',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}, {
title: '分配电',
name: '2',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}],
cate_list: [],
product_list: [],
no_product_img: 'https://cdn.ipadbiz.cn/hager/img/no-product-img.png',
is_search: false,
}
},
async mounted () {
this.getMain();
},
computed: {
is_search () {
return this.$route.query.search_keyword;
}
},
watch: {
// 监听路由参数变化时,更新输入框的值
async '$route.query.id' (val, old) {
......@@ -123,11 +106,8 @@ export default {
this.parent_name = info.parent_name;
this.category_name = info.category_name;
this.category_name_en = info.category_name_en;
if (!this.search_keyword) {
this.product_list = info.list;
} else {
this.goToSearch()
}
this.product_list = info.list;
this.search_keyword = '';
// 获取当前类别的内容
this.getCurrentCate(info.category_parent);
}
......@@ -143,29 +123,17 @@ export default {
}
},
async goToSearch () {
const { code, data } = await getProductSearchAPI({ keyword: this.search_keyword });
if (code) {
this.product_list = data;
}
if (this.search_keyword) { // 产品有值时操作
//
this.$router.replace({
path: this.$route.path,
query: {
...this.$route.query,
search_keyword: this.search_keyword
}
});
const { code, data } = await getProductSearchAPI({ keyword: this.search_keyword });
if (code) {
this.product_list = data;
this.is_search = true;
this.keyword = this.search_keyword;
}
} else { // 清空搜索值,还原
this.getMain();
// 清空搜索值
this.$router.replace({
path: this.$route.path,
query: {
...this.$route.query,
search_keyword: ''
}
});
this.is_search = false;
this.keyword = '';
}
},
}
......