h5-webgl-program/src/components/newBottomCom/viewAI/viewAI.vue

<template src="./viewAI.html">

</template>
<script>
	const util = require('@/utils/util.js').default;
	import {
		MessageBox
	} from 'mint-ui';
	import {
		Indicator
	} from 'mint-ui';
	import {
		Toast
	} from 'mint-ui';
	import lottie from "lottie-web"; //lottie
	// import commonMethod from '@/common/commonMethod.js';
	// import touchHandle from '@/mixins/touchHandle.js';
	// import requestConfig from '@/static/lib/requestConfig';

	export default {
		data: function() {
			return {
				leftList: [],
				rightList: [],
				musicList: [], //音乐列表
				dataList: [],
				tabIndex: 0, //当前选中的tab序号
				selectIndex: -1,
				peopleIndex: -1,
				petIndex: -1,
				musicIndex: -1,
				specialIndex: 1,
				specialList:[
					{
						id:1,
						url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/gold.json',
						title:'金光闪闪',
					},
					{
						id:2,
						url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/fireworks.json',
						title:'烟花',
					},
					{
						id:3,
						url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/coloreRibbon.json',
						title:'彩带',
					},
				],
				hasRedBox:false,	//是否添加了红包
				limit:20,
				videoId:'',	//上传视频的id
				videoUrl:'',	//处理好的视频地址
				progress:0,	//进度条
				ktProgress:0,	//抠图进度条
				showPersonView:false,	//是否显示个人形象提示弹窗
				showPopView:false,		//是否显示确认取消框
				uploadStatus:0,	//视频处理的状态 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
				count:0,		//结果请求次数
				timeOut:90000,	//超时时间
				outTimer:null,	//延时处理对象
				timer:null,		//轮询对象
				widthHeight:'',	//用户上传视频尺寸
				stopFlag:false,	//停止上传动作
				cancelTokenSource:null,	//取消上传的操作对象
				repeartFlag:false,	//防止重复点击
			}
		},
		props: {
			relationId: {
				type: String,
				default: '',
			},
			amount: {
				type: String,
				default: '',
			},
		},
		watch: {
			relationId(newVal, oldVal) {
				if (newVal == null) {
					return;
				}
				console.log("当前空间数据relationId:", newVal);
				this.tabIndex = 2;//有红包时默认切换为红包
				if(!this.hasRedBox){
					setTimeout(()=>{
						this.addRedBox();//添加红包
					},500)
					this.$nextTick(() => {
						// 播放lottie动画
						lottie.destroy("markLoading");
						var element = document.getElementById("special-img");
						this.anim = lottie.loadAnimation({
							container: element,
							name: "markLoading",
							renderer: "svg",
							loop: true,
							autoplay: true,
							path: this.specialList[this.specialIndex].url, //动画json
						});
					});
				}
				// this.curSpaceArea = parseFloat(
				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
				// ).toFixed(2);
				// this.getOverallArrangementDetailsList();
			},
		},
		// mixins: [touchHandle],
		async mounted() {
			// await this.getCityHouseList();		
			console.warn("***viewAI***")
			Indicator.open('加载中...');
			this.getDatalist(0);
			this.getDatalist(1);
			this.getDatalist(3);
			// this.getRelationInfo();//获取场景信息
		},
		computed: {
			userId() {
				return this.$store.state.userId;
			},
		},
		// 页面被展示时执行
		onPageShow: function() {

		},
		//页面被隐藏时执行
		onPageHide: function() {
			// console.warn("***detached-hide***")
		},
		methods: {
			format(percentage) {
				let text = "上传中";
				if(this.uploadStatus==1){
					text = "上传中";
				}else if(this.uploadStatus==2){
					text = "抠图中";
				}
				return `${text}\n${percentage}%`;
			},
			resolveIndex(index) {
				this.selectIndex = index || 0;
			},
			catchTapEvent:function(){
				return false;
			},
			specialChange(index) {
				if (this.specialIndex == index) {
					return false;
				}
				this.specialIndex = index;
				this.$nextTick(() => {
					// 播放lottie动画
					lottie.destroy("markLoading");
					var element = document.getElementById("special-img");
					this.anim = lottie.loadAnimation({
						container: element,
						name: "markLoading",
						renderer: "svg",
						loop: true,
						autoplay: true,
						path: this.specialList[this.specialIndex].url, //动画json
					});
				});
			},
			tabChange(index) {
				if (this.tabIndex == index) {
					return false;
				}
				if (this.$parent.repeatFlag == true) {
					Toast({
						message: '加载中...请稍后再试',
					});
					return false
				}
				this.tabIndex = index;
				this.$emit("tabChange", this.tabIndex); //通知页面，户型大类发生了变更
				if(this.tabIndex==2 && this.specialIndex>-1){
					if(!this.hasRedBox){
						this.addRedBox();//添加红包
					}
					this.$nextTick(() => {
						// 播放lottie动画
						lottie.destroy("markLoading");
						var element = document.getElementById("special-img");
						this.anim = lottie.loadAnimation({
							container: element,
							name: "markLoading",
							renderer: "svg",
							loop: true,
							autoplay: true,
							path: this.specialList[this.specialIndex].url, //动画json
						});
					});
				}
			},
			initStatus(){
				this.progress = 0;
				this.ktProgress = 0;
				this.count = 0;
				this.videoUrl = '';
				this.widthHeight = '';
				this.leftList[0].icon = '';
				this.leftList[0].url = '';
				this.uploadStatus = 0;//处理完毕
			},
			uploadImgObj(e,form,type=1){
				this.stopFlag = false;//上传开始时，开启上传
				if(type==2){
					this.initStatus();//重置上传状态到初始值
				}
				//上传图片
				var file = e.target.files[0];
				var fileSize = file.size / 1024 / 1024;
				// alert('**文件**' + e.target.value + "-fileName=" + file.name);
				if (!/\.(MP4|mp4|MOV|mov)$/.test(e.target.value)) {
					this.$message.warning('文件类型必须是mp4或者mov');
					var videoForm = document.getElementById(form); //获取表单对象
					videoForm && videoForm.reset(); // 重置表单
					return false
				}
				if (fileSize > this.limit) {
					this.$message.warning('您的上传的视频过大，请低于' + this.limit + 'MB');
					var videoForm = document.getElementById(form); //获取表单对象
					videoForm && videoForm.reset(); // 重置表单
					return false
				}
				if (file.name.length > 100) {
					this.$message.warning('文件名过长，请不要超过100个字符');
					var videoForm = document.getElementById(form); //获取表单对象
					videoForm && videoForm.reset(); // 重置表单
					return false;
				}
				if(this.$parent.isIOS){//IOS则直接上传
					// let reader = new FileReader();
					// reader.onload = (event) => {
					// 	alert("onloadedmetadata0")
					// 	let video = document.getElementById('videoPlayer');
					// 	video.setAttribute("crossOrigin", "Anonymous");
					// 	video.src = event.target.result;
					// 	video.controls = false;
					// 	video.autoplay = true;
					// 	video.preload = 'auto';
					// 	video.setAttribute('webkit-playsinline', true);
					// 	video.setAttribute('playsinline', true);
					// 	video.load();
					// 	// video.play();
					// 	video.onloadedmetadata = (event) => {
					// 		alert("onloadedmetadata1")
					// 		if(!this.stopFlag){
					// 			var item = {};
					// 			item.file = file;
					// 			console.warn("***uploadImgObj***",file)
					// 			this.uploadMaterielFile(item, form); //正常上传图片
					// 		}
					// 	}
					// };
					// reader.readAsDataURL(file);
					if(!this.stopFlag){
						var item = {};
						item.file = file;
						console.warn("***uploadImgObj***",file)
						this.uploadMaterielFile(item, form); //正常上传图片
					}
				}else{//安卓
					let reader = new FileReader();
					reader.onload = (event) => {
						let video = document.createElement('video');
						video.onloadedmetadata = (event) => {
							let duration = video.duration;
							let width = video.videoWidth;
							let height = video.videoHeight;
							// this.videoWidth = width;
							// this.videoHeight = height;
							console.warn('视频时长：', duration,this.stopFlag);
							console.warn('视频尺寸：x:', width, 'y:', height);
							if (duration > 20) {
								this.$message.warning('您的上传的视频过长，请低于20s');
								var videoForm = document.getElementById(form); //获取表单对象
								videoForm && videoForm.reset(); // 重置表单
								return false
							}else{
								if(!this.stopFlag){
									var item = {};
									item.file = file;
									console.warn("***uploadImgObj***",file)
									this.uploadMaterielFile(item, form); //正常上传图片
								}
							}
						};
						video.src = event.target.result;
					};
					reader.readAsDataURL(file);
				}
			},
			//视频上传进度处理
			uploadProgress(e){
				this.progress = Math.round((e.loaded / e.total) * 100);//loaded已经加载的
				console.warn("***uploadProgress***",this.progress)
			},
			//显示弹窗提示框
			showPopViewHandle(){
				this.showPopView = true;//弹出确认框；
			},
			//取消上传
			cancel(cancelTokenSource){
				this.cancelTokenSource = cancelTokenSource;
				console.warn("***取消上传函数定义***")
			},
			//停止上传
			stopUpload(){
				this.showPopView = false;//弹出确认框；
				this.stopFlag = true;//停止上传标志打开
				if(this.uploadStatus == 1){
					this.cancelTokenSource.cancel('上传已取消');//通知取消上传
					Toast({
						message: '上传已取消',
					});
				}
				else if(this.uploadStatus==2 || this.uploadStatus==3){//绿幕抠图中 或者已经完成
					let data = {
						userId:this.userId,
						brandId: $config.brandId,
						processStatus:'canceled',
						virtualNo:this.videoId,
					}
					requestConfig('addUserVirtural', data);//停止该绿幕视频的使用
					this.initStatus();//还原初始状态
				}
				let data = {
					url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
					value:'个人形象',
					width:'',
					height:'',
				}
				this.aiPeopleChange(data, 'canel')
				this.peopleIndex = -1;
			},
			//获取用户上传的个人形象
			async getUserVirtural() {
				let data = {
					userId:this.userId,
					brandId: $config.brandId,
					processStatus:'completed',
				}
				let res = await requestConfig('getUserVirtural', data);//停止该绿幕视频的使用
				if (res.success && res.list && res.list[0]) {
					let data = res.list[res.list.length - 1];//获取最新的一个用户的个人形象数据
					this.leftList[0].icon = data.virtualBg;
					this.leftList[0].url = data.virtualUrl;
					this.videoUrl = data.virtualUrl;
					if(data.widthHeight){
						this.leftList[0].width = data.widthHeight.split('x')[0];
						this.leftList[0].height = data.widthHeight.split('x')[1];
					}
				}
			},
			async uploadMaterielFile(item, form) {
				this.uploadStatus = 0;
				this.peopleIndex = 0;	//选中第一个
				if(this.stopFlag){
					return false;
				}
				var self = this;
				let formData = new FormData();
				formData.append('file', item.file);
				formData.append('brandId', $config.brandId);
				formData.append('userId', this.userId);
				console.warn("***uploadMaterielFile***");
				this.uploadStatus = 1;//上传中
				this.showPersonView = false;
				this.addSilhouette();//添加剪影视频
				let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress,this.cancel)
				if (axios.isCancel(res)) {//取消上传处理
					this.initStatus();//还原初始状态
				}else if (res.success && res.single) {
					this.videoId = res.single;//根据Id查询结果
					this.startInterval();//开始轮询获取结果
				}
				var videoForm = document.getElementById(form); //获取表单对象
				videoForm && videoForm.reset(); // 重置表单
			},
			async getVideoUrl() {
				if(this.stopFlag){
					this.stopInterval();
				}
				if(!this.videoId){
					Toast({
						message: '请先上传视频',
					});
					return false;
				}
				this.count = this.count + 1;
				let res = await requestConfig('get_result', {id:this.videoId,userId:this.userId}, true, false,'get')
				if(this.stopFlag){
					this.stopInterval();
				}
				if (res.success && res.single) {
					this.resultHandle(res.single)
				}else{
					this.videoUrl = "https://test.static.elab-plus.com/digital_human/f4c16cffae9711ee9853845cf3fb2826.mp4";//视频地址
					this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/0";
					this.leftList[0].url = this.videoUrl;
					this.uploadStatus = 4;//处理失败
				}
			},
			//添加剪影视频
			addSilhouette(){
				let data = {
					url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
					value:'个人形象',
					width:'',
					height:'',
				}
				this.aiPeopleChange(data, 'add')
			},
			//添加用户绿幕视频
			addRealVideo(){
				let data = {
					url:this.videoUrl,
					value:'个人形象',
					width:this.widthHeight.split('x')[0],
					height:this.widthHeight.split('x')[1],
				}
				this.aiPeopleChange(data, 'add')
			},
			//上传结果处理
			resultHandle(single){
				if(!single){
					return false;
				}
				if(single.status=='completed' && single.output){//有结果
					this.ktProgress = 100;//抠图进度100%
					this.videoUrl = single.output;//视频地址
					// this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/5";
					this.widthHeight = single.widthHeight; //"856x480"
					this.leftList[0].icon = single.virtualBg;
					this.leftList[0].url = this.videoUrl;
					this.leftList[0].width = single.widthHeight.split('x')[0],
					this.leftList[0].height = single.widthHeight.split('x')[1],
					this.uploadStatus = 3;//处理完毕
					// alert("***virtualBg***"+single.virtualBg);
					this.stopInterval();//停止轮询
					if(this.peopleIndex==0 && this.tabIndex==0){//如果当前在个人形象上，则替换视频
						this.addRealVideo();
					}
				}else{//没有结果
					let progress = single.progress;
					progress = progress.replace(this.videoId + ':','');
					let index = progress.indexOf("|");
					progress = progress.substr(0,index);
					console.warn("***抠图进度条***",progress);
					this.ktProgress = parseFloat(progress);//提取出来的进度条
					if(this.ktProgress>99){
						this.ktProgress = 99;
					}
				}
			},
			//开始生成AI图的轮询，每隔1s轮询一次
			startInterval() {
				if(this.timer){
					return false;
				}
				let self = this;
				this.count = 0;//轮询次数
				this.uploadStatus = 2;//绿幕抠图中
				this.getVideoUrl();//获取结果
				this.timer = setInterval(()=>{
					this.getVideoUrl();//获取结果
				},1000);//1秒轮询一次
				this.setOutTimer();//设置超时逻辑
			},
			//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
			setOutTimer() {
				var self = this;
				if (this.outTimer) {
					clearTimeout(this.outTimer)
					this.outTimer = null
				}
				this.outTimer = setTimeout(function() {
					if(!self.videoUrl){//没有结果
						MessageBox.confirm('',{
							title: '提示',
							message: '当前AI使用火爆，请继续尝试?',
							showCancelButton: true,
							confirmButtonText:'继续尝试',
							cancelButtonText:'取消等待',
						}).then(action => {
							console.warn("***MessageBox-action***",action)
							if(action == 'confirm'){
								// self.confirmHandle(1);
							}
						}).catch(err=>{
							console.warn("***MessageBox-err***",err)
							if(err == 'cancel'){
								// self.cancelHandle();
							}
						});
						// MessageBox.confirm('确定执行此操作?')
					}
					self.stopInterval();//停止轮询
				}, this.timeOut);
			},
			//停止轮询
			stopInterval() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
				if (this.outTimer) {
					clearTimeout(this.outTimer)
					this.outTimer = null
				}
				// this.uploadStatus = 0;//回到初始上传状态
			},
			
			showMask(){
				//上传过程中，不允许再次上传
				if(this.uploadStatus==1 || this.uploadStatus == 2){
					return false;
				}
				this.showPersonView = true;
				console.warn("***showMask***",this.showPersonView)
			},
			//AI数字人切换
			selectAction(selItem, index) {
				console.log('点击动作111：', selItem, index,this.leftList)
				if (this.tabIndex == 0) {
					if(!this.leftList[index].url){
						return false
					}
					if (this.peopleIndex == index) { //取消选中
						this.aiPeopleChange(this.leftList[this.peopleIndex], 'canel')
						this.peopleIndex = -1;
						return false
					}
				} else if (this.tabIndex == 1) {
					if (this.petIndex == index) { //取消选中
						this.aiPeopleChange(this.rightList[this.petIndex], 'canel')
						this.petIndex = -1;
						return false
					}
				} else if (this.tabIndex == 3) {
					if (this.musicIndex == index) { //取消选中
						this.aiPeopleChange(this.musicList[this.musicIndex], 'canel')
						this.musicIndex = -1;
						return false
					}
				}
				if (this.$parent.repeatFlag == true) {
					Toast({
						message: '加载中...请稍后再试',
					});
					return false
				}
				if (this.tabIndex == 0) {
					this.peopleIndex = index;
					this.aiPeopleChange(this.leftList[this.peopleIndex], 'add')
				} else if (this.tabIndex == 1) {
					this.petIndex = index;
					this.aiPeopleChange(this.rightList[this.petIndex], 'add')
				} else if (this.tabIndex == 3) {
					this.musicIndex = index;
					this.aiPeopleChange(this.musicList[this.musicIndex], 'add')
				}
			},
			// // 获取场景信息
			// async getRelationInfo() {
			// 	if(!this.$parent.relationId){
			// 		return false;
			// 	}
			// 	var parmas = {
			// 		"relationId": this.$parent.relationId,
			// 		"brandId": $config.brandId,
			// 	}
			// 	let res = await requestConfig('getRelationInfo', parmas)
			// 	this.selectIndex = 0;
			// 	if (res && res.success) {
			// 		this.count = res.single.count;
			// 	}
			// },
			// 获取瀑布流数据
			async getDatalist(type) {
				let typeName = "Virtual_Human";
				if (type == 0) {
					typeName = "Virtual_Human";
				} else if (type == 1) {
					typeName = "Virtual_Pet";
				} else if (type == 3) {
					typeName = "Virtual_Music";
					Indicator.close();
				}
				var parmas = {
					"type": typeName,
					// "brandId": $config.brandId,
				}
				let res = await requestConfig('queryEnumList', parmas)
				this.selectIndex = 0;
				if (res && res.success && res.list) {
					let list = res.list;
					if (type == 0) {
						this.leftList.push({
							icon:'',
							userUpload:true,
							value:'',
							url:'',
							width:'',
							height:'',
						})
						this.leftList = this.leftList.concat(list);
						this.getUserVirtural();
					} else if (type == 1) {
						this.rightList = list;
					} else if (type == 3) {
						this.musicList = list;
					}
				}
			},
			catchTouchMove: function() {
				return false;
			},
			addRedBox(){//添加红包
				console.warn("***添加红包***")
				this.$emit("redBox",'add');
				this.hasRedBox = true;
			},
			removeRedBox(){//去除红包
				this.$emit("redBox",'canel');
				this.hasRedBox = false;
			},
			setRedBox(){
				this.$emit("setRedBox");
			},
			//AI数字人切换
			aiPeopleChange(item, type) {
				this.$emit("aiPeopleChange", item, type, this.tabIndex); //通知页面，AI数字人切换了
			},
			//发布全景
			mynavigateFuc(e) {
				if (e) {
					// if(this.hasRedBox){
					// 	if(!this.$parent.redBoxData.count){
					// 		Toast({
					// 			message: '请输入红包个数！',
					// 		});
					// 		return false;
					// 	}
					// 	if(!this.$parent.redBoxData.money){
					// 		Toast({
					// 			message: '请输入充值金额！',
					// 		});
					// 		return false;
					// 	}
					// }
					if(this.peopleIndex==0 && (this.uploadStatus ==1 || this.uploadStatus ==2)){
						Toast({
							message: '请在个人形象上传完成后发布！',
						});
						return false;
					}
					if(this.repeartFlag){
						return false;
					}
					this.repeartFlag = true;
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23121301', //点击ID
						clkName: 'webgl_public_clk', //点击前往的页面名称
						clkParams: {
							locusName: "720发布",
						}
					};
					util.trackRequest(param);
					let _ps = this.$parent.getPosition();
					if (window.__wxjs_environment === 'miniprogram') {
						let url = '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query.houseId || '') 
						url += '&bgUrl=' + encodeURIComponent(this.$parent.bgUrl)
						if(this.peopleIndex>-1){
							let people = {
								url:this.leftList[this.peopleIndex].url,
								ath:_ps.peopleAth,
								atv:_ps.peopleAtv,
								width:this.leftList[this.peopleIndex].width || '',
								height:this.leftList[this.peopleIndex].height || '',
								scale:this.$parent.peopleScale,
								userUpload:this.peopleIndex==0?true:false,//是否使用了个人形象
							}
							url += '&AIPeople=' + encodeURIComponent(JSON.stringify(people))
						}
						if(this.petIndex>-1){
							let pet = {
								url:this.rightList[this.petIndex].url,
								ath:_ps.petAth,
								atv:_ps.petAtv,
								scale:this.$parent.petScale,
							}
							url += '&AIPet=' + encodeURIComponent(JSON.stringify(pet))
						}
						if(this.musicIndex>-1){
							let music = {
								url:this.musicList[this.musicIndex].url,
								title:this.musicList[this.musicIndex].value
							};
							url += '&bgMusic=' + encodeURIComponent(JSON.stringify(music))
						}
						if(this.hasRedBox){
							let redBox = {
								url:'https://dm.static.elab-plus.com/miniProgram/redbox.mp4',
								ath:_ps.redBoxAth,
								atv:_ps.redBoxAtv,
								scale:1,
								lottieIndex:this.specialIndex,
								// count:this.$parent.redBoxData.count,
								// money:this.$parent.redBoxData.money,
								// message:this.$parent.redBoxData.message,
							}
							url += '&redBox=' + encodeURIComponent(JSON.stringify(redBox))
						}
						console.warn("data:", _ps, url);
						wx.miniProgram.navigateTo({
							url: url,
							complete:(e)=>{
								this.repeartFlag = false;
							}
						})
					} else {
						console.warn("data:", _ps)
						Toast({
							message: '敬请期待',
						});
					}
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "./viewAI.scss";
	/* @import "@/common/css/common.css"; */
</style>