349 lines
8.9 KiB
Vue
349 lines
8.9 KiB
Vue
<template>
|
||
<view class="rich-text-detail-page">
|
||
<!-- 顶部导航栏 -->
|
||
<NavHeader title="详情" />
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y="true">
|
||
<!-- 加载中 -->
|
||
<view class="loading-state" v-if="loading">
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 富文本内容 - 混合渲染 -->
|
||
<view
|
||
class="content-wrapper"
|
||
v-else-if="parsedContent && parsedContent.length > 0"
|
||
>
|
||
<block v-for="(item, index) in parsedContent" :key="index">
|
||
<!-- 如果是图片，使用原生 image 组件 -->
|
||
<view v-if="item.type === 'image'" class="rich-text-image-wrapper">
|
||
<image
|
||
class="rich-text-image"
|
||
:src="item.src"
|
||
mode="widthFix"
|
||
:lazy-load="true"
|
||
></image>
|
||
</view>
|
||
<!-- 如果是文本内容，使用 rich-text -->
|
||
<rich-text
|
||
v-else-if="item.type === 'text'"
|
||
:nodes="item.html"
|
||
class="rich-text-content"
|
||
></rich-text>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 空数据提示 -->
|
||
<view class="empty-state" v-else>
|
||
<image
|
||
class="empty-icon"
|
||
src="/static/home/entry_icon.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
<text class="empty-text">暂无内容</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<DetailActionBar
|
||
v-if="detailData"
|
||
:liked="isLiked"
|
||
:collected="isCollected"
|
||
:id="detailId"
|
||
:zanType="noticeType"
|
||
:type="noticeType"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getGuildDetail } from "@/api/home.js";
|
||
import NavHeader from "@/components/NavHeader/NavHeader.vue";
|
||
import DetailActionBar from "@/components/DetailActionBar/DetailActionBar.vue";
|
||
|
||
export default {
|
||
components: {
|
||
NavHeader,
|
||
DetailActionBar,
|
||
},
|
||
data() {
|
||
return {
|
||
detailId: null, // 详情ID（用于通过接口获取数据）
|
||
title: "",
|
||
content: "",
|
||
parsedContent: [], // 解析后的内容数组
|
||
loading: false,
|
||
isLiked: false, // 是否已点赞
|
||
isCollected: false, // 是否已收藏
|
||
detailData: null, // 详情数据（通过接口获取时使用）
|
||
noticeType: null, // 内容类型
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
// 支持两种模式：
|
||
// 1. 通过 id 调用接口获取详情（原 activitiesDetail 的用法）
|
||
// 2. 直接传入 title 和 content（原 richTextDetail 的用法）
|
||
if (options.id) {
|
||
this.detailId = options.id;
|
||
this.loadDetailById();
|
||
} else if (options.content) {
|
||
// 直接传入内容模式
|
||
if (options.title) {
|
||
this.title = decodeURIComponent(options.title);
|
||
}
|
||
let content = decodeURIComponent(options.content);
|
||
// 解析 HTML，分离图片和文本
|
||
this.parsedContent = this.parseHtmlContent(content);
|
||
if (options.info) {
|
||
// info 从上个页面传过来是 encodeURIComponent(JSON.stringify(obj))，这里要 decode + JSON.parse
|
||
try {
|
||
const parsed = JSON.parse(decodeURIComponent(options.info));
|
||
this.detailData = parsed;
|
||
this.detailId = parsed.id || this.detailId;
|
||
// 兼容字段：noticeType/messageType/type
|
||
this.noticeType = parsed.noticeType ?? parsed.messageType ?? parsed.type ?? this.noticeType;
|
||
// 如果没传 title，则用 info 里的 title
|
||
if (!this.title && parsed.title) {
|
||
this.title = parsed.title;
|
||
}
|
||
} catch (e) {
|
||
console.error('解析 info 失败:', e, options.info);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 分享给朋友（微信小程序）
|
||
onShareAppMessage() {
|
||
if (!this.detailData) {
|
||
return {
|
||
title: this.title || "详情",
|
||
path: this.detailId
|
||
? `/pages/detail/richTextDetail?id=${this.detailId}`
|
||
: "",
|
||
};
|
||
}
|
||
|
||
return {
|
||
title: this.detailData.title || this.title || "详情",
|
||
path: `/pages/detail/richTextDetail?id=${this.detailId}`,
|
||
imageUrl: this.detailData.coverUrl || "",
|
||
};
|
||
},
|
||
// 分享到朋友圈（微信小程序）
|
||
// #ifdef MP-WEIXIN
|
||
onShareTimeline() {
|
||
if (!this.detailData) {
|
||
return {
|
||
title: this.title || "详情",
|
||
query: this.detailId ? `id=${this.detailId}` : "",
|
||
};
|
||
}
|
||
|
||
return {
|
||
title: this.detailData.title || this.title || "详情",
|
||
query: `id=${this.detailId}`,
|
||
imageUrl: this.detailData.coverUrl || "",
|
||
};
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// 通过 ID 加载详情（原 activitiesDetail 的功能）
|
||
async loadDetailById() {
|
||
if (!this.detailId) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.loading = true;
|
||
const res = await getGuildDetail(this.detailId);
|
||
if (res) {
|
||
this.detailData = res;
|
||
this.noticeType = res.noticeType;
|
||
this.title = res.title || "详情";
|
||
// 解析 HTML，分离图片和文本
|
||
if (res.content) {
|
||
this.parsedContent = this.parseHtmlContent(res.content);
|
||
}
|
||
// 设置点赞和收藏状态（如果接口返回了这些字段）
|
||
if (res.isLiked !== undefined) {
|
||
this.isLiked = res.isLiked;
|
||
}
|
||
if (res.isCollected !== undefined) {
|
||
this.isCollected = res.isCollected;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("加载详情失败:", error);
|
||
uni.showToast({
|
||
title: "加载失败，请重试",
|
||
icon: "none",
|
||
});
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
// 解析 HTML 内容，将图片和文本分离
|
||
parseHtmlContent(html) {
|
||
if (!html) return [];
|
||
|
||
const result = [];
|
||
let currentIndex = 0;
|
||
|
||
// 匹配所有 img 标签
|
||
const imgRegex = /<img([^>]*)>/gi;
|
||
let match;
|
||
let lastIndex = 0;
|
||
|
||
while ((match = imgRegex.exec(html)) !== null) {
|
||
// 添加图片之前的文本内容
|
||
if (match.index > lastIndex) {
|
||
const textContent = html.substring(lastIndex, match.index);
|
||
if (textContent.trim()) {
|
||
result.push({
|
||
type: "text",
|
||
html: textContent,
|
||
});
|
||
}
|
||
}
|
||
|
||
// 提取图片 src
|
||
const imgAttrs = match[1];
|
||
const srcMatch = imgAttrs.match(/src=["']([^"']+)["']/i);
|
||
if (srcMatch && srcMatch[1]) {
|
||
result.push({
|
||
type: "image",
|
||
src: srcMatch[1],
|
||
});
|
||
}
|
||
|
||
lastIndex = match.index + match[0].length;
|
||
}
|
||
|
||
// 添加最后剩余的文本内容
|
||
if (lastIndex < html.length) {
|
||
const textContent = html.substring(lastIndex);
|
||
if (textContent.trim()) {
|
||
result.push({
|
||
type: "text",
|
||
html: textContent,
|
||
});
|
||
}
|
||
}
|
||
|
||
// 如果没有匹配到图片，直接返回整个内容作为文本
|
||
if (result.length === 0 && html.trim()) {
|
||
result.push({
|
||
type: "text",
|
||
html: html,
|
||
});
|
||
}
|
||
|
||
return result;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.rich-text-detail-page {
|
||
height: 100vh;
|
||
background-color: #e2e8f1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
padding-bottom: 120rpx; // 为底部操作栏留出空间
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.content-scroll {
|
||
flex: 1;
|
||
height: 0; // 配合 flex: 1 使用，让 scroll-view 可以滚动
|
||
}
|
||
|
||
.content-wrapper {
|
||
padding: 30rpx 20rpx;
|
||
background-color: #ffffff;
|
||
margin: 20rpx;
|
||
border-radius: 20rpx;
|
||
min-height: 200rpx;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
overflow-y: visible;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
|
||
// 图片容器样式
|
||
.rich-text-image-wrapper {
|
||
width: 100%;
|
||
margin: 20rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
|
||
.rich-text-image {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
// 文本内容样式
|
||
.rich-text-content {
|
||
width: 100%;
|
||
display: block;
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-size: 28rpx;
|
||
line-height: 1.8;
|
||
color: #333333;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.loading-state {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 200rpx 0;
|
||
min-height: 500rpx;
|
||
|
||
.loading-text {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
/* 空数据提示 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 200rpx 0;
|
||
min-height: 500rpx;
|
||
|
||
.empty-icon {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 40rpx;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-text {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|
||
|