MoeNovaClient/pages/make/make.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 step1"></image>
			</block>
			<block v-if="step == 2">
				<image src="/static/make/1_12.png" class="avator step2" mode="widthFix"></image>
			</block>
			<block v-if="step == 3">
				<view class="scroll-text step3">
					<text class="scroll-text-content">
						《凌音的二次元世界》
						在二次元的领域中，有一位独特的少女，她名叫凌音。凌音拥有着令人心动的可爱外貌，同时又散发着一种高冷的气质，她的纤细身姿更是增添了几分独特的魅力。
						凌音的性格温柔而婉约，她的安静和内向使她常常沉浸在自己的世界中。她虽然表面上给人一种高冷的感觉，但实际上她是外冷内热的，内心深处充满了温暖和关怀。她的敏感和多愁善感让她对周围的事物有着细腻的感受，也使得她在艺术方面有着独特的领悟力。
						凌音对颜色有着特别的喜好，她钟情于白色和浅蓝色。白色代表着纯洁和无暇，而浅蓝色则给人一种宁静和清新的感觉，这两种颜色恰如她的内心世界，纯净而美好。她热爱冬天，尤其喜欢下雪的日子。雪花纷纷扬扬地飘落，整个世界变得银装素裹，这让她感受到一种宁静和美好，也让她的内心得到了慰藉。
						凌音的爱好丰富多样。她热爱电影，通过电影她可以体验到不同的人生和情感，电影中的每一个画面和情节都能触动她的心灵。摄影也是她的喜好之一，她喜欢用镜头捕捉生活中的美好瞬间，将那些稍纵即逝的美丽定格为永恒。动漫和二次元是她的精神寄托，她沉浸在那个充满奇幻和想象的世界中，寻找着自己的梦想和希望。此外，她也喜欢宅在家里，享受一个人的宁静时光，阅读、思考或者做一些自己喜欢的事情。
						凌音就是这样一个独特的二次元少女，她的存在仿佛是一首优美的诗篇，让人忍不住想要去了解她、接近她。在她的世界里，有着无尽的美好和梦想，等待着她去探索和发现。
					</text>
				</view>
			</block>
			<block v-if="step == 4">
				<text class="cucang step4">
					这纷扰世界，我凌音只在自己的角落，守着内心的宁静与热爱。
				</text>
			</block>
			<block v-if="step == 5">
				<view class="bg-content step5">
					<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 step-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_12.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> -->
		<!-- 新手引导组件 -->
		<novice-guidance :step="guideStep" :tipStyle="{
			background: 'linear-gradient(180deg, #1cbbb4, #0081ff)',
			borderRadius: '12rpx',
			padding: '20rpx',
			boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
		}"></novice-guidance>
	</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: '',
				guideStep: {
					name: "makeGuide",
					guideList: [{
						el: ".step1",
						tips: "这是第一步，选择你的头像",
						next: "下一步",
						style: {
							background: 'linear-gradient(180deg, #1cbbb4, #0081ff)',
							borderRadius: '12rpx',
							padding: '20rpx',
							boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
						}
					},
					{
						el: ".step2",
						tips: "这是第二步，选择你的形象",
						next: "下一步",
						style: {
							background: 'linear-gradient(180deg, #ff6b6b, #ff8e8e)',
							borderRadius: '12rpx',
							padding: '20rpx',
							boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
						}
					},
					{
						el: ".step3",
						tips: "这是第三步，编辑你的个人介绍",
						next: "下一步",
						style: {
							background: 'linear-gradient(180deg, #4facfe, #00f2fe)',
							borderRadius: '12rpx',
							padding: '20rpx',
							boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
						}
					},
					{
						el: ".step4",
						tips: "这是第四步，设置你的出场台词",
						next: "下一步",
						style: {
							background: 'linear-gradient(180deg, #a18cd1, #fbc2eb)',
							borderRadius: '12rpx',
							padding: '20rpx',
							boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
						}
					},
					{
						el: ".step5",
						tips: "这是第五步，选择你的背景音乐",
						next: "下一步",
						style: {
							background: 'linear-gradient(180deg, #84fab0, #8fd3f4)',
							borderRadius: '12rpx',
							padding: '20rpx',
							boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
						}
					},
					{
						el: ".step-btn",
						tips: "点击按钮生成你的专属形象",
						next: "完成",
						style: {
							background: 'linear-gradient(180deg, #f093fb, #f5576c)',
							borderRadius: '12rpx',
							padding: '20rpx',
							boxShadow: '0 4rpx 12rpx rgba(0,0,0,0.1)'
						}
					}]
				}
			}
		},
		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/video.mp4';
			},

			playBg() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.sessionCategory = "soloAmbient";
				this.innerAudioContext.src = 'https://t.yujianmate.com/images/1_12.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 'make.scss';
</style>