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

<template>
	<view class="container">
		<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="imgLayer" v-show="openControlState">
			<view class="imgLayerContent">
				<image :src="imgPath" show-menu-by-longpress='1' mode="widthFix"></image>
			</view>
			<view class="imgLayerTips">
				<image :src="tipsImgPath" mode="aspectFill"></image>
			</view>
		</view>
		<view class="videoLayer" v-show="!openControlState">
			<view class="videoContent">
				<video id="myVideoBg" :src="videoBgPath" :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="addText">
				<input type="text" class="inputLabel" v-model="inputText" @input="inputChange">
			</view>
			<view class="viewSpan span1">{{inputText[0]}}</view>
			<view class="viewSpan span2">{{inputText[1]}}</view>
			<view class="viewSpan span3">{{inputText[2]}}</view>
			<view class="viewSpan span4">{{inputText[3]}}</view>
			<view class="viewSpan submit" @click="submitText">
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js"
	export default {
		data() {
			return {
				loadPointState:false,
				audioImgA: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/audioOn.png",
				audioImgB: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/audioOff.png",
				audioState: true,
				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading.jpg",
				loadingState: true, //当前加载状态
				loadingOutAnime: false, //加载退场动画
				tipsImgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/tips.png", //用来提示的文字
				openid: "",
				personCount: "", //当前是第几个访问
				imgPath: "", //已经打开的图片数据
				openControlState: false, //是否进行添加还是直接展示
				videoBgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/shouyu/bg2.mp4",
				videoCtx: "",
				inputText: "",
			}
		},
		methods: {
			login() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: async (loginRes) => {
						let res = await request({
							url: "/api/login",
							method: "GET",
							data: {
								code: loginRes.code
							},
						})
						if (res.data.changeState != undefined) {
							this.openControlState = true
							this.loadingOutAnime = true
							let lT = setTimeout(()=>{
								this.loadingState = false
							},2000)
							this.imgPath = `https://dadu.ispush.com/${res.data.imgPath}?t=${new Date().getTime()}`
						} else {
							this.personCount = res.data.person_index + 1

						}
						this.openid = res.data.openid
					}
				});
			},
			loadImgEnd(e){
				this.loadPointState = true
			},
			videoLoadingEnd(ev) {
				let t1 = setTimeout(() => {
					this.loadingOutAnime = true
					this.videoCtx.play()
				}, 1000)
				let t2 = setTimeout(() => {
					this.loadingState = false
					clearTimeout(t2)
				}, 2500)

			},
			createAudio() {
				this.innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext.loop = true
				this.innerAudioContext.src = `${this.$g.baseUrl}/static/shouyu/audio.mp3`
			},
			changeAudio() {
				if (this.audioState) {
					this.innerAudioContext.pause()
				} else {
					this.innerAudioContext.play()
				}
				this.audioState = !this.audioState
			},
			inputChange() {
				if (this.inputText.length > 4) {
					this.inputText = ""
					uni.showToast({
						title: '最多录入四个字',
						duration: 2000
					});
				}
			},
			isChn(str) {
				var reg = /^[\u4E00-\u9FA5]+$/;
				if (!reg.test(str)) {
					return false;
				} else {
					return true;
				}
			},
			async submitText() {
				if (this.inputText.length == 1) {
					this.inputText = ""
					uni.showToast({
						title: '至少录入两个字',
						duration: 2000
					});
					return
				}
				if (this.inputText[0] == "" && this.inputText[1] == "") {
					uni.showToast({
						title: '不能录入空字符',
						duration: 2000
					});
				}
				let isCh = this.isChn(this.inputText)
				if (!isCh) {
					this.inputText = ""
					uni.showToast({
						title: '只能输入中文字符',
						duration: 2000
					});
					return
				}
				uni.showLoading({
					title: '生成中'
				});
				let res = await request({
					url: "/api/createImg",
					method: "GET",
					data: {
						"openid": this.openid,
						"text": this.inputText,
						"count": Number(this.personCount)
					},
				})
				if (res.data.createState != true) {
					uni.showToast({
						title: '网络延迟请重试',
						duration: 2000
					});
					uni.hideLoading();
					return
				}
				uni.hideLoading();
				this.openControlState = true
				this.imgPath = `https://dadu.ispush.com/${res.data.imgPath}?t=${new Date().getTime()}`
			}
		},
		onReady() {
			this.videoCtx = uni.createVideoContext('myVideoBg')
		},
		onLoad() {
			uni.hideHomeButton()
			this.createAudio()
			this.login()
		},
		onHide() {
			this.audioState = false
			this.innerAudioContext.pause()
		},
		onShow() {
			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;
	}

	.container .loading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999999;
		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 1s linear forwards;
	}

	@keyframes loadingOutAnime {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

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

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

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

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

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

	.container .imgLayer {
		position: absolute;
		z-index: 999;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		animation: 1s imgLayerAnime linear forwards;
	}

	@keyframes imgLayerAnime {
		from {
			opacity: 0;
			transform: scale(1.1);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.container .imgLayer .imgLayerContent {
		position: absolute;
		width: 750rpx;
		height: 1624rpx;
		left: 0;
		top: 0;
	}

	.container .imgLayer .imgLayerContent image {
		width: 100%;
		height: 100%;
		will-change: transform;
	}

	.container .imgLayer .imgLayerTips {
		position: absolute;
		left: 390rpx;
		top: 1220rpx;
		width: 323rpx;
		height: 27rpx;
		z-index: 99;
		transform: translateX(-50%);
		animation: 1s imgLayerTipsAnime linear alternate infinite;
		pointer-events: none;
	}

	/* @media screen and (max-height: 1400px) {
		.container .imgLayer .imgLayerTips {
			top: 85%;
		}
	} */

	.container .imgLayer .imgLayerTips image {
		width: 100%;
		height: 100%;
	}

	@keyframes imgLayerTipsAnime {
		from {
			opacity: 0.5;
		}

		to {
			opacity: 1;
		}
	}

	.container .videoLayer {
		position: absolute;
		z-index: 999;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	}

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

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

	.container .videoLayer .addText {
		position: absolute;
		left: 320rpx;
		top: 415rpx;
		width: 155rpx;
		height: 695rpx;
		font-size: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: start;
		box-sizing: border-box;
		z-index: 9999;
	}

	.container .videoLayer .addText .inputLabel {
		position: absolute;
		left: 0;
		top: 0;
		width: 155rpx;
		height: 695rpx;
		opacity: 0;
		color: rgba(0, 0, 0, 0);
	}

	.container .videoLayer .addText .inputLabel input:focus {
		border-color: transparent;
		/* 将边框颜色设置为透明 */
		background-color: #fff;
		/* 将背景色设置为白色 */
		caret-color: transparent;
	}

	.container .videoLayer .viewSpan {
		position: absolute;
		width: 155rpx;
		height: 155rpx;
		left: 318rpx;
		font-size: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container .videoLayer .span1 {
		top: 410rpx;
	}

	.container .videoLayer .span2 {
		top: 590rpx;
	}

	.container .videoLayer .span3 {
		top: 770rpx;
	}

	.container .videoLayer .span4 {
		top: 950rpx;
	}

	.container .videoLayer .submit {
		position: absolute;
		left: 520rpx;
		top: 930rpx;
		width: 80rpx;
		height: 170rpx;
	}
</style>