MoeNovaClient/pages/make/make2.vue

<template>
	<view class="setps-container">
		<image src="/static/icon/icon-11.png" class="setps-container-title_image"></image>
		<image src="/static/me/backup.png" class="backup" @click="backup"></image>
		<view class="setps-container-top">
			<text class="setps-container-top_title">STEP {{step}}</text>
			<view class="setps-container-top_line">
				<view class="setps-container-top_line__lineTow" v-if="step == 1"></view>
				<view class="setps-container-top_line__lineTow2" v-if="step == 2"></view>
				<view class="setps-container-top_line__lineTow3" v-if="step == 3"></view>
				<view class="setps-container-top_line__lineTow4" v-if="step == 4"></view>
				<view class="setps-container-top_line__lineTow5" v-if="step == 5"></view>
			</view>
			<text class="setps-container-top_desc">生成个人形象</text>
		</view>
		<view class="setps-container-center">
			<block v-if="step == 1">
				<image src="/static/me/xinxiang.png" class="avator"></image>
			</block>
			<block v-if="step == 2">
				<image src="/static/make/1_13.png" class="avator" mode="widthFix"></image>
			</block>
			<block v-if="step == 3">
				<view class="scroll-text">
					<text class="scroll-text-content">
						在二次元的世界里，有一个充满活力的少女，她叫艾丽。她的形象可爱动人，带着泡泡玛特般的独特魅力。
						艾丽是一个热情洋溢的女孩，她的乐天性格让她总是看到事情积极的一面。无论面对何种困难，她都能保持着勇敢的心态，积极地去寻找解决问题的方法。她的活泼与积极仿佛是一道阳光，照亮了周围的人，给大家带来无尽的欢乐和力量。
						正义在艾丽的心中占据着重要的位置，她总是愿意挺身而出，为了公平和正义而努力。她的这种品质使她在朋友们中备受尊敬和喜爱。
						艾丽对夏天有着特别的喜爱，她觉得夏天是充满活力和热情的季节。而海边则是她最喜欢的地方之一，那广阔的大海、柔软的沙滩和温暖的阳光，让她感到无比的放松和愉悦。
						运动是艾丽生活中不可或缺的一部分，她尤其热爱网球和乒乓球。在球场上，她尽情地挥洒着汗水，展现出自己的活力和技巧。她积极参加各种比赛，不断挑战自己，追求更高的水平。除了亲自参与运动，艾丽也非常喜欢观看体育赛事。她会为运动员们的精彩表现欢呼喝彩，感受到体育精神的魅力。
						艾丽的存在就像一个小太阳，她的热情、乐天、勇敢、活泼、积极和正义，让她成为了一个令人难以忘怀的二次元少女。她在自己热爱的领域中不断探索和成长，用自己的阳光感染着身边的每一个人。
					</text>
				</view>
			</block>
			<block v-if="step == 4">
				<text class="cucang">
					艾丽登场，带着阳光，传递快乐与力量！
				</text>
			</block>
			<block v-if="step == 5">
				<view class="bg-content">
					<image src="/static/make/music.png" class="avator" mode="widthFix"></image>
				</view>
			</block>


			<!-- <view class="avator"></view> -->
			<!-- <swiper class="swiper" :current="tabCurrentIndex" duration="300">
				<swiper-item class="swiper-item">
					
				</swiper-item>
			</swiper> -->
			<!-- <setp-a></setp-a> -->
		</view>
		<view class="setps-container-bottom">
			<text class="setps-container-bottom__tips"></text>
			<view class="setps-container-bottom__btn" @click="next">{{btnName}}<text>(100彩豆)</text></view>
		</view>
		<view class="pop" v-if="step == 9">
			<view class="blurred-background"></view>

			<!-- <view class="video-container">
				<view class="video-text">这纷扰世界，我凌音只在自己的角落，守着内心的宁静与热爱。</view>
				
			</view> -->
			<image src="/static/make/1_13.png" class="xinxiang" mode="aspectFill"></image>
			<image src="/static/make/play_video.png" class="play_video" mode="widthFix" @click="showVideo()"></image>

			<block v-if="video_url != ''">
				<video id="myVideo" autoplay="true" :src="video_url" style="width:100%;height:100%;z-index: 88;"
					loop="true"></video>
			</block>

			<image src="/static/me/backup.png" class="backup" @click="backup"></image>
			<view class="cucang">
				艾丽登场，带着阳光，传递快乐与力量！
			</view>

			<view class="scroll-text">
				<text class="scroll-text-content">
					在二次元的世界里，有一个充满活力的少女，她叫艾丽。她的形象可爱动人，带着泡泡玛特般的独特魅力。
					艾丽是一个热情洋溢的女孩，她的乐天性格让她总是看到事情积极的一面。无论面对何种困难，她都能保持着勇敢的心态，积极地去寻找解决问题的方法。她的活泼与积极仿佛是一道阳光，照亮了周围的人，给大家带来无尽的欢乐和力量。
					正义在艾丽的心中占据着重要的位置，她总是愿意挺身而出，为了公平和正义而努力。她的这种品质使她在朋友们中备受尊敬和喜爱。
					艾丽对夏天有着特别的喜爱，她觉得夏天是充满活力和热情的季节。而海边则是她最喜欢的地方之一，那广阔的大海、柔软的沙滩和温暖的阳光，让她感到无比的放松和愉悦。
					运动是艾丽生活中不可或缺的一部分，她尤其热爱网球和乒乓球。在球场上，她尽情地挥洒着汗水，展现出自己的活力和技巧。她积极参加各种比赛，不断挑战自己，追求更高的水平。除了亲自参与运动，艾丽也非常喜欢观看体育赛事。她会为运动员们的精彩表现欢呼喝彩，感受到体育精神的魅力。
					艾丽的存在就像一个小太阳，她的热情、乐天、勇敢、活泼、积极和正义，让她成为了一个令人难以忘怀的二次元少女。她在自己热爱的领域中不断探索和成长，用自己的阳光感染着身边的每一个人。
				</text>
			</view>
		</view>
		<!-- <modal ref="modal" content-text="注册完成后将无法更改生日，为了良好的使用体验，请慎重选择！"></modal> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				innerAudioContext: null,
				tabCurrentIndex: 0,
				step: 1,
				btnName: '生成形象',
				danmuList: [{
						text: '这纷扰世界',
						color: '#ff0000',
						time: 1
					},
					{
						text: '我凌音只在自己的角落',
						color: '#ff00ff',
						time: 2
					},
					{
						text: '守着内心的宁静与热爱',
						color: '#ff00ff',
						time: 3
					}
				],
				video_url: '',

			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad() {
			let that = this;
			// setTimeout(function() {
			// 	that.playBg();
			// }, 2000);
		},
		onHide() {
			if (this.innerAudioContext != null) {
				try {
					this.innerAudioContext.pause();
					this.innerAudioContext.destroy()
					this.innerAudioContext = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		onUnload() {
			if (this.innerAudioContext != null) {
				try {
					this.innerAudioContext.pause();
					this.innerAudioContext.destroy()
					this.innerAudioContext = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		methods: {
			backup() {
				if (this.innerAudioContext != null) {
					try {
						this.innerAudioContext.pause();
						this.innerAudioContext.destroy()
						this.innerAudioContext = null
					} catch (e) {
						//TODO handle the exception
					}
				}
				// uni.navigateBack({
				// 	delta: 1
				// });
				// uni.switchTab({
				// 	url: '/pages/make/index'
				// })
				uni.navigateBack();
			},
			next() {
				// this.$refs.modal.open()
				if (this.step == 1) {
					uni.showLoading({});
					let that = this;
					setTimeout(function() {
						that.showStep2();
					}, 1000);
				} else if (this.step == 2) {
					uni.showLoading({});
					let that = this;
					setTimeout(function() {
						that.showStep3();
					}, 1000);

				} else if (this.step == 3) {
					uni.showLoading({});
					let that = this;
					setTimeout(function() {
						that.showStep4();
					}, 1000);

				} else if (this.step == 4) {
					uni.showLoading({});
					let that = this;
					setTimeout(function() {
						that.showStep5();
					}, 1000);

				} else if (this.step == 5) {
					uni.showLoading({});
					let that = this;
					setTimeout(function() {
						that.step = 9;
						that.playBg();
						uni.hideLoading();
					}, 1000);

				} else {
					// this.step = 5;
					// uni.redirectTo({
					// 	url:'/pages/make/'
					// })
					// this.playBg();
				}
			},
			showStep2() {
				uni.hideLoading();
				this.step = 2;
				this.btnName = "生成背景";
			},
			showStep3() {
				uni.hideLoading();
				this.step = 3;
				this.btnName = "生成出场台词";
			},
			showStep4() {
				uni.hideLoading();
				this.step = 4;
				this.btnName = "生成音乐";
			},
			showStep5() {
				uni.hideLoading();
				this.step = 5;
				this.btnName = "查看形象";
			},
			showVideo() {
				this.video_url = '/static/make/video2.mp4';
			},

			playBg() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.sessionCategory = "soloAmbient";
				this.innerAudioContext.src = 'https://e.zhichao.art/images/1_13.mp3';
				// console.log('this.innerAudioContext',this.innerAudioContext);
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					// console.log(res.errMsg);
					// console.log(res.errCode);
				});
				let self = this;
				setTimeout(function() {
					if (self.innerAudioContext != null) {
						// if(self.innerAudioContext.paused) {
						// }
						// self.innerAudioContext.play();
					}
				}, 1000);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'make2.scss';
</style>