更新

2026-03-18 14:53:09 +08:00
parent 338b104d50
commit 7832514f28
315 changed files with 7071 additions and 1136 deletions
@@ -0,0 +1,136 @@
+<template>
+  <view class="container">
+    <!-- 加载中 -->
+    <view v-if="loading" class="loading-wrap">
+      <text class="loading-text">加载中...</text>
+    </view>
+
+    <block v-else-if="article">
+      <!-- 封面图 -->
+      <image v-if="article.image" :src="article.image" class="cover-image" mode="aspectFill" />
+
+      <!-- 内容区 -->
+      <view class="content-wrap">
+        <text class="article-title">{{ article.title }}</text>
+
+        <view class="meta-row">
+          <text class="meta-text">{{ article.author || '健康科普' }}</text>
+          <text class="meta-dot">·</text>
+          <text class="meta-text">{{ article.create_time }}</text>
+          <text class="meta-dot">·</text>
+          <text class="meta-text">{{ article.click }} 阅读</text>
+        </view>
+
+        <!-- 富文本内容 -->
+        <rich-text :nodes="article.content" class="article-content" />
+      </view>
+    </block>
+
+    <!-- 加载失败 -->
+    <view v-else class="empty-wrap">
+      <text class="empty-text">文章不存在或已下架</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const article = ref(null)
+const loading = ref(false)
+
+const fetchDetail = async (id) => {
+  loading.value = true
+  try {
+    const response = await proxy.apiUrl({
+      url: '/api/article/detail',
+      method: 'GET',
+      data: { id }
+    })
+    if (response && response.code === 1) {
+      article.value = response.data
+    }
+  } catch (error) {
+    console.error('获取文章详情失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  const id = currentPage?.options?.id
+  if (id) fetchDetail(id)
+})
+</script>
+
+<style scoped lang="scss">
+.container {
+  min-height: 100vh;
+  background: #f8f8f8;
+}
+
+.loading-wrap, .empty-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 200rpx;
+}
+
+.loading-text, .empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.cover-image {
+  width: 100%;
+  height: 420rpx;
+  display: block;
+}
+
+.content-wrap {
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  margin-top: -24rpx;
+  padding: 40rpx 32rpx 60rpx;
+  min-height: calc(100vh - 396rpx);
+}
+
+.article-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #1a1a1a;
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 24rpx;
+}
+
+.meta-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 32rpx;
+  padding-bottom: 24rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.meta-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.meta-dot {
+  font-size: 24rpx;
+  color: #ccc;
+  margin: 0 12rpx;
+}
+
+.article-content {
+  font-size: 30rpx;
+  color: #333;
+  line-height: 1.8;
+}
+</style>