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

<template>
	<view class="ndetail ">
		<!-- 详情 -->
		<view class="mainbox">
			<view class="ndbox">
				<view class="plr15">
					<view class="tit">{{datainfo.manualTitle}}</view>
					<view class="time mb12">{{datainfo.publishTime}}</view>
					<view class="rich">
						<rich-text :nodes="manualContent" style="word-break: break-all;"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="ndbox mb12 plr15 comment-section" style="display:none">
			<view class="pltit">评论<text>(31)</text></view>
			<!-- 评论列表 -->
			<view class="pllist flex">
				<image :src="head" class="head"></image>
				<view class="flex1 overh">
					<view class="flext 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="flext 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="flext 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 style="height:100rpx"></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>
		</view>
		<!-- 评论 -->
		
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {manualDet,manualPut,staffTrainTime} 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'),
				showAll:true,
				baseUrl:config.baseUrl,
				text:'',
				id:'',
				datainfo:{
					progress:'',
				},
				manualContent:'',
				stayDuration: 0,
				pageLoadTime:0,
				pageHeight:0,//文章高度
				progress:0,// 阅读进度
				scrollTop:0,// 当前滚动位置
				commentHeight:0,//品论模块
				scrollflag:true,//是否计算
				putflag:false,//是否修改
			}
		},
		onUnload() {
			// 计算停留时长
			this.calculateStayDuration();
		},
		onLoad: function(e) {
			this.id=e.id;
			this.getDetailFn()
			// 记录页面加载时间
			this.pageLoadTime = Date.now();
		},
		onHide() {
		    // 页面隐藏时计算停留时长
		    this.calculateStayDuration();
		},
		onShow() {
		    // 页面重新显示时重新记录加载时间
		    this.pageLoadTime = Date.now();
		},
		mounted() {
			var that=this;
			setTimeout(function(){
				that.getHeightFn()
			},200)
		},
		onPageScroll(e) {
			// 获取当前滚动位置
			this.scrollTop = e.scrollTop;
			// 计算阅读进度
			this.calculateProgress();
		}, 
		methods:{
			checkPermi, checkRole,
			// 计算停留时长
			calculateStayDuration() {
			    const currentTime = Date.now();
				var time=Math.floor((currentTime - this.pageLoadTime) / 1000); // 转换为秒
				var staffTime=Math.ceil(time/60);//向上取整,转换成分钟
				var params={
					staffTime:staffTime,
				}
				staffTrainTime(params).then(res=>{
				})
				var paramsput={
					manualId:this.id,
					progress:this.datainfo.progress,
				}
				manualPut(paramsput).then(res=>{
					if(res.code==200){
						
					}
				})
			},
			calculateProgress() {
				var progress=0;
				if (this.pageHeight > 0&&this.scrollflag) {
					var pro=this.datainfo.progress||0;
				        // 如果滚动到评论区域，阅读进度为 100%
				    if (this.scrollTop >= this.pageHeight) {
				        progress = 100;
				    } else {
				        // 计算文章内容的阅读进度
				        progress = ((this.scrollTop + uni.getSystemInfoSync().windowHeight) / this.pageHeight * 100).toFixed(2);
				        if (progress > 100) {
				            progress = 100;
				        }
				    }
					if(Number(pro)<Number(progress)){
						this.datainfo.progress=	progress;
						this.putflag=true;
					}
				}
			},
			getHeightFn(){
				let query = uni.createSelectorQuery().in(this);
				var windowHeight=uni.getSystemInfoSync().windowHeight
				var that=this;
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.mainbox').boundingClientRect(data => {
					var height=data.height;
					that.pageHeight=Number(height);
					if(height<Number(windowHeight)){
						this.progress=100;
						this.scrollflag=false;
					}
				}).exec();
				 // 获取评论模块高度
				query.select('.comment-section').boundingClientRect(data => {
				    this.commentHeight = data.height;
				}).exec();
				
			},
			getDetailFn(){
				manualDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						var data=JSON.parse(JSON.stringify(res.data))
						if(data.manualContent){
							this.manualContent=this.formatRichText(data.manualContent)
						}
					}
				})
			},
			// getNextFn(){
			// 	this.$tab.navigateTo("/work/pages/business/add")
			// },
			//解析富文本方法
			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="' +this.baseUrl);
					return newContent;
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.mainbox{padding: 20rpx 0;}
.ndetail{
	// padding: 20rpx 18rpx 100rpx;
	min-height: 100vh;padding: 0rpx 18rpx;
	.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;
	&:last-child{border-bottom: none;}
	.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>