From b5da4992527c776da5d3a227dc87b9497e5d620f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Fri, 22 Aug 2025 15:58:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(growth-guard):=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=BD=AC=E6=8D=A2=E9=80=BB=E8=BE=91-=20?=
 =?UTF-8?q?=E7=AE=80=E5=8C=96=20groups=20=E6=95=B0=E6=8D=AE=E8=BD=AC?=
 =?UTF-8?q?=E6=8D=A2=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BD=BF=E7=94=A8=20map?=
 =?UTF-8?q?=E4=BB=A3=E6=9B=BF=20filter=20+=20map-=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E5=86=97=E4=BD=99=E7=9A=84=20console.log=E8=AF=AD=E5=8F=A5-?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20customers=20=E6=95=B0=E6=8D=AE=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E8=B5=8B=E5=80=BC=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/growth-guard/growth-guard.vue | 650 ++++++++++++------------
 1 file changed, 324 insertions(+), 326 deletions(-)

diff --git a/src/views/growth-guard/growth-guard.vue b/src/views/growth-guard/growth-guard.vue
index 165ac27..44ef6c8 100644
--- a/src/views/growth-guard/growth-guard.vue
+++ b/src/views/growth-guard/growth-guard.vue
@@ -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>
\ No newline at end of file