property/property_ui/manage/pages/community/newssqdetail.vue

<template>
	<view class="ndetail ">
		<!-- 详情 -->
		<view class="ndbox mb12">
			<view class="plr15">
				<view class="tit">{{datainfo.communityTitle}}</view>
				<view class="time mb12">{{datainfo.publishTime}}</view>
				<view class="rich">
					<rich-text :nodes="communityContent" style="word-break: break-all;"></rich-text>
				</view>
			</view>
			<view class="ndbfox flexc">
				<view class="flexcc ndbflist">
					<image :src="nicona"></image>
					<view>32</view>
				</view>
				<view class="flexcc ndbflist">
					<image :src="niconb"></image>
					<view>32</view>
				</view>
				<view class="flexcc ndbflist">
					<image :src="niconc"></image>
					<view>32</view>
				</view>
			</view>
		</view>
		<view class="ndbox mb12 plr15">
			<view class="pltit">评论<text>(31)</text></view>
			<!-- 评论列表 -->
			<view class="pllist flex">
				<image :src="head" class="head"></image>
				<view class="flex1 overh">
					<view class="flexat mb14 ">
						<view class="plname flex1 over">床前明月光</view>
						<view class="plrbtn flexc flex0">
							<!-- <image :src="niconb" class="imga"></image> -->
							<image :src="nicond"></image>
							<view>点赞</view>
						</view>
						<view class="plrbtn flexc flex0">
							<image :src="nicone" class="imgb"></image>
							<view>回复</view>
						</view>
					</view>
					<view class="infotxt mb15">支持！去看一下优惠政策！<view class="infotime">12-3</view></view>
				</view>
			</view>
			<view class="pllist flex">
				<image :src="head" class="head"></image>
				<view class="flex1 overh">
					<view class="flexat mb14 ">
						<view class="plname flex1 over">疑是地上霜</view>
						<view class="plrbtn flexc flex0">
							<image :src="niconb" class="imga"></image>
							<!-- <image :src="nicond"></image> -->
							<view>点赞</view>
						</view>
						<view class="plrbtn flexc flex0">
							<image :src="nicone" class="imgb"></image>
							<view>回复</view>
						</view>
					</view>
					<view class="infotxt mb15">提前缴一年的物业费，可以免一个月吗？<view class="infotime">12-3</view></view>
					<!-- 二级回复 -->
					<view class="pllist flex">
						<image :src="head" class="head"></image>
						<view class="flex1 overh">
							<view class="flexat mb14 ">
								<view class="plname flex1 over">幸福小区物业</view>
								<view class="plrbtn flexc flex0">
									<image :src="niconb" class="imga"></image>
									<!-- <image :src="nicond"></image> -->
									<view>点赞</view>
								</view>
								<view class="plrbtn flexc flex0">
									<image :src="nicone" class="imgb"></image>
									<view>回复</view>
								</view>
							</view>
							<view class="infotxt mb15">尊敬的业主朋友，您的建议我司已收到，将在内 部讨论后于物业公告中告知结果，谢谢您的宝贵 建议！<view class="infotime">12-3</view></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="pjfbtn">
			<view class="flexc pjfbox">
				<uni-easyinput type="textarea" autoHeight v-model="text" :inputBorder='false' placeholder="发表我的评论…" />
				<view class="btns">发送</view>
			</view>
		</view>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {newsDet} from "@/api/work/manage.js"
	export default{
		components:{},
		data(){
			return{
				nicona:require('@/manage/static/news/nicona.png'),
				niconb:require('@/manage/static/news/niconb.png'),
				niconc:require('@/manage/static/news/niconc.png'),
				nicond:require('@/manage/static/news/nicond.png'),
				nicone:require('@/manage/static/news/nicone.png'),
				head:require('@/manage/static/news/head.png'),
				datainfo:{
					
				},
				communityContent:'<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>',
				text:'',
				id:"",
			}
		},
		onLoad: function(e) {
			this.id=e.id;
			// this.getDetailFn()
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		methods:{
			checkPermi, checkRole,
			getDetailFn(){
				newsDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						var data=JSON.parse(JSON.stringify(res.data))
						if(data.communityContent){
							this.communityContent=this.formatRichText(data.communityContent)
						}
					}
				})
			},
			//解析富文本方法
			formatRichText(html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').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(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img src="/gi,
						'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;" src="' +baseUrlimg);
					return newContent;
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.ndetail{
	min-height: 100vh;padding: 20rpx 18rpx 100rpx;
	.ndbox{background: #FFFFFF;border-radius: 20rpx;padding-top: 30rpx;
		.tit{font-weight: bold;font-size: 32rpx;color: #272727;margin-bottom: 14rpx;text-align: center;padding-top: 4rpx;}
		.time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;text-align: center;}
		.rich{border-top: 2rpx solid #E5E5E5;padding: 28rpx 0;}	
		.ndbfox{
			border-top: 2rpx solid #E5E5E5;
			.ndbflist{width: 33.3%;min-height: 78rpx;padding: 16rpx 0;box-sizing: border-box;
				image{width: 26rpx;height: 26rpx;margin-right: 26rpx;}
				view{font-weight: 500;font-size: 26rpx;color: #666666;}
			}
		}
	}
}
.pltit{font-weight: bold;font-size: 30rpx;color: #272727;
	text{margin-left: 24rpx;font-size: 24rpx;color: #666666;}
}
.pllist{padding-top: 20rpx;margin-bottom: 16rpx;border-bottom: 2rpx solid #DADADA;
	.head{width: 40rpx;height: 40rpx;margin-right: 18rpx;flex: 0 0 auto;}
	.plname{font-weight: bold;font-size: 30rpx;color: #161616;}
	.plrbtn{margin-left: 36rpx;
		image{width: 26rpx;height: 24rpx;margin-right: 16rpx;
			&.imga{width: 26rpx;height: 26rpx;}
			&.imgb{width: 26rpx;height: 22rpx;}
		}
		view{font-weight: bold;font-size: 24rpx;color: #314081;}
	}
	.infotxt{font-weight: 500;font-size: 26rpx;color: #161616;line-height: 40rpx;
		&:before {content: "";float: right;width: 0;height: calc(100% - 16px);background: red;}
		.infotime{font-weight: 500;font-size: 24rpx;color: #666666; float: right;clear: both;}	
	}
	.pllist{
		padding-top: 0;border-bottom: none;margin-bottom: 0;
	}
}
.pjfbtn{background: #FFFFFF;position: fixed;bottom: 0;left: 0;right: 0;padding:20rpx 48rpx;box-shadow: 0px 0px 18rpx 0px rgba(159,159,159,0.47);
	.pjfbox{background: #E6E6E6;border-radius: 10rpx;
		.btns{nt-weight: bold;padding: 0 34rpx;height: 60rpx;line-height: 60rpx;flex: 0 0 auto;
		font-size: 26rpx;
	}
	
color: #314081;}
}
.pjfbtn /deep/ .uni-easyinput{flex: 1;font-size: 26rpx;color: #222327;}
.pjfbtn /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;margin: 0;background: #E6E6E6;box-sizing: border-box;padding: 10rpx 0 10rpx 36rpx;border-radius:10rpx 0 0 10rpx;}
</style>