ydd-quyuan-minapp/pages/index/index.vue

<template>
	<view class="container">
		<view v-if="showPlayIcon" class="wx-play-mask" @click="handlePlay">
			<image class="wx-play-mask__icon" src="../../static/play.png" />
		</view>

		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
			<view class="loadingBox" v-if="loadPointState">
				<span class="span1"></span>
				<span class="span2"></span>
				<span class="span3"></span>
				<span class="span4"></span>
				<span class="span5"></span>
				<span class="span6"></span>
			</view>
			<image class="loadingText" @load="loadImgEnd" :src="loadingText" mode="aspectFit"></image>
		</view>
		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
		</view>
		<view class="videoContent">
			<video id="myVideoBg" :src="videoBgPath" :loop="true" :controls="false" :muted="true" objectFit='cover'
				:show-progress='false' :enable-progress-gesture='false' :show-play-btn='false'
				:show-fullscreen-btn='false' @loadedmetadata="videoLoadingEnd"></video>
		</view>
		<view class="tips" v-show="tipsState">
			<image :src="tips" mode="aspectFit"></image>
		</view>
		<view class="imgLayer">
			<view class="imgMask" v-if="imgShowIndex!='close'">
			</view>
			<view class="imgItem" v-for="(item,index) in personList" :key="item.name"
				:style="{width:item.width,height:item.height,left:item.x,top:item.y}" v-show="imgShowIndex==item.name">
				<image :src="item.url" mode="aspectFill"></image>
			</view>
		</view>
		<view class="clickLayer">
			<view class="clickItem clickItem1" @click="openImg('person1')">

			</view>
			<view class="clickItem clickItem2" @click="openImg('person2')">

			</view>
			<view class="clickItem clickItem3" @click="openImg('person3')">

			</view>
			<view class="clickItem clickItem4" @click="openImg('person4')">

			</view>
			<view class="clickItem clickItem5" @click="openImg('person5')">

			</view>
		</view>
		<view class="textLayer">
			<view class="textItem" v-for="(item,index) in textList" :key="item.name" v-show="imgShowIndex==item.name">
				<image :src="item.url" mode="aspectFill"></image>
			</view>
		</view>
		<view class="closeBtn" v-show="imgShowIndex!='close'" @click="closeContent">
		</view>
	</view>
</template>

<script>
	const ua = window.navigator.userAgent.toLowerCase()

	export default {
		data() {
			return {
				showPlayIcon: ua.match(/MicroMessenger/i) == 'micromessenger',
				loadPointState: false,
				logoImg: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/logo.png",
				loadingState: true,
				loadingOutAnime: false, //加载退场动画
				videoCtx: "",
				tipsState: true,
				tips: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/tips.png",
				audioImgA: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/audioOn.png",
				audioImgB: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/audioOff.png",
				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading.jpg",
				audioUrl: "",
				webUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/api/getHtml",
				audioState: false,
				innerAudioContext: "",
				imgShowIndex: "close",
				videoBgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/video/bg.mp4",
				personList: [{
						"name": "person1",
						"width": "180rpx",
						"height": "461rpx",
						"x": "-10rpx",
						"y": "980rpx",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/1.png"
					},
					{
						"name": "person2",
						"width": "192rpx",
						"height": "466rpx",
						"x": "130rpx",
						"y": "980rpx",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/2.png"
					},
					{
						"name": "person3",
						"width": "246rpx",
						"height": "474rpx",
						"x": "278rpx",
						"y": "950rpx",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/3.png"
					},
					{
						"name": "person4",
						"width": "179rpx",
						"height": "466rpx",
						"x": "485rpx",
						"y": "972rpx",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/4.png"
					},
					{
						"name": "person5",
						"width": "148rpx",
						"height": "458rpx",
						"x": "610rpx",
						"y": "980rpx",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/person/5.png"
					}
				],
				textList: [{
						"name": "person1",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text1A.png"
					},
					{
						"name": "person2",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text2A.png"
					},
					{
						"name": "person3",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text3A.png"
					},
					{
						"name": "person4",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text4A.png"
					},
					{
						"name": "person5",
						"url": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/img/text5A.png"
					}
				]
			}
		},
		methods: {
			loadImgEnd(e) {
				this.loadPointState = true
			},
			createAudio() {
				this.innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext.loop = true
				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhongduxiu/audio/audio.mp3`
				this.innerAudioContext.play()
			},
			changeAudio() {
				if (this.audioState) {
					this.innerAudioContext.pause()
				} else {
					this.innerAudioContext.play()
				}
				this.audioState = !this.audioState
			},
			videoLoadingEnd() {
				this.loadingOutAnime = true
				this.videoCtx.play()
				let t = setTimeout(() => {
					this.loadingState = false
					clearTimeout(t)
				}, 600)
			},
			openImg(index) {
				this.imgShowIndex = index
				this.tipsState = false
			},
			closeContent() {
				this.imgShowIndex = 'close'
			},
			handlePlay() {
				this.videoCtx.play()
				this.changeAudio()
				this.showPlayIcon = false
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
			this.videoCtx = uni.createVideoContext('myVideoBg')
			this.createAudio()
		},
		onHide() {
			this.audioState = false
		},
		onShow() {
			if (this.showPlayIcon) return
			this.audioState = true
			if (this.innerAudioContext) {
				this.innerAudioContext.play()
			}

		},
		onUnload() {
			this.innerAudioContext.stop()
			this.innerAudioContext.destroy()
		}
	}
</script>

<style scoped>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.wx-play-mask {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 1624rpx;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}
	.wx-play-mask__icon {
		width: 128upx;
		height: 128upx;
	}
	@media screen and (max-height: 750px) {
		.container {
			overflow: visible !important;
		}

		.container .tips {
			top: 1300rpx;
		}
	}

	.container .loading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9998;
		background: #4c4c4c;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container .loading .loadingBox {
		position: absolute;
		width: 105rpx;
		height: 41rpx;
		display: flex;
		top: 345rpx;
		left: 459rpx;
		z-index: 1;
		opacity: 0;
		justify-content: space-around;
		align-items: center;
		animation: 0.8s loadingBoxAnime 0.5s linear forwards;
	}

	@keyframes loadingBoxAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.container .loading .loadingBox span {
		width: 8rpx;
		height: 8rpx;
		background: #c8841a;
		border-radius: 50%;
	}

	.container .loading .loadingBox .span1 {
		animation: 0.8s spanAnime 0.2s alternate infinite;
	}

	.container .loading .loadingBox .span2 {
		animation: 0.8s spanAnime 0.4s alternate infinite;
	}

	.container .loading .loadingBox .span3 {
		animation: 0.8s spanAnime 0.6s alternate infinite;
	}

	.container .loading .loadingBox .span4 {
		animation: 0.8s spanAnime 0.8s alternate infinite;
	}

	.container .loading .loadingBox .span5 {
		animation: 0.8s spanAnime 1s alternate infinite;
	}

	.container .loading .loadingBox .span6 {
		animation: 0.8s spanAnime 1.2s alternate infinite;
	}

	@keyframes spanAnime {
		from {
			transform: scale(1.5);
		}

		to {
			transform: scale(0.7);
		}
	}


	.container .loading .loadingBox .loadingRotate {
		animation: 1s loadingRotateAnime linear infinite;
	}

	.container .loading .loadingText {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 750rpx;
		height: 1624rpx;
		will-change: transform;
	}

	@keyframes loadingRotateAnime {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.container .loadingOut {
		animation: 1s loadingOutAnime linear forwards;
	}

	@keyframes loadingOutAnime {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.container .tips {
		position: absolute;
		width: 750rpx;
		height: 318rpx;
		/* top: 1300rpx; */
		bottom: 0;
		left: 0;
		opacity: 0;
		animation: 3s tipsAnime 1s linear alternate infinite;
	}

	.container .tips image {
		width: 100%;
		height: 100%;
	}

	@keyframes tipsAnime {
		from {
			opacity: 0.5;
		}

		to {
			opacity: 1;
		}
	}


	.container .changeAudio {
		position: absolute;
		right: 45rpx;
		top: 45rpx;
		width: 47rpx;
		height: 47rpx;
		z-index: 999999;
	}

	.container .changeAudio image {
		width: 100%;
		height: 100%;
	}

	.container .changeAudioPlay {
		animation: 1s changeAudioAnime linear infinite;
	}

	@keyframes changeAudioAnime {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.videoContent {
		width: 750rpx;
		height: 1624rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.videoContent video {
		width: 100%;
		height: 100%;
	}

	.imgLayer {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.imgLayer .imgMask {
		width: 750rpx;
		height: 1624rpx;
		background: rgba(0, 0, 0, 0.6);
		opacity: 0;
		animation: 1s imgMaskAnime linear forwards;
	}

	@keyframes imgMaskAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.imgLayer .imgItem {
		position: absolute;
		animation: 0.5s imgItemAnime linear forwards;
	}

	@keyframes imgItemAnime {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.05);
		}
	}

	.imgLayer .imgItem image {
		width: 100%;
		height: 100%;
	}

	.clickLayer {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.clickLayer .clickItem {
		width: 200rpx;
		height: 150rpx;
		position: absolute;
		/* 		background: pink; */
		z-index: 9999;
	}

	.clickLayer .clickItem1 {
		width: 150rpx;
		height: 460rpx;
		left: 0rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem2 {
		width: 160rpx;
		height: 460rpx;
		left: 152rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem3 {
		width: 170rpx;
		height: 460rpx;
		left: 315rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem4 {
		width: 140rpx;
		height: 460rpx;
		left: 486rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem5 {
		width: 123rpx;
		height: 460rpx;
		left: 628rpx;
		top: 970rpx;
	}

	.textLayer {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 1624rpx;
		z-index: 999;
	}

	.textLayer .textItem {
		position: absolute;
		width: 643rpx;
		height: 372rpx;
		top: 525rpx;
		left: 50%;
		opacity: 0;
		transform: translateX(-50%);
		animation: 0.5s textItemAnime 1s linear forwards;
	}

	@keyframes textItemAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.textLayer .textItem image {
		width: 100%;
		height: 100%;
	}

	.closeBtn {
		position: absolute;
		z-index: 99999;
		top: 525rpx;
		left: 635rpx;
		width: 60rpx;
		height: 60rpx;
		opacity: 0;
		animation: 0.5s textItemAnime linear 1s forwards;
	}
</style>