auto

src/pages/cases/Index.vue

@@ -17,7 +17,8 @@
 
         <!-- 解决方案列表 -->
         <div class="solutions-grid">
-          <div v-for="solution in visibleSolutions" :key="solution.id" @click="goToCaseDetail(solution.id)" class="solution-card">
+          <div v-for="solution in visibleSolutions" :key="solution.id" @click="goToCaseDetail(solution)"
+            class="solution-card">
             <div class="card-image">
               <img :src="solution.image" :alt="solution.title" />
             </div>
@@ -54,7 +55,7 @@
         <!-- 案例列表 -->
         <div class="cases-list">
           <div v-for="(caseItem, caseIndex) in casesList" :key="caseItem.id" class="case-item"
-            :class="{ 'fifth-row': Math.floor(caseIndex / 2) === 4 }" @click="goToCaseDetail(caseItem.id)">
+            :class="{ 'fifth-row': Math.floor(caseIndex / 2) === 4 }" @click="goToCaseDetail(caseItem)">
             <div class="case-content">
               <h3 class="case-title">{{ caseItem.title }}</h3>
             </div>
@@ -160,10 +161,11 @@ export default {
     ])
 
     // 跳转到案例详情页
-    const goToCaseDetail = (caseId) => {
+    const goToCaseDetail = (caseItem) => {
+      console.log('跳转到案例详情页caseItem',caseItem)
       router.push({
         name: 'Casesdetails',
-        query: { id: caseId }
+        query: { id: caseItem.id,classifyId:caseItem.classifyId }
       })
     }
 
@@ -224,6 +226,7 @@ export default {
           // 更新solutions数据
           solutions.value = casesData.rows.map(item => ({
             id: item.id,
+            classifyId:item.classifyId,
             title: item.classifyName,
             description: item.classifyDesc || '为您提供专业的解决方案',
             image: item.projectImage ? imgHost + item.projectImage : '/src/assets/products-youshi-01.png'

src/pages/casesdetails/Index.vue

@@ -49,6 +49,7 @@
             <div class="case-content">
               <h1 class="case-title">{{ currentCase?.title || '' }}</h1>
               <div class="case-body" v-html="currentCase?.content || ''"></div>
+              <img :src="imgHost+currentCase?.image" style="max-width: 100%;" alt="" srcset="">
 
               <!-- 导航按钮 -->
               <div class="navigation">
@@ -86,6 +87,8 @@ export default {
     DefaultLayout
   },
   setup() {
+    // 环境变量
+    const imgHost = import.meta.env.VITE_APP_IMG_HOST
     const route = useRoute()
     const router = useRouter()
 
@@ -116,12 +119,16 @@ export default {
             // 如果有children，使用children数据
             if (item.children && item.children.length > 0) {
               return {
-                id: item.id,
+                id: `category_${item.id}`, // 给分类添加前缀避免ID冲突
+                originalId: item.id,
                 title: item.classifyName || item.name,
+                type: 'category',
                 children: item.children.map(child => ({
-                  id: child.id,
+                  id: `project_${child.id}`, // 给项目添加前缀避免ID冲突
+                  originalId: child.id,
                   title: child.projectName || child.name,
                   projectType: child.projectType,
+                  type: 'project',
                   // 标记这个项目需要通过API获取详细内容
                   needFetchDetail: true
                 }))
@@ -129,9 +136,11 @@ export default {
             } else {
               // 如果没有children，该分类本身就是一个可点击的项目
               return {
-                id: item.id,
+                id: `category_${item.id}`, // 给分类添加前缀避免ID冲突
+                originalId: item.id,
                 title: item.classifyName || item.name,
                 classifyId: item.id, // 使用分类ID作为classifyId
+                type: 'category',
                 // 标记需要通过classifyId获取该分类下的项目列表
                 needFetchByClassify: true,
                 children: []
@@ -291,13 +300,13 @@ export default {
         else if (caseItem.needFetchDetail) {
           const response = await getProjectList({
             projectType: 2, // 2：行业案例
-            id: caseItem.id
+            id: caseItem.originalId || caseItem.id // 使用原始ID进行API调用
           })
 
           if (response.rows && response.rows.length > 0) {
             const caseData = response.rows[0]
             currentCase.value = {
-              id: caseData.id,
+              id: caseItem.id, // 保持带前缀的ID用于界面状态
               title: caseData.projectName || caseItem.title,
               content: caseData.projectDescribe || caseData.projectProfile || '<p>暂无详细内容</p>',
               image: caseData.projectImage
@@ -326,11 +335,15 @@ export default {
       // 更新URL（除非明确跳过）
       if (!skipRouteUpdate) {
         isUpdatingRoute.value = true
-        console.log('开始更新路由到ID:', currentCaseId.value)
+        // 使用原始ID更新路由，而不是带前缀的ID
+        const routeId = caseItem.originalId || (typeof caseItem.id === 'string' && caseItem.id.includes('_')
+          ? caseItem.id.split('_')[1]
+          : caseItem.id)
+        console.log('开始更新路由到ID:', routeId)
 
         await router.replace({
           name: 'Casesdetails',
-          query: { id: currentCaseId.value }
+          query: { id: routeId }
         })
 
         console.log('路由更新完成')
@@ -380,29 +393,27 @@ export default {
       const id = parseInt(caseId) || caseId // 支持字符串ID
       console.log('查找并高亮案例', { caseId, id, skipRouteUpdate })
 
-      // 如果当前已经是这个案例，直接返回
-      if (currentCaseId.value === id) {
-        console.log('当前已经是这个案例，直接返回')
-        return
-      }
-
       let foundCase = null
       let parentMenuId = null
 
-      // 查找案例
+      // 查找案例 - 需要同时匹配原始ID和带前缀的ID
       for (const menu of menuItems.value) {
         if (menu.children && menu.children.length > 0) {
-          // 在子菜单中查找
-          const found = menu.children.find(child => child.id === id)
+          // 在子菜单中查找 - 匹配原始ID
+          const found = menu.children.find(child =>
+            child.originalId === id || child.id === id || child.id === `project_${id}`
+          )
           if (found) {
             foundCase = found
             parentMenuId = menu.id
             break
           }
-        } else if (menu.id === id) {
-          // 在一级菜单中查找
-          foundCase = menu
-          break
+        } else {
+          // 在一级菜单中查找 - 匹配原始ID
+          if (menu.originalId === id || menu.id === id || menu.id === `category_${id}`) {
+            foundCase = menu
+            break
+          }
         }
       }
 
@@ -420,8 +431,13 @@ export default {
         // 如果在菜单中没找到，可能是直接通过URL访问，尝试直接获取详情
         const caseDetail = await fetchCaseDetail(id)
         if (caseDetail) {
-          currentCaseId.value = id
-          currentCase.value = caseDetail
+          // 为直接访问的案例创建一个临时的带前缀ID
+          const tempId = `direct_${id}`
+          currentCaseId.value = tempId
+          currentCase.value = {
+            ...caseDetail,
+            id: tempId
+          }
         }
       }
     }
@@ -436,9 +452,13 @@ export default {
         return
       }
 
-      // 如果新ID和当前案例ID相同，跳过处理
-      if (newId && parseInt(newId) === currentCaseId.value) {
-        console.log('新ID和当前案例ID相同，跳过处理')
+      // 检查当前案例ID是否匹配新的路由ID（考虑前缀）
+      const currentOriginalId = currentCaseId.value && typeof currentCaseId.value === 'string' && currentCaseId.value.includes('_')
+        ? currentCaseId.value.split('_')[1]
+        : currentCaseId.value
+
+      if (newId && parseInt(newId) === parseInt(currentOriginalId)) {
+        console.log('新ID和当前案例原始ID相同，跳过处理')
         return
       }
 
@@ -476,6 +496,7 @@ export default {
     })
 
     return {
+      imgHost,
       currentCaseId,
       currentCase,
       menuItems,