Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d81b68c1 1 parent c3b9ccaa

底部组件数据联调

Inline Side-by-side
Showing 2 changed files with 76 additions and 65 deletions
......@@ -16,6 +16,7 @@ const Api = {
PRODUCT_INFO: '/srv/?a=detail&type=product',
PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
SOLUTION: '/srv/?a=cate&type=solution',
FOOTER: '/srv/?a=footer',
};
export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
......@@ -33,3 +34,5 @@ export const getProductInfoAPI = (params) => fn(fetch.get(Api.PRODUCT_INFO, para
export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH, params));
export const getSolutionListAPI = (params) => fn(fetch.get(Api.SOLUTION, params));
export const getFooterAPI = (params) => fn(fetch.get(Api.FOOTER, params));
......
<!--
* @Date: 2024-09-26 13:42:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-23 09:42:45
* @LastEditTime: 2024-10-24 11:50:08
* @FilePath: /hager/src/components/common/hagerFooter.vue
* @Description: 文件描述
-->
......@@ -15,19 +15,7 @@
<div class="link-box">
<div class="link-title">产品目录</div>
<div class="link-info">
<p>空气断路器</p>
<p>塑壳断路器</p>
<p>自动转换开关</p>
<p>接触器及热过载继电器</p>
<p>隔离开关</p>
<p>配电箱</p>
<p>终端配电</p>
<p>Unimes开关柜</p>
<p>Berker</p>
<p>志系列</p>
<p>KNX控制系统</p>
<p>RCU客房控制系统</p>
<p>Agardio数字化能源解决方案</p>
<p v-for="(item, index) in footer_data.product" :key="index" @click="goToProduct(item)">{{ item.category_name }}</p>
</div>
</div>
</el-col>
......@@ -35,18 +23,7 @@
<div class="link-box">
<div class="link-title">解决方案</div>
<div class="link-info">
<p>住宅解决方案</p>
<p>商建解决方案</p>
<p>公建解决方案</p>
<p>供电局解决方案</p>
<p>发电解决方案</p>
<p>石油石化解决方案</p>
<p>冶金解决方案</p>
<p>电子解决方案</p>
<p>通信解决方案</p>
<p>算力解决方案</p>
<p>交通解决方案</p>
<p>其它解决方案</p>
<p v-for="(item, index) in footer_data.solution" :key="index" @click="goToSolution(item)">{{ item.category_name }}</p>
</div>
</div>
</el-col>
......@@ -54,12 +31,7 @@
<div class="link-box">
<div class="link-title">企业</div>
<div class="link-info">
<p>海格全球</p>
<p>海格电气在中国</p>
<p>创新设计与用户体验</p>
<p>生产研发与服务</p>
<p>可持续发展的企业文化</p>
<p>荣誉展示</p>
<p v-for="(item, index) in intro_list" :key="index" @click="goToCorp(item)">{{ item.c_title }}</p>
</div>
</div>
</el-col>
......@@ -96,19 +68,7 @@
</div>
<el-collapse-transition>
<div v-show="show_p" class="link-info">
<p>空气断路器</p>
<p>塑壳断路器</p>
<p>自动转换开关</p>
<p>接触器及热过载继电器</p>
<p>隔离开关</p>
<p>配电箱</p>
<p>终端配电</p>
<p>Unimes开关柜</p>
<p>Berker</p>
<p>志系列</p>
<p>KNX控制系统</p>
<p>RCU客房控制系统</p>
<p>Agardio数字化能源解决方案</p>
<p v-for="(item, index) in footer_data.product" :key="index" @click="goToProduct(item)">{{ item.category_name }}</p>
</div>
</el-collapse-transition>
</div>
......@@ -119,18 +79,7 @@
</div>
<el-collapse-transition>
<div v-show="show_s" class="link-info">
<p>住宅解决方案</p>
<p>商建解决方案</p>
<p>公建解决方案</p>
<p>供电局解决方案</p>
<p>发电解决方案</p>
<p>石油石化解决方案</p>
<p>冶金解决方案</p>
<p>电子解决方案</p>
<p>通信解决方案</p>
<p>算力解决方案</p>
<p>交通解决方案</p>
<p>其它解决方案</p>
<p v-for="(item, index) in footer_data.solution" :key="index" @click="goToSolution(item)">{{ item.category_name }}</p>
</div>
</el-collapse-transition>
</div>
......@@ -141,12 +90,7 @@
</div>
<el-collapse-transition>
<div v-show="show_c" class="link-info">
<p>海格全球</p>
<p>海格电气在中国</p>
<p>创新设计与用户体验</p>
<p>生产研发与服务</p>
<p>可持续发展的企业文化</p>
<p>荣誉展示</p>
<p v-for="(item, index) in intro_list" :key="index" @click="goToCorp(item)">{{ item.c_title }}</p>
</div>
</el-collapse-transition>
</div>
......@@ -176,19 +120,62 @@
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import { getFooterAPI } from '@/api/hager';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
footer_data: '',
show_p: false,
show_s: false,
show_c: false,
intro_list: [{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g01@2x.png',
c_title: '海格全球',
e_title: 'Hager Group',
content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
link: '/about/global',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g02@2x.png',
c_title: '海格电气在中国',
e_title: 'Hager in China',
content: '海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。',
link: '/about/china',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g03@2x.png',
c_title: '创新设计',
e_title: 'Innovative Design',
content: '海格电气一直致力于创新，我们与客户共同着手面向未来的主题。海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。',
link: '/about/design',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g04@2x.png',
c_title: '生产研发',
e_title: 'Production and R&D',
content: '为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。',
link: '/about/product',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g05@2x.png',
c_title: '可持续发展',
e_title: 'Sustainable Development',
content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
link: '/about/development',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g06@2x.png',
c_title: '荣誉展示',
e_title: 'Honors',
content: '海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。',
link: '/about/honors',
}]
}
},
mounted () {
async mounted () {
const { code, data } = await getFooterAPI();
if (code) {
this.footer_data = data;
console.warn(data);
}
},
methods: {
toggleCollapse (type) {
......@@ -201,6 +188,27 @@ export default {
if (type === 'c') { // 企业
this.show_c = !this.show_c;
}
},
goToProduct (item) {
this.$router.push({
path: '/product/index',
query: {
id: item.id
}
});
},
goToSolution (item) {
this.$router.push({
path: '/solution/detail',
query: {
id: item.id
}
});
},
goToCorp (item) {
this.$router.push({
path: item.link,
})
}
}
}
......