renshou/integralshop/content/content.vue

<template>
	<view v-if="detaile">
		<view class="title">{{ detaile.title }}</view>
		<view class="det-sta dflex">
			<view class="sitename" @click="toIndex('')">{{ config.CONFIG_PROJECT_TITLE }}</view>
			<view class="time">{{ getDateTimeStamp(detaile.time) }}</view>
		</view>
		<view class="content">
			<view class="viewMore"><mp-html :content="detaile.text" :lazy-load="true" @imgtap="choose"></mp-html></view>
		</view>
		<view class="operate dflex" style="justify-content: flex-end;">
			<button class="share dflex" hover-class="none" open-type="share">
				<!-- <image src="../static/integralShop/images/share.png"></image> -->
			分享</button>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
import mpHtml from '../../components/mp-html/components/mp-html/mp-html';
export default {
	components: {
		mpHtml
	},
	data() {
		return {
			detaile: '',
			type: 2, //详情类型：1 普通内容 2 自定义页面内容
			form: {
				page: 1,
				limit: 4
			},
			contentList: [],
			viewMore: false,
			config: {},
			isToShare: false,
			pid: '',
			userInfo: ''
		};
	},

	onLoad: async function(options) {
		this.config = JSON.parse(req.getStorage('configRes'));
		this.userInfo = req.getStorage('userInfo');
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.id = options.id;
		await this.getDetail();
		if (options.isShare) {
			this.pid = options.pid;
			this.getBrowse();
		}
	},

	onShow() {
		if (this.isToShare) {
			this.getBehaviorSave();
			this.isToShare = false;
		}
	},

	onShareAppMessage() {
		this.isToShare = true;
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/integralshop/content/content?id=' + this.id + '&isShare=' + true + '&pid=' + this.userInfo.id
		};
	},
	onShareTimeline() {
		this.isToShare = true;
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/integralshop/content/content?id=' + this.id + '&isShare=' + true + '&pid=' + this.userInfo.id
		};
	},
	methods: {
		// 分享完成保存
		getBehaviorSave() {
			req.postRequest(
				'/api/v3/behavior/save',
				{ behavior: 6, type: 4, bindId: this.id },
				data => {
					req.msg('分享完成');
				},
				true
			);
		},

		choose: function() {
			let freshen = false;
			this.$emit('freshen', {
				detail: freshen
			});
		},
		toIndex() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		getDateTimeStamp(dateStr) {
			return util.getDateDiff(Date.parse(dateStr.replace(/-/gi, '/')));
		},
		getDetail() {
			let that = this;
			let apiUrl = '/api/content/detail';
			return new Promise((resolve, reject) => {
				req.getRequest(
					apiUrl,
					{ id: that.id },
					async res => {
						if (res.productCategory) {
							res.productCategory = res.productCategory.split(',');
						}
						that.detaile = res;
						let arr = [];
						if (res.productCategory && res.productCategory.length > 0) {
							for (var i = 0; i < res.productCategory.length; i++) {
								await that.getProductList(res.productCategory[i], i).then(res => {
									arr = arr.concat(res);
									that.productList = arr;
									console.log('相关产品==' + JSON.stringify(arr), arr.length);
								});
							}
						}
						resolve();
					},
					true
				);
			});
		},
		getBrowse() {
			let params = {
				bindId: this.id,
				type: 2,
				pid: this.pid
			};
			req.postRequest('/api/browse', params, data => {});
		}
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) {
			//控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			// newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/<br[^>]*\/>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/<br[^>]*\>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/font-size:[^;]+;?/g, '');
			newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:12rpx auto;"');
			return newContent;
		}
	}
};
</script>
<style>
@import './content.css';
</style>