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