hire-wx-houxuanren/pagesB/zixun-info.vue

<template>
	<view class="zixun-info">
		<view class="info-title">
			{{detail.title || ''}}
		</view>
		<view class="info-tips">
			{{detail.source || ''}}·{{detail.audit_time || ''}}
		</view>
		<view class="info-text" v-html="content"></view>
		<view class="u-flex u-row-center">
			<button class="share-box u-flex" open-type="share">
				<text class="text1">分享至</text>
				<u-icon name="weixin-fill" color="#3ECF76" size="44"></u-icon>
			</button>
		</view>

	</view>
</template>

<script>
	import {article_get_detail} from "@/units/inquire.js"
	export default {
		data() {
			return {
				id: '',
				detail: {},
				content: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdetail()
		},
		onShareAppMessage() {
			return {
				imageUrl: this.detail.image,
				title: this.detail.title
			}
		},
		methods: {
			getdetail() {
				article_get_detail({
					id: this.id
				}).then(res => {
					this.detail = res.data
					const regex = new RegExp('<img', 'gi')
					this.content = res.data.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
				})
			}
		}
	}
</script>

<style lang="scss">
	.zixun-info {
		padding: 0 32rpx;

		.share-box {
			margin: 50rpx auto;
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 40rpx;
			padding: 0 40rpx;
			line-height: 80rpx;

			.text1 {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin-right: 26rpx;
			}
		}

		.share-box::after {
			background-color: rgba(0, 0, 0, 0);
			border: none;
		}

		.info-text {
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}

		.info-tips {
			font-size: 24rpx;
			font-family: SFPro-Regular, SFPro;
			font-weight: 400;
			color: #777777;
			margin-bottom: 20rpx;
		}

		.info-title {
			font-size: 48rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			padding: 28rpx 0 16rpx 0;
		}
	}
</style>