H5_module/topic/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' + (viewMore?'':' con-vheight')">
				<!--#ifdef H5-->
				<view style="padding: 0 30rpx;">
				<!--#endif-->
					<mp-html :content="detaile.text" :lazy-load="true" @imgtap="choose"></mp-html>
				<!--#ifdef H5-->
				</view>
				<!--#endif-->
			</view>
			<view class="view-more" @tap="viewMores()" v-if="!viewMore">查看全文</view>
		</view>
		<view class="operate dflex">
			<view class="zan dflex"><image src="../static/images/view.png"></image>{{detaile.browse}}</view>
			<view class="share dflex"  @click="toShare()"><image src="../static/images/share.png"></image>分享</view>
		</view>
		<view class="box" v-if="contentList && contentList.length > 0">
			<view class="tit dflex">为您推荐</view>
			<view class="rec">
				<navigator @click="jumpUrl('/topic/content/content?id=' + item.id)" hover-class="none" class="li dflex" v-for="(item,index) in contentList" :key="index" v-if="index < 3">
					<view class="flex">
						<view class="rec-tit tovers">{{item.title}}</view>
						<view class="dflex">
							<!-- <view class="author ddflex"><image src="../../static/pages/images/zbgw.png" mode="aspectFill"></image>欧衡</view> -->
							<view class="rec-time">{{item.createDate}}</view>
						</view>
					</view>
					<image :src="item.pic" mode="aspectFill" class="rec-img"></image>
				</navigator>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<wx-share ref="wxshare" />
		<!-- #endif -->
	</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";
const h5util = require('../../utils/h5util.js');
export default {
	components: {
		mpHtml,
	},
	data() {
		return {
			detaile: '',
			type: 2, //详情类型：1 普通内容 2 自定义页面内容
			form: {
				page: 1,
				limit: 4,
			},
			contentList: [],
			viewMore: false,
			config: {},
			code: ''
		};
	},

	onLoad: async function(options) {
		if(options.appId) req.setStorage('appId',options.appId);
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.id = options.id;
		this.code = options.code;
		await this.getDetail();
		this.getContentList();
		// await this.monitor();
	},
	onShow(){
		this.getConfig();
		this.getBrowse();
	},

	 async onShareAppMessage() {
		return await this.onShareMessage();
	},
	onShareTimeline() {
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/topic/content/content?id=' + this.id +'&isShareTimeline=' + true
		};
	},
	onReady() {
		// #ifdef H5
		var that = this;
		//初始化分享内容
		setTimeout(async function() {
			var shareContent = await that.onShareMessage();
			if (shareContent) {
				shareContent.path = window.location.origin + shareContent.path;
			}
			console.log('分享内容》》》》》', shareContent);
			that.$refs.wxshare.init(shareContent);
		}, 4 * 1000);
		// #endif
	},
	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url:url
			})
			// h5util.jumpUrlExternal({url:url})
		},
		async onShareMessage(){
			let path = '';
			let isSolution = '';
			isSolution = req.env[req.env.NODE_ENV].isSolution;
			let userInfo = req.getStorage('userInfo');
			if(isSolution){
				path = '/share/home/index?appId='+req.getStorage('appId')+'&userId='+userInfo.id;
			}else{
				path = '/topic/content/content?id=' + this.id +'&isShare=' + true+'&userId='+userInfo.id + '&appId=' + req.getStorage('appId');
			}
			path = this.SHARE_BEHAVIOR_FN({path:path,sendShare:false}).path
			console.log(path)
			return {
				title: this.detaile.title,
				imageUrl: this.detaile.pic,
				path: path
			};
		},
		
		
		getConfig(){
			if(req.getStorage('configRes')){
				this.config =  JSON.parse(req.getStorage('configRes'))
			}else{
				req.getRequest('/api/config',{},data=>{
					this.config = data;
					req.setStorage('configRes',JSON.stringify(data));
				})
			}
		},
		monitor() {
			let that = this;
			let system = uni.getSystemInfoSync();
			let query = uni.createSelectorQuery();
			query.select('.viewMore').boundingClientRect(data=>{
				let height = data.height;
				if(height > system.screenHeight) {
					this.viewMore = true
				}
			}).exec();
		},
		viewMores(){
			this.viewMore = true;
		},
		choose: function () {
		  let freshen = false;
		  this.$emit('freshen', {
		    detail: freshen
		  });
		},
		toIndex(){
			h5util.jumpIndex('/pages/tabBar/index')
			// app.globalData.reLaunchTo('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 shareD = await that.onShareMessage()
					that.postShareMessage(shareD.title,shareD.imageUrl,shareD.path,{
						BIND_TYPE : this.BIND_TYPE,
						BIND_ID : this.BIND_ID,
						USER_ID : this.USER_ID,
						SHARE_USER_ID : this.SHARE_USER_ID,
						PARENT_CODE : this.PARENT_CODE,
						CURRENT_CODE : this.CURRENT_CODE
					})
					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
			}
			req.postRequest('/api/browse', params, data => {});
		},
		getContentList() {
			let form = this.form;
			form.code = this.code;
			req.getRequest('/api/content/list',form,res => {
				this.contentList = res;
				for (var i = 0; i < this.contentList.length; i++) {
					if (this.contentList[i].id == this.id){
						this.contentList.splice(i,1);
					}
				}
			});
		},
		
		async toShare(){
			let shareD = await this.onShareMessage()
			h5util.jumpShare({
				title:shareD.title,
				imageUrl:shareD.imageUrl,
				path:shareD.path,
				shareType:1,
				id:this.detaile.id,
				sendBehaviorObj:{
					BIND_TYPE : this.BIND_TYPE,
					BIND_ID : this.BIND_ID,
					USER_ID : this.USER_ID,
					SHARE_USER_ID : this.SHARE_USER_ID,
					PARENT_CODE : this.PARENT_CODE,
					CURRENT_CODE : this.CURRENT_CODE
				}
			})
		}
	},
	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>