wlred/pages/article/detail.vue

<template>
	<view class="detail">
		<view class="article-tit">
			{{article.title}}
		</view>
		<view class="article-time" v-if="loaded">
			{{article.release_time}} | <text style="color: #c7455a;" @click="navTo(article.cid)">{{ ' ' + (article.cart_name || '')}}</text>
		</view>
		<view class="article-content" v-html="article.content">
			
		</view>
	</view>
</template>

<script>
	import { getDetail } from '../../api/index.js'
	export default {
		data() {
			return {
				articleId: '',
				article: {},
				loaded: false
			}
		},
		onLoad(opt) {
			console.log(opt)
			if(opt.id) {
				this.articleId = opt.id
			}
			this.getDetail()
		},
		methods: {
			navTo(cid) {
				let url = ''
				if(cid !=6 && cid != 14 && cid == 15 && cid == 16) {
					url = '/pages/article/list?cid=' + cid
				}else {
					url = '/pages/article/lists?cid=' + cid
				}
				uni.navigateTo({
					url: url
				})
			},
			getDetail() {
				let obj = this
				getDetail({},obj.articleId).then( ({data}) => {
					obj.article = data
					obj.article.content = obj.article.content.replace(/\<img/gi, '<img class="rich-img"');
					
					obj.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100%;
	}
	.detail {
		padding:0 20rpx;
	}
	/deep/ .rich-img {
		max-width: 100% !important;
		height: auto;
	}
	.article-tit {
		font-size: 32rpx;
		line-height: 1.5;
		padding: 40rpx 0 20rpx;
	}
	.article-time {
		padding-bottom: 35rpx;
		color: #b6b6b6;
	}
	.article-content {
		letter-spacing: 2rpx;
	}
</style>