分享首页播报

2024-06-03 11:53:59 +08:00
parent 3b22a391c1
commit 4374b2ed72
6 changed files with 291 additions and 20 deletions
--- a/pages/news/news.vue
+++ b/pages/news/news.vue
@@ -0,0 +1,106 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar title="新闻详情"></z-nav-bar>
+		<view class="box">
+			<view class="title">
+				{{news.title}}
+			</view>
+			<!-- <view class="content" v-html="news.content"></view> -->
+			<rich-text v-if="news.content" class="content" 
+				:nodes="formatRichText(news.content)"></rich-text>
+		</view>
+
+		<music-play :playData="playData"></music-play>
+	</view>
+</template>
+
+<script>
+	import musicPlay from '@/components/music.vue'
+	import $http from '@/config/requestConfig.js';
+	var clear;
+	import {
+		mapState
+	} from 'vuex';	
+	export default {
+		data() {
+			return {
+				playData: {},
+				newsId: null,
+				news: {
+					content: '',
+					title: ''
+				}
+			};
+		},
+		//第一次加载
+		onLoad(e) {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			this.newsId = e.newsid
+			console.log(e, '------')
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		//页面显示
+		onShow() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			this.getData();
+
+		},
+		components: {
+			musicPlay
+		},
+		//方法
+		methods: {
+			getData() {
+				this.$http
+					.post('common/message/getMessageById?id=' + this.newsId)
+					.then(res => {
+						if (res.code == 0) {
+							this.news.content = res.result.content
+							this.news.title = res.result.title
+						}
+					}).catch(e => {
+						console.log(e, '获取新闻详情报错')
+					});
+			},
+			formatRichText(html) { //控制图片大小
+				let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
+					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+					return match;
+				});
+				newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
+					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
+						'max-width:100%;');
+					return match;
+				});
+				// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
+				// 	match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
+				// 	return match;
+				// });
+				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+				newContent = newContent.replace(/\<img/gi,
+					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
+				return newContent;
+			},
+		},
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+
+	.box {
+		background-color: #fff;
+		padding: 0 10px;
+		// @include pleft_right(10px);
+		min-height: calc(100vh - 270rpx);
+	}
+	.title{font-size: 32rpx; font-weight: bold; display: block; text-align: center;}
+	.content { font-size: 26rpx; line-height: 48rpx; margin-top: 10rpx;}
+</style>