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
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 14:34:15 4 + * @LastEditTime: 2024-10-23 15:26:14
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
68 </el-row> 68 </el-row>
69 <el-collapse-transition> 69 <el-collapse-transition>
70 <div v-show="show" class="product-center" v-click-outside="closeMenu"> 70 <div v-show="show" class="product-center" v-click-outside="closeMenu">
71 - <div style="display: flex; width: 100%;"> 71 + <div style="display: flex; width: 100%;border: 1px solid rgba(218, 218, 218, 0.4); border-top: 0;">
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">
...@@ -300,7 +300,7 @@ export default { ...@@ -300,7 +300,7 @@ export default {
300 this.$router.push({ 300 this.$router.push({
301 path: '/product/index', 301 path: '/product/index',
302 query: { 302 query: {
303 - // id: id 303 + id: item.id,
304 } 304 }
305 }); 305 });
306 this.closeMenu(); 306 this.closeMenu();
...@@ -309,7 +309,7 @@ export default { ...@@ -309,7 +309,7 @@ export default {
309 this.$router.push({ 309 this.$router.push({
310 path: '/product/detail', 310 path: '/product/detail',
311 query: { 311 query: {
312 - // id: id 312 + id: item.id
313 } 313 }
314 }); 314 });
315 this.closeMenu(); 315 this.closeMenu();
...@@ -391,6 +391,7 @@ export default { ...@@ -391,6 +391,7 @@ export default {
391 .product-left-wrapper { 391 .product-left-wrapper {
392 flex-basis: 33.33%; 392 flex-basis: 33.33%;
393 padding: 1rem; 393 padding: 1rem;
394 + border-top: 1px solid rgba(218, 218, 218, 0.4);
394 &:hover { 395 &:hover {
395 cursor: pointer; 396 cursor: pointer;
396 } 397 }
......
1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-21 12:23:10 4 + * @LastEditTime: 2024-10-23 15:58:51
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -102,8 +102,8 @@ ...@@ -102,8 +102,8 @@
102 <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange"> 102 <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
103 <swiper-slide v-for="(item, index) in product_list" :key="index"> 103 <swiper-slide v-for="(item, index) in product_list" :key="index">
104 <div @click="goToProduct(item)" class="product-item xs"> 104 <div @click="goToProduct(item)" class="product-item xs">
105 - <div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.src+')' }"></div> 105 + <div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.cover+')' }"></div>
106 - <p style="margin: 0.5rem;">{{ item.title }}</p> 106 + <p style="margin: 0.5rem;">{{ item.category_name }}</p>
107 </div> 107 </div>
108 </swiper-slide> 108 </swiper-slide>
109 </swiper> 109 </swiper>
...@@ -183,6 +183,7 @@ import mixin from '@/common/mixin'; ...@@ -183,6 +183,7 @@ import mixin from '@/common/mixin';
183 import hagerBox from '@/components/common/hagerBox'; 183 import hagerBox from '@/components/common/hagerBox';
184 import hagerH1 from '@/components/common/hagerH1.vue'; 184 import hagerH1 from '@/components/common/hagerH1.vue';
185 import hagerMore from '@/components/hagerMore.vue'; 185 import hagerMore from '@/components/hagerMore.vue';
186 +import { getHomeAPI } from "@/api/hager.js";
186 187
187 export default { 188 export default {
188 mixins: [mixin.init], 189 mixins: [mixin.init],
...@@ -308,6 +309,11 @@ export default { ...@@ -308,6 +309,11 @@ export default {
308 } 309 }
309 }, 310 },
310 async mounted () { 311 async mounted () {
312 + const { code, data } = await getHomeAPI();
313 + if (code) {
314 + console.warn(data);
315 + this.product_list = data.product;
316 + }
311 this.$nextTick(() => { 317 this.$nextTick(() => {
312 this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => { 318 this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
313 // breakpoint时 显示的条数 319 // breakpoint时 显示的条数
...@@ -373,9 +379,9 @@ export default { ...@@ -373,9 +379,9 @@ export default {
373 }, 379 },
374 goToProduct (v) { 380 goToProduct (v) {
375 this.$router.push({ 381 this.$router.push({
376 - path: '/product/category', 382 + path: '/product/index',
377 query: { 383 query: {
378 - id: v.id 384 + id: v.first_child_id
379 } 385 }
380 }); 386 });
381 }, 387 },
......
1 -<!--
2 - * @Date: 2024-09-27 16:53:09
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-20 21:01:53
5 - * @FilePath: /hager/src/views/product/category.vue
6 - * @Description: 文件描述
7 --->
8 -<template>
9 - <div class="product-category">
10 - <hager-box>
11 - <div style="margin-top: 1.5rem;">
12 - <el-breadcrumb separator="/">
13 - <el-breadcrumb-item>所有产品</el-breadcrumb-item>
14 - <el-breadcrumb-item>配电产品</el-breadcrumb-item>
15 - </el-breadcrumb>
16 - </div>
17 - <hager-h1 title="配电产品" sub="Distribution Products" style="margin: 2rem 0;"></hager-h1>
18 - <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
19 - <el-col :span="6">
20 - <div class="product-nav-wrapper">
21 - <div class="product-nav-title">按产品类别查找</div>
22 - <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
23 - <el-collapse v-model="activeNames" @change="handleChange">
24 - <el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
25 - <div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
26 - </el-collapse-item>
27 - </el-collapse>
28 - </div>
29 - </el-col>
30 - <el-col :span="18">
31 - <div class="product-list">
32 - <div class="product-item" v-for="(item, index) in 6" :key="index">
33 - <div class="product-item-img">
34 - <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
35 - </div>
36 - <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
37 - </div>
38 - </div>
39 - <div style="height: 5rem;"></div>
40 - </el-col>
41 - </el-row>
42 - <div v-else class="product-list">
43 - <div class="product-item xs" v-for="(item, index) in 6" :key="index">
44 - <div class="product-item-img">
45 - <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
46 - </div>
47 - <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
48 - </div>
49 - </div>
50 - <div style="height: 5rem;"></div>
51 - </hager-box>
52 - </div>
53 -</template>
54 -
55 -<script>
56 -import mixin from 'common/mixin';
57 -import hagerBox from '@/components/common/hagerBox';
58 -import hagerH1 from '@/components/common/hagerH1.vue';
59 -
60 -export default {
61 - components: { hagerBox, hagerH1 },
62 - mixins: [mixin.init],
63 - data () {
64 - return {
65 - search_input: '',
66 - activeNames: ['1'],
67 - c_list: [{
68 - title: '低压主配电',
69 - name: '1',
70 - list: [{
71 - id: '',
72 - name: 'acb hw01 空气断路器'
73 - }]
74 - }, {
75 - title: '分配电',
76 - name: '2',
77 - list: [{
78 - id: '',
79 - name: 'acb hw01 空气断路器'
80 - }]
81 - }]
82 - }
83 - },
84 - mounted () {
85 -
86 - },
87 - methods: {
88 - handleChange(val) {
89 - console.log(val);
90 - },
91 - goToP (item) { // 跳转产品详情
92 - this.$router.push({
93 - path: '/product/detail',
94 - query: {
95 - // id: id
96 - }
97 - });
98 - }
99 - }
100 -}
101 -</script>
102 -
103 -<style lang="less">
104 - .product-category {
105 - .product-nav-wrapper {
106 - border: 1px solid #eee;
107 - border-radius: 5px;
108 - padding: 1.5rem;
109 - margin-right: 1rem;
110 - .product-nav-title {
111 - color: @secondary-color;
112 - font-weight: bold;
113 - font-size: 1.15rem;
114 - margin-bottom: 0.5rem;
115 - }
116 - }
117 -
118 -
119 - .product-list {
120 - display: flex;
121 - flex-wrap: wrap;
122 - gap: 1rem;
123 - }
124 - .product-item {
125 - width: calc(33.33% - 1rem);
126 - &.xs {
127 - width: calc(50% - 1rem);
128 - }
129 - }
130 - .product-item-img {
131 - background-color: #f5f5f5;
132 - display: flex;
133 - align-items: center;
134 - justify-content: center;
135 - height: 18rem;
136 - padding: 3rem;
137 - box-sizing: border-box;
138 - border-radius: 8px;
139 - }
140 - .product-item-title {
141 - text-align: center;
142 - margin-top: 0.75rem;
143 - color: @secondary-color;
144 - &:hover {
145 - cursor: pointer;
146 - text-decoration: underline;
147 - }
148 - }
149 - }
150 -
151 - .el-collapse {
152 - border-top: 0;
153 - }
154 - .el-collapse-item {
155 - .el-collapse-item__header {
156 - font-size: 0.9rem;
157 - }
158 - .p-item {
159 - &:hover {
160 - cursor: pointer;
161 - text-decoration: underline;
162 - }
163 - }
164 - }
165 -</style>
1 <!-- 1 <!--
2 * @Date: 2024-09-27 16:53:09 2 * @Date: 2024-09-27 16:53:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-21 16:13:58 4 + * @LastEditTime: 2024-10-23 15:56:41
5 * @FilePath: /hager/src/views/product/index.vue 5 * @FilePath: /hager/src/views/product/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -11,41 +11,41 @@ ...@@ -11,41 +11,41 @@
11 <div style="margin-top: 1.5rem;"> 11 <div style="margin-top: 1.5rem;">
12 <el-breadcrumb separator="/"> 12 <el-breadcrumb separator="/">
13 <el-breadcrumb-item>所有产品</el-breadcrumb-item> 13 <el-breadcrumb-item>所有产品</el-breadcrumb-item>
14 - <el-breadcrumb-item>配电产品</el-breadcrumb-item> 14 + <el-breadcrumb-item>{{ parent_name }}</el-breadcrumb-item>
15 - <el-breadcrumb-item>低压主配电</el-breadcrumb-item> 15 + <el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
16 </el-breadcrumb> 16 </el-breadcrumb>
17 </div> 17 </div>
18 - <hager-h1 title="低压主配电" sub="Automatic conversion switch" style="margin: 2rem 0;"></hager-h1> 18 + <hager-h1 :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
19 <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;"> 19 <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
20 <el-col :span="6"> 20 <el-col :span="6">
21 <div class="product-nav-wrapper"> 21 <div class="product-nav-wrapper">
22 <div class="product-nav-title">按产品类别查找</div> 22 <div class="product-nav-title">按产品类别查找</div>
23 <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input> 23 <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
24 <el-collapse v-model="activeNames" @change="handleChange"> 24 <el-collapse v-model="activeNames" @change="handleChange">
25 - <el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name"> 25 + <el-collapse-item v-for="(item, index) in cate_list" :key="index" :title="item.category_name" :name="item.category_name">
26 - <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div> 26 + <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.product_name }}</div>
27 </el-collapse-item> 27 </el-collapse-item>
28 </el-collapse> 28 </el-collapse>
29 </div> 29 </div>
30 </el-col> 30 </el-col>
31 <el-col :span="18"> 31 <el-col :span="18">
32 <div class="product-list"> 32 <div class="product-list">
33 - <div class="product-item" v-for="(item, index) in 6" :key="index"> 33 + <div class="product-item" v-for="(item, index) in product_list" :key="index">
34 <div class="product-item-img"> 34 <div class="product-item-img">
35 - <el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image> 35 + <el-image style="width: 100%; height: 100%" :src="item.cover" fit="fit"></el-image>
36 </div> 36 </div>
37 - <p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p> 37 + <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div style="height: 5rem;"></div> 40 <div style="height: 5rem;"></div>
41 </el-col> 41 </el-col>
42 </el-row> 42 </el-row>
43 <div v-else class="product-list"> 43 <div v-else class="product-list">
44 - <div class="product-item xs" v-for="(item, index) in 6" :key="index"> 44 + <div class="product-item xs" v-for="(item, index) in product_list" :key="index">
45 <div @click="goToDetail(item)" class="product-item-img xs"> 45 <div @click="goToDetail(item)" class="product-item-img xs">
46 - <el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image> 46 + <el-image style="width: 100%; height: auto;" :src="item.cover" fit="fit"></el-image>
47 </div> 47 </div>
48 - <p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p> 48 + <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
49 </div> 49 </div>
50 </div> 50 </div>
51 <div style="height: 5rem;"></div> 51 <div style="height: 5rem;"></div>
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
57 import mixin from 'common/mixin'; 57 import mixin from 'common/mixin';
58 import hagerBox from '@/components/common/hagerBox'; 58 import hagerBox from '@/components/common/hagerBox';
59 import hagerH1 from '@/components/common/hagerH1.vue'; 59 import hagerH1 from '@/components/common/hagerH1.vue';
60 +import { getProductCateAPI } from "@/api/hager.js";
60 61
61 export default { 62 export default {
62 components: { hagerBox, hagerH1 }, 63 components: { hagerBox, hagerH1 },
...@@ -64,8 +65,11 @@ export default { ...@@ -64,8 +65,11 @@ export default {
64 data () { 65 data () {
65 return { 66 return {
66 search_input: '', 67 search_input: '',
67 - activeNames: ['1'], 68 + activeNames: [],
68 - c_list: [{ 69 + parent_name: '',
70 + category_name: '',
71 + category_name_en: '',
72 + cate_list: [{
69 title: '低压主配电', 73 title: '低压主配电',
70 name: '1', 74 name: '1',
71 list: [{ 75 list: [{
...@@ -79,15 +83,23 @@ export default { ...@@ -79,15 +83,23 @@ export default {
79 id: '', 83 id: '',
80 name: 'acb hw01 空气断路器' 84 name: 'acb hw01 空气断路器'
81 }] 85 }]
82 - }] 86 + }],
87 + product_list: [],
83 } 88 }
84 }, 89 },
85 - mounted () { 90 + async mounted () {
86 - 91 + this.getMain();
92 + },
93 + watch: {
94 + // 监听路由参数变化时，更新输入框的值
95 + async '$route.query.id' (val, old) {
96 + if (old !== val) {
97 + this.getMain();
98 + }
99 + }
87 }, 100 },
88 methods: { 101 methods: {
89 handleChange(val) { 102 handleChange(val) {
90 - console.log(val);
91 }, 103 },
92 goToDetail (v) { // 跳转产品详情 104 goToDetail (v) { // 跳转产品详情
93 this.$router.push({ 105 this.$router.push({
...@@ -96,7 +108,29 @@ export default { ...@@ -96,7 +108,29 @@ export default {
96 id: v.id 108 id: v.id
97 } 109 }
98 }); 110 });
99 - } 111 + },
112 + async getMain () {
113 + const { code, data } = await getProductCateAPI( {cid: this.$route.query.id});
114 + if (code) {
115 + let info = data[0];
116 + this.parent_name = info.parent_name;
117 + this.category_name = info.category_name;
118 + this.category_name_en = info.category_name_en;
119 + this.product_list = info.list;
120 + //
121 + this.getCurrentCate(info.category_parent);
122 + }
123 + },
124 + async getCurrentCate (category_parent) {
125 + const { code, data } = await getProductCateAPI();
126 + if (code) {
127 + data.forEach((item) => {
128 + if (item.id === category_parent) {
129 + this.cate_list = item.children;
130 + }
131 + })
132 + }
133 + },
100 } 134 }
101 } 135 }
102 </script> 136 </script>
......