通过api请求具体文章信息
This commit is contained in:
WindowBird
parent
28bbee7091
commit
b13fb32f11
|
|
@ -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 || '暂无日期',
|
||||
category: data.category || '暂无分类',
|
||||
publishDate: data.createTime || '暂无日期',
|
||||
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); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user