zx_flk_app/pages/message/detail.vue

<template>
	<view class="container">
		<navBar name="信息详情"></navBar>
		<view class="title">{{info.title}}</view>
		<view>{{info.overview}}</view>
		<image v-if="info.cover" :src="info.cover" class="img" mode="aspectFit" />
		<rich-text :nodes="info.content"></rich-text>
		<location v-if="latlng.latitude && latlng.longitude" :latlng="latlng" />
	</view>
</template>

<script>
	const config = require('@/common/config.js');
	const http = require('@/common/http.js');
	const request = require('@/common/request.js');
	const common = require('@/common/common.js');
	import location from './location.vue'
	export default {
		data() {
			return {
				id: '',
				info: {},
				latlng: {
					
				}
			}
		},
		components: {
			location
		},
		onLoad(options) {
			this.id = options.id
			this.queryMsgDetail()
		},
		methods: {
			queryMsgDetail() {
				const req = {
					type: 'PLAT',
					id: Number(this.id)
				}
				http.postApi(config.API_MESSAGE_DTL, req, res => {
					if (res.succeed) {
						this.info = res.data.data
						console.log(this.info)
						// 正则匹配所有<img>标签并插入自适应属性
						this.info.content = (this.info.content || '').replace(/<img/g,
							'<img style="max-width: 100%; height: auto;"')


						// this.info.latitude = 28.909
						// this.info.longitude = 115.39742

						if (this.info.latitude && this.info.longitude) {

							this.latlng = {
								latitude: this.info.latitude,
								longitude: this.info.longitude
							}
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			margin: 20rpx;
		}

		.img {
			width: 750rpx;
		}
	}
</style>