样式兼容

src/components/krpanoVideo/index.vue

@@ -43,6 +43,10 @@
                 isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
                 videoBefore: true,//显示引导蒙层图
 				sceneLoaded:false,//场景是否加载完毕了
+				peopleData:null,
+				petData:null,
+				redBoxData:null,
+				bgMusicData:null,
             }
         },
 		props:{
@@ -97,33 +101,34 @@
 				},
 				immediate: true,
 			},
-			// scale: {
+			// coordinate: {
 			// 	handler(newVal,oldVal) {
-			// 		console.warn("***scale-webgl_rxdz_krpanoVideo***", newVal,'---',oldVal)
-			// 		if(this.panoramicKrpano){
-			// 			let sc = newVal;
-			// 			if(newVal.toString().includes('{')){
-			// 				let scale = JSON.parse(newVal);
-			// 				sc = scale.x;
-			// 			}
-			// 			// this.panoramicKrpano.call(`scaleChange(${sc})`);
-			// 		}
+			// 		console.warn("***coordinate-webgl_rxdz_krpanoVideo***", newVal,oldVal)
 			// 	},
 			// 	immediate: true,
 			// },
-			coordinate: {
-				handler(newVal,oldVal) {
-					console.warn("***coordinate-webgl_rxdz_krpanoVideo***", newVal,oldVal)
-				},
-				immediate: true,
-			},
 		},
         methods: {
 			redBoxChange(type){
 				// console.warn("**redBoxChange****",type)
 				if(type=='add'){
 					let url = "https://dm.static.elab-plus.com/miniProgram/redbox.mp4"
-					this.panoramicKrpano.call(`showRedBox(${url})`);
+					if(this.$parent.isIOS){
+						wx.config({
+							debug: false,
+							appId: '',
+							timestamp: '',
+							nonceStr: '',
+							signature: '',
+							jsApiList: []
+						})
+						wx.ready(()=> {
+							// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+							this.panoramicKrpano.call(`showRedBox(${url})`);
+						})
+					}else{
+						this.panoramicKrpano.call(`showRedBox(${url})`);
+					}
 				}else if(type=='canel'){
 					this.panoramicKrpano.call(`hideRedBox()`);
 				}
@@ -136,6 +141,50 @@
 					this.panoramicKrpano.call(`scalePetChange(${scale})`);
 				}
 			},
+			initPeople(item){
+				if(item.url){
+					this.playVideo(item.url)
+				}
+				if(item.scale){
+					this.panoramicKrpano.call(`scalePeopleChange(${item.scale})`);
+				}
+				if(item.ath){
+					let object = this.panoramicKrpano.get("hotspot[video]");
+					object.ath = item.ath;
+					object.atv = item.atv;
+					//移动视角到AI人物上
+					this.panoramicKrpano.set('view.hlookat', item.ath);
+					this.panoramicKrpano.set('view.vlookat', item.atv);
+				}
+			},
+			initPet(item){
+				if(item.url){
+					this.playPetVideo(item.url)
+				}
+				if(item.scale){
+					this.panoramicKrpano.call(`scalePetChange(${item.scale})`);
+				}
+				if(item.ath){
+					let object = this.panoramicKrpano.get("hotspot[petVideo]");
+					object.ath = item.ath;
+					object.atv = item.atv;
+				}
+			},
+			initRedBox(item){
+				if(item.url){
+					this.redBoxChange('add')
+				}
+				if(item.ath){
+					let object = this.panoramicKrpano.get("hotspot[redBox]");
+					object.ath = item.ath;
+					object.atv = item.atv;
+				}
+			},
+			initbgMusic(item){
+				if(item.url){
+					this.playBgMusic(item.url)
+				}
+			},
 			aiChange(item,type,tabIndex){
 				console.warn("**aiChange****",item,type,tabIndex)
 				if(tabIndex==0){
@@ -159,19 +208,22 @@
 				}
 			},
 			playVideo(url){
-				this.panoramicKrpano.call(`playSceneName(${url})`);
-				// wx.config({
-				// 	debug: false,
-				// 	appId: '',
-				// 	timestamp: '',
-				// 	nonceStr: '',
-				// 	signature: '',
-				// 	jsApiList: []
-				// })
-				// wx.ready(()=> {
-				// 	// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
-				// 	this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
-				// })
+				if(this.$parent.isIOS){
+					wx.config({
+						debug: false,
+						appId: '',
+						timestamp: '',
+						nonceStr: '',
+						signature: '',
+						jsApiList: []
+					})
+					wx.ready(()=> {
+						// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+						this.panoramicKrpano.call(`playSceneName(${url})`);
+					})
+				}else{
+					this.panoramicKrpano.call(`playSceneName(${url})`);
+				}
 				console.warn("***playSceneName-playVideo***")
 			},
 			stopPeopleVideo(){
@@ -179,7 +231,23 @@
 				console.warn("***playSceneName-stopPeopleVideo***")
 			},
 			playPetVideo(url){
-				this.panoramicKrpano.call(`playPetVideo(${url})`);
+				// this.panoramicKrpano.call(`playPetVideo(${url})`);
+				if(this.$parent.isIOS){
+					wx.config({
+						debug: false,
+						appId: '',
+						timestamp: '',
+						nonceStr: '',
+						signature: '',
+						jsApiList: []
+					})
+					wx.ready(()=> {
+						// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+						this.panoramicKrpano.call(`playPetVideo(${url})`);
+					})
+				}else{
+					this.panoramicKrpano.call(`playPetVideo(${url})`);
+				}
 				console.warn("***playSceneName-playPetVideo***")
 			},
 			stopPetVideo(){
@@ -205,11 +273,17 @@
 					this.videoBefore = false;
 					this.sceneLoaded = true;
 					// this.playVideo();//播放绿幕视频
-					if(this.coordinate){
-						let position = JSON.parse(this.coordinate);
-						if(position.ath && position.atv){
-							this.setPosition(position);
-						}
+					if(this.peopleData && this.peopleData.ath){
+						this.initPeople(this.peopleData)
+					}
+					if(this.petData && this.petData.ath){
+						this.initPet(this.petData)
+					}
+					if(this.redBoxData && this.redBoxData.ath){
+						this.initRedBox(this.redBoxData)
+					}
+					if(this.bgMusicData && this.bgMusicData.url){
+						this.initbgMusic(this.bgMusicData)
 					}
 				}
                 // 视频加载完

src/components/krpanoVideo/panoramic_no_drag.xml

@@ -58,51 +58,156 @@
 		<image if="webvr.isenabled OR device.mobilevr">
 			<sphere url="%$panorama_url%" />
 		</image>
-		<!-- <preview url="test3333.png"/> 			onloaded.addevent="sceneload();"-->
-		<hotspot name="video" ath="50.082" atv="14" url="https://dm.static.elab-plus.com/videoplayer.js" videourl=""
-			width="180" height="320" chromakey="0x238E54|0.294|0.133" preload="true" pausedonstart="false" loop="true"
-			distorted="true" muted="true" zoom="true" autopause="true" autoresume="true" scale="1"
-			onvideoready="videoreadyFunc" onvideoplay="videoplayHandle" cursor="grab"
-			onclick="togglepause();" enabled="false"
-			ondown.addevent="set(cursor,grabbing);" onup.addevent="set(cursor,grab);" >
+		<!-- 电子人 -->
+		<hotspot name="video"
+			ath="50.082" 
+			atv="14"
+			url="https://dm.static.elab-plus.com/videoplayer.js"
+			videourl=""
+			width="180"
+			height="320"
+			chromakey="0x238E54|0.294|0.133"
+			preload="true"
+			pausedonstart="false"
+			loop="true"
+			distorted="true"
+			muted="true"
+			zoom="true"
+			autopause="true"
+			autoresume="true"
+			scale="1"
+			onvideoready="videoreadyFunc"
+			onvideoplay="videoplayHandle"
+			cursor="grab"
+			zorder="2"
+			enabled="false"
+		>
 		</hotspot>
+		<!-- 电子人的阴影 -->
 		<!-- <hotspot name="image_hotspot" ath="50.082" atv="14" rotate="-45.0" zorder="1"
 			distorted="true" scale="0.5" alpha="0.5"
 			url="https://dm.static.elab-plus.com/miniProgram/grass.jpg" keep="true"></hotspot> -->
+		<!-- 宠物视频 -->
+		<hotspot name="petVideo"
+			ath="80.0" 
+			atv="14"
+			url="https://dm.static.elab-plus.com/videoplayer.js"
+			videourl=""
+			width="180"
+			height="320"
+			chromakey="0x238E54|0.294|0.133"
+			preload="true"
+			pausedonstart="false"
+			loop="true"
+			distorted="true"
+			muted="true"
+			zoom="true"
+			autopause="true"
+			autoresume="true"
+			scale="1"
+			zorder="2"
+			enabled="false"
+		>
+		</hotspot>
+		<!-- 红包 -->
+		<hotspot name="redBox"
+			ath="60" 
+			atv="14"
+			url="https://dm.static.elab-plus.com/videoplayer.js"
+			videourl=""
+			chromakey="0x30B524|0.294|0.133"
+			preload="true"
+			pausedonstart="false"
+			loop="true"
+			distorted="true"
+			muted="true"
+			zoom="true"
+			autopause="true"
+			autoresume="true"
+			scale="1"
+			zorder="2"
+			enabled="false"
+		>
+		</hotspot>
+		<action name="showRedBox">
+			set(hotspot[redBox].visible, 'true');
+			hotspot[redBox].playvideo(%1, '', false);
+		</action>
+		<action name="hideRedBox">
+			hotspot[redBox].stop();
+			set(hotspot[redBox].visible, get(false));
+		</action>
 		<action name="mobilescale" autorun="preinit" devices="mobile">
-			mul(stagescale,0.5);
+		    mul(stagescale,0.5);
 		</action>
 		<action name="playSceneName">
 			def(scale, string, get(hotspot[video].scale));
-			<!-- 打印日志 -->
-			<!-- showlog(true, top); -->
-			<!-- 播放视频 -->
-			hotspot[video].playvideo(%1, '', false);
+		    <!-- 打印日志 -->
+		    <!-- showlog(true, top); -->
+		    <!-- mobilescale(); -->
+		    <!-- 播放视频 -->
+		    hotspot[video].playvideo(%1, '', false);
 			set(hotspot[video].scale, get(scale));
 		</action>
-		<!-- 设置缩放大小 -->
-		<action name="scaleChange">
+		<action name="stopPeopleVideo">
+			<!-- 播放视频 -->
+			<!-- hotspot[video].playvideo('', '', false); -->
+			hotspot[video].stop();
+			set(hotspot[video].visible, get(false));
+		</action>
+		<!-- 显示数字宠物 -->
+		<action name="playPetVideo">
+			def(scale, string, get(hotspot[petVideo].scale));
+			set(hotspot[petVideo].visible, 'true');
+			hotspot[petVideo].playvideo(%1, '', false);
+			set(hotspot[petVideo].scale, get(scale));
+		</action>
+		<!-- 隐藏数字宠物 -->
+		<action name="stopPetVideo">
+			hotspot[petVideo].stop();
+			set(hotspot[petVideo].visible, get(false));
+		</action>
+		
+		<!-- 设置数字人缩放大小 -->
+		<action name="scalePeopleChange">
 			set(hotspot[video].scale, %1);
 		</action>
-		<!-- 获取缩放大小 -->
-		<action name="getmyScale">
-			def(scale, string, get(hotspot[video].scale));
-			jscall(calc("window.getScaleHandle('"+ get(scale) +"')") );
+		<!-- 设置宠物缩放大小 -->
+		<action name="scalePetChange">
+			set(hotspot[petVideo].scale, %1);
 		</action>
 		<!-- 切换状态播放，暂停 -->
 		<action name="toggleMute">
 			set(hotspot[video].muted, %1);
+			set(hotspot[petVideo].muted, %1);
 		</action>
 		<!-- 视频初始化完成 -->
 		<action name="videoreadyFunc">
-			jscall('window.videoready()');
+		    jscall('window.videoready()');
 			<!-- set(hotspot[video].scale, 0.3); -->
 		</action>
 		<!-- 视频播放 -->
 		<action name="videoplayHandle">
-			jscall('window.onvideoplay()');
+		    jscall('window.onvideoplay()');
 			<!-- set(hotspot[video].scale, 0.3); -->
 		</action>
+		<action name="playBgMusic">
+		    <!-- 播放背景音乐 -->
+		    playsound(bgsnd, %1, true);
+		</action>
+		<!-- 关闭所有的声音 -->
+		<action name="closeVoice">
+		    pausesoundtoggle(bgsnd);
+		</action>
+		<!-- 播放音乐设置，引入插件 -->
+		<plugin name="soundinterface" 
+		    url="https://dm.static.elab-plus.com/soundinterface.swf"
+		    alturl="https://dm.static.elab-plus.com/soundinterface.js" 
+		    preload="true"
+		    keep="true"
+		    loop="false"
+		    >
+		</plugin>
 		<!-- 截图 -->
 		<action name="makescreenshot_init" type="Javascript" autorun="onstart"><![CDATA[
 			// count the screenshots (for the filenames)

src/components/newBottomCom/viewAI/viewAI.html

@@ -37,7 +37,7 @@
 						<div v-if="hasRedBox==false" class="red-btn rows justify-center" @click="addRedBox">添加红包</div>
 						<div class="rows justify-center" v-else>
 							<div class="iconfont icon-icon_delete rows justify-center" @click="removeRedBox"></div>
-							<div class="red-btn rows justify-center red-adjust">
+							<div class="red-btn rows justify-center red-adjust" @click="setRedBox">
 								红包调整
 							</div>
 						</div>

src/components/newBottomCom/viewAI/viewAI.vue

@@ -203,6 +203,9 @@
 				this.$emit("redBox",'canel');
 				this.hasRedBox = false;
 			},
+			setRedBox(){
+				this.$emit("setRedBox");
+			},
 			//AI数字人切换
 			aiPeopleChange(item, type) {
 				this.$emit("aiPeopleChange", item, type, this.tabIndex); //通知页面，AI数字人切换了
@@ -210,6 +213,20 @@
 			//发布全景
 			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;
+						}
+					}
 					let param = {
 						type: 'CLK', //埋点类型
 						clkId: 'clk_2cmina_23121301', //点击ID
@@ -219,17 +236,50 @@
 						}
 					};
 					util.trackRequest(param);
-					let _ps = JSON.stringify(this.$parent.getPosition());
-					console.warn("_ps", _ps, this.$parent.peopleScale,this.$parent.petScale)
+					let _ps = this.$parent.getPosition();
 					if (window.__wxjs_environment === 'miniprogram') {
+						let url = '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query.houseId || '') 
+						url += '&bgUrl=' + this.$parent.bgUrl
+						if(this.peopleIndex>-1){
+							let people = {
+								url:this.leftList[this.peopleIndex].url,
+								ath:_ps.peopleAth,
+								atv:_ps.peopleAtv,
+								scale:this.$parent.peopleScale,
+							}
+							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,
+								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: '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query
-									.houseId || '') +
-								'&coordinate=' + encodeURIComponent(_ps) +
-								'&peopleScale=' + this.$parent.peopleScale +
-								'&petScale=' + this.$parent.petScale +
-								'&bgUrl=' + this.$parent.bgUrl +
-								'&videoUrl=' + encodeURIComponent(this.dataList[this.selectIndex].url)
+							url: url	
 						})
 					} else {
 						Toast({

src/components/newBottomCom/viewCareful/viewCareful.scss

@@ -80,6 +80,12 @@
 		border: 4px solid #fff;
 	}
 }
+/deep/.el-slider__button-wrapper{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
 .active{
 	/deep/ .el-slider__runway{
 		.el-slider__bar{

src/components/payView/payView.html

@@ -0,0 +1,48 @@
+<div class="pay-view" v-if="showRedBox">
+	<div class="pay-main">
+		<i class="modelClose iconfont icon-close" @click="hideRedBoxSet"></i>
+		<div class="pay-title rows justify-center">发放红包</div>
+		<div class="pay-red-count input rows rows-between">
+			<div class="input-left input-text rows justify-center">
+				<img class="redbox_icon" src="https://dm.static.elab-plus.com/miniProgram/redbox_icon.png" alt=""></img>
+				红包个数
+			</div>
+			<div class="input-right rows">
+				<input class="input-real" type="number" autofocus placeholder="填写个数" v-model="count"
+				 @input="bindCount" />
+				<div class="input-text" style="margin-left: 10px;">个</div>
+			</div>
+		</div>
+		<div class="pay-recharge input rows rows-between">
+			<div class="input-left input-text rows justify-center">
+				<img class="redbox_icon" src="https://dm.static.elab-plus.com/miniProgram/redbox_icon.png" alt=""></img>
+				充值金额
+			</div>
+			<div class="input-right rows">
+				<input class="input-real wd1" type="text" max="20000" min="0.1" 
+				@input="bindMoney" ref="moneyInput" :adjust-position="false" @focus="moveCursorToEnd" @blur="lostMoneyFocus"
+				placeholder="输入想要发的红包金额" v-model="money"/>
+			</div>
+		</div>
+		<!-- 金额选择视图 -->
+		<div class="pay-select grid-view1">
+			<div class="select-item rows justify-center" v-for="(item, idx) in selList"
+				:key="idx" @click.stop="selectAction(item,idx)">
+				<div class="text">{{item.text}}<span class="tips">{{idx<5?'元':''}}</span></div>
+			</div>
+		</div>
+		<!-- 祝福语 -->
+		<div class="pay-word">
+			<textarea ref="messageInput" class="words-input" cols="30" rows="3" v-model="message" 
+			placeholder="恭喜发财，大吉大利"  maxlength="20" 
+			@focus="scrollToInput"></textarea>
+		</div>
+		<div class="pay-money" v-show="money && money>0">
+			<span class="tips">￥</span>{{money}}
+		</div>
+		<div class="pay-btn rows justify-center" @click.stop="mynavigateFuc">
+			确定红包设置
+		</div>
+		<div class="pay-tips rows justify-center">未领取红包，将于24小时后发起退款</div>
+	</div>
+</div>

src/components/payView/payView.scss

@@ -0,0 +1,180 @@
+.pay-view{
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100vh;
+	background: rgba(0, 0, 0, 0.64);
+	box-sizing: border-box;
+	z-index: 999;
+	.modelClose{
+		position: absolute;
+		right: 30px;
+		top: 30px;
+		font-size: 30px;
+	}
+	.pay-main{
+		position: absolute;
+		top: 200px;
+		width: 100%;
+		height: calc(100% - 200px);
+		border-radius: 40px 40px 0 0;
+		background: #f5f5f5;
+		padding: 60px 40px;
+		box-sizing: border-box;
+		.pay-title{
+			font-family: "Verdana Bold";
+			font-weight: 700;
+			font-size: 34px;
+			color: #000;
+			margin-bottom: 60px;
+		}
+		.input{
+			width: 670px;
+			height: 92px;
+			border-radius: 16px;
+			background: #fff;
+			box-sizing: border-box;
+			padding: 0px 20px;
+			.input-text{
+				font-family: "Helvetica Neue";
+				font-weight: 400;
+				font-size: 28px;
+				color: #2b2525;
+			}
+			.input-left{
+				
+			}
+			.redbox_icon{
+				width: 27px;
+				height: 34px;
+				margin-right: 10px;
+			}
+			.input-real{
+				font-family: "Helvetica Neue";
+				font-weight: 400;
+				font-size: 28px;
+				color: #848484;
+				height: 40px;
+				text-align: right;
+			}
+			.wd1{
+				width: 280px;
+			}
+		}
+		.pay-red-count{
+			margin-bottom: 20px;
+		}
+		.pay-recharge{
+			margin-bottom: 20px;
+		}
+		.pay-select{
+			margin-bottom: 40px;
+			.select-item{
+				width: 210px;
+				height: 92px;
+				border-radius: 16px;
+				background: rgba(136, 136, 136, 0.05);
+				font-family: DINCondensed-Bold;
+				font-weight: 700;
+				color: rgb(25, 25, 25);
+				.text{
+					font-size: 40px;
+				}
+				.tips{
+					font-size: 24px;
+				}
+			}
+			.select-item:last-child{
+				.text{
+					font-size: 24px;
+				}
+			}
+		}
+		.pay-word{
+			position: relative;
+			margin-bottom: 164px;
+			.words-input{
+				position: relative;
+				width: 100%;
+				border-radius: 16px;
+				background: #fff;
+				padding: 18px 30px;
+				font-size: 28px;
+				box-sizing: border-box;
+			}
+		}
+		.pay-money{
+			margin-bottom: 70px;
+			font-family: DINCondensed-Bold;
+			font-weight: 700;
+			margin-left: 50%;
+			transform: translateX(-50%);
+			width: fit-content;
+			.money{
+				color: rgb(25, 25, 25);
+				font-size: 64px;
+			}
+			.tips{
+				font-size: 36px;
+			}
+		}
+		.pay-btn{
+			margin-left: 50%;
+			transform: translateX(-50%);
+			margin-bottom: 20px;
+			width: 288px;
+			height: 74px;
+			border-radius: 37px;
+			background: #f27966;
+			font-family: DINCondensed-Bold;
+			font-weight: 700;
+			font-size: 28px;
+			color: #fff;
+		}
+		.pay-tips{
+			// position: absolute;
+			// bottom: 80px;
+			// left: 150px;
+			width:100%;
+			margin-left: 50%;
+			transform: translateX(-50%);
+			font-family: "Helvetica Neue";
+			font-weight: 400;
+			font-size: 28px;
+			color: rgba(43, 37, 37, 0.3);
+		}
+	}
+}
+textarea::-webkit-scrollbar{
+    display:none;
+}
+textarea::-webkit-input-placeholder{
+    color: rgba(43, 37, 37, 0.3);
+	font-size: 28px;
+}
+input::-webkit-input-placeholder{
+    color: rgba(132, 132, 132, 1);
+	font-size: 28px;
+}
+@font-face{
+	font-family: DINCondensed-Bold;
+	src: url('https://dm.static.elab-plus.com/miniprogram/DINAlternateBold.ttf');
+}
+.grid-view1 {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	/* grid-row-gap: 20rem; */
+	grid-gap: 20px 20px;
+}
+input,textarea{
+	border: none;
+	outline: none;
+	appearance: none;
+	cursor:pointer;
+}
+input:focus,textarea:focus{
+	border: none;
+	outline: none;
+	appearance: none;
+}

src/components/payView/payView.vue

@@ -0,0 +1,212 @@
+<template src="./payView.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 {
+				showRedBox:false,	//是否显示红包设置
+				count:'',
+				money:'',
+				message:'',
+				selList:[
+					{
+						index:0,
+						text:'10',
+					},
+					{
+						index:1,
+						text:'30',
+					},
+					{
+						index:2,
+						text:'50',
+					},
+					{
+						index:3,
+						text:'100',
+					},
+					{
+						index:4,
+						text:'200',
+					},
+					{
+						index:5,
+						text:'其他金额',
+					}
+				]
+			}
+		},
+		props: {
+
+		},
+		// mixins: [touchHandle],
+		async mounted() {
+			// await this.getCityHouseList();		
+			console.warn("***payView***")
+		},
+		// 页面被展示时执行
+		onPageShow: function() {
+
+		},
+		//页面被隐藏时执行
+		onPageHide: function() {
+			// console.warn("***detached-hide***")
+		},
+		methods: {
+			showRedBoxSet() {
+				this.showRedBox = true;
+			},
+			hideRedBoxSet() {
+				this.showRedBox = false;
+			},
+			bindCount(e){
+				console.log('bindCount：', this.count)
+				if (this.count.length > 0) {
+					// console.warn("***this.count***",this.count)
+					let num = Number(this.count);
+					if (this.count.indexOf('.') > -1) {
+						Toast({
+							message: '只能输入整数！',
+						});
+						this.count = '';
+					}
+					else if (isNaN(this.count)) {
+						Toast({
+							message: '只能输入数字！',
+						});
+						this.count = '';
+					}else if (num <= 0 || num > 10000) {
+						Toast({
+							message: '红包数量最少1个，最大10000个！',
+						});
+						this.count = '';
+					}
+				}
+				// this.count = e.data;
+			},
+			bindMoney(e){
+				// console.log('bindMoney：', e,this.money)
+				let data = this.money;
+				if (data.length > 0) {
+					console.warn("***bindMoney***",data)
+					let num = Number(this.money);
+					if (isNaN(data)) {
+						Toast({
+							message: '只能输入数字！',
+						});
+						this.money = '';
+					}
+				}
+			},
+			//移动光标到最后
+			moveCursorToEnd(e) {
+			    // 获取input元素
+				this.$nextTick(() => {
+					const input = this.$refs.moneyInput;
+					// 设置光标位置为文本末尾
+					input.selectionStart = input.selectionEnd = input.value.length;
+				});
+			},
+			lostMoneyFocus(e){
+				let data = this.money;
+				if (data.length > 0) {
+					console.warn("***lostMoneyFocus***",data)
+					let num = Number(this.money);
+					if (num > 200) {
+						Toast({
+							message: '每个红包金额上限为200元！',
+						});
+						this.money = '';
+					}else if (num < 0.01) {
+						Toast({
+							message: '单个红包金额不可以低于0.01元！',
+						});
+						this.money = '';
+					}
+					if(this.count){
+						let count = Number(this.count);
+						if(num/count<0.01){
+							Toast({
+								message: '需要保证每个红包最少0.01元！',
+							});
+							this.money = '';
+						}
+					}
+				}
+			},
+			// bindMessage(e){
+			// 	console.log('bindMessage：', e)
+			// 	// this.message = e.data;
+			// },
+			scrollToInput() {
+			    // 获取输入框元素
+			    const input = this.$refs.messageInput;
+			    // 滚动页面，将输入框滚动到可见区域
+			    input.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+			},
+			//充值金额选择事件
+			selectAction(selItem, index) {
+				console.log('充值金额点击动作：', selItem, index)
+				if(index<5){
+					this.money = Number(selItem.text)
+				}else{
+					this.$refs.moneyInput.focus();
+				}
+			},
+			catchTouchMove: function(e) {
+				return false;
+			},
+			// hideOrShowActor(type){
+			// 	this.$emit('hideOrShowActor',type);//隐藏所有视角
+			// },
+			//发布全景
+			mynavigateFuc(e) {
+				if(!this.count){
+					Toast({
+						message: '请输入红包个数！',
+					});
+					return false;
+				}
+				if(!this.money){
+					Toast({
+						message: '请输入充值金额！',
+					});
+					return false;
+				}
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_24010201', //点击ID
+					clkName: 'webglvr_rebboxset_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "确定红包设置",
+					}
+				};
+				util.trackRequest(param);
+				this.$parent.redBoxData.count = this.count;
+				this.$parent.redBoxData.money = this.money;
+				this.$parent.redBoxData.message = this.message || "恭喜发财，大吉大利";
+				this.hideRedBoxSet();
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./payView.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.vue

@@ -51,14 +51,33 @@
 			var that = this;
 			console.warn("***webgl_rxdz_krpano720-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-			this.videoUrl = this.$route.query.videoUrl || '';
-			// this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/002.mp4';
+			// this.videoUrl = this.$route.query.videoUrl || '';
 			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
-			this.coordinate = this.$route.query.coordinate || '';
-			this.scale = this.$route.query.scale || '1';
+			// this.coordinate = this.$route.query.coordinate || '';
+			// this.scale = this.$route.query.scale || '1';
 			this.type = this.$route.query.type || '';
+			
+			this.AIPeople = JSON.parse(this.$route.query.AIPeople) || '';
+			this.AIPet = JSON.parse(this.$route.query.AIPet) || '';
+			this.bgMusic = JSON.parse(this.$route.query.bgMusic) || '';
+			this.redBox = JSON.parse(this.$route.query.redBox) || '';
+			this.initAI();
 		},
 		methods: {
+			initAI(){
+				if(this.AIPeople){
+					this.$refs.krpanoVideo.peopleData = this.AIPeople;
+				}
+				if(this.AIPet){
+					this.$refs.krpanoVideo.petData = this.AIPet;
+				}
+				if(this.redBox){
+					this.$refs.krpanoVideo.redBoxData = this.redBox;
+				}
+				if(this.bgMusic){
+					this.$refs.krpanoVideo.bgMusicData = this.bgMusic;
+				}
+			},
 			updateMuted() {
 				this.muted = !this.muted;
 			},

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.html

@@ -1,6 +1,6 @@
 <div class="main-view">
 	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
-	<krpanoVideo ref="krpanoVideo" :coordinate="coordinate" :videoUrl="videoUrl" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<krpanoVideo ref="krpanoVideo" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
 	<!-- <div class="guide-mask" id="guide-mask">
 		<img src="https://dm.static.elab-plus.com/coverTips.png">
 	</div> -->

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.vue

@@ -70,10 +70,14 @@
 			var that = this;
 			console.warn("***webgl_rxdz_roam-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-			this.videoUrl = this.$route.query.videoUrl || '';
+			// this.videoUrl = this.$route.query.videoUrl || '';
 			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
-			this.coordinate = this.$route.query.coordinate || '';
-			this.scale = this.$route.query.scale || '1';
+			// this.coordinate = this.$route.query.coordinate || '';
+			// this.scale = this.$route.query.scale || '1';
+			this.AIPeople = JSON.parse(this.$route.query.AIPeople) || '';
+			this.AIPet = JSON.parse(this.$route.query.AIPet) || '';
+			this.bgMusic = JSON.parse(this.$route.query.bgMusic) || '';
+			this.redBox = JSON.parse(this.$route.query.redBox) || '';
 			
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
@@ -93,9 +97,23 @@
 			if(window.__wxjs_environment === 'miniprogram'){
 				this.navbar.showCapsule = 0;
 			}
-
+			this.initAI();
 		},
 		methods: {
+			initAI(){
+				if(this.AIPeople){
+					this.$refs.krpanoVideo.peopleData = this.AIPeople;
+				}
+				if(this.AIPet){
+					this.$refs.krpanoVideo.petData = this.AIPet;
+				}
+				if(this.redBox){
+					this.$refs.krpanoVideo.redBoxData = this.redBox;
+				}
+				if(this.bgMusic){
+					this.$refs.krpanoVideo.bgMusicData = this.bgMusic;
+				}
+			},
 			async clipImgHandle(){
 				console.warn("***clipImgHandle1***");
 				this.bottomLeftX = this.left;

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.html

@@ -1,12 +1,14 @@
 <!--
- * @Author: caodongdong caodongdoong@gmail.com
+ * @Author: 353810753@qq.com
  * @Date: 2023-05-17 15:46:34
- * @LastEditors: caodongdong caodongdoong@gmail.com
+ * @LastEditors: 353810753@qq.com
  * @LastEditTime: 2023-06-30 16:20:04
- * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <div class="main-view">
+	<div class="music-view rows justify-center" v-if="music.title">
+		<img class="icon-yinle" src="https://dm.static.elab-plus.com/miniProgram/music_icon.png" alt=""></img>
+		{{music.title}}
+	</div>
 	<krpanoVideo ref="krpanoVideo" :bgUrl="bgUrl" :muted="muted"></krpanoVideo>
 	<div class="voice-btn rows justify-center" @click="updateMuted">
 		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
@@ -29,5 +31,6 @@
 		<div class="slide-word">缩小</div>
 	</div>
 	<!-- AI数字人组件 -->
-	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" @tabChange="tabChange" @redBox="redBox" style="z-index: 13;"></viewAI>
+	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" @tabChange="tabChange" @setRedBox="setRedBox" @redBox="redBox" style="z-index: 13;"></viewAI>
+	<payView ref="payView"></payView>
 </div>

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.scss

@@ -132,4 +132,20 @@ page {
 .guide-mask-hide {
 	opacity: 0;
 	pointer-events: none;
+}
+.music-view{
+	position: absolute;
+	left: 42px;
+	top: 38px;
+	font-family: "Verdana";
+	font-weight: 400;
+	font-size: 24px;
+	color: #fff;
+	z-index: 9;
+	.icon-yinle{
+		width: 32px;
+		height: 38.5px;
+		color: #fff;
+		margin-right: 20px;
+	}
 }

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.vue

@@ -5,10 +5,11 @@
 	import krpanoVideo from "@/components/krpanoVideo/index.vue";
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
 	import viewAI from '@/components/newBottomCom/viewAI/viewAI.vue';
+	import payView from '@/components/payView/payView.vue';
 	// import commonPageMethod from '@/common/commonPageMethod.js';
 	export default {
 		components: {
-			krpanoVideo,viewAI
+			krpanoVideo,viewAI,payView
 		},
 		mixins: [commonPageMethod],
 		/**
@@ -46,6 +47,15 @@
 				peopleScale:1,//数字人的大小
 				petScale:1,	//宠物的大小
 				muted:true,
+				redBoxData:{//红包设置数据对象
+					count:'',
+					money:'',
+					message:'',
+				},
+				music:{
+					title:'',//音乐标题
+					url:'',	//音乐地址
+				}
 			}
 		},
 		beforeDestroy() {
@@ -89,15 +99,27 @@
 			redBox(type){
 				this.$refs.krpanoVideo.redBoxChange(type);
 			},
+			setRedBox(){
+				this.$refs.payView.showRedBoxSet();
+			},
 			aiPeopleChange(item,type,tabIndex){
 				let self = this;
-				// console.warn("***aiPeopleChange***",item,type,tabIndex);
+				console.warn("***aiPeopleChange***",item,type,tabIndex);
 				if(!item || !item.url){
 					Toast({
 						message: '没有地址...请稍后再试',
 					});
 					return false;
 				}
+				if(tabIndex==3){
+					if(type=='add'){
+						this.music.url = item.url;
+						this.music.title = item.value;
+					}else if(type=='canel'){
+						this.music.url = '';
+						this.music.title = '';
+					}
+				}
 				this.$refs.krpanoVideo.aiChange(item,type,tabIndex);
 			}
 		}