Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8d97d7b8 1 parent eaf11e91

产品中心首页接口联调

Inline Side-by-side
Showing 4 changed files with 69 additions and 193 deletions
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-23 14:34:15
* @LastEditTime: 2024-10-23 15:26:14
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -68,7 +68,7 @@
</el-row>
<el-collapse-transition>
<div v-show="show" class="product-center" v-click-outside="closeMenu">
<div style="display: flex; width: 100%;">
<div style="display: flex; width: 100%;border: 1px solid rgba(218, 218, 218, 0.4); border-top: 0;">
<div class="product-left-wrapper">
<div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
<div class="icon-text">
......@@ -300,7 +300,7 @@ export default {
this.$router.push({
path: '/product/index',
query: {
// id: id
id: item.id,
}
});
this.closeMenu();
......@@ -309,7 +309,7 @@ export default {
this.$router.push({
path: '/product/detail',
query: {
// id: id
id: item.id
}
});
this.closeMenu();
......@@ -391,6 +391,7 @@ export default {
.product-left-wrapper {
flex-basis: 33.33%;
padding: 1rem;
border-top: 1px solid rgba(218, 218, 218, 0.4);
&:hover {
cursor: pointer;
}
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 12:23:10
* @LastEditTime: 2024-10-23 15:58:51
* @FilePath: /hager/src/views/index.vue
* @Description: 首页
-->
......@@ -102,8 +102,8 @@
<swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
<swiper-slide v-for="(item, index) in product_list" :key="index">
<div @click="goToProduct(item)" class="product-item xs">
<div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.src+')' }"></div>
<p style="margin: 0.5rem;">{{ item.title }}</p>
<div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.cover+')' }"></div>
<p style="margin: 0.5rem;">{{ item.category_name }}</p>
</div>
</swiper-slide>
</swiper>
......@@ -183,6 +183,7 @@ import mixin from '@/common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerMore from '@/components/hagerMore.vue';
import { getHomeAPI } from "@/api/hager.js";
export default {
mixins: [mixin.init],
......@@ -308,6 +309,11 @@ export default {
}
},
async mounted () {
const { code, data } = await getHomeAPI();
if (code) {
console.warn(data);
this.product_list = data.product;
}
this.$nextTick(() => {
this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
......@@ -373,9 +379,9 @@ export default {
},
goToProduct (v) {
this.$router.push({
path: '/product/category',
path: '/product/index',
query: {
id: v.id
id: v.first_child_id
}
});
},
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 21:01:53
* @FilePath: /hager/src/views/product/category.vue
* @Description: 文件描述
-->
<template>
<div class="product-category">
<hager-box>
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item>所有产品</el-breadcrumb-item>
<el-breadcrumb-item>配电产品</el-breadcrumb-item>
</el-breadcrumb>
</div>
<hager-h1 title="配电产品" sub="Distribution Products" 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">
<div class="product-nav-title">按产品类别查找</div>
<el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
<div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="18">
<div class="product-list">
<div class="product-item" v-for="(item, index) in 6" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</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 6" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</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';
export default {
components: { hagerBox, hagerH1 },
mixins: [mixin.init],
data () {
return {
search_input: '',
activeNames: ['1'],
c_list: [{
title: '低压主配电',
name: '1',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}, {
title: '分配电',
name: '2',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}]
}
},
mounted () {
},
methods: {
handleChange(val) {
console.log(val);
},
goToP (item) { // 跳转产品详情
this.$router.push({
path: '/product/detail',
query: {
// id: id
}
});
}
}
}
</script>
<style lang="less">
.product-category {
.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;
}
}
.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.product-item {
width: calc(33.33% - 1rem);
&.xs {
width: calc(50% - 1rem);
}
}
.product-item-img {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 8px;
}
.product-item-title {
text-align: center;
margin-top: 0.75rem;
color: @secondary-color;
&: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>
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 16:13:58
* @LastEditTime: 2024-10-23 15:56:41
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -11,41 +11,41 @@
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item>所有产品</el-breadcrumb-item>
<el-breadcrumb-item>配电产品</el-breadcrumb-item>
<el-breadcrumb-item>低压主配电</el-breadcrumb-item>
<el-breadcrumb-item>{{ parent_name }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<hager-h1 title="低压主配电" sub="Automatic conversion switch" style="margin: 2rem 0;"></hager-h1>
<hager-h1 :title="category_name" :sub="category_name_en" 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">
<div class="product-nav-title">按产品类别查找</div>
<el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
<div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
<el-collapse-item v-for="(item, index) in cate_list" :key="index" :title="item.category_name" :name="item.category_name">
<div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.product_name }}</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="18">
<div class="product-list">
<div class="product-item" v-for="(item, index) in 6" :key="index">
<div class="product-item" v-for="(item, index) in product_list" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image>
<el-image style="width: 100%; height: 100%" :src="item.cover" fit="fit"></el-image>
</div>
<p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p>
<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 6" :key="index">
<div class="product-item xs" v-for="(item, index) in product_list" :key="index">
<div @click="goToDetail(item)" class="product-item-img xs">
<el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image>
<el-image style="width: 100%; height: auto;" :src="item.cover" fit="fit"></el-image>
</div>
<p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p>
<p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
</div>
</div>
<div style="height: 5rem;"></div>
......@@ -57,6 +57,7 @@
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import { getProductCateAPI } from "@/api/hager.js";
export default {
components: { hagerBox, hagerH1 },
......@@ -64,8 +65,11 @@ export default {
data () {
return {
search_input: '',
activeNames: ['1'],
c_list: [{
activeNames: [],
parent_name: '',
category_name: '',
category_name_en: '',
cate_list: [{
title: '低压主配电',
name: '1',
list: [{
......@@ -79,15 +83,23 @@ export default {
id: '',
name: 'acb hw01 空气断路器'
}]
}]
}],
product_list: [],
}
},
mounted () {
async mounted () {
this.getMain();
},
watch: {
// 监听路由参数变化时，更新输入框的值
async '$route.query.id' (val, old) {
if (old !== val) {
this.getMain();
}
}
},
methods: {
handleChange(val) {
console.log(val);
},
goToDetail (v) { // 跳转产品详情
this.$router.push({
......@@ -96,7 +108,29 @@ export default {
id: v.id
}
});
}
},
async getMain () {
const { code, data } = await getProductCateAPI( {cid: this.$route.query.id});
if (code) {
let info = data[0];
this.parent_name = info.parent_name;
this.category_name = info.category_name;
this.category_name_en = info.category_name_en;
this.product_list = info.list;
//
this.getCurrentCate(info.category_parent);
}
},
async getCurrentCate (category_parent) {
const { code, data } = await getProductCateAPI();
if (code) {
data.forEach((item) => {
if (item.id === category_parent) {
this.cate_list = item.children;
}
})
}
},
}
}
</script>
......