mp_exhibitor_miniprog/pages/video/index.vue

<template>
	<page-layout 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">
						<view class="video-box">
							<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 class="video-title" v-if="item.title">
							{{item.title}}
						</view>
						<view class="video-title" v-else>
							视频标题
						</view>
					</view>
				</view>
				<van-overlay :show="showOverlay" @tap="onClickHideOverlay">
					<view class="overlay-wrapper" v-if="showOverlay">
            <view class="iconfont icon-Cancel"></view>
						<video v-if="videoUrl" :src="videoUrl" controls autoplay loop @tap.stop></video>
					</view>
				</van-overlay>
			</view>
		</u-scroll-view>
		<float-button></float-button>
		<van-dialog id="van-dialog" />
	</page-layout>
</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 floatButton from "@/components/layout/float-button"
	import {
		getDashboardInfo
	} from '@/api'
	import PageLayout from "@/components/layout/page-layout";

	export default {
		components: {
			PageLayout,
			NavBar,
			UScrollView,
			VanOverlay,
			floatButton
		},
		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
					console.log(this.videoList);
				})
			},
			videoPlay(item) {
				this.videoUrl = item.url
				this.showOverlay = true
			}
		}
	}
</script>

<style lang="scss">
	.video-container {
		.video-list {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 40rpx;

			.video-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				grid-gap: 20rpx;
        padding: 40rpx;
        background: #ffffff;
        box-shadow:  5rpx 5rpx 10rpx #cccccc;
        //border: 1px dashed #eeeeee;
        border-radius: 10rpx;
				.video-box {
					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%;
      .iconfont {
        color: #ffffff;
        font-size: 86rpx;
        position: absolute;
        right: 20rpx;
        top: 30%;
        z-index: 9;
      }
			video {
				width: 100%;
			}
		}
	}
</style>