绘制新版个人上传

src/components/krpanoVideo/index.vue

@@ -212,11 +212,12 @@
 				}
 				let object = this.panoramicKrpano.get("hotspot[video]");
 				let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
-				if(item.width>=item.height){//横屏
+				if(Number(item.width)>= Number(item.height)){//横屏
 					let realWidth = 480;
 					let realHeight = item.height/(item.width/480);
 					object.width = realWidth;
 					object.height = realHeight;
+					object.scale = this.scale;
 					if(image_hotspot){
 						// let _scale = realWidth/640;
 						image_hotspot.width = realWidth;
@@ -229,6 +230,7 @@
 					let realHeight = item.height/(item.width/180);
 					object.width = realWidth;
 					object.height = realHeight;
+					object.scale = this.scale;
 					if(image_hotspot){
 						// let _scale = realWidth/360;
 						image_hotspot.width = realWidth;
@@ -237,7 +239,7 @@
 						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow11.png';
 					}
 				}
-				console.warn("**updataVideoSize****",item.width,item.height,this.scale)
+				console.warn("**updataVideoSize****",item.width,item.height,Number(item.width)>= Number(item.height),this.scale);
 			},
 			aiChange(item,type,tabIndex){
 				console.warn("**aiChange****",item,type,tabIndex)
@@ -482,6 +484,7 @@
                 mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
                 onready: this.panoramic,
             });
+			this.scale = this.$parent.peopleScale;
         },
         created() {
 			console.warn("***this.type***")

src/components/newBottomCom/viewAI/viewAI.html

@@ -2,7 +2,7 @@
 	<div class="ai-title rows">
 		<div class="title-btn rows justify-center" :class="{active:tabIndex==2}" @click.stop="tabChange(2)">
 			<img class="redbox_icon" src="https://dm.static.elab-plus.com/miniProgram/redbox_icon.png" alt=""></img>
-			红包
+			活动
 		</div>
 		<div class="title-btn rows justify-center" :class="{active:tabIndex==0}" @click.stop="tabChange(0)">数字人</div>
 		<div class="title-btn rows justify-center" :class="{active:tabIndex==1}" @click.stop="tabChange(1)">数字宠物</div>
@@ -34,8 +34,10 @@
 							</form> -->
 						</div>
 						<div class="item-name rows justify-center empty-text" v-if="uploadStatus==0">个人形象</div>
-						<div class="item-name rows justify-center empty-text" v-else-if="uploadStatus==1 || uploadStatus==2" @click.stop="stopUpload">
-							<img class="close_icon" src="https://dm.static.elab-plus.com/miniProgram/close_icon.png" />
+						<div class="item-name rows justify-center empty-text" v-else-if="uploadStatus==1 || uploadStatus==2"  @click.stop="showPopViewHandle">
+							<div class="close-view rows justify-center">
+								<i class="iconfont icon-close rows justify-center"></i>
+							</div>
 							取消
 						</div>
 					</div>
@@ -138,4 +140,18 @@
 			</div>
 		</div>
 	</div>
+	<!-- 取消弹出确认框 -->
+	<div class="pop-view" v-if="showPopView">
+		<div class="content">
+			<i class="iconfont icon-close close" @click.stop="showPopView=false;"></i>
+			<div class="title">
+				是否终止添加个人形象？<br />
+				终止后重新添加需重新等待
+			</div>
+			<div class="btns rows rows-between">
+				<div class="btn sty1 rows justify-center" @click.stop="stopUpload">终止上传</div>
+				<div class="btn sty2 rows justify-center" @click.stop="showPopView=false;">继续添加</div>
+			</div>
+		</div>
+	</div>
 </div>

src/components/newBottomCom/viewAI/viewAI.scss

@@ -76,11 +76,18 @@
 						color: #000;
 						margin-right: 4px;
 					}
-					.close_icon{
+					.close-view{
 						width: 24px;
 						height: 24px;
-						background: transparent;
+						line-height: 24px;
 						margin-right: 4px;
+						background: #231815;
+						opacity: 0.28;
+						color: #fff;
+						border-radius: 50%;
+						.icon-close{
+							font-size: 14px;
+						}
 					}
 				}
 				.empty-item{
@@ -298,7 +305,7 @@
 		}
 		.img{
 			width: 441.42px;
-			height: 620.58px;
+			height: 628.98px;
 			background: transparent;
 			// margin-bottom: 45px;
 			margin-left: 50%;
@@ -351,4 +358,60 @@
 		-ms-filter: 'alpha(opacity=0)';
 		display: inline-block;
 	}
+}
+.pop-view{
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.64);
+	z-index: 999;
+	.content{
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		width: 650px;
+		height: 400px;
+		border-radius: 40px;
+		background: #fff;
+		padding: 20px 78px;
+		.close{
+			position: absolute;
+			right: 40px;
+			top: 40px;
+			width: 30px;
+			height: 30px;
+			color: rgba(68, 68, 68, 0.44);
+		}
+		.title{
+			font-family: "Verdana Bold";
+			font-weight: 700;
+			font-size: 34px;
+			text-align: center;
+			color: rgba(33, 33, 33, 0.76);
+			margin-top: 92px;
+			margin-bottom: 60px;
+		}
+		.btns{
+			.btn{
+				width: 238px;
+				height: 80px;
+				border-radius: 40px;
+				font-family: "DIN Alternate Bold";
+				font-weight: 700;
+				font-size: 28px;
+			}
+			.sty1{
+				background: #d5d5d5;
+				color: #191919;
+				margin-right:20px ;
+			}
+			.sty2{
+				background: #92ce8b;
+				color: #fff;
+			}
+		}
+	}
 }

src/components/newBottomCom/viewAI/viewAI.vue

@@ -54,12 +54,15 @@
 				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,	//取消上传的操作对象
 			}
 		},
 		props: {
@@ -119,7 +122,6 @@
 					});
 				});
 			},
-
 			tabChange(index) {
 				if (this.tabIndex == index) {
 					return false;
@@ -159,9 +161,12 @@
 				this.uploadStatus = 0;//处理完毕
 			},
 			uploadImgObj(e,form,type=1){
+				this.stopFlag = false;//上传开始时，开启上传
 				if(type==2){
 					this.initStatus();//重置上传状态到初始值
 				}
+				this.uploadStatus = 0;
+				this.peopleIndex = 0;	//选中第一个
 				//上传图片
 				var file = e.target.files[0];
 				var fileSize = file.size / 1024 / 1024;
@@ -192,7 +197,7 @@
 						let height = video.videoHeight;
 						// this.videoWidth = width;
 						// this.videoHeight = height;
-						console.warn('视频时长：', duration);
+						console.warn('视频时长：', duration,this.stopFlag);
 						console.warn('视频尺寸：x:', width, 'y:', height);
 						if (duration > 20) {
 							this.$message.warning('您的上传的视频过长，请低于20s');
@@ -200,43 +205,94 @@
 							videoForm && videoForm.reset(); // 重置表单
 							return false
 						}else{
-							var item = {};
-							item.file = file;
-							console.warn("***uploadImgObj***",file)
-							this.uploadMaterielFile(item, form); //正常上传图片
+							if(!this.stopFlag){
+								var item = {};
+								item.file = file;
+								console.warn("***uploadImgObj***",file)
+								this.uploadMaterielFile(item, form); //正常上传图片
+							}
 						}
 					};
 					video.src = event.target.result;
 				};
 				reader.readAsDataURL(file);
-				// var item = {};
-				// item.file = file;
-				// console.warn("***uploadImgObj***",file)
-				// this.uploadMaterielFile(item, form); //正常上传图片
 			},
 			//视频上传进度处理
 			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('上传已取消');//通知取消上传
+				}
+				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) {
+				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);
-				// formData.append('width', this.videoWidth);
-				// formData.append('height', this.videoHeight);
-				console.warn("***formData***",formData);
+				console.warn("***uploadMaterielFile***");
 				this.uploadStatus = 1;//上传中
 				this.showPersonView = false;
 				this.addSilhouette();//添加剪影视频
-				let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress)
-				if (res.success && res.single) {
+				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();//开始轮询获取结果
 				}
@@ -244,6 +300,9 @@
 				videoForm && videoForm.reset(); // 重置表单
 			},
 			async getVideoUrl() {
+				if(this.stopFlag){
+					this.stopInterval();
+				}
 				if(!this.videoId){
 					Toast({
 						message: '请先上传视频',
@@ -252,6 +311,9 @@
 				}
 				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{
@@ -293,6 +355,8 @@
 					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;//处理完毕
 					this.stopInterval();//停止轮询
 					this.addRealVideo();
@@ -363,8 +427,7 @@
 					clearTimeout(this.outTimer)
 					this.outTimer = null
 				}
-				this.myloading = false;
-				this.aiFlag = false;
+				// this.uploadStatus = 0;//回到初始上传状态
 			},
 			
 			showMask(){
@@ -438,8 +501,11 @@
 							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) {
@@ -485,6 +551,12 @@
 							return false;
 						}
 					}
+					if(this.peopleIndex==0 && (this.uploadStatus ==1 || this.uploadStatus ==2)){
+						Toast({
+							message: '请在个人形象上传完成后发布！',
+						});
+						return false;
+					}
 					let param = {
 						type: 'CLK', //埋点类型
 						clkId: 'clk_2cmina_23121301', //点击ID

src/services/request.js

@@ -65,17 +65,26 @@ axios.interceptors.response.use(function(response) {
 	return result;
 }, function(error) {
 	console.log("***error***", error, requestCount)
-	if(	!error.config.url.includes('aiGenerateImg/getResult') &&
-		!error.config.url.includes('aiGenerateImg/uploadImgControlNet') &&
-		!error.config.url.includes('aiGenerateImg/img2img_local') &&
-		!error.config.url.includes('aiGenerateImg/getPredictions') &&
-		!error.config.url.includes('aiGenerateImg/img2Img')){
+	if (axios.isCancel(error)) {
+		console.log('上传已取消');
 		requestCount = requestCount - 1;
+		if (requestCount < 1) {
+			store.state.loading = false;//不显示loading状态
+		}
+		return error;
+	}else{
+		if(	!error.config.url.includes('aiGenerateImg/getResult') &&
+			!error.config.url.includes('aiGenerateImg/uploadImgControlNet') &&
+			!error.config.url.includes('aiGenerateImg/img2img_local') &&
+			!error.config.url.includes('aiGenerateImg/getPredictions') &&
+			!error.config.url.includes('aiGenerateImg/img2Img')){
+			requestCount = requestCount - 1;
+		}
+		if (requestCount < 1) {
+			store.state.loading = false;//不显示loading状态
+		}
+		let result = error.response;
+		return result;
 	}
-	if (requestCount < 1) {
-		store.state.loading = false;//不显示loading状态
-	}
-	let result = error.response;
-	return result;
 });
 export default axios;

src/services/requestConfig.js

@@ -41,10 +41,13 @@ const endpoints = {
 	rob: 'elab-marketing-file/redpack/rob', // 抢红包
 	robust_video: 'http://192.168.50.108:5000/robust_video', // 上传视频
 	get_result: 'http://192.168.50.108:5000/get_result', // 获取视频上传结果
+	getUserVirtural: 'elab-marketing-file/virtual/getUserVirtural', // 查询用户上传的数字人 
+	addUserVirtural: 'elab-marketing-file/virtual/addUserVirtural', // 修改数字人信息
 	aliyunOpenapiUploadOss: "elab-marketing-sms/aliyun/openapi/uploadOss", // 上传文件到oss
 	// predictions: "https://api.replicate.com/v1/deployments/feathers-wing/spacely-realistic-style-softedge-a100/predictions", // 分享查看
 };
-window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post',uploadProgress=null) => {
+// var source = CancelToken.source();
+window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post',uploadProgress=null,cancel=null) => {
 	if (!endpoints.hasOwnProperty(endpoint)) {
         console.error(`no such endpoint: ${endpoint}`);
         return {
@@ -109,11 +112,17 @@ window.requestConfig = async(endpoint, options, isHideLoading = false, preventDo
         response = await axios.get(requestOptions.url, { params });
     } else {
 		if(requestOptions.uploadProgress && typeof(requestOptions.uploadProgress)==='function'){
-			response = await axios.post(requestOptions.url, requestOptions.data,{
+			let _dt = {
 				onUploadProgress: progressEvent => {
 					requestOptions.uploadProgress(progressEvent)
 				}
-			});
+			}
+			if(cancel){//外界传递进来的取消函数
+				let cancelTokenSource = axios.CancelToken.source();
+				_dt.cancelToken = cancelTokenSource.token,
+				cancel(cancelTokenSource)
+			}
+			response = await axios.post(requestOptions.url, requestOptions.data,_dt);
 		}else{
 			response = await axios.post(requestOptions.url, requestOptions.data);
 		}