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 64 additions and 237 deletions
1 /* 1 /*
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-23 13:03:28 4 + * @LastEditTime: 2024-10-23 13:47:59
5 * @FilePath: /hager/src/api/hager.js 5 * @FilePath: /hager/src/api/hager.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -11,8 +11,12 @@ const Api = { ...@@ -11,8 +11,12 @@ const Api = {
11 HONOR: '/srv/?a=cate&type=honor', 11 HONOR: '/srv/?a=cate&type=honor',
12 NEWS: '/srv/?a=cate&type=news', 12 NEWS: '/srv/?a=cate&type=news',
13 NEWS_DETAIL: '/srv/?a=detail&type=news', 13 NEWS_DETAIL: '/srv/?a=detail&type=news',
14 + HOME: '/srv/?a=home',
15 + PRODUCT_CATE: '/srv/?a=cate&type=product',
14 }; 16 };
15 17
16 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params)); 18 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
17 export const newsAPI = (params) => fn(fetch.get(Api.NEWS, params)); 19 export const newsAPI = (params) => fn(fetch.get(Api.NEWS, params));
18 export const getNewsDetailAPI = (params) => fn(fetch.get(Api.NEWS_DETAIL, params)); 20 export const getNewsDetailAPI = (params) => fn(fetch.get(Api.NEWS_DETAIL, params));
21 +export const getHomeAPI = (params) => fn(fetch.get(Api.HOME, params));
22 +export const getProductCateAPI = (params) => fn(fetch.get(Api.PRODUCT_CATE, params));
......
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:42:11 2 * @Date: 2024-09-26 13:42:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-23 10:01:24 4 + * @LastEditTime: 2024-10-23 14:34:15
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -72,9 +72,9 @@ ...@@ -72,9 +72,9 @@
72 <div class="product-left-wrapper"> 72 <div class="product-left-wrapper">
73 <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)"> 73 <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
74 <div class="icon-text"> 74 <div class="icon-text">
75 - <el-image style="width: auto; height: 1.65rem" :src="item.icon" fit="fit"></el-image> 75 + <el-image style="width: auto; height: 1.65rem" :src="item.cover" fit="fit"></el-image>
76 &nbsp; 76 &nbsp;
77 - {{ item.name }} 77 + {{ item.category_name }}
78 </div> 78 </div>
79 <div> 79 <div>
80 <i class="el-icon-arrow-right"></i> 80 <i class="el-icon-arrow-right"></i>
...@@ -82,16 +82,19 @@ ...@@ -82,16 +82,19 @@
82 </div> 82 </div>
83 </div> 83 </div>
84 <div class="product-right-wrapper"> 84 <div class="product-right-wrapper">
85 - <div class="product-right-title"> 85 + <!-- <div class="product-right-title">
86 - <div class="text">{{ product_info.name }}</div> 86 + <div class="text">{{ product_info.category_name }}</div>
87 + <div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
88 + </div>
89 + <div class="product-right-desc">{{ product_info.category_name_en }}</div> -->
90 + <div class="closeBtn">
87 <div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div> 91 <div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
88 </div> 92 </div>
89 - <div class="product-right-desc">{{ product_info.desc }}</div>
90 <div class="product-right-center"> 93 <div class="product-right-center">
91 - <div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item"> 94 + <div v-for="(item, index) in product_info" :key="index" class="product-right-center-item">
92 - <div @click="goToC(item)" class="header-text">{{ item.name }}&nbsp;</div> 95 + <div @click="goToC(item)" class="header-text">{{ item.category_name }}&nbsp;</div>
93 <div> 96 <div>
94 - <div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div> 97 + <div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.product_name }}</div>
95 </div> 98 </div>
96 </div> 99 </div>
97 </div> 100 </div>
...@@ -123,7 +126,7 @@ ...@@ -123,7 +126,7 @@
123 </div> 126 </div>
124 <el-collapse-transition> 127 <el-collapse-transition>
125 <div v-show="show_menu" class="menu-mini"> 128 <div v-show="show_menu" class="menu-mini">
126 - <hager-menu @close="closeMiniMenu"></hager-menu> 129 + <hager-menu :menuData="product_menu" @close="closeMiniMenu"></hager-menu>
127 </div> 130 </div>
128 </el-collapse-transition> 131 </el-collapse-transition>
129 </div> 132 </div>
...@@ -135,6 +138,7 @@ import mixin from 'common/mixin'; ...@@ -135,6 +138,7 @@ import mixin from 'common/mixin';
135 import { parseQueryString } from '@/utils/tools'; 138 import { parseQueryString } from '@/utils/tools';
136 import $ from 'jquery'; 139 import $ from 'jquery';
137 import hagerMenu from '../hagerMenu.vue'; 140 import hagerMenu from '../hagerMenu.vue';
141 +import { getProductCateAPI } from "@/api/hager.js";
138 142
139 export default { 143 export default {
140 components: { hagerMenu }, 144 components: { hagerMenu },
...@@ -142,152 +146,8 @@ export default { ...@@ -142,152 +146,8 @@ export default {
142 data () { 146 data () {
143 return { 147 return {
144 show: false, 148 show: false,
145 - product_menu: [{ 149 + product_menu: [],
146 - name: '配电产品', 150 + product_info: [],
147 - icon: 'https://cdn.ipadbiz.cn/hager/icon/%E9%85%8D%E7%94%B5%E4%BA%A7%E5%93%81@2x.png',
148 - info: {
149 - name: '配电产品',
150 - desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
151 - product: [
152 - {
153 - name: '空气断路器',
154 - list: [{
155 - id: '',
156 - name: 'HW系列空气断路器'
157 - }, {
158 - id: '',
159 - name: 'HW+系列空气断路器'
160 - }]
161 - },
162 - {
163 - name: '空气断路器',
164 - list: [{
165 - id: '',
166 - name: 'HW系列空气断路器'
167 - }, {
168 - id: '',
169 - name: 'HW+系列空气断路器'
170 - }]
171 - },
172 - {
173 - name: '空气断路器',
174 - list: [{
175 - id: '',
176 - name: 'HW系列空气断路器'
177 - }, {
178 - id: '',
179 - name: 'HW+系列空气断路器'
180 - }]
181 - },
182 - {
183 - name: '空气断路器',
184 - list: [{
185 - id: '',
186 - name: 'HW系列空气断路器'
187 - }, {
188 - id: '',
189 - name: 'HW+系列空气断路器'
190 - }, {
191 - id: '',
192 - name: 'HW系列空气断路器'
193 - }, {
194 - id: '',
195 - name: 'HW+系列空气断路器'
196 - }, {
197 - id: '',
198 - name: 'HW系列空气断路器'
199 - }]
200 - },
201 - {
202 - name: '空气断路器',
203 - list: [{
204 - id: '',
205 - name: 'HW系列空气断路器'
206 - }, {
207 - id: '',
208 - name: 'HW+系列空气断路器'
209 - }]
210 - },
211 - {
212 - name: '空气断路器',
213 - list: [{
214 - id: '',
215 - name: 'HW系列空气断路器'
216 - }, {
217 - id: '',
218 - name: 'HW+系列空气断路器'
219 - }]
220 - },
221 - {
222 - name: '空气断路器',
223 - list: [{
224 - id: '',
225 - name: 'HW系列空气断路器'
226 - }, {
227 - id: '',
228 - name: 'HW+系列空气断路器'
229 - }, {
230 - id: '',
231 - name: 'HW系列空气断路器'
232 - }, {
233 - id: '',
234 - name: 'HW+系列空气断路器'
235 - }, {
236 - id: '',
237 - name: 'HW系列空气断路器'
238 - }, {
239 - id: '',
240 - name: 'HW系列空气断路器'
241 - }, {
242 - id: '',
243 - name: 'HW+系列空气断路器'
244 - }, {
245 - id: '',
246 - name: 'HW系列空气断路器'
247 - }, {
248 - id: '',
249 - name: 'HW+系列空气断路器'
250 - }, {
251 - id: '',
252 - name: 'HW系列空气断路器'
253 - }]
254 - },
255 - ]
256 - }
257 - }, {
258 - name: '成套产品',
259 - icon: 'https://cdn.ipadbiz.cn/hager/icon/%E4%BA%A7%E5%93%81@2x.png',
260 - info: {
261 - name: '成套产品',
262 - desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
263 - product: []
264 - }
265 - }, {
266 - name: '开关面板',
267 - icon: 'https://cdn.ipadbiz.cn/hager/icon/%E5%BC%80%E5%85%B3@2x.png',
268 - info: {
269 - name: '开关面板',
270 - desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
271 - product: []
272 - }
273 - }, {
274 - name: '智能控制',
275 - icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
276 - info: {
277 - name: '智能控制',
278 - desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
279 - product: []
280 - }
281 - }, {
282 - name: '能源管理',
283 - icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
284 - info: {
285 - name: '智能控制',
286 - desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
287 - product: []
288 - }
289 - }],
290 - product_info: {},
291 is_active: '', 151 is_active: '',
292 p_index: 0, 152 p_index: 0,
293 show_menu: false, 153 show_menu: false,
...@@ -303,7 +163,15 @@ export default { ...@@ -303,7 +163,15 @@ export default {
303 this.keyword = newKeyword || ''; 163 this.keyword = newKeyword || '';
304 } 164 }
305 }, 165 },
306 - mounted () { 166 + async mounted () {
167 + const { code, data } = await getProductCateAPI();
168 + if (code) {
169 + this.product_menu = data;
170 + // this.product_info = this.product_menu[0]['info'];
171 + this.product_info = this.product_menu[0]['children'];
172 + // 修改数据结构显示
173 + this.product_info = this.splitProductList(this.product_info);
174 + }
307 // 175 //
308 // let margin_top = 5; // 默认高度 176 // let margin_top = 5; // 默认高度
309 // let once_header_height = 5; // 选择国家地区高度 177 // let once_header_height = 5; // 选择国家地区高度
...@@ -326,15 +194,18 @@ export default { ...@@ -326,15 +194,18 @@ export default {
326 // } 194 // }
327 // }); 195 // });
328 // 196 //
329 - this.product_info = this.product_menu[0]['info']; 197 +
330 - // 修改数据结构显示
331 - this.product_info.product = this.splitProductList(this.product_info.product);
332 }, 198 },
333 watch: { 199 watch: {
334 '$route' (to, from) { 200 '$route' (to, from) {
335 this.is_active = to.meta.tag; 201 this.is_active = to.meta.tag;
336 this.show = false; 202 this.show = false;
337 - } 203 + },
204 + 'is_xs' (val) {
205 + if (!val) {
206 + $('body').css('overflow', 'auto');
207 + }
208 + },
338 }, 209 },
339 methods: { 210 methods: {
340 splitProductList (products) { 211 splitProductList (products) {
...@@ -343,12 +214,12 @@ export default { ...@@ -343,12 +214,12 @@ export default {
343 214
344 products.forEach(product => { 215 products.forEach(product => {
345 // 如果 list 长度不超过 5，则直接加入 result 216 // 如果 list 长度不超过 5，则直接加入 result
346 - if (product.list.length <= maxLength) { 217 + if (product.list?.length <= maxLength || product.list === null) {
347 result.push(product); 218 result.push(product);
348 } else { 219 } else {
349 // 如果 list 长度超过 5，则拆分 220 // 如果 list 长度超过 5，则拆分
350 let listChunks = []; 221 let listChunks = [];
351 - for (let i = 0; i < product.list.length; i += maxLength) { 222 + for (let i = 0; i < product.list?.length; i += maxLength) {
352 listChunks.push(product.list.slice(i, i + maxLength)); 223 listChunks.push(product.list.slice(i, i + maxLength));
353 } 224 }
354 225
...@@ -356,7 +227,7 @@ export default { ...@@ -356,7 +227,7 @@ export default {
356 listChunks.forEach((chunk, index) => { 227 listChunks.forEach((chunk, index) => {
357 if (index === 0) { 228 if (index === 0) {
358 result.push({ 229 result.push({
359 - name: product.name, 230 + name: product.product_name,
360 list: chunk 231 list: chunk
361 }); 232 });
362 } else { 233 } else {
...@@ -410,7 +281,9 @@ export default { ...@@ -410,7 +281,9 @@ export default {
410 } 281 }
411 }, 282 },
412 onClick (item, index) { 283 onClick (item, index) {
413 - this.product_info = item.info; 284 + this.product_info = item.children;
285 + // 修改数据结构显示
286 + this.product_info = this.splitProductList(this.product_info);
414 this.p_index = index 287 this.p_index = index
415 }, 288 },
416 closeMenu () { 289 closeMenu () {
...@@ -559,6 +432,14 @@ export default { ...@@ -559,6 +432,14 @@ export default {
559 } 432 }
560 } 433 }
561 } 434 }
435 + .closeBtn {
436 + position: absolute;
437 + right: 1rem;
438 + top: 1rem;
439 + &:hover {
440 + cursor: pointer;
441 + }
442 + }
562 .product-right-desc { 443 .product-right-desc {
563 margin-bottom: 1.5rem; 444 margin-bottom: 1.5rem;
564 color: @secondary-text-color; 445 color: @secondary-text-color;
......
1 <!-- 1 <!--
2 * @Date: 2024-10-10 10:37:16 2 * @Date: 2024-10-10 10:37:16
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-21 13:37:46 4 + * @LastEditTime: 2024-10-23 14:28:22
5 * @FilePath: /hager/src/components/hagerMenu.vue 5 * @FilePath: /hager/src/components/hagerMenu.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
27 :class="['menu-label', activeMenu === item.id ? 'active' : '']" 27 :class="['menu-label', activeMenu === item.id ? 'active' : '']"
28 > 28 >
29 <div> 29 <div>
30 - <i class="el-icon-s-cooperation"></i> 30 + <el-image style="width: auto; height: 1rem" :src="item.cover" fit="fit"></el-image>
31 - {{ item.label }} 31 + {{ item.category_name }}
32 </div> 32 </div>
33 <div> 33 <div>
34 <i 34 <i
...@@ -42,9 +42,9 @@ ...@@ -42,9 +42,9 @@
42 42
43 <!-- 二级菜单 --> 43 <!-- 二级菜单 -->
44 <div v-if="isActive(item.id)" class="submenu"> 44 <div v-if="isActive(item.id)" class="submenu">
45 - <div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item"> 45 + <div v-for="subItem in item.children" :key="subItem.id" class="submenu-item">
46 <div class="submenu-label"> 46 <div class="submenu-label">
47 - <div @click="goToSub(subItem.id)">{{ subItem.label }}</div> 47 + <div @click="goToSub(subItem.id)">{{ subItem.category_name }}</div>
48 <div @click="toggleSubMenu(subItem.id)"> 48 <div @click="toggleSubMenu(subItem.id)">
49 <i 49 <i
50 v-if="isSubActive(subItem.id)" 50 v-if="isSubActive(subItem.id)"
...@@ -59,11 +59,11 @@ ...@@ -59,11 +59,11 @@
59 <div v-if="isSubActive(subItem.id)" class="third-menu"> 59 <div v-if="isSubActive(subItem.id)" class="third-menu">
60 <div 60 <div
61 @click="goToThird(thirdItem.id)" 61 @click="goToThird(thirdItem.id)"
62 - v-for="thirdItem in subItem.subItems" 62 + v-for="thirdItem in subItem.list"
63 :key="thirdItem.id" 63 :key="thirdItem.id"
64 class="third-item" 64 class="third-item"
65 > 65 >
66 - {{ thirdItem.label }} 66 + {{ thirdItem.product_name }}
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
...@@ -96,72 +96,14 @@ import mixin from "common/mixin"; ...@@ -96,72 +96,14 @@ import mixin from "common/mixin";
96 96
97 export default { 97 export default {
98 mixins: [mixin.init], 98 mixins: [mixin.init],
99 + props: {
100 + menuData: {
101 + type: Array,
102 + default: () => []
103 + }
104 + },
99 data() { 105 data() {
100 return { 106 return {
101 - menuData: [
102 - {
103 - id: 1,
104 - label: "配电产品",
105 - subItems: [
106 - {
107 - id: 11,
108 - label: "空气断路器1",
109 - subItems: [
110 - { id: 111, label: "HW系列空气断路器" },
111 - { id: 112, label: "HW+系列空气断路器" },
112 - { id: 113, label: "HW系列空气断路器" },
113 - { id: 114, label: "HW+系列空气断路器" },
114 - { id: 115, label: "HW系列空气断路器" },
115 - { id: 116, label: "HW+系列空气断路器" },
116 - { id: 117, label: "HW系列空气断路器" },
117 - { id: 118, label: "HW+系列空气断路器" },
118 - { id: 119, label: "HW系列空气断路器" },
119 - { id: 1121, label: "HW+系列空气断路器" },
120 - { id: 1117, label: "HW系列空气断路器" },
121 - { id: 1127, label: "HW+系列空气断路器" },
122 - { id: 1137, label: "HW系列空气断路器" },
123 - { id: 1147, label: "HW+系列空气断路器" },
124 - { id: 1157, label: "HW系列空气断路器" },
125 - { id: 1167, label: "HW+系列空气断路器" },
126 - { id: 7117, label: "HW系列空气断路器" },
127 - { id: 7118, label: "HW+系列空气断路器" },
128 - { id: 7119, label: "HW系列空气断路器" },
129 - { id: 71121, label: "HW+系列空气断路器" },
130 - ],
131 - },
132 - {
133 - id: 12,
134 - label: "空气断路器2",
135 - subItems: [
136 - { id: 111, label: "HW系列空气断路器" },
137 - { id: 112, label: "HW+系列空气断路器" },
138 - { id: 113, label: "HW系列空气断路器" },
139 - { id: 114, label: "HW+系列空气断路器" },
140 - { id: 115, label: "HW系列空气断路器" },
141 - { id: 116, label: "HW+系列空气断路器" },
142 - { id: 117, label: "HW系列空气断路器" },
143 - { id: 118, label: "HW+系列空气断路器" },
144 - { id: 119, label: "HW系列空气断路器" },
145 - { id: 1121, label: "HW+系列空气断路器" },
146 - ],
147 - },
148 - ],
149 - },
150 - {
151 - id: 2,
152 - label: "成套产品",
153 - subItems: [
154 - {
155 - id: 21,
156 - label: "塑壳断路器",
157 - subItems: [
158 - { id: 211, label: "自动转换开关" },
159 - { id: 212, label: "接触器及热过载继电器" },
160 - ],
161 - },
162 - ],
163 - },
164 - ],
165 isToggle: false, 107 isToggle: false,
166 activeMenu: null, // 当前展开的一级菜单ID 108 activeMenu: null, // 当前展开的一级菜单ID
167 activeSubMenu: null, // 当前展开的二级菜单ID 109 activeSubMenu: null, // 当前展开的二级菜单ID
......