H5_module/martial/content/index.vue

<template>
	<view>
		<view class="top-fixed" :style="'height:'+systems.barHeight+'rpx;'">
			<view :style="'height: '+systems.ktxStatusHeight+'rpx;'"></view>
			<view class="ddflex">
				<view class="back ddflex"
					:style="'height: '+systems.navigationHeight+'rpx;line-height: '+systems.navigationHeight+'rpx;'"
					@click="toBack">
					<image src="../static/images/back_black.png" mode="aspectFit"></image>
				</view>
				<view class="fflex" style="text-align: center;margin-left: rpx;"></view>
			</view>
		</view>
		<view :style="'height:'+systems.barHeight+'rpx;'"></view>
		<view class="ceng" v-if="isShowAdd" @click="isShowAdd = false"></view>
		
		
		<view v-if="detaile">
			
			<view style="background-color: #fff;padding: 40rpx 0;">
				<view class="title">{{ detaile.title }}</view>
				<view class="det-sta ddflex">
					<view class="sort" v-if="detaile.cateName">{{detaile.cateName}}</view>
					<view class="sort-line" v-if="detaile.cateName"></view>
					<view class="time" style="color: #5B698F;">
						{{detaile.user&&detaile.user.nickName?detaile.user.nickName:config.CONFIG_PROJECT_TITLE}}
					</view>
					<view class="time" style="margin-left: 10rpx;">
						{{formatTime(detaile.createDate)}}
					</view>
				</view>
				
				<view class="pro" v-if="detaile.params&&detaile.params.product">
					<view class="li ddflex" @click="jumpUrl('/product/detail/detail?id='+detaile.params.product.id)">
						<image :src="detaile.params.product.icon" mode="aspectFill" class="proimg"></image>
						<view class="fflex">
							<view class="proname fflex tovers">{{detaile.params.product.title}}</view>
							<view class="proprice">￥{{detaile.params.product.money}}</view>
							<view class="ope dflex">
								<view class="ope-btn ddflex">购买</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="content">
					<view :class="'viewMore' + (viewMoress?' con-vheight':'')" :style="'max-height:' + height">
						<mp-html :content="detaile.text" :lazy-load="true" @imgtap="choose"></mp-html>
					</view>
					<view class="view-more" @tap="viewMores()" v-if="viewMoress">查看全文</view>
					<!-- <view :class="'viewMore' + (viewMore?'':' con-vheight')">
						<mp-html :content="detaile.text" :lazy-load="true" @imgtap="choose"></mp-html>
					</view>
					<view class="view-more" @tap="viewMores()" v-if="!viewMore">查看全文</view> -->
				</view>
				<view class="bottom-info">
					<view class="bottom-info-browse">浏览 {{detaile.browseCount}}</view>
					<view style="margin-top: 20rpx;">
						<view class="ddflex">
							<image class="bottom-info-logo" :src="config.CONFIG_PROJECT_LOGO"></image>
							<view class="fflex">{{config.CONFIG_PROJECT_TITLE}}</view>
							<view class="bottom-info-option" @click="showShare()">
								<image style="width: 32rpx;height: 32rpx;margin: auto;" src="../static/images/share.png"></image>
								<view>分享</view>
							</view>
							<view class="bottom-info-option" style="margin-left: 50rpx;">
								<image v-if="!detaile.isThumbs" style="width: 32rpx;height: 32rpx;margin: auto;" src="../static/images/dz.png" @click="thumbs(true)"></image>
								<image v-if="detaile.isThumbs" style="width: 32rpx;height: 32rpx;margin: auto;" src="../static/images/dz_h.png" @click="thumbs(false)"></image>
								<view>{{detaile.thumbsCount?detaile.thumbsCount:0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="guwen ddflex" v-if="cardInfo" @click="jumpUrl('/card/index/index?cardId='+cardInfo.id)">
				<image :src="picUrlss+'lvluo/home_guwen.png'" class="guwen-img"></image>
				<view class="fflex">
					<view class="ddflex">
						<image :src="cardInfo.imageMap?cardInfo.imageMap:picUrlss+'lvluo/hulei.png'" class="guwen-user"></image>
						<view class="fflex">
							<view class="guwen-name ddflex">{{cardInfo&&cardInfo.realName?cardInfo.realName:'胡雷'}}</view>
							<text class="guwen-tag">{{cardInfo&&cardInfo.job?cardInfo.job:'绿萝云-诊所私域专家'}}</text>
							<view class="guwen-mobile">{{cardInfo&&cardInfo.phone?cardInfo.phone:'15173158288'}}</view>
						</view>
					</view>
				</view>
				<view class="guwen-ewm">
					<image :src="cardInfo.qrCode?cardInfo.qrCode:picUrlss+'lvluo/wechat.png'" show-menu-by-longpress="true"></image>
					<view>长按扫码添加微信</view>
				</view>
			</view>
			
		</view>
		
		

		<!-- #ifdef H5 -->
		<view class="share-pop" @click="hideSharePop" v-if="isShowSharePop">
			<image src="../static/images/fx-tip1.png"></image>
		</view>
		<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";
export default {
	components: {
		mpHtml,
	},
	data() {
		return {
			picUrlss: req.public.picUrls,
			systems: {},
			isTop: 0,
			isShowAdd: false,
			
			options:{},
			
			code: '',
			rootCode: '',
			detaile: '',
			type: 2, //详情类型：1 普通内容 2 自定义页面内容
			form: {
				page: 1,
				limit: 4,
			},
			height: 'initial',
			viewMoress: false,
			productList: [],
			merchant: {},
			bannerList: [],
			swiperCurrent: 0,
			isShowShare: false,
			bottomPositon: '-100%',
			config:{},
			cardInfo:'',
			
			hideShare: true,
			isShowSharePop: false,
			
			first:true
		};
	},

	onLoad: async function(options) {
		this.options = options
		if (options.appId) req.setStorage('appId', options.appId);
		if (options.x_code_id){
			options = await this.loadCodeParams(options.x_code_id)
		}
		this.PAGE_DATA_INIT_FN({
			BIND_ID:this.options.code
		})
		await req.silenceLogin(this.options.userId);
		this.code = options.code;
		this.rootCode = options.rootCode
		if(options.userId){
			req.setStorage('pidCode', options.userId);
		}
		this.getConfig()
		await this.getDetail();
		setTimeout(async res=>{
			await this.monitor();
		},500)
		if(this.options.userId)
			this.getCardInfo()
	},
	onShow(){
		if(this.options.userId){
			this.getCardInfo()
		}
		if(!this.first){
			this.getDetail();
		}
	},
	onShareAppMessage: async function(options) {
		var content = await this.onShareMessage();
		this.SEND_SHARE_FN()
		return content;
	},
	onReady() {
		// #ifdef H5
		var that = this;
		//初始化分享内容
		setTimeout(async function() {
			var shareContent = await that.onShareMessage();
			if (shareContent) {
				shareContent.path = window.location.origin + shareContent.path;
			}
			that.$refs.wxshare.init(shareContent);
		}, 4 * 1000);
		// #endif
	},
	
	methods: {
		toBack() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack()
			}else{
				uni.switchTab({
					url:'/pages/tabBar/index'
				})
			}
		},
		async onShareMessage(options) {
			let isSolution = '';
			let path = '';
			// #ifndef H5
			isSolution = req.env[req.env.NODE_ENV].isSolution;
			// #endif
			// #ifdef H5
			isSolution = false;
			// #endif
			let userInfo = req.getStorage('userInfo');
			if (isSolution) {
				path = '/share/home/index?appId=' + req.getStorage('appId') + '&userId=' + req.getStorage(
					'userInfo').id;
			} else {
				let page = getCurrentPages()
				let pageCurrent = page[page.length-1]
				path = pageCurrent.route+'?code=' + this.code + '&rootCode=' + this.rootCode + '&isShare=' + true + '&appId=' + req
					.getStorage('appId');
				// console.log(!req.getStorage('userInfo').id);
				if (!userInfo.id) {} else {
					path += '&userId=' + userInfo.id;
				}
				path = this.SHARE_BEHAVIOR_FN({path:path,sendShare:false}).path
			}
			console.log({
				title: this.detaile.title,
				imageUrl: this.detaile.pic,
				path: path
			})
			return {
				title: this.detaile.title,
				imageUrl: this.detaile.pic,
				path: path
			};
		},
		showShare() {
			// console.log(11111,this.hideShare)
			// #ifdef H5 
			this.hideShare = false;
			this.showSharePop();
			console.log('引导分享==')
			// #endif
		},
		showSharePop() {
			this.isShowSharePop = true;
		},
		hideSharePop() {
			this.isShowSharePop = false;
		},
		
		closePop(){
			this.isShowAdd = false
		},
		jumpUrl(url){
			this.isShowAdd = false
			uni.navigateTo({
				url:url
			})
		},
		getConfig() {
			req.getRequest('/api/config', {}, res => {
				this.config = res
			})
		},
		loadCodeParams(scene) {
			let _ts = this;
		
			return new Promise((resolve, reject) => {
				let form = {
					scene: scene
				};
				if (!scene) {
					resolve();
					return false;
				}
		
		
				req.getRequest('/api/code/params', form, data => {
					let res = JSON.parse(data.scene)
					for(let key in res){
						this.options[key] = res[key]
					}
					resolve(res);
				});
			});
		},
		monitor() {
			let that = this;
			let system = uni.getSystemInfoSync();
			let query = uni.createSelectorQuery();
			query.select('.viewMore').boundingClientRect(data=>{
				if(data){
					let height = data.height;
					if(height > system.windowHeight*2) {
						that.height = system.windowHeight *1.8 + 'px';
						that.viewMoress = true
					}
				}
			}).exec();
		},
		viewMores(){
			this.height = 'initial';
			this.viewMoress = false;
		},
		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/v3/material/library/detail';
			return new Promise((resolve,reject)=>{
				req.getRequest(apiUrl,{ code: that.code },async res => {
					that.detaile = res;
					this.first = false
					resolve();
				},true);
			})
		},
		thumbs(type){
			if(req.isLogins(true)){
				if(type){//点赞
					this.SEND_COLLECT_FN({IS_THUMBS:true})
					this.detaile.isThumbs = true
					this.detaile.thumbsCount++
				}else{//取消点赞
					this.SEND_COLLECT_FN({IS_THUMBS:false})
					this.detaile.isThumbs = false
					this.detaile.thumbsCount--
				}
			}
		},
		hasAppAuthPermissions(key) {
			return req.hasAppAuthPermissions(key)
		},
		toCard() {
			this.jumpUrl('/card/index/index');
		},
		getCardInfo() {
			var url = '';
			var dataP = {};
			url = '/api/v3/visiting/card/user';
			dataP.userId = this.options.userId;
			req.getRequest(url, dataP, data => {
				this.cardInfo = data;
			}, false);
		},
		formatTime(time){
			let date = new Date(time.replace(/-/g,'/'))
			return util.formatTimeComm(date,'Y.M.D h:m')
		},
	},
	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;
		}
	},
	
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	},
};
</script>
<style>
@import './index.css';
</style>