prevent_drowning_app/news/pages/article/detail.vue

<template>
  <view class="detail">
	<view class="dtop">
		<view class="tit">{{datainfo.newsTitle}}</view>
		<view class="txts flexcc">
			<view class="mr28">{{datainfo.releaseTime||datainfo.createTime}}</view>
			<view class="num flexc">
				<image :src="look"></image>
				<text>{{datainfo.viewsNum}}</text>
			</view>
		</view>
	</view>
	<view class="richs ql-editor">
		<rich-text :nodes="infoContent"></rich-text>
	</view>
	<loading></loading>
  </view>
</template>

<script>
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
import {getNewsQuery} from "@/api/work/index.js"
import {formatRichText} from '@/utils/common'
  export default {
	components:{},
	data(){
		return{ 
			look:require('@/static/images/home/look.png'),
			datainfo:'',
			infoContent:'',
			id:'',
		}
	},
	onShow() {
		
	},
    onLoad: function(e) {
		this.id=e.id;
		this.getDataFn()
    },
	methods:{
		checkPermi,checkRole,
		getPreview(idx,arr) {
			var newArr=[];
			// arr.forEach(ite=>{
			// 	var ds=this.baseUrl+ite
			// 	newArr.push(ds)
			// })
			newArr[0]=this.banner
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {},
				fail: function(err) {}
			});
		},
		getDataFn(){
			getNewsQuery(this.id).then(res=>{
				if(res.code==200){
					this.datainfo=res.data;
					if(res.data.newsContent){
						this.infoContent=formatRichText(res.data.newsContent)
					}
				}
			})
				
		},
		
	}
  }
</script>
<style lang="scss" scoped>
.detail{padding: 0 26rpx;
	.dtop{padding: 24rpx 20rpx 30rpx;border-bottom: 2rpx dashed #E6E6E6;
		.tit{font-size: 32rpx;text-align: center;font-weight: bold;color: #000000;line-height: 54rpx;margin-bottom: 26rpx;}
		.txts{font-weight: 500;font-size: 24rpx;color: #949695;}
		.num{
			image{margin-right: 4rpx;width: 24rpx;height: 16rpx;}
		}
	}
	.richs{padding: 32rpx 0;font-size: 26rpx;
color: #000000;
line-height: 27px;}
}
</style>