H5_module/martial/videoPlay/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 style="position: relative;">
					<image style="width: 48rpx;height: 48rpx;margin-right: 30rpx;" src="/static/images/more1.png"
						@click.stop="isShowAdd = !isShowAdd"></image>
					<view class="add-pop" v-if="isShowAdd">
						<view class="add-pop-before">
							<view class="add-pop-li ddflex"
								@click="jumpUrl('/material/shareRecord/shareRecord')">
								<image src="/static/images/m_zfjl.png"></image>
								<view>转发记录</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :style="'height:'+systems.barHeight+'rpx;'"></view>
		
		<view class="ceng" v-if="isShowAdd" @click="isShowAdd = false"></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.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 {
					path = '/martial/video/index'+'?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
				})
			},
			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
						that.isShowPreview = true
						resolve();
					},true);
				})
			},
			
			videoPreviewClose(){
				// this.isShowPreview = false
			},
			
			showShareVideo(){
				this.showShare()
				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);
					});
				});
			},
		},
		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>