通过api请求具体文章信息

app/components/news/new.vue

@@ -29,20 +29,34 @@ const fetchArticle = async (id: number) => {
   try {
     loading.value = true
     error.value = ''
-    
+
     const response = await fetch(`${API_BASE_URL}/app/owArticle/get/${id}`)
-    
+
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`)
     }
-    
+
-    const data = await response.json()
+    const res = await response.json()
-    
+    const data = res.data
+
+    console.log('api请求数据', data)
+
+
+    // 分类映射配置
+    const categoryMapping: Record<string, string> = {
+      'solution': '解决方案',
+      'developKnowledge': '开发知识',
+      'industryTrend': '行业动态',
+      'aboutUs': '关于我们'
+    };
+
+    data.code = categoryMapping[data.code] || '暂无分类';
+
     // 更新文章数据
     articleData.value = {
       title: data.title || '暂无标题',
-      publishDate: data.publishDate || '暂无日期',
+      publishDate: data.createTime || '暂无日期',
-      category: data.category || '暂无分类',
+      category: data.code || '暂无分类',
       content: data.content || '暂无内容',
       prevArticle: data.prevArticle || {
         title: '暂无上一篇',
@@ -56,46 +70,6 @@ const fetchArticle = async (id: number) => {
   } catch (err) {
     console.error('获取文章失败:', err)
     error.value = '获取文章失败，请稍后重试'
-    
-    // 如果API请求失败，使用默认数据
-    articleData.value = {
-      title: '创特景区SaaS平台 打造专业景区共享出行综合解决方案',
-      publishDate: '2025年07月08日 12:40',
-      category: '景区共享电动车',
-      content: `
-        <p class="MsoNormal">
-          <span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
-            <font face="宋体">想必有很多游客深有感触，在偌大景区实在走不动</font><font face="Calibri">?</font><font face="宋体">有老又有小，想坐观光车又要排队等待</font><font face="Calibri">?</font><font face="宋体">现在，一辆共享扫码代步观光车就能解决游客烦恼。用户只需用手机扫码，即可解锁一辆共享观光车。游客通过创特景区</font><font face="Calibri">SaaS</font><font face="宋体">智慧出行平台的微信、支付宝小程序扫码进入充值使用，按时计费付费并实时退费，快速完成扫、用、停、还等操作，让游客安心享受便捷、无感的共享出行服务。</font>
-          </span>
-        </p>
-        <p class="MsoNormal">
-          <img src="/news/car_model-6.png" alt="设备" style="float: none;">
-        </p>
-        <p class="MsoNormal">
-          <span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
-            <font face="宋体">创特景区</font><font face="Calibri">SaaS</font><font face="宋体">智慧出行平台通过"场、车、人"三大核心要素，以"为游客提供出行便利""为景区实现增值创收"为两大核心目标，实现了基于物联网硬件、云端软件系统为主体的出行解决方案，通过运营服务、运维服务、数据统计等核心模块为业务赋能。</font>
-          </span>
-        </p>
-        <p class="MsoNormal">
-          <span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
-            近几年来，创特科技研发的共享扫码代步车持续向景区渗透应用，游客扫码用车订单量增多，景区管理方不但可通过管理后台实时查看订单详情、统计分析营运情况的需求还能够为客户提供涵盖应用中心、会员管理、协议管理、订单管理、账户管理等丰富功能的一站式服务，方便客户随时随地搜索并查看车辆订单详情，统计订单数据。除此之外，还可查询使用车辆的支付流水和退款状态，付款信息、营收情况等一键清晰，辅助客户进行针对性的运营管理，进而为游客提供更智慧、便捷的服务。
-          </span>
-        </p>
-        <p class="MsoNormal">
-          <span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
-            接下来，创特科技也将高效、智能的共享出行解决方案推广至更广阔的场景，助力景区旅游服务快速发展。
-          </span>
-        </p>
-      `,
-      prevArticle: {
-        title: '景区共享自行车运营方案都有哪些？',
-        url: 'http://www.yuxiit.com/news/news_407.html'
-      },
-      nextArticle: {
-        title: '暂时没有了',
-        url: '#'
-      }
-    }
   } finally {
     loading.value = false
   }
@@ -166,7 +140,7 @@ onMounted(() => {
 
   // 加载JavaScript文件
   loadJSFiles()
-  
+
   // 获取文章详情，使用id=1进行测试
   fetchArticle(1)
 })
@@ -277,18 +251,22 @@ const loadCSSFiles = () => {
         <div class="col-md-8 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
           <!-- 加载状态 -->
           <div v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
-            <div class="loading-spinner" style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
+            <div
+                class="loading-spinner"
+                style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"/>
             <p style="margin-top: 20px; color: #666;">正在加载文章...</p>
           </div>
-          
+
           <!-- 错误提示 -->
           <div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
             <p>{{ error }}</p>
-            <button @click="fetchArticle(1)" style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            <button
+                style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;"
+                @click="fetchArticle(1)">
               重新加载
             </button>
           </div>
-          
+
           <!-- 文章内容 -->
           <div v-else class="row">
             <div class="col-xs-12">
@@ -505,8 +483,12 @@ const loadCSSFiles = () => {
 
 /* 加载动画 */
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* 加载状态样式 */