uniapp小程序的富文本解析页面展示:

 

				// 活动介绍
<view class="activity_introduce">
					<view class="top_box">
						<view class="top_box_circle">
							<view class="min_circle_1"></view>
							<view class="min_circle_2"></view>
						</view>
						<view class="top_box_text">活动介绍</view>
					</view>
					<view class="bottom_box">
						<rich-text class="rich_text" v-if="introduceText !== '<p><br></p>'" :nodes="introduceText">
							<!-- 							这里展示后台富文本框配置的内容。为全面贯彻落实创新驱动发展战略,围绕《科技成果转化法》的实施,加快先进制造与工业自动化行业的科技成
							果转移转化,促进中小企业加快转 型升级,推进院企对接、价值链。 -->
						</rich-text>
						<view v-else class="dynamic_rich_text">暂无信息</view>
					</view>
				</view>
                 // 活动议程
				<view class="activity_introduce">
					<view class="top_box">
						<view class="top_box_circle">
							<view class="min_circle_1"></view>
							<view class="min_circle_2"></view>
						</view>
						<view class="top_box_text">活动议程</view>
					</view>
					<view class="bottom_box">
						<rich-text class="rich_text" v-if="agendaText !== '<p><br></p>'" :nodes="agendaText"></rich-text>
						<view v-else class="dynamic_rich_text">暂无信息</view>
					</view>
				</view>

	data() {
		return {
			uuid: '', // 当前数据的uuid
			headTitle: '', // 顶部标题
			activityData: {}, // 活动详情数据
			introduceText: '', // 活动介绍的富文本内容
			agendaText: '', // 活动议程的富文本内容
			timer: true // 存一个定时器状态开关
		};
	},
	methods: {
		// 活动详情初始化
		activityDetailsInit() {
			this.$apiGet(`/api/gc_trade_center/activity/public/${this.uuid}`).then(res => {
				console.log(res, '活动详情的初始化');
				this.activityData = res;
				if (this.activityData) {
					// 动态修改顶部标题
					wx.setNavigationBarTitle({
						title: this.activityData.category
					});
					this.introduceText = this.richText(this.activityData.otherData.introduce);
					this.agendaText = this.richText(this.activityData.otherData.agenda);
					this.getSignUpState();
				}
			});
		},
		// 解析富文本后显示数据
		richText(richTextData) {
			if (richTextData) {
				var richtext = richTextData;
				const regex = new RegExp('<img', 'gi');
				const regex2 = new RegExp('src="/api', 'gi');
				richtext = richtext.replace(regex2, `src="${this.$ServerBaseUrl}/api`);
				richtext = richtext.replace(regex, `<img style="max-width: 100%;"`);
				return richtext;
			} else {
				return '';
			}
		},
}

lang="scss"的css样式

		// 活动介绍的样式
.activity_introduce {
			margin-top: 60rpx;
			.top_box {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 18rpx;
				.top_box_circle {
					margin-right: 22rpx;
					width: 32rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.min_circle_1 {
						width: 16rpx;
						height: 16rpx;
						background: rgba(218, 0, 23, 0.7);
						border-radius: 50%;
						margin-right: -6rpx;
					}
					.min_circle_2 {
						width: 16rpx;
						height: 16rpx;
						background: rgba(1, 68, 151, 0.7);
						border-radius: 50%;
					}
				}
				.top_box_text {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
			.bottom_box {
				width: 690rpx;
				overflow: hidden;
				.rich_text {
					text-indent: 2em;
				}
				.dynamic_rich_text {
					width: 690rpx;
					// height: 48rpx;
					// line-height: 48rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}
			}
		}

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值