OpenDoorManageMini/pages/order/components/xvideo.vue

<template>
	<view class="video_content">
		<view v-if="show" class="popup_content">
			<view class="flex">
				<video id="myVideo" :src="videoUrl" style="width:100%;height: 372rpx; margin: 10rpx 10rpx;"></video>
			</view>
			<view class="flex" style="margin-top: 10rpx;" v-if="showBtn">
				<view>
					<xbutton size='medium' round='25rpx' padding='0rpx 20rpx' bgColor='#2C6FF3' @tap="playVideo(0)">主视频
					</xbutton>
				</view>
				<view style="margin-left: 24rpx;">
					<xbutton size='medium' round='25rpx' padding='0rpx 20rpx' bgColor='#2C6FF3' @tap="playVideo(1)">副视频
					</xbutton>
				</view>
			</view>
		</view>
		<view class="popup_overlay" v-if="show" @click="closeVideoView()"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				videoUrl: null,
			}
		},
		props: {
			showBtn: {
				type: Boolean,
				require: true,
				default: false
			},
			list: {
				type: [Array,String],
				require: true,
				default () {
					return ''
				}
			},
		},
		
		watch:{
			 list:{
				handler(newVal,oldVal){
					if(newVal!=null){
						if(typeof(newVal)=='object'){
							this.videoUrl=newVal[0]
						}else{
							this.videoUrl=newVal
						}
					}
				},
				deep:true,
				immediate:true
			}
		},

		methods: {
			closeVideoView() {
				this.show = false
			},
			
			playVideo(type){
				this.videoUrl=this.list[type]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 700rpx;
		height: 500rpx;
		margin-left: -350rpx;
		margin-top: -250rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}
	
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}
</style>