renshou/topic/content/content.vue

<template>
	<view v-if="detaile">
		<view v-if="detaile&&detaile.contentType!=3">
			<view class="title">{{ detaile.title }}</view>
			<view class="det-sta ddflex">
				<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="config.CONFIG_PROJECT_LOGO"></image>
				<view class="sitename" @click="toIndex('')">{{config.CONFIG_PROJECT_TITLE}}</view>
				<view class="time">{{getDateTimeStamp(detaile.time)}}</view>
			</view>
			<view class="video" v-if="detaile.resourceUri&&JSON.parse(detaile.resourceUri).uri">
				<video :src="JSON.parse(detaile.resourceUri).uri" :show-center-play-btn="false" :controls="true" :autoplay="true" id="myVideo" @pause="videoPause" @ended="videoEnded"></video>
				<view class="video-play ddflex" @click="videoPlay()" v-if="detaile.isShowPlayBtn"><image src="../../static/images/play.png"></image></view>
			</view>
			<view class="content">
				<view class="viewMore">
					<mp-html :content="detaile.text" :lazy-load="true" @imgtap="choose"></mp-html>
				</view>
			</view>
			<view style="font-size: 24rpx;color: #999999;line-height: 36rpx;padding: 0 30rpx;">
				部分素材来源：中国人寿寿险app、国寿e店、云助理等。
			</view>
			<view class="operate dflex">
				<view class="zan dflex">
					共{{detaile.browse}}次浏览</view>
				<view class="ddflex">
					<button style="margin-right: 20rpx !important;" class="share ddflex" hover-class="none" @click="userBehavior()"><image :src="detaile.isThumbs?'/static/images/like_h.png':'/static/images/like.png'"></image>{{detaile.thumbsNumber}}</button>
					<button class="share ddflex" hover-class="none" open-type="share"><image src="/static/images/share.png"></image>分享</button>
				</view>
			</view>
			<view class="box" v-if="contentList && contentList.length > 0">
				<view class="tit dflex">为您推荐</view>
				<view class="rec">
					<navigator :url="'/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>
			<serviceContact :userId="query.userId?query.userId:''" v-if="userInfo.userType!=1"></serviceContact>
		</view>
		<view v-if="detaile&&detaile.contentType==3">
			<web-view :src="webUrl" v-if="webUrl!==''"></web-view>
		</view>
		
		<update-userinfonew :update-info="isUpdateInfo" :update-mobile="isUpdateMobile" v-if="isShowUpdate" @closeUpdate="closeUpdate" @updateInfo="updateInfo" @updateMobile="updateMobile"></update-userinfonew>
	</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";
import serviceContact from "../../components/service-contact/index.vue";
export default {
	components: {
		mpHtml,
		serviceContact
	},
	data() {
		return {
			detaile: '',
			type: 2, //详情类型：1 普通内容 2 自定义页面内容
			form: {
				page: 1,
				limit: 4,
			},
			contentList: [],
			viewMore: false,
			config: {},
			userInfo:{},
			query:{},
			id:null,
			
			webUrl:'',
			
			tempFilePath:'',
			
			
			isShowUpdate: false, //是否显示更新信息弹窗
			isUpdateInfo: false,//更新用户信息
			isUpdateMobile: false,//绑定手机号
			
			
			enterTime : '',//进入页面时间
			outTime : '',//页面卸载时间
			stayTime : 0//页面停留时间
		};
	},

	onLoad: async function(options) {
		this.query = options
		this.id = options.id;
		if(options.shareId) req.setStorage('shareId',options.shareId)
		// 朋友圈页面不调用登陆
		if(!this.query.isSharePYQ){
			await  req.silenceLogin(options.userId, '');
			setTimeout(()=>{
				this.getUpdate()
			},500)
		}
		setTimeout(()=>{
			this.userInfo = req.getStorage('userInfo')
			
		},500)
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		await this.getDetail();
		this.getContentList();
		// await this.monitor();
	},
	async onShow(){
		// 用户进入时间
		this.enterTime = new Date();
		console.log('---用户进入时间---',this.enterTime);
		this.getConfig()
		this.getBrowse();
	},
	onHide(){
		// 用户退出时间
		this.outTime = new Date();
		//停留时间(毫秒)
		this.stayTime = (this.outTime.getTime() - this.enterTime.getTime());
		console.log('---用户浏览---',Math.ceil(this.stayTime/1000))
		req.saveBehaviorNew(this.id,3,4,'','',this.query.userId,Math.ceil(this.stayTime/1000))
	},
	onUnload(){
		// 用户退出时间
		this.outTime = new Date();
		//停留时间(毫秒)
		this.stayTime = (this.outTime.getTime() - this.enterTime.getTime());
		console.log('---用户浏览总时长---',Math.ceil(this.stayTime/1000))
		req.saveBehaviorNew(this.id,3,4,'','',this.query.userId,Math.ceil(this.stayTime/1000))
	},
	onShareAppMessage() {
		req.saveBehaviorNew(this.id,3,6)
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/topic/content/content?id=' + this.id +'&isShare=' + true+(this.userInfo.userType==1?('&shareId='+this.userInfo.saleNo):'') + (req.getStorage('userInfo')?'&userId=' + req.getStorage('userInfo').id:'')
		};
	},
	onShareTimeline() {
		req.saveBehaviorNew(this.id,3,6)
		return {
			title: this.detaile.title,
			imageUrl: this.tempFilePath?this.tempFilePath:this.detaile.pic,
			path: '/topic/content/content',
			query:'id=' + this.id+'&isSharePYQ=' + true +'&isShare=' + true+(this.userInfo.userType==1?('&shareId='+this.userInfo.saleNo):'') + (req.getStorage('userInfo')?'&userId=' + req.getStorage('userInfo').id:'')
		};
	},
	methods: {
		/*获取分享图 */
		async getShareImg(){
			let tempFilePath = await new Promise((r,j)=>{
				try{
					uni.getImageInfo({
						src:this.detaile.pic,
						success: (data) => {
							uni.compressImage({
								src:data.path,
								quality:0.5,
								success:(res)=>{
									console.log('压缩成功',res.tempFilePath)
									r(res.tempFilePath)
								},
								fail: (error) => {
									console.log('压缩失败',error)
									r('')
								}
							})
						},
						fail: () => {
							r('')
						}
					})
				}catch(e){
					//TODO handle the exception
					r('')
				}
			})
			this.tempFilePath = tempFilePath
		},
		getConfig() {
			var _this = this;
			return new Promise((res, rej) => {
				req.g(
					'/api/other/config',
					data => {
						req.setStorage('configRes', JSON.stringify(data));
						this.config = data;
						res(data);
					},
					true
				);
			});
		},
		
		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(){
			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;
					that.getShareImg()
					that.webUrl = that.detaile.linkUrl?that.detaile.linkUrl:''
					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(){
			var dataP = {};
			dataP.type =
				4 //、产品 2、活动 3、未知 4、内容 5、课程 6、老师 7、素材 8、题目 9、资料领取 10、招聘职位 12、用户须知 13、素材 15、医院科室 16、海报 20、医生 21 新闻 23名片
			dataP.behavior = 4; //1、关注 2、收藏 3、点赞 4、浏览 5、确认 6、分享
			dataP.bindId = this.id;
			req.postRequestLoding('/api/v3/behavior/save', dataP, data => {
				
			});
		},
		// 用户行为
		userBehavior() {
			var dataP = {};
			dataP.type =
				4 //、产品 2、活动 3、未知 4、内容 5、课程 6、老师 7、素材 8、题目 9、资料领取 10、招聘职位 12、用户须知 13、素材 15、医院科室 16、海报 20、医生 21 新闻 23名片
			dataP.behavior = 3; //1、关注 2、收藏 3、点赞 4、浏览 5、确认 6、分享
			dataP.bindId = this.id;
			req.postRequestLoding('/api/v3/behavior/save', dataP, data => {
				if(this.detaile.isThumbs){
					this.detaile.thumbsNumber = this.detaile.thumbsNumber-1
				}else{
					this.detaile.thumbsNumber = this.detaile.thumbsNumber+1
				}
				this.detaile.isThumbs = !this.detaile.isThumbs
				if(this.detaile.isThumbs){
					req.saveBehaviorNew(this.id,3,3)
				}else{
					req.saveBehaviorNew(this.id,3,11)
				}
			});
		},
		getContentList() {
			let form = this.form;
			form.cid = this.detaile.cid;
			if(req.getStorage("shareId")){
				form.shareSaleNo = req.getStorage("shareId")
			}
			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);
					}
				}
			});
		},
		closeUpdate(){
			this.isShowUpdate = false
		},
		updateInfo(e){
			this.isUpdateInfo = e;
		},
		updateMobile(e){
			this.isUpdateMobile = e;
		},
		getUpdate() {
			console.log('getUpdate')
			let userInfos = req.getStorage('userInfo')
			// if ((!userInfos.avatar || userInfos.avatar.indexOf('thirdwx.qlogo') > -1 || !userInfos.nickName || userInfos.nickName.indexOf('用户') > -1) ) {
			// 	console.log('没有昵称')
			// 	this.isShowUpdate = true;
			// 	this.isUpdateInfo = true;
			// 	return false;
			// }
			if(!userInfos.mobile){
				console.log('没有手机号')
				this.isShowUpdate = true
				this.isUpdateMobile = true
				return false;
			}
			return true;
		},
	},
	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>