Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f53b6ac5 1 parent 5e5c731c

新增产品中心首页

Inline Side-by-side
Showing 1 changed file with 347 additions and 0 deletions
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-18 09:47:59
* @FilePath: /hager/src/views/product/all.vue
* @Description: 文件描述
-->
<template>
<div class="product-index">
<hager-box v-if="!is_search">
<div style="margin-top: 1.5rem;">
<el-breadcrumb v-if="!is_all_cate" separator="/">
<el-breadcrumb-item :to="{ path: allPath }">所有产品</el-breadcrumb-item>
<el-breadcrumb-item v-if="parent_name" :to="{ path: productPath }">{{ parent_name }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb v-else separator="/">
<el-breadcrumb-item>所有产品</el-breadcrumb-item>
</el-breadcrumb>
</div>
</hager-box>
<hager-box v-if="!is_xs && !is_search" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: `url('https://cdn.ipadbiz.cn/hager/img/product/banner-l@2x.png'), url(${banner})`, marginTop: '1rem' }">
<div class="banner-text-wrapper" style="margin-top: 3%;">
<div class="text">
<p class="title" style="margin-bottom: 0; color: white; font-size: 1.6vw; font-weight: bold;">{{ category_name }}</p>
<p class="sub" style="color: white; font-size: 1.2vw; font-weight: bold;">{{ category_name_en }}</p>
<div style="margin-top: 1.5rem; font-weight: normal; font-size: 0.9vw; color: white; width: 45%;">
<p v-html="category_description"></p>
</div>
</div>
</div>
</hager-box>
<hager-box>
<div v-if="!is_xs">
<hager-h1 v-if="is_search" :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
</div>
<div v-else>
<hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
<hager-h1 v-else :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" style="margin: 2rem 0;"></hager-h1>
</div>
</hager-box>
<hager-box>
<el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
<el-col :span="6">
<div class="product-nav-wrapper">
<div class="product-nav-title">按产品类别查找</div>
<el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_keyword" @change="goToSearch"></el-input>
<Accordion v-if="!is_all_cate" :items="cate_list" />
<Accordion v-else :items="all_cate_list" />
</div>
</el-col>
<el-col :span="18">
<div class="product-list">
<div class="product-item" v-for="(item, index) in product_list" :key="index">
<div class="product-item-img" @click="goToDetail(item)">
<img style="width: 100%; height: auto;" :src="item.cover">
</div>
<p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
</div>
</div>
<div style="height: 5rem;"></div>
</el-col>
</el-row>
<div v-else class="product-list">
<div class="product-item xs" v-for="(item, index) in product_list" :key="index">
<div @click="goToDetail(item)" class="product-item-img xs">
<img style="width: 35vw; height: auto;" :src="item.cover">
</div>
<p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
</div>
</div>
<div style="height: 5rem;"></div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import Accordion from '@/components/accordion/Accordion.vue';
import { getProductCateAPI, getProductSearchAPI } from "@/api/hager.js";
import $ from 'jquery';
export default {
components: { hagerBox, hagerH1, Accordion },
mixins: [mixin.init],
data () {
return {
search_keyword: '',
keyword: '',
activeNames: [],
cate_id: '',
parent_name: '',
category_name: '所有产品',
category_name_en: 'All Products',
category_description: '',
banner: 'https://cdn.ipadbiz.cn/hager/img/4-b-02.png',
cate_list: [],
product_list: [],
no_product_img: 'https://cdn.ipadbiz.cn/hager/img/no-product-img.png',
is_search: false,
all_cate_list: [],
is_all_cate: true
}
},
async mounted () {
if (!this.is_all_cate) {
this.getMain();
} else { // 没有ID显示所有产品
this.getAllMain();
}
window.addEventListener('resize', this.changeImgHeight);
},
beforeDestroy() {
// 在组件销毁前移除监听器，防止内存泄漏
window.removeEventListener('resize', this.handleHeightResize);
},
computed: {
allPath () {
return `/product`;
},
productPath () {
return `/product/index/${this.cate_id}/${Date.now()}`;
},
},
watch: {
// 监听路由参数变化时，更新输入框的值
'$route.params.id' (val, old) {
if (val) {
if (old !== val) {
this.is_search = false;
this.getMain();
}
} else {
// 所有产品
this.getAllMain();
}
},
'$route.params.timestamp' (val, old) {
this.is_search = false;
if (!this.is_all_cate) {
this.getMain();
} else {
// 所有产品
this.getAllMain();
}
},
},
methods: {
changeImgHeight () {
this.$nextTick(() => {
// 动态计算图片高度
let img_width = $('.product-item-img img').outerWidth();
$('.product-item-img img').css('height', img_width * 1 + 'px');
let banner_width = $('.top-img').outerWidth();
$('.top-img').css('height', banner_width * 0.12 + 'px');
})
},
handleChange(val) {
},
goToDetail (v) { // 跳转产品详情
this.$router.push({
path: `/product/detail/${v.id}/${this.$route.params.id}/${Date.now()}`
});
},
async getAllMain () { // 查询所有产品列表数据
this.getCurrentCate();
const { code, data } = await getProductCateAPI({ cid: 0 });
if (code) {
let info = data[0];
this.category_name = '所有产品';
this.category_name_en = 'All Products';
// this.category_description = '<p style="margin-bottom: 0.5rem;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p><p>Hager provides safe and stable electrical products and intelligent solutions for customers.</p>';
this.category_description = '<p style="margin-bottom: 0.5rem; font-weight: bold;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p>';
this.banner = 'https://cdn.ipadbiz.cn/hager/img/4-b-02.png';
this.product_list = info.list;
this.search_keyword = '';
// 设置页面标题
document.title = '所有产品 | Hager China';
// 动态计算图片高度
this.changeImgHeight();
}
},
async getMain () {
const { code, data } = await getProductCateAPI({cid: this.$route.params.id });
if (code) {
let info = data[0];
this.parent_name = info.parent_name;
this.category_name = info.category_name? info.category_name : '所有产品';
this.category_name_en = info.category_name_en ? info.category_name_en : 'All Products';
this.category_description = info.category_description ? info.category_description : '<p style="margin-bottom: 0.5rem; font-weight: bold;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p>';
this.banner = info.banner ? info.banner : 'https://cdn.ipadbiz.cn/hager/img/4-b-02.png';
this.product_list = info.list;
this.search_keyword = '';
// 获取当前类别的内容
this.cate_id = info.category_parent ? info.category_parent : info.id; // 同一个值，在不同层级下名字不一样
this.getCurrentCate(this.cate_id);
// 设置页面标题
document.title = this.category_name + ' | Hager China';
// 动态计算图片高度
this.changeImgHeight();
}
},
async getCurrentCate (cate_id) {
const { code, data } = await getProductCateAPI();
if (code) {
if (cate_id) {
data.forEach((item) => {
if (item.id === cate_id) {
this.cate_list = item.children;
// 重构数据结构配合组件
this.cate_list.forEach((c) => {
c.children = c.list;
c.style = {fontWeight: 'normal', height: '2.5rem'}
c.children.forEach((d) => {
d.category_name = d.product_name
})
})
}
});
} else {
// 所有分类列表
this.all_cate_list = data;
// 重构数据结构配合组件
this.all_cate_list.forEach((item) => {
item.children.forEach((c) => {
c.children = c.list;
c.style = {fontWeight: 'normal', height: '2.5rem'}
c.children.forEach((d) => {
d.category_name = d.product_name
})
})
})
}
}
},
async goToSearch () {
if (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 { // 清空搜索值，还原
if (!this.is_all_cate) {
this.getMain();
} else {
// 所有产品
this.getAllMain();
}
this.is_search = false;
this.keyword = '';
}
},
}
}
</script>
<style lang="less">
.product-index {
.product-nav-wrapper {
border: 1px solid #eee;
border-radius: 5px;
padding: 1.5rem;
margin-right: 1rem;
.product-nav-title {
color: @secondary-color;
font-weight: bold;
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
}
.top-img {
background-size: 50% 115%; /* 每张背景图各占 50% 的宽度，100% 的高度 */
background-position: left, right; /* 第一张图在左侧，第二张图在右侧 */
background-repeat: no-repeat; /* 避免背景图重复 */
position: relative;
width: 100%;
height: 25rem; /* 或根据需要指定高度 */
&.xs {
height: 12rem;
}
.top-center {
position: absolute;
transform: translateY(50%); /* 垂直与水平居中 */
}
}
.product-list {
display: flex;
flex-wrap: wrap;
}
.product-item {
width: calc(33.33% - 1rem);
margin-bottom: 1rem;
margin-right: 1rem;
&.xs {
width: calc(50% - 1rem);
}
}
.product-item-img {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 2vw;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid #eee;
overflow: hidden;
&:hover {
cursor: pointer;
}
}
.product-item-title {
// text-align: center;
margin-top: 0.75rem;
color: @text-color;
font-weight: bold;
padding-left: 1rem;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.el-collapse {
border-top: 0;
}
.el-collapse-item {
.el-collapse-item__header {
font-size: 0.9rem;
}
.p-item {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
</style>