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">
            <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>
    <contact-us :show.sync="showContactUs" :qrcode_url="q_url" />
    <float-button @custom-event="updateContactStatus()"></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 ContactUs from '@/pages/index/components/contact-us.vue'
	import {
		getDashboardInfo
	} from '@/api'
  import PageLayout from "@/components/layout/page-layout";

	export default {
		components: {
      PageLayout,
			NavBar,
			UScrollView,
			VanOverlay,
			floatButton,
			ContactUs
		},
		data() {
			return {
				showOverlay: false,
				videoList: [],
				videoUrl: '',
				showContactUs: false,
				q_url: ''
			}
		},
		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
			},
			updateContactStatus(data) {
				this.showContactUs = data.showContactUs
				this.q_url = data.q_url
			}
		}
	}
</script>

<style lang="scss">
	.video-container {
		.video-list {
			display: grid;
			grid-template-columns: 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>