zhengyi/pages/story/storyDetail.vue

<template>
	<view class="content" >
		<template v-if="detail">
			<view class="top">
				<image :src="detail.image_input[0]" mode=""></image>
			</view>
			<view class="detail">
				<view class="detail-top">
					<view class="tit">
						{{detail.title}}
					</view>
					<view class="time">
						更新时间: {{detail.add_time}}
					</view>
				</view>
				<view class="jg">
				</view>
				<view class="detail-content" v-html="detail.content">
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {article,details} from '@/api/index.js'
	export default {
		data() {
			return {
				content: '',
				detail: '',
			}
			
		},
		onLoad(opt) {
			if(opt.id) {
				this.getDetail(opt.id)
			}
		},
		methods: {
			getDetail(id) {
				let obj = this
				uni.showLoading({
					title: '加载中...'
				})
				details({},id).then( ({data}) => {
					uni.hideLoading()
					console.log(data)
					data.content = data.content.replace(/\<img/gi, '<img class="rich-img"')
					this.detail = data
					// obj.content = res.data.content
					// obj.detail = res.data
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.content {
		background-color: #fff;
		height: 100%;
		.top {
			width: 750rpx;
			height: 668rpx;
			image {
				width: 100%;
				height: 100%;
				background-color: #999;
			}
		}
		.detail {
			position: relative;
			top: -57rpx;
			.jg {
				width: 670rpx;
				height: 2rpx;
				background: #F5F5F5;
				margin: auto;
			}
			.detail-top {
				min-height: 190rpx;
				padding: 57rpx 40rpx 40rpx;
				background-color: #fff;
				border-radius: 30rpx 30rpx 0 0;
				.tit {
					font-size: 48rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 51rpx;
				}
				.time {
					padding-top: 10rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999;
					line-height: 51rpx;
				}
			}
			.detail-content {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 48rpx;
				padding: 37rpx 40rpx;
				width: 750rpx;
			}
		}
	}
	/deep/ .detail-content {
		img{
			width: 100%;
			height: 100%;
		}
		table {
			width: 100%;
			height: 100%;
		}
	}
	.rich-img {
		width: 100% !important;
	}
	
</style>