refactor(service): 重构服务页面逻辑和布局

- 移除了不必要的组件和服务菜单
- 优化了服务列表的展示方式
- 添加了生态系统状态管理
- 改进了页面滚动和导航逻辑
- 更新了服务信息页面的样式和功能

src/assets/js/utils/request.js

@@ -31,7 +31,6 @@ service.interceptors.response.use(
     if (Number(res.code) === 0 || res.code === '999') {
       return res
     }
-    console.log('response', res)
     if (res.content && res.content.code != 0) {
       // if(!)
       //noFail 表示不需要统一处理错误提示，需要给调用接口返回

src/router/app/index.js

@@ -43,7 +43,7 @@ export default [
         component: () => import('@/views/service/service-t.vue')
       },
       {
-        path: '/service-info/:ecosystem/:id/:type',
+        path: '/service-info/:ecosystem/:position',
         name: 'service-info',
         component: () => import('@/views/service/views/service-info.vue'),
         meta: {

src/views/home/home.vue

@@ -28,10 +28,11 @@ export default {
     },
     methods: {
         goEcosystem(ecosystem, swe) {
+            
             this.$router.push({
                 name: 'service',
                 params: {
-                    ecosystem: ecosystem
+                    ecosystem: getEcosystem(ecosystem)
                 },
                 query: {
                     swe: swe

src/views/service/components/service-item.vue

@@ -1,57 +0,0 @@
-<script>
-export default {
-    name: "service-item",
-    data() {
-        return {
-            testIcon: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/健康管理/u102.png"
-        }
-    },
-    props: {
-        list: {
-            type: Array,
-            default: () => []
-        }
-    }
-}
-</script>
-
-<template>
-    <div class="service-item-container">
-        <div v-for="item in list" :key="item.subTitle" class="service-item">
-            <!-- 子功能区域 -->
-            <section class="service-item-subItem" v-for="subItem in item.subItem" :key="subItem.id">
-                <h3>{{ item.subTitle }}</h3>
-
-                <div>
-                    <img :src="testIcon" :alt="subItem + '图标'">
-                    <h4>{{ subItem.title }}</h4>
-                </div>
-            </section>
-
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.service-item-container {
-    padding: 15px;
-}
-
-.service-item {
-    margin-top: 15px;
-    background-color: red;
-}
-
-// 图片
-img {
-    width: 30px;
-    // height: 50px;
-}
-
-// 子功能区域
-// .service-item-subItem {
-//     display: flex;
-//     justify-content: space-between;
-//     align-items: center;
-//     margin-top: 10px;
-// }</style>

src/views/service/components/service-menu.vue

@@ -1,47 +0,0 @@
-<script>
-export default {
-    name: "service-menu",
-    data() {
-        return {
-            activeItem: this.menu[0]
-        }
-    },
-    props: {
-        menu: {
-            type: Array,
-            default: () => []
-        }
-    },
-    emit: ['menu-change'],
-    methods: {
-        handleMenuClick(item) {
-            this.activeItem = item
-            this.$emit('menu-change', item)
-        },
-    }
-}
-</script>
-
-<template>
-    <div class="service-menu">
-        <div @click="handleMenuClick(item)" :class="{ 'active': item === activeItem }" class="service-title"
-            v-for="item in menu" :key="item">
-            {{ item }}
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.service-menu {
-    margin-top: 15px;
-}
-
-.active {
-    background-color: #f7f9ff;
-}
-
-.service-title {
-    padding: 13px 30px;
-    text-align: center;
-}
-</style>

src/views/service/js/status/index.js

@@ -0,0 +1,4 @@
+export const ecosystem = {
+    active: "",
+    services: []
+}

src/views/service/service-t.vue

@@ -59,7 +59,7 @@ import { Popup, Search } from 'vant'
 import BScroll from 'better-scroll'
 import { shopList } from '@/views/service/js/mock/shop-list'
 import { fetchServiceList } from "@/api/service-list"
-import { getEcosystemByValue } from '@/assets/js/utils/ecosystem'
+import { ecosystem } from "./js/status"
 
 export default {
     components: {
@@ -112,7 +112,7 @@ export default {
         },
     },
     created() {
-        
+
         // 获取 list 内容
         fetchServiceList({ menuCode: (this.$route.params.ecosystem) }).then(res => {
             this.shopList = res.content.content[0].children
@@ -199,11 +199,15 @@ export default {
         getInterUrl() {
         },
         goList(item, subItem) {
+            // 注册进
+            ecosystem.active = subItem
+            ecosystem.services = item
+            
             this.$router.push({
                 name: 'service-info',
                 params: {
-                    id: item.id,
+                    ecosystem: this.$route.params.ecosystem,
-                    type: subItem.type
+                    position: item.children.findIndex(item => item.id == subItem.id) + 1
                 }
             })
         },

src/views/service/service.vue

@@ -1,53 +0,0 @@
-<script>
-import { genMenu, getMenuList } from './js/mock'
-import ServiceMenu from './components/service-menu.vue'
-import ServiceItem from './components/service-item.vue'
-
-export default {
-    name: "service",
-    components: {
-        ServiceMenu,
-        ServiceItem
-    },
-    data() {
-        const menuList = getMenuList()
-        const subMenu = genMenu()
-        return {
-            menuList: menuList,
-            subMenu: subMenu
-        }
-    },
-    methods: {
-        handleMenuChange(item) {
-            console.log(item)
-        }
-    }
-}
-</script>
-
-<template>
-    <div class="service">
-        <div>
-            <service-menu :menu="menuList" @menu-change="handleMenuChange" />
-        </div>
-        <div>
-            <service-item :list="subMenu" />
-        </div>
-    </div>
-</template>
-
-<style lang="css" scoped>
-.service {
-    background-color: #f7f9ff;
-    display: grid;
-    grid-template-columns: 30vw 1fr;
-    gap: 10px;
-    height: calc(100vh - 30px);
-    width: 100vw;
-    padding-top: 10px
-}
-
-.service div:nth-child(odd) {
-    background-color: #fff;
-}
-</style>

src/views/service/views/service-info.vue

@@ -1,52 +1,59 @@
 <script>
+import { ecosystem } from "../js/status"
+import { Button, Icon } from 'vant'
+
 export default {
     name: "service-info",
+    components: {
+        VanButton: Button,
+        VanIcon: Icon
+    },
     data() {
         return {
-            colorBlocks: [
-                { id: '1', color: '#FF6B6B', text: '块一' },
-                { id: '2', color: '#4ECDC4', text: '块二' },
-                { id: '3', color: '#FFD166', text: '块三' },
-                { id: '4', color: '#FF6B6B', text: '块四' }
-            ],
             layoutType: 'default', // 默认布局类型
-            hasScrolled: false // 记录是否已经滚动到指定位置
+            hasScrolled: false, // 记录是否已经滚动到指定位置
+            // 默认数据，当ecosystem.services不可用时使用
+            defaultBlocks: [
+                { id: '1', position: '1', color: '#FF6B6B', text: '块一' },
+                { id: '2', position: '2', color: '#4ECDC4', text: '块二' },
+                { id: '3', position: '3', color: '#FFD166', text: '块三' },
+                { id: '4', position: '4', color: '#FF6B6B', text: '块四' }
+            ]
         }
     },
     computed: {
+        blocks() {
+            // 添加防御性编程，避免ecosystem.services或其子属性未定义时报错
+            try {
+                if (ecosystem && ecosystem.services && ecosystem.services.children) {
+                    return ecosystem.services.children;
+                }
+            } catch (e) {
+                console.error('获取ecosystem.services.children失败:', e);
+            }
+            return this.defaultBlocks;
+        },
         // 根据路由参数计算当前应该使用的布局类型
         currentLayout() {
-            // 从路由参数中获取类型
+            const layoutType = this.$route.params.type || 'default';
-            const type = this.$route.params.type;
+            return `${layoutType}-layout`;
-            const id = this.$route.params.id;
-
-            // 根据不同的路由参数返回不同的布局类型
-            if (type === 'grid') {
-                return 'grid';
-            } else if (type === 'carousel') {
-                return 'carousel';
-            } else if (type === 'stacked') {
-                return 'stacked';
-            } else {
-                return 'default';
-            }
         },
         // 根据路由参数获取当前选中的块
         currentBlockId() {
-            return this.$route.params.id;
+            return this.$route.params.position;
         }
     },
     watch: {
         // 监听路由参数变化
         '$route.params': {
             handler(newParams) {
-                if (newParams.id) {
+                if (newParams.position) {
                     this.scrollToBlock();
                 }
             },
             immediate: true
         },
-        // 监听当前块ID变化
+        // 监听当前块position变化
         'currentBlockId': function (newId) {
             if (newId) {
                 this.scrollToBlock();
@@ -56,36 +63,43 @@ export default {
     methods: {
         // 滚动到指定块
         scrollToBlock() {
-            const id = this.currentBlockId;
+            const position = this.currentBlockId;
-            if (id) {
+
+            if (position) {
                 // 重置滚动状态，确保每次都能滚动
                 this.hasScrolled = false;
 
+                // 强制回到顶部
+                // window.scrollTo(0, 0);
+
                 // 使用setTimeout确保 DOM 已经完全渲染
                 this.$nextTick(() => {
-                    const element = document.getElementById(`block-${id}`);
+                    setTimeout(() => {
-                    if (element) {
+                        const element = document.getElementById(`block-${position}`);
-                        // 先将元素滚动到可视区域
+                        if (element) {
-                        window.scrollTo({
+                            // 滚动到元素位置
-                            top: element.offsetTop - 70,  // 偏移100px给顶部留出空间
+                            window.scrollTo({
-                            // behavior: 'smooth'
+                                top: element.offsetTop - 70,  // 偏移70px给顶部留出空间
-                        });
+                            });
-
+                            this.hasScrolled = true;
-                        // 添加高亮效果
+                        }
-                        element.classList.add('highlight');
+                    }, 800); // 添加短暂延迟确保DOM已更新
-                        setTimeout(() => {
-                            element.classList.remove('highlight');
-                        }, 2000);
-
-                        this.hasScrolled = true;
-                    }
                 });
             }
+        },
+        handleApplyClick() {
+            globalThis.location.href = ecosystem.active.url
+        },
+        handleNavigator(position) {
+            this.$router.replace({
+                name: 'service-info',
+                params: {
+                    ecosystem: this.$route.params.ecosystem,
+                    position: position
+                }
+            })
         }
     },
-    created() {
-        console.log('路由参数:', this.$route.params);
-    },
     mounted() {
         this.scrollToBlock();
     }
@@ -99,96 +113,102 @@ export default {
             <!-- 默认布局 -->
             <template>
                 <div class="default-layout">
-                    <div v-for="(block, index) in colorBlocks" :key="block.id" :id="`block-${block.id}`"
+                    <div v-for="(block, index) in blocks" :key="index" :id="`block-${index + 1}`" class="image-block">
-                        class="color-block" :class="{ 'active': block.id === currentBlockId }"
+                        <div class="image-container">
-                        :style="{ backgroundColor: block.color }">
+                            <img :src="block.pic" v-if="block.pic && block.pic.startsWith('http')"
-                        {{ block.text }}
+                                class="block-image" />
-                        <div class="block-id">编号: {{ block.id }}</div>
+                            <div class="placeholder-image" v-else>
+                                <van-icon name="photo-o" size="48" />
+                            </div>
+                        </div>
                     </div>
                 </div>
             </template>
         </div>
 
-        <div class="layout-info">
-            <p>当前布局: {{ currentLayout }}</p>
-            <p>当前选中块ID: {{ currentBlockId || '无' }}</p>
-            <p>类型: {{ $route.params.type }}</p>
-        </div>
-
         <div class="block-navigation">
             <h3>快速导航</h3>
             <div class="nav-buttons">
-                <router-link v-for="block in colorBlocks" :key="block.id"
+                <div v-for="(block, index) in blocks" :key="index" @click="handleNavigator(index + 1)"
-                    :to="{ name: 'service-info', params: { id: block.id, type: $route.params.type || 'default' } }"
+                    class="nav-button" :class="{ 'active': (index + 1) === parseInt(currentBlockId) }">
-                    class="nav-button" :class="{ 'active': block.id === currentBlockId }">
+                    跳到{{ index + 1 }}
-                    跳到{{ block.text }}
+                </div>
-                </router-link>
             </div>
         </div>
 
         <div class="actionButton">
             <div class="button-wrapper">
-                <div class="button" @click="">立即申请</div>
+                <div class="button" @click="handleApplyClick">立即申请</div>
             </div>
         </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
-/* 块容器样式 */
 .block-container {
     padding: 20px;
-    margin-bottom: 20px;
+    background-color: #f8f8f8;
 }
 
-/* 颜色块通用样式 */
+.link-block {
-.color-block {
+    margin-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-weight: bold;
     border-radius: 8px;
-    height: 250px;
+    overflow: hidden;
-    width: 100%;
+    transition: all 0.3s;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
-    font-size: 18px;
+}
-    position: relative;
+
-    transition: all 0.3s ease;
+.image-block {
-    scroll-margin-top: 20px;
+    margin-bottom: 30px;
+    padding: 10px;
+    border-radius: 8px;
+    transition: all 0.3s;
+    background-color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
     &.active {
-        transform: scale(1.02);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+        border: 2px solid #1890ff;
-        border: 3px solid white;
     }
+}
 
-    &.highlight {
+.image-container {
-        animation: pulse 1s ease-in-out;
+    width: 100%;
+    // height: 200px;
+    overflow: hidden;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    background-color: #f5f5f5;
+}
+
+.block-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s;
+
+    &:hover {
+        transform: scale(1.05);
     }
+}
 
-    .block-id {
+.placeholder-image {
-        position: absolute;
+    display: flex;
-        top: 10px;
+    align-items: center;
-        right: 10px;
+    justify-content: center;
-        font-size: 14px;
+    width: 100%;
-        opacity: 0.8;
+    height: 100%;
-    }
+    background-color: #eee;
+    color: #999;
+}
 
-    @keyframes pulse {
+.image-title {
-        0% {
+    font-size: 16px;
-            transform: scale(1);
+    font-weight: 500;
-        }
+    color: #333;
-
+    text-align: center;
-        50% {
+    padding: 10px 0;
-            transform: scale(1.05);
+    margin-top: 10px;
-        }
-
-        100% {
-            transform: scale(1);
-        }
-    }
 }
 
 /* 网格布局 */