H5_module/martial/video/index.vue

<template>
	<view v-if="showPage">
		<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>
		
		<!-- click="isShowPreview = true" -->
		<view class="video dflex" @click="jumpUrl('/martial/videoPlay/index?code='+detaile.code+'&rootCode='+detaile.rootCode)">
			<image :src="detaile.pic" mode="aspectFit"></image>
			<image class="video-play" src="../static/images/m_play.png"></image>
			<!-- <video @click="isShowPreview = true"></video> -->
		</view>
		<view class="content">
			<view class="tit dflex">
				{{detaile.title}}
			</view>
			<view class="con">
				<rich-text :nodes="removeHtml(detaile.brief)"></rich-text>
			</view>
			
			<view class="pro" v-if="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 ddflex">
						<view class="proname fflex">{{detaile.params.product.title}}</view>
						<view class="ope dflex">
							<view class="ope-btn ddflex">视频同款</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="bottom-info">
			<view class="bottom-info-browse">{{formatTime(detaile.createDate)}} 浏览 {{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">{{detaile.user&&detaile.user.nickName?detaile.user.nickName: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>
		
		
		<videoPreview v-if="isShowPreview" :material="detaile" :content="removeHtml(detaile.brief)" :src="detaile.params.video.playUrl" :product="detaile.params.product?detaile.params.product:null" @videoPreviewClose="videoPreviewClose" @videoPreviewClick="showShareVideo"></videoPreview>
	
		<!-- #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 req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	const util = require('../../utils/util.js');
	var app = getApp();
	import videoPreview from '../components/videoPreview/index.vue';

	export default {
		components: {
			videoPreview
		},
		data() {
			return {
				systems: {},
				isTop: 0,
				isShowAdd: false,
				showPage:false,
				content: "",
				
				options:{},
				
				isShowShare: false,
				bottomPositon: '-100%',
				
				isShowPreview:false,
				previewIndex:0,
				
				isShowTs:false,
				
				code: '',
				rootCode: '',
				detaile:{},
				
				config:{},
				
				hideShare: true,
				isShowSharePop: false,
			};
		},
		async onLoad(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
			this.getConfig()
			await this.getDetail();
		},
		onReachBottom: function() {},
		
		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)
				// #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
				})
			},
			removeHtml(text) {
				text = text.replace(/\r\n/g, "<br>")
				text = text.replace(/\n/g, "<br>");
				text = text.replace(/↵/g, "<br>");
				return text
			},
			removeText(text) {
				text = text.replace(/<br\/>/g, "\r\n")
				text = text.replace(/<br>/g, "\r\n")
				return text
			},

			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;
						that.showPage = true
						resolve();
					},true);
				})
			},
			
			videoPreviewClose(){
				this.isShowPreview = false
			},
			
			showShareVideo(){
				this.isShowShare = true
				this.bottomPositon = 0
			},
			hideShareVideo(){
				this.isShowShare = false
				this.bottomPositon = '-100%'
			},
			formatTime(time){
				let date = new Date(time.replace(/-/g,'/'))
				return util.formatTimeComm(date,'Y.M.D')
			},
			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);
					});
				});
			},
			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--
					}
				}
			},
		},
		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>