[求助]请教如让它显示出newstext字段里面的图片，也就是编辑器里面插入的图片，现在只能显示出文字内容，这个事uniapp里的detail.vue文件里的内容。
<template>
<view class="container">
<scroll-view scroll-y class="content-container">
<view class="article-header">
<text class="article-title">{{ content.title }}</text>
<view class="article-meta">
<text class="article-time">{{ content.newstime }}</text>
<text class="article-source">来源: {{ content.befrom || '本站' }}</text>
</view>
</view>
<view class="article-content" v-html="content.newstext || '内容加载中...'"></view>
<view class="read-more">
<view class="section-title">相关阅读</view>
<view class="related-list">
<view v-for="(item, index) in relatedNews" :key="index" class="related-item" @click="goDetail(item.id)">
<text class="related-title">{{ item.title }}</text>
<text class="related-time">{{ item.newstime }}</text>
</view>
</view>
</view>
<view class="nav-buttons">
<view class="prev-next">
<view v-if="prev" class="prev" @click="goDetail(prev.id)">
<text class="arrow">❮</text>
<text class="text">上一篇: {{ prev.title }}</text>
</view>
<view v-if="next" class="next" @click="goDetail(next.id)">
<text class="text">下一篇: {{ next.title }}</text>
<text class="arrow">❯</text>
</view>
</view>
</view>
</scroll-view>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-item" @click="toggleFavorite">
<text class="iconfont" :class="{ favorited: isFavorited }">\ue610</text>
<text class="action-text">收藏</text>
</view>
<view class="action-item" @click="share">
<text class="iconfont">\ue611</text>
<text class="action-text">分享</text>
</view>
<button class="read-original" open-type="webView"
:url="content.titleurl"
v-if="content.titleurl">
阅读原文
</button>
</view>
</view>
</template>
<script>
import api from '../../api/request.js';
export default {
data() {
return {
content: {},
prev: null,
next: null,
relatedNews: [],
isFavorited: false,
articleId: 0
};
},
onLoad(options) {
if (options.id) {
this.articleId = parseInt(options.id);
this.loadData();
}
},
onShareAppMessage() {
return {
title: this.content.title || '帝国CMS小程序',
path: `/pages/detail/detail?id=${this.articleId}`,
imageUrl: this.content.titlepic || ''
};
},
methods: {
async loadData() {
uni.showLoading({
title: '加载中...',
mask: true
});
try {
const res = await api.getContent(this.articleId);
if (res.content) {
this.content = res.content;
// 处理内容图片自适应
if (this.content.newstext) {
this.content.newstext = this.content.newstext.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:20rpx auto;"');
}
this.prev = res.prev;
this.next = res.next;
// 检查是否已收藏
this.checkFavorite();
// 获取相关阅读
this.loadRelatedNews();
} else {
uni.showToast({
title: '文章不存在',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
}
} catch (e) {
console.error('获取内容失败', e);
uni.showToast({
title: '加载失败',
icon: 'none'
});
} finally {
uni.hideLoading();
}
},
async loadRelatedNews() {
try {
const res = await api.getListData(this.content.classid, 1);
this.relatedNews = (res.list || []).filter(item => item.id != this.articleId).slice(0, 4);
} catch (e) {
console.error('获取相关文章失败', e);
}
},
checkFavorite() {
const favorites = uni.getStorageSync('favorites') || [];
this.isFavorited = favorites.some(item => item.id === this.articleId);
},
toggleFavorite() {
let favorites = uni.getStorageSync('favorites') || [];
if (this.isFavorited) {
// 取消收藏
favorites = favorites.filter(item => item.id !== this.articleId);
uni.showToast({ title: '已取消收藏', icon: 'none' });
} else {
// 添加收藏
const favoriteItem = {
id: this.articleId,
title: this.content.title,
image: this.content.titlepic,
time: new Date().getTime()
};
favorites.unshift(favoriteItem);
uni.showToast({ title: '收藏成功', icon: 'none' });
}
uni.setStorageSync('favorites', favorites);
this.isFavorited = !this.isFavorited;
},
share() {
uni.share({
provider: "wechat",
scene: "WXSceneSession", // 分享到微信好友
title: this.content.title,
imageUrl: this.content.titlepic,
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
goDetail(id) {
uni.navigateTo({
url: `/pages/detail/detail?id=${id}`
});
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #fff;
}
.content-container {
flex: 1;
padding: 30rpx;
}
.article-header {
margin-bottom: 40rpx;
}
.article-title {
font-size: 40rpx;
font-weight: bold;
line-height: 1.5;
color: #333;
display: block;
}
.article-meta {
display: flex;
margin-top: 20rpx;
color: #999;
font-size: 26rpx;
}
.article-time {
margin-right: 20rpx;
}
.article-source {
}
.article-content {
font-size: 32rpx;
line-height: 1.8;
color: #333;
margin-bottom: 50rpx;
padding-right: 40rpx;
}
.article-content >>> img {
max-width: 100%;
height: auto;
display: block;
margin: 40rpx auto;
}
.read-more {
margin: 50rpx 0;
}
.section-title {
font-size: 34rpx;
font-weight: bold;
padding: 20rpx 0;
border-left: 6rpx solid #007AFF;
padding-left: 16rpx;
margin: 30rpx 0 20rpx;
}
.related-list {
background-color: #f9f9f9;
border-radius: 10rpx;
padding: 20rpx;
}
.related-item {
padding: 16rpx 0;
border-bottom: 1rpx solid #eee;
}
.related-item:last-child {
border-bottom: none;
}
.related-title {
display: block;
font-size: 28rpx;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.related-time {
font-size: 24rpx;
color: #999;
margin-top: 8rpx;
}
.nav-buttons {
margin: 50rpx 0;
}
.prev-next {
background-color: #f9f9f9;
border-radius: 10rpx;
padding: 20rpx;
}
.prev, .next {
padding: 16rpx;
border-radius: 8rpx;
background-color: #fff;
margin-bottom: 16rpx;
}
.prev:last-child, .next:last-child {
margin-bottom: 0;
}
.prev {
text-align: left;
}
.next {
text-align: right;
}
.arrow {
font-size: 36rpx;
color: #007AFF;
margin-right: 10rpx;
}
.next .arrow {
margin-left: 10rpx;
margin-right: 0;
}
.text {
font-size: 28rpx;
color: #333;
}
.action-bar {
display: flex;
justify-content: space-around;
align-items: center;
padding: 20rpx 0;
border-top: 1rpx solid #eee;
background-color: #fff;
}
.action-item {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
}
.iconfont {
font-size: 40rpx;
color: #666;
margin-bottom: 8rpx;
}
.iconfont.favorited {
color: #ff5000;
}
.action-text {
font-size: 24rpx;
color: #666;
}
.read-original {
background: linear-gradient(135deg, #007AFF 0%, #00BFFF 100%);
color: white;
border-radius: 50rpx;
font-size: 28rpx;
padding: 12rpx 30rpx;
line-height: 1;
}
</style>[img][/img]
|
顶部 
加入收藏夹
2026-01-01 22:29:16 
已设置保密
回复
引用
报告
编辑
删除