no message

pages/article/article-detail.vue

@@ -0,0 +1,201 @@
+<template>
+  <view class="article-detail-page">
+    <view v-if="loading" class="loading-container">
+      <uni-icons type="spinner-cycle" size="40" color="#999" />
+      <text class="loading-text">加载中...</text>
+    </view>
+
+    <view v-else-if="error" class="error-container">
+      <text class="error-text">{{ error }}</text>
+      <button class="retry-btn" @click="loadArticle">重试</button>
+    </view>
+
+    <scroll-view v-else scroll-y class="article-content">
+      <view class="article-header">
+        <text class="article-title">{{ articleData.title }}</text>
+        <text class="article-date">{{ articleData.date }}</text>
+      </view>
+      <view class="article-body">
+        <view class="rich-text-wrapper">
+          <rich-text :nodes="articleData.content"></rich-text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import api from "@/utils/api.js";
+import { ref } from "vue";
+const env = __VITE_ENV__;
+const corpId = env.MP_CORP_ID;
+const loading = ref(true);
+const error = ref("");
+const articleData = ref({
+  title: "",
+  content: "",
+  date: "",
+});
+
+let articleId = "";
+
+// 处理富文本内容，使图片自适应
+const processRichTextContent = (html) => {
+  if (!html) return "";
+
+  // 给所有 img 标签添加样式
+  let processedHtml = html.replace(
+    /<img/gi,
+    '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"'
+  );
+
+  // 移除可能存在的固定宽度样式
+  processedHtml = processedHtml.replace(
+    /style="[^"]*width:\s*\d+px[^"]*"/gi,
+    (match) => {
+      return match.replace(/width:\s*\d+px;?/gi, "max-width:100%;");
+    }
+  );
+
+  // 处理表格，添加自适应样式
+  processedHtml = processedHtml.replace(
+    /<table/gi,
+    '<table style="max-width:100%;overflow-x:auto;display:block;"'
+  );
+
+  // 给整体内容添加容器样式
+  processedHtml = `<div style="width:100%;overflow-x:hidden;word-wrap:break-word;word-break:break-all;">${processedHtml}</div>`;
+
+  return processedHtml;
+};
+
+// 加载文章
+const loadArticle = async () => {
+  loading.value = true;
+  error.value = "";
+  try {
+    const res = await api("getArticle", { id: articleId, corpId });
+
+    if (res.success && res.data) {
+      // 格式化日期
+      let date = "";
+      if (res.data.createTime) {
+        const d = new Date(res.data.createTime);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, "0");
+        const day = String(d.getDate()).padStart(2, "0");
+        date = `${year}-${month}-${day}`;
+      }
+
+      articleData.value = {
+        title: res.data.title || "宣教文章",
+        content: processRichTextContent(res.data.content || ""),
+        date: date,
+      };
+    } else {
+      error.value = res.message || "加载文章失败";
+    }
+  } catch (err) {
+    console.error("加载文章失败:", err);
+    error.value = "加载失败，请重试";
+  } finally {
+    loading.value = false;
+  }
+};
+
+onLoad((options) => {
+  if (options.id) {
+    articleId = options.id;
+    loadArticle();
+  } else {
+    error.value = "文章信息不完整";
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.article-detail-page {
+  width: 100%;
+  height: 100vh;
+  background-color: #fff;
+}
+
+.loading-container,
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 40rpx;
+}
+
+.loading-text {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+  color: #999;
+}
+
+.error-text {
+  font-size: 28rpx;
+  color: #999;
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+
+.retry-btn {
+  padding: 16rpx 60rpx;
+  background-color: #0877f1;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.article-content {
+  height: 100vh;
+}
+
+.article-header {
+  padding: 40rpx 30rpx 20rpx;
+  border-bottom: 1px solid #eee;
+}
+
+.article-title {
+  display: block;
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.6;
+  margin-bottom: 20rpx;
+}
+
+.article-date {
+  display: block;
+  font-size: 24rpx;
+  color: #999;
+}
+
+.article-body {
+  padding: 0;
+}
+
+.rich-text-wrapper {
+  padding: 30rpx;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.rich-text-wrapper ::v-deep rich-text {
+  width: 100%;
+}
+
+.rich-text-wrapper ::v-deep rich-text img {
+  max-width: 100% !important;
+  height: auto !important;
+  display: block;
+}
+</style>