gcz 1 săptămână în urmă
părinte
comite
db8fb5b7a3
3 a modificat fișierele cu 156 adăugiri și 50 ștergeri
  1. 2 1
      src/pages/cases/Index.vue
  2. 151 46
      src/pages/casesdetails/Index.vue
  3. 3 3
      src/pages/home/Index.vue

+ 2 - 1
src/pages/cases/Index.vue

@@ -220,13 +220,14 @@ export default {
           // 更新casesList数据
           casesList.value = casesData.rows.map(item => ({
             id: item.id,
+            classifyId: item.classifyId,
             title: item.projectName || item.title
           }))
 
           // 更新solutions数据
           solutions.value = casesData.rows.map(item => ({
             id: item.id,
-            classifyId:item.classifyId,
+            classifyId: item.classifyId,
             title: item.classifyName,
             description: item.classifyDesc || '为您提供专业的解决方案',
             image: item.projectImage ? imgHost + item.projectImage : '/src/assets/products-youshi-01.png'

+ 151 - 46
src/pages/casesdetails/Index.vue

@@ -49,7 +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="">
+              <img :src="imgHost + currentCase?.image" style="max-width: 100%;" alt="" srcset="">
 
               <!-- 导航按钮 -->
               <div class="navigation">
@@ -388,63 +388,165 @@ export default {
       }
     }
 
-    // 根据ID查找并高亮案例
-    const findAndHighlightCase = async (caseId, skipRouteUpdate = false) => {
-      const id = parseInt(caseId) || caseId // 支持字符串ID
-      console.log('查找并高亮案例', { caseId, id, skipRouteUpdate })
+    // 根据classifyId判断分类是否有children
+    const getClassifyInfo = (classifyId) => {
+      const id = parseInt(classifyId)
+      return menuItems.value.find(menu => menu.originalId === id)
+    }
 
-      let foundCase = null
-      let parentMenuId = null
+    // 根据ID和classifyId获取案例详情
+    const fetchCaseDetailByParams = async (caseId, classifyId) => {
+      const id = parseInt(caseId)
+      const classify = getClassifyInfo(classifyId)
 
-      // 查找案例 - 需要同时匹配原始ID和带前缀的ID
-      for (const menu of menuItems.value) {
-        if (menu.children && menu.children.length > 0) {
-          // 在子菜单中查找 - 匹配原始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
+      console.log('根据参数获取案例详情', { caseId, classifyId, classify })
+
+      if (classify) {
+        if (classify.children && classify.children.length > 0) {
+          // 有children的情况:直接通过项目ID获取详情
+          console.log('分类有children,通过项目ID获取详情')
+          const response = await getProjectList({
+            projectType: 2,
+            id: id
+          })
+
+          if (response.rows && response.rows.length > 0) {
+            const caseData = response.rows[0]
+            return {
+              id: `project_${id}`,
+              originalId: id,
+              title: caseData.projectName || '未命名案例',
+              content: caseData.projectDescribe || caseData.projectProfile || '<p>暂无详细内容</p>',
+              image: caseData.projectImage,
+              type: 'project',
+              needFetchDetail: true
+            }
           }
         } else {
-          // 在一级菜单中查找 - 匹配原始ID
-          if (menu.originalId === id || menu.id === id || menu.id === `category_${id}`) {
-            foundCase = menu
-            break
+          // 没有children的情况:通过classifyId获取该分类下的项目列表
+          console.log('分类没有children,通过classifyId获取分类下的项目')
+          const response = await getProjectList({
+            projectType: 2,
+            classifyId: parseInt(classifyId)
+          })
+
+          if (response.rows && response.rows.length > 0) {
+            // 如果传入了具体的项目ID,查找对应的项目
+            let caseData = response.rows[0] // 默认取第一个
+            if (id) {
+              const foundProject = response.rows.find(item => item.id === id)
+              if (foundProject) {
+                caseData = foundProject
+              }
+            }
+
+            return {
+              id: `category_${classifyId}`,
+              originalId: parseInt(classifyId),
+              title: caseData.projectName || classify.title,
+              content: caseData.projectDescribe || caseData.projectProfile || '<p>暂无详细内容</p>',
+              image: caseData.projectImage,
+              type: 'category',
+              classifyId: parseInt(classifyId),
+              needFetchByClassify: true
+            }
           }
         }
       }
 
-      if (foundCase) {
-        console.log('找到案例', foundCase)
-        // 展开父菜单(如果有的话)
-        if (parentMenuId && !expandedMenus.value.includes(parentMenuId)) {
-          expandedMenus.value.push(parentMenuId)
-        }
+      return null
+    }
 
-        // 选中案例
-        await selectCase(foundCase, skipRouteUpdate)
-      } else {
-        console.log('在菜单中没找到案例,尝试直接获取详情')
-        // 如果在菜单中没找到,可能是直接通过URL访问,尝试直接获取详情
-        const caseDetail = await fetchCaseDetail(id)
+    // 根据ID查找并高亮案例
+    const findAndHighlightCase = async (caseId, classifyId = null, skipRouteUpdate = false) => {
+      const id = parseInt(caseId) || caseId // 支持字符串ID
+      console.log('查找并高亮案例', { caseId, classifyId, id, skipRouteUpdate })
+
+      let foundCase = null
+      let parentMenuId = null
+
+      // 如果提供了classifyId,使用新的逻辑
+      if (classifyId) {
+        console.log('使用classifyId逻辑获取案例详情')
+        const caseDetail = await fetchCaseDetailByParams(caseId, classifyId)
         if (caseDetail) {
-          // 为直接访问的案例创建一个临时的带前缀ID
-          const tempId = `direct_${id}`
-          currentCaseId.value = tempId
-          currentCase.value = {
-            ...caseDetail,
-            id: tempId
+          // 查找对应的菜单项来设置高亮和展开状态
+          const classify = getClassifyInfo(classifyId)
+          if (classify) {
+            if (classify.children && classify.children.length > 0) {
+              // 有children的情况:高亮对应的子项
+              const childCase = classify.children.find(child => child.originalId === parseInt(caseId))
+              if (childCase) {
+                foundCase = childCase
+                parentMenuId = classify.id
+              }
+            } else {
+              // 没有children的情况:高亮分类本身
+              foundCase = classify
+            }
+          }
+
+          // 设置当前案例
+          currentCaseId.value = caseDetail.id
+          currentCase.value = caseDetail
+        }
+      } else {
+        // 原有的查找逻辑
+        for (const menu of menuItems.value) {
+          if (menu.children && menu.children.length > 0) {
+            // 在子菜单中查找 - 匹配原始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 {
+            // 在一级菜单中查找 - 匹配原始ID
+            if (menu.originalId === id || menu.id === id || menu.id === `category_${id}`) {
+              foundCase = menu
+              break
+            }
+          }
+        }
+
+        if (foundCase) {
+          console.log('找到案例', foundCase)
+          // 选中案例
+          await selectCase(foundCase, skipRouteUpdate)
+          return
+        } else {
+          console.log('在菜单中没找到案例,尝试直接获取详情')
+          // 如果在菜单中没找到,可能是直接通过URL访问,尝试直接获取详情
+          const caseDetail = await fetchCaseDetail(id)
+          if (caseDetail) {
+            // 为直接访问的案例创建一个临时的带前缀ID
+            const tempId = `direct_${id}`
+            currentCaseId.value = tempId
+            currentCase.value = {
+              ...caseDetail,
+              id: tempId
+            }
           }
+          return
         }
       }
+
+      // 展开父菜单(如果有的话)
+      if (parentMenuId && !expandedMenus.value.includes(parentMenuId)) {
+        expandedMenus.value.push(parentMenuId)
+      }
     }
 
     // 监听路由变化
-    watch(() => route.query.id, async (newId, oldId) => {
-      console.log('路由变化监听', { newId, oldId, currentCaseId: currentCaseId.value, isUpdatingRoute: isUpdatingRoute.value })
+    watch(() => [route.query.id, route.query.classifyId], async ([newId, newClassifyId], [oldId, oldClassifyId]) => {
+      console.log('路由变化监听', {
+        newId, newClassifyId, oldId, oldClassifyId,
+        currentCaseId: currentCaseId.value,
+        isUpdatingRoute: isUpdatingRoute.value
+      })
 
       // 如果正在更新路由,跳过处理
       if (isUpdatingRoute.value) {
@@ -457,15 +559,16 @@ export default {
         ? currentCaseId.value.split('_')[1]
         : currentCaseId.value
 
-      if (newId && parseInt(newId) === parseInt(currentOriginalId)) {
+      if (newId && parseInt(newId) === parseInt(currentOriginalId) &&
+        (!newClassifyId || newClassifyId === oldClassifyId)) {
         console.log('新ID和当前案例原始ID相同,跳过处理')
         return
       }
 
       // 只有当ID真正发生变化且菜单数据已加载时才执行
-      if (newId && newId !== oldId && menuItems.value.length > 0) {
+      if (newId && (newId !== oldId || newClassifyId !== oldClassifyId) && menuItems.value.length > 0) {
         console.log('执行路由变化处理')
-        await findAndHighlightCase(newId, true) // 跳过路由更新,因为这是由路由变化触发的
+        await findAndHighlightCase(newId, newClassifyId, true) // 跳过路由更新,因为这是由路由变化触发的
       }
     })
 
@@ -475,8 +578,10 @@ export default {
 
       // 初始化时根据URL参数加载案例
       const caseId = route.query.id
+      const classifyId = route.query.classifyId
+
       if (caseId) {
-        await findAndHighlightCase(caseId)
+        await findAndHighlightCase(caseId, classifyId)
       } else {
         // 默认选择第一个案例并展开其父菜单
         const firstCase = flattenedCases.value[0]

+ 3 - 3
src/pages/home/Index.vue

@@ -69,7 +69,7 @@
           <div class="cases-container">
             <div class="cases-wrapper"
               :style="{ transform: `translateX(-${currentCaseIndex * (100 / visibleCases)}%)` }">
-              <div v-for="caseItem in casesList" :key="caseItem.id" @click="goToCaseDetail(caseItem.id)"
+              <div v-for="caseItem in casesList" :key="caseItem.id" @click="goToCaseDetail(caseItem)"
                 class="case-item">
                 <div class="case-image">
                   <img :src="imgHost + caseItem.projectImage" :alt="caseItem.title" />
@@ -491,10 +491,10 @@ export default {
     }
 
     // 跳转到案例详情页
-    const goToCaseDetail = (caseId) => {
+    const goToCaseDetail = (caseItem) => {
       router.push({
         name: 'Casesdetails',
-        query: { id: caseId }
+        query: { id: caseItem.id,classifyId:caseItem.classifyId }
       })
     }