Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
23403719 1 parent 37644565

菜单相关页面接口联调

Inline Side-by-side
Showing 3 changed files with 63 additions and 236 deletions
/*
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-23 13:03:28
* @LastEditTime: 2024-10-23 13:47:59
* @FilePath: /hager/src/api/hager.js
* @Description: 文件描述
*/
......@@ -11,8 +11,12 @@ const Api = {
HONOR: '/srv/?a=cate&type=honor',
NEWS: '/srv/?a=cate&type=news',
NEWS_DETAIL: '/srv/?a=detail&type=news',
HOME: '/srv/?a=home',
PRODUCT_CATE: '/srv/?a=cate&type=product',
};
export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
export const newsAPI = (params) => fn(fetch.get(Api.NEWS, params));
export const getNewsDetailAPI = (params) => fn(fetch.get(Api.NEWS_DETAIL, params));
export const getHomeAPI = (params) => fn(fetch.get(Api.HOME, params));
export const getProductCateAPI = (params) => fn(fetch.get(Api.PRODUCT_CATE, params));
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-23 10:01:24
* @LastEditTime: 2024-10-23 14:34:15
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -72,9 +72,9 @@
<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">
<el-image style="width: auto; height: 1.65rem" :src="item.icon" fit="fit"></el-image>
<el-image style="width: auto; height: 1.65rem" :src="item.cover" fit="fit"></el-image>
&nbsp;
{{ item.name }}
{{ item.category_name }}
</div>
<div>
<i class="el-icon-arrow-right"></i>
......@@ -82,16 +82,19 @@
</div>
</div>
<div class="product-right-wrapper">
<div class="product-right-title">
<div class="text">{{ product_info.name }}</div>
<!-- <div class="product-right-title">
<div class="text">{{ product_info.category_name }}</div>
<div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
</div>
<div class="product-right-desc">{{ product_info.category_name_en }}</div> -->
<div class="closeBtn">
<div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
</div>
<div class="product-right-desc">{{ product_info.desc }}</div>
<div class="product-right-center">
<div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
<div @click="goToC(item)" class="header-text">{{ item.name }}&nbsp;</div>
<div v-for="(item, index) in product_info" :key="index" class="product-right-center-item">
<div @click="goToC(item)" class="header-text">{{ item.category_name }}&nbsp;</div>
<div>
<div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
<div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.product_name }}</div>
</div>
</div>
</div>
......@@ -123,7 +126,7 @@
</div>
<el-collapse-transition>
<div v-show="show_menu" class="menu-mini">
<hager-menu @close="closeMiniMenu"></hager-menu>
<hager-menu :menuData="product_menu" @close="closeMiniMenu"></hager-menu>
</div>
</el-collapse-transition>
</div>
......@@ -135,6 +138,7 @@ import mixin from 'common/mixin';
import { parseQueryString } from '@/utils/tools';
import $ from 'jquery';
import hagerMenu from '../hagerMenu.vue';
import { getProductCateAPI } from "@/api/hager.js";
export default {
components: { hagerMenu },
......@@ -142,152 +146,8 @@ export default {
data () {
return {
show: false,
product_menu: [{
name: '配电产品',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E9%85%8D%E7%94%B5%E4%BA%A7%E5%93%81@2x.png',
info: {
name: '配电产品',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: [
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}]
},
]
}
}, {
name: '成套产品',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E4%BA%A7%E5%93%81@2x.png',
info: {
name: '成套产品',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}, {
name: '开关面板',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E5%BC%80%E5%85%B3@2x.png',
info: {
name: '开关面板',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}, {
name: '智能控制',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
info: {
name: '智能控制',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}, {
name: '能源管理',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
info: {
name: '智能控制',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}],
product_info: {},
product_menu: [],
product_info: [],
is_active: '',
p_index: 0,
show_menu: false,
......@@ -303,7 +163,15 @@ export default {
this.keyword = newKeyword || '';
}
},
mounted () {
async mounted () {
const { code, data } = await getProductCateAPI();
if (code) {
this.product_menu = data;
// this.product_info = this.product_menu[0]['info'];
this.product_info = this.product_menu[0]['children'];
// 修改数据结构显示
this.product_info = this.splitProductList(this.product_info);
}
//
// let margin_top = 5; // 默认高度
// let once_header_height = 5; // 选择国家地区高度
......@@ -326,16 +194,19 @@ export default {
// }
// });
//
this.product_info = this.product_menu[0]['info'];
// 修改数据结构显示
this.product_info.product = this.splitProductList(this.product_info.product);
},
watch: {
'$route' (to, from) {
this.is_active = to.meta.tag;
this.show = false;
},
'is_xs' (val) {
if (!val) {
$('body').css('overflow', 'auto');
}
},
},
methods: {
splitProductList (products) {
const maxLength = 5; // 超过5个需要拆分
......@@ -343,12 +214,12 @@ export default {
products.forEach(product => {
// 如果 list 长度不超过 5，则直接加入 result
if (product.list.length <= maxLength) {
if (product.list?.length <= maxLength || product.list === null) {
result.push(product);
} else {
// 如果 list 长度超过 5，则拆分
let listChunks = [];
for (let i = 0; i < product.list.length; i += maxLength) {
for (let i = 0; i < product.list?.length; i += maxLength) {
listChunks.push(product.list.slice(i, i + maxLength));
}
......@@ -356,7 +227,7 @@ export default {
listChunks.forEach((chunk, index) => {
if (index === 0) {
result.push({
name: product.name,
name: product.product_name,
list: chunk
});
} else {
......@@ -410,7 +281,9 @@ export default {
}
},
onClick (item, index) {
this.product_info = item.info;
this.product_info = item.children;
// 修改数据结构显示
this.product_info = this.splitProductList(this.product_info);
this.p_index = index
},
closeMenu () {
......@@ -559,6 +432,14 @@ export default {
}
}
}
.closeBtn {
position: absolute;
right: 1rem;
top: 1rem;
&:hover {
cursor: pointer;
}
}
.product-right-desc {
margin-bottom: 1.5rem;
color: @secondary-text-color;
......
<!--
* @Date: 2024-10-10 10:37:16
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 13:37:46
* @LastEditTime: 2024-10-23 14:28:22
* @FilePath: /hager/src/components/hagerMenu.vue
* @Description: 文件描述
-->
......@@ -27,8 +27,8 @@
:class="['menu-label', activeMenu === item.id ? 'active' : '']"
>
<div>
<i class="el-icon-s-cooperation"></i>
{{ item.label }}
<el-image style="width: auto; height: 1rem" :src="item.cover" fit="fit"></el-image>
{{ item.category_name }}
</div>
<div>
<i
......@@ -42,9 +42,9 @@
<!-- 二级菜单 -->
<div v-if="isActive(item.id)" class="submenu">
<div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item">
<div v-for="subItem in item.children" :key="subItem.id" class="submenu-item">
<div class="submenu-label">
<div @click="goToSub(subItem.id)">{{ subItem.label }}</div>
<div @click="goToSub(subItem.id)">{{ subItem.category_name }}</div>
<div @click="toggleSubMenu(subItem.id)">
<i
v-if="isSubActive(subItem.id)"
......@@ -59,11 +59,11 @@
<div v-if="isSubActive(subItem.id)" class="third-menu">
<div
@click="goToThird(thirdItem.id)"
v-for="thirdItem in subItem.subItems"
v-for="thirdItem in subItem.list"
:key="thirdItem.id"
class="third-item"
>
{{ thirdItem.label }}
{{ thirdItem.product_name }}
</div>
</div>
</div>
......@@ -96,72 +96,14 @@ import mixin from "common/mixin";
export default {
mixins: [mixin.init],
props: {
menuData: {
type: Array,
default: () => []
}
},
data() {
return {
menuData: [
{
id: 1,
label: "配电产品",
subItems: [
{
id: 11,
label: "空气断路器1",
subItems: [
{ id: 111, label: "HW系列空气断路器" },
{ id: 112, label: "HW+系列空气断路器" },
{ id: 113, label: "HW系列空气断路器" },
{ id: 114, label: "HW+系列空气断路器" },
{ id: 115, label: "HW系列空气断路器" },
{ id: 116, label: "HW+系列空气断路器" },
{ id: 117, label: "HW系列空气断路器" },
{ id: 118, label: "HW+系列空气断路器" },
{ id: 119, label: "HW系列空气断路器" },
{ id: 1121, label: "HW+系列空气断路器" },
{ id: 1117, label: "HW系列空气断路器" },
{ id: 1127, label: "HW+系列空气断路器" },
{ id: 1137, label: "HW系列空气断路器" },
{ id: 1147, label: "HW+系列空气断路器" },
{ id: 1157, label: "HW系列空气断路器" },
{ id: 1167, label: "HW+系列空气断路器" },
{ id: 7117, label: "HW系列空气断路器" },
{ id: 7118, label: "HW+系列空气断路器" },
{ id: 7119, label: "HW系列空气断路器" },
{ id: 71121, label: "HW+系列空气断路器" },
],
},
{
id: 12,
label: "空气断路器2",
subItems: [
{ id: 111, label: "HW系列空气断路器" },
{ id: 112, label: "HW+系列空气断路器" },
{ id: 113, label: "HW系列空气断路器" },
{ id: 114, label: "HW+系列空气断路器" },
{ id: 115, label: "HW系列空气断路器" },
{ id: 116, label: "HW+系列空气断路器" },
{ id: 117, label: "HW系列空气断路器" },
{ id: 118, label: "HW+系列空气断路器" },
{ id: 119, label: "HW系列空气断路器" },
{ id: 1121, label: "HW+系列空气断路器" },
],
},
],
},
{
id: 2,
label: "成套产品",
subItems: [
{
id: 21,
label: "塑壳断路器",
subItems: [
{ id: 211, label: "自动转换开关" },
{ id: 212, label: "接触器及热过载继电器" },
],
},
],
},
],
isToggle: false,
activeMenu: null, // 当前展开的一级菜单ID
activeSubMenu: null, // 当前展开的二级菜单ID
......