hz/ebiz-sunful-eco-web
1
0
Fork 0
mirror of http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web.git synced 2025-12-08 10:26:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(growth-guard):优化数据转换逻辑- 简化 groups 数据转换逻辑，使用 map代替 filter + map- 移除冗余的 console.log语句-修复 customers 数据更新的赋值方式

Browse Source
This commit is contained in:
陈昱达
2025-08-22 15:58:49 +08:00
parent f205565966
commit b5da499252
1 changed files with 324 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

650
src/views/growth-guard/growth-guard.vue
View File

@@ -1,326 +1,324 @@
<template> <template>
<div id="healthily-container" class="healthily-container"> <div id="healthily-container" class="healthily-container">
<common-banner :src="banner.src" :title="banner.title" :eTitle="banner.eTitle" :content="banner.content" class="common-banner"> <common-banner :src="banner.src" :title="banner.title" :eTitle="banner.eTitle" :content="banner.content" class="common-banner">
<div class="flex"> <div class="flex">
<button @click="$router.push('/page/introduction')">了解我们</button> <button @click="$router.push('/page/introduction')">了解我们</button>
<button @click="$router.push('/page/contact')">联系我们</button> <button @click="$router.push('/page/contact')">联系我们</button>
</div> </div>
</common-banner> </common-banner>
<main class="healthily-container"> <main class="healthily-container">
<!-- 服务体系 class名称--> <!-- 服务体系 class名称-->
<div class="service"> <div class="service">
<h2>全球优质教育资源</h2> <h2>全球优质教育资源</h2>
<p>优质教育触手可及</p> <p>优质教育触手可及</p>
<div class="service-container flex mt50"> <div class="service-container flex mt50">
<div class="left"> <div class="left">
<h2>幸福人寿整合全球优质教育资源，为您提供子女<span>教育规划</span>、<span>留学咨询</span>、<span>课外辅导</span>等全方位支持与服务</h2> <h2>幸福人寿整合全球优质教育资源，为您提供子女<span>教育规划</span>、<span>留学咨询</span>、<span>课外辅导</span>等全方位支持与服务</h2>
<p class="pt10"> <p class="pt10">
同时，我们为您提供专业的教育金规划服务，确保孩子从启蒙到深造的每一步成长都获得充足支持，让优质教育触手可及，助力孩子拥抱无限可能的未来。 同时，我们为您提供专业的教育金规划服务，确保孩子从启蒙到深造的每一步成长都获得充足支持，让优质教育触手可及，助力孩子拥抱无限可能的未来。
</p> </p>
<ul class="bottom"> <ul class="bottom">
<li> <li>
<img src="../../assets/images/pages/healthily/lt-1.png" alt="" /> <img src="../../assets/images/pages/healthily/lt-1.png" alt="" />
海外留学 海外留学
</li> </li>
<li><img src="../../assets/images/pages/healthily/lt-2.png" alt="" />假期游学</li> <li><img src="../../assets/images/pages/healthily/lt-2.png" alt="" />假期游学</li>
<li><img src="../../assets/images/pages/healthily/lt-3.png" alt="" />兴趣培养</li> <li><img src="../../assets/images/pages/healthily/lt-3.png" alt="" />兴趣培养</li>
</ul> </ul>
</div> </div>
<img src="../../assets/images/pages/growth-guard/right-img.webp" alt="" class="right-img" width="468px" /> <img src="../../assets/images/pages/growth-guard/right-img.webp" alt="" class="right-img" width="468px" />
</div> </div>
</div> </div>
<!-- 防筛... choose 列表 可能会当成组件--> <!-- 防筛... choose 列表 可能会当成组件-->
<choose-list :list="list"></choose-list> <choose-list :list="list"></choose-list>
<!-- footer--> <!-- footer-->
<footer-list :footer-list="customers" style="margin-bottom: 78px;"></footer-list> <footer-list :footer-list="customers" style="margin-bottom: 78px;"></footer-list>
</main> </main>
</div> </div>
</template> </template>
<script> <script>
import CommonBanner from '@/components/common-banner.vue' import CommonBanner from '@/components/common-banner.vue'
import list from './healthily_list' import list from './healthily_list'
import ChooseList from './comp/chooseList.vue' import ChooseList from './comp/chooseList.vue'
import FooterList from '@/views/healthily/comp/footerList.vue' import FooterList from '@/views/healthily/comp/footerList.vue'
import customers from './healthily-footer' import customers from './healthily-footer'
import { getSysDictTree } from '@/api/generatedApi' import { getSysDictTree } from '@/api/generatedApi'
import { findDictByCode, getDictIdByCode } from '@/assets/js/utils/dict-utils' import { findDictByCode, getDictIdByCode } from '@/assets/js/utils/dict-utils'
export default { export default {
name: 'growthGuard', name: 'growthGuard',
data() { data() {
return { return {
list, list,
banner: { banner: {
title: '成长护航', title: '成长护航',
// eTitle: 'COMPANY PROFILE', // eTitle: 'COMPANY PROFILE',
content: '智慧规划，全程守护，让未来更有底气', content: '智慧规划，全程守护，让未来更有底气',
src: require('@/assets/images/pages/growth-guard/banner.webp') src: require('@/assets/images/pages/growth-guard/banner.webp')
}, },
chooseIndex: 0, chooseIndex: 0,
customers, customers,
groups: [] groups: []
} }
}, },
props: {}, props: {},
watch: { watch: {
groups: { groups: {
handler(newValue) { handler(newValue) {
// 将groups数据转换为多维数组格式 // 将groups数据转换为多维数组格式
const convertedGroups = newValue.map(group => { const convertedGroups = newValue.map(group => {
// 从每个group的data中提取name属性组成数组 // 从每个group的data中提取name属性组成数组
// 排除空的 return group.data.map(item => item.name || '');
return group.data.filter(item => item.name).map(item => item.name) });
// return group.data.map(item => item.name || '')
}) // 更新customers数据，用于footer显示
console.log(convertedGroups) this.customers = convertedGroups;
// 更新customers数据，用于footer显示 },
this.customers = convertedGroups deep: true
}, }
deep: true },
} components: { FooterList, CommonBanner, ChooseList },
}, filters: {},
components: { FooterList, CommonBanner, ChooseList }, methods: {
filters: {}, // 获取成长护航数据
methods: { fetchGrowthData() {
// 获取成长护航数据 getSysDictTree({ dictCode: 'CZHH', getDetail: 1 })
fetchGrowthData() { .then(response => {
getSysDictTree({ dictCode: 'CZHH', getDetail: 1 }) if (response.success && response.content && response.content.content) {
.then(response => { // 保存原始字典数据
if (response.success && response.content && response.content.content) { this.originalDictData = response.content.content
// 保存原始字典数据 // 处理返回的字典数据
this.originalDictData = response.content.content // 解析数据并填充到页面
// 处理返回的字典数据 this.parseDictData(response.content.content)
// 解析数据并填充到页面 }
this.parseDictData(response.content.content) })
} .catch(() => {
}) this.$message.error('获取数据失败')
.catch(() => { })
this.$message.error('获取数据失败') },
})
}, // 解析字典数据并填充到页面
parseDictData(dictData) {
// 解析字典数据并填充到页面 // 查找成长护航数据
parseDictData(dictData) { const growthSection = findDictByCode(dictData, 'CZHH')
// 查找成长护航数据 if (growthSection && growthSection.children && growthSection.children.length > 0) {
const growthSection = findDictByCode(dictData, 'CZHH') // 查找合作机构配置节点
if (growthSection && growthSection.children && growthSection.children.length > 0) { const partnerSection = findDictByCode([growthSection], 'CZHH-HZJG')
// 查找合作机构配置节点 if (partnerSection && partnerSection.children) {
const partnerSection = findDictByCode([growthSection], 'CZHH-HZJG') // 将子节点转换为分组数据
if (partnerSection && partnerSection.children) { this.groups = partnerSection.children.map(child => {
// 将子节点转换为分组数据 // 查找机构列表节点
this.groups = partnerSection.children.map(child => { let institutionData = [{ name: '' }]
// 查找机构列表节点 let institutionId = null
let institutionData = [{ name: '' }] if (child.children && child.children.length > 0) {
let institutionId = null // 遍历子节点查找机构列表节点
if (child.children && child.children.length > 0) { for (let i = 0; i < child.children.length; i++) {
// 遍历子节点查找机构列表节点 const subChild = child.children[i]
for (let i = 0; i < child.children.length; i++) { if (subChild.dictCode && subChild.dictCode.endsWith('-JGLB')) {
const subChild = child.children[i] const institutionSection = subChild
if (subChild.dictCode && subChild.dictCode.endsWith('-JGLB')) { if (institutionSection && institutionSection.sysDictDetailDTOs) {
const institutionSection = subChild institutionData = institutionSection.sysDictDetailDTOs.map(item => ({
if (institutionSection && institutionSection.sysDictDetailDTOs) { name: item.detailContent || '',
institutionData = institutionSection.sysDictDetailDTOs.map(item => ({ id: item.id || null,
name: item.detailContent || '', dictCode: item.dictCode || null
id: item.id || null, }))
dictCode: item.dictCode || null institutionId = institutionSection.id || null
})) break
institutionId = institutionSection.id || null }
break }
} }
} }
}
} return {
name: child.dictContent || '分组1',
return { data: institutionData,
name: child.dictContent || '分组1', id: child.id || null,
data: institutionData, dictCode: child.dictCode || null,
id: child.id || null, institutionId: institutionId
dictCode: child.dictCode || null, }
institutionId: institutionId })
} }
}) }
} }
} },
} created() {},
}, mounted() {
created() {}, this.fetchGrowthData()
mounted() { },
this.fetchGrowthData() computed: {}
}, }
computed: {} </script>
} <style scoped lang="scss">
</script> .healthily-container {
<style scoped lang="scss"> & ::v-deep .common-banner {
.healthily-container { color: #000 !important;
& ::v-deep .common-banner {
color: #000 !important; & .banner-text {
color: #e53d3d !important;
& .banner-text {
color: #e53d3d !important; h2:nth-child(1) {
color: RGBA(0, 0, 0, 0.2) !important;
h2:nth-child(1) { }
color: RGBA(0, 0, 0, 0.2) !important;
} h2:nth-child(2) {
font-family: PingFangSC, PingFang SC;
h2:nth-child(2) { font-weight: 500;
font-family: PingFangSC, PingFang SC; font-size: 36px;
font-weight: 500; color: #000000 !important;
font-size: 36px; line-height: 50px;
color: #000000 !important; text-align: left;
line-height: 50px; font-style: normal;
text-align: left; }
font-style: normal;
} p {
font-family: PingFangSC, PingFang SC;
p { font-weight: 500;
font-family: PingFangSC, PingFang SC; font-size: 20px;
font-weight: 500; color: #000000 !important;
font-size: 20px; line-height: 28px;
color: #000000 !important; text-align: left;
line-height: 28px; font-style: normal;
text-align: left; }
font-style: normal; }
}
} .flex {
margin-top: 40px;
.flex {
margin-top: 40px; button {
cursor: pointer;
button { width: 100px;
cursor: pointer; height: 42px;
width: 100px; background: #e53d3d;
height: 42px; border-radius: 8px;
background: #e53d3d; border: 1px solid #ffffff;
border-radius: 8px; font-family: PingFangSC, PingFang SC;
border: 1px solid #ffffff; font-weight: 500;
font-family: PingFangSC, PingFang SC; font-size: 16px;
font-weight: 500; color: #ffffff;
font-size: 16px; line-height: 22px;
color: #ffffff; font-style: normal;
line-height: 22px; }
font-style: normal;
} button + button {
margin-left: 10px;
button + button { }
margin-left: 10px;
} button:nth-child(2) {
width: 100px;
button:nth-child(2) { height: 42px;
width: 100px; background: #ffffff;
height: 42px; border-radius: 8px;
background: #ffffff; border: 1px solid #e53d3d;
border-radius: 8px; font-family: PingFangSC, PingFang SC;
border: 1px solid #e53d3d; font-weight: 500;
font-family: PingFangSC, PingFang SC; font-size: 16px;
font-weight: 500; color: #e53d3d;
font-size: 16px; line-height: 22px;
color: #e53d3d; font-style: normal;
line-height: 22px; }
font-style: normal; }
} }
}
} .healthily-container {
text-align: center;
.healthily-container { padding-bottom: 20px;
text-align: center;
padding-bottom: 20px; h2 {
font-family: PingFangSC, PingFang SC;
h2 { font-weight: 500;
font-family: PingFangSC, PingFang SC; font-size: 30px;
font-weight: 500; color: #000000;
font-size: 30px; line-height: 42px;
color: #000000; font-style: normal;
line-height: 42px; padding-top: 55px;
font-style: normal; padding-bottom: 12px;
padding-top: 55px; }
padding-bottom: 12px;
} p {
font-family: PingFangSC, PingFang SC;
p { font-weight: 400;
font-family: PingFangSC, PingFang SC; font-size: 20px;
font-weight: 400; color: #707070;
font-size: 20px; line-height: 28px;
color: #707070; font-style: normal;
line-height: 28px; }
font-style: normal;
} .service-container {
align-items: center;
.service-container { justify-content: center;
align-items: center; gap: 80px;
justify-content: center;
gap: 80px; & .left {
width: 466px;
& .left { background: #ffffff;
width: 466px; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
background: #ffffff; border-radius: 15px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); padding: 30px 40px;
border-radius: 15px;
padding: 30px 40px; h2 {
font-family: PingFangSC, PingFang SC;
h2 { font-weight: bold;
font-family: PingFangSC, PingFang SC; font-size: 18px;
font-weight: bold; color: #000000;
font-size: 18px; line-height: 26px;
color: #000000; text-align: left;
line-height: 26px; font-style: normal;
text-align: left; padding: 0;
font-style: normal;
padding: 0; span {
color: rgba(200, 29, 45, 1);
span { }
color: rgba(200, 29, 45, 1); }
}
} i {
color: rgba(200, 29, 45, 1);
i { font-style: unset;
color: rgba(200, 29, 45, 1); }
font-style: unset;
} ul {
display: grid;
ul { grid-template-columns: repeat(3, 1fr);
display: grid;
grid-template-columns: repeat(3, 1fr); padding-top: 30px;
padding-top: 30px; li {
list-style: none;
li { font-family: PingFangSC, PingFang SC;
list-style: none; font-weight: 400;
font-family: PingFangSC, PingFang SC; font-size: 14px;
font-weight: 400; color: rgba(0, 0, 0, 0.4);
font-size: 14px; line-height: 20px;
color: rgba(0, 0, 0, 0.4); text-align: left;
line-height: 20px; font-style: normal;
text-align: left; padding-bottom: 25px;
font-style: normal; display: flex;
padding-bottom: 25px; width: 100%;
display: flex; gap: 16px;
width: 100%; align-items: center;
gap: 16px;
align-items: center; img {
width: 40px;
img { object-fit: contain;
width: 40px; display: inline-block;
object-fit: contain; }
display: inline-block; }
} }
}
} p {
font-family: PingFangSC, PingFang SC;
p { font-weight: 400;
font-family: PingFangSC, PingFang SC; font-size: 14px;
font-weight: 400; color: rgba(0, 0, 0, 0.4);
font-size: 14px; line-height: 22px;
color: rgba(0, 0, 0, 0.4); text-align: left;
line-height: 22px; font-style: normal;
text-align: left; margin-top: 10px;
font-style: normal; }
margin-top: 10px; }
} }
}
} // footer
}
// footer }
} </style>
}
</style>