mp_exhibitor_miniprog/pages/video/index.vue

<template>
	<view class="video-container">
		<nav-bar title="精彩视频" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="true">
			<view class="main-container">
				<view class="video-list">
					<view class="video-item" v-for="(item, index) in videoList" :key="index">
						<image :mode="imageMode" :src="item.cover_url" class="cover-img" />
						<view class="video-play" @tap="videoPlay(item)">
							<view class="iconfont icon-playcircle"></view>
						</view>
					</view>
				</view>
				<van-overlay :show="showOverlay" @tap="onClickHideOverlay">
					<view class="overlay-wrapper">
						<video v-if="videoUrl" :src="videoUrl" controls autoplay loop @tap.stop></video>
					</view>
				</van-overlay>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import VanOverlay from '@/wxcomponents/vant/overlay/index'
	import {
		getDashboardInfo
	} from '@/api'

	export default {
		components: { NavBar, UScrollView, VanOverlay },
		data() {
			return {
				showOverlay: false,
				videoList: [],
				videoUrl: ''
			}
		},
		props: {
			imageMode: {
				type: String,
				default: 'aspectFill' // 参考https://zh.uniapp.dcloud.io/component/image.html
			}
		},
		mounted() {
			this.getVideoData()
		},
		methods: {
			onClickHideOverlay() {
				this.showOverlay = false
			},
			getVideoData() {
				getDashboardInfo('', process.env.CONFERENCE_WEBSITE).then(res => {
					this.videoList = res.data.module3.video
				})
			},
			videoPlay(item) {
				this.videoUrl = item.url
				this.showOverlay = true
			}
		}
	}
</script>

<style lang="scss">
	.video-container {
		.video-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 30rpx;
			
			.video-item {
				width: 100%;
				aspect-ratio: 5/3;
				position: relative;
				border-radius: 14rpx;
				overflow: hidden;
				
				.cover-img {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 1;
				}
				
				.video-play {
					@include display-flex-center;
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin: auto;
					background-color: rgba(229, 117, 25, 0.5);
					z-index: 1;
				
					.iconfont {
						color: #FFFFFF;
						font-size: 50rpx;
					}
				}
			}
		}
		.overlay-wrapper {
			@include display-flex-center;
			height: 100%;
		
			video {
				width: 100%;
			}
		}
	}
</style>