miniprogram-jituan/index/index_back.vue

<template>
	<view class="body">
		<image class="imgStryle" :style=" item.style ? 'width:'+ item.style.w +'px;height:' + item.style.h + 'px' : '' "
			@load="v=>loadIndex(v,i)" @click="() => tonext(item)" v-for="(item,i) in list" :key="i" :src="item.cover"
			mode="scaleToFill"></image>
		<video @loadedmetadata="startPlay" v-if="urlVideo" class="video"
			:style="{width: videoInfo.width + 'px',height: videoInfo.height + 'px', left: videoInfo.left +'px', top: videoInfo.top + 'px'}"
			:src="urlVideo" autoplay :controls="false" :show-play-btn="false" :show-center-play-btn="false"
			:show-fullscreen-btn="false" :show-loading="false" :enable-progress-gesture="false"
			:vslide-gesture-in-fullscreen="false" @ended="ended" @error="ended"></video>
		<view v-if="urlVideo" class="tg" @click="ended">
			跳过
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import config from "../../config/index.js";
	const info = uni.getSystemInfoSync();
	const list = ref([]);
	const urlVideo = ref("");
	const videoInfo = ref({
		width: 0,
		height: 0,
		left: 0,
		top: 0
	})

	uni.request({
		url: config.base + "home.json?" + Date.now(),
		success: r => {
			if (r.statusCode !== 200) return
			list.value = r.data.list || [];
			urlVideo.value = r.data.video || "";
		}
	})

	function loadIndex(v, i) {
		const w = info.windowWidth - 16;
		const h = v.detail.height / v.detail.width * w;
		list.value[i].style = {
			w,
			h
		};
	}

	function tonext(T) {
		T.pageType === "detail" && uni.navigateTo({
			url: "/pages/brief/brief?title=" + T.subTitle + "&page=" + T.page
		});

		T.pageType === "single_row" && uni.navigateTo({
			url: "/pages/single_row/single_row?title=" + T.title + "&url=" + T.headCover + "&page=" + T.page
		})

		T.pageType === "single_list" && uni.navigateTo({
			url: "/pages/single_list/single_list?title=" + T.title + "&url=" + T.headCover + "&page=" + T.page
		})
	}

	function ended() {
		urlVideo.value = "";
	}

	function startPlay(res) {
		const videoInfoFun = res.detail || {};
		let width = 0, height= 0;
		if(videoInfoFun.width < videoInfoFun.height){
			// 宽为短边
			width = info.windowWidth;
			height = info.windowWidth / videoInfoFun.width * videoInfoFun.height
		}else {
			// 高为短边
			height = info.windowHeight;
			width = info.windowHeight / videoInfoFun.height * videoInfoFun.width
		}
		
		// 修改之后在做判断宽高是否小于屏幕
		if (width < info.windowWidth){
			// 宽度不够的话再次伸缩一次
			height = info.windowWidth / width * height;
			width = info.windowWidth;
		}
		if (height < info.windowHeight){
			// 高度不够的话再次伸缩一次
			width = info.windowHeight / height * width;
			height = info.windowHeight
		}
		
		videoInfo.value.width = width;
		videoInfo.value.height = height;
		if (width > info.windowWidth) videoInfo.value.left = (info.windowWidth - width) / 2;
		if (height > info.windowHeight) videoInfo.value.top = (info.windowHeight - height) / 2;
	}
</script>

<style lang="scss">
	.body {
		padding: 1em 0;

		.imgStryle {
			margin: 2px 8px;
			border-radius: 10px;
		}

		.video {
			position: fixed;
			z-index: 9998;
		}

		.tg {
			position: fixed;
			z-index: 9999;
			border-radius: 2em;
			width: 3em;
			height: 1.5em;
			line-height: 1.5em;
			border: 1px solid #fff;
			color: #fff;
			text-align: center;
			top: 3em;
			right: 2em;
			font-size: 16px;
			padding: 2px 4px;
		}
	}
</style>