增加关闭点击区域

src/components/newBottomCom/viewAI/viewAI.html

@@ -116,9 +116,9 @@
 	</div>
 	<div class="ai-bottom rows justify-center" @click.stop="mynavigateFuc">发布全景</div>
 	<!-- 弹出层-添加个人形象 -->
-	<div class="mask-view" v-if="showPersonView">
+	<div class="mask-view" v-if="showPersonView" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
 		<div class="content">
-			<i class="iconfont icon-close close" @click.stop="showPersonView=false;"></i>
+			<i class="iconfont icon-close close rows justify-center" @click.stop="showPersonView=false;"></i>
 			<div class="title rows justify-center">添加个人形象</div>
 			<div class="desc rows justify-center">
 				生成时间较长约3-5分钟，<br />
@@ -154,4 +154,5 @@
 			</div>
 		</div>
 	</div>
+	<video id="videoPlayer" loop muted autoplay style="display: none;" controls="false" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src=""></video>
 </div>

src/components/newBottomCom/viewAI/viewAI.scss

@@ -274,7 +274,7 @@
 		position: absolute;
 		bottom: 0px;
 		width: 100%;
-		height: calc(100% - 304px);
+		height: 1320px;
 		border-radius: 40px 40px 0 0;
 		background: #fff;
 		box-sizing: border-box;
@@ -282,11 +282,12 @@
 		padding: 40px;
 		.close{
 			position: absolute;
-			right: 40px;
-			top: 40px;
-			width: 30px;
-			height: 30px;
+			right: 10px;
+			top: 10px;
+			width: 80px;
+			height: 80px;
 			color: rgba(68, 68, 68, 0.44);
+			z-index: 999;
 		}
 		.title{
 			font-family: "Verdana Bold";

src/components/newBottomCom/viewAI/viewAI.vue

@@ -103,6 +103,9 @@
 			resolveIndex(index) {
 				this.selectIndex = index || 0;
 			},
+			catchTapEvent:function(){
+				return false;
+			},
 			specialChange(index) {
 				if (this.specialIndex == index) {
 					return false;
@@ -165,13 +168,12 @@
 				if(type==2){
 					this.initStatus();//重置上传状态到初始值
 				}
-				this.uploadStatus = 0;
-				this.peopleIndex = 0;	//选中第一个
 				//上传图片
 				var file = e.target.files[0];
 				var fileSize = file.size / 1024 / 1024;
-				if (!/\.(MP4|mp4)$/.test(e.target.value)) {
-					this.$message.warning('文件片类型必须是MP4');
+				// 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
@@ -188,34 +190,67 @@
 					videoForm && videoForm.reset(); // 重置表单
 					return false;
 				}
-				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); //正常上传图片
+				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;
 					};
-					video.src = event.target.result;
-				};
-				reader.readAsDataURL(file);
+					reader.readAsDataURL(file);
+				}
 			},
 			//视频上传进度处理
 			uploadProgress(e){
@@ -277,6 +312,8 @@
 				}
 			},
 			async uploadMaterielFile(item, form) {
+				this.uploadStatus = 0;
+				this.peopleIndex = 0;	//选中第一个
 				if(this.stopFlag){
 					return false;
 				}
@@ -358,6 +395,7 @@
 					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();