h5-webgl-program/src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.vue

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

</template>
<script>
	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 playTips from '@/components/playTips/playTips.vue';
	import {
		Toast
	} from 'mint-ui';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	export default {
		components: {
			krpanoVideo,viewAI,playTips
		},
		mixins: [commonPageMethod],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvCurPageName: "add_AI_people",
				locusBehaviorName: "DIY数字场景",
				pvCurPageParams: null,
				houseId: "",
				pvId: 'p_2cmina_23080402',
				canvas: null,
				navbar: {
					showCapsule: 1,
					title: 'DIY数字场景',
					titleColor: '#000',
					navPadding: 0,
					navPaddingBg: 'transparent',
					navBarColor: 'transparent',
					navBackColor: 'transparent',
					haveCallback: true, // 如果是 true 会接手 navbarBackClk
					fromShare: false,
					fromProject: 0,
					shareToken: "",
					pageName: this.pvCurPageName,
				},
				isIOS: false,
				videoUrl:'',
				bgUrl:'',
				tabIndex:0,
				value:50,
				peopleRangeValue:50,
				petRangeValue:50,
				peopleScale:1,//数字人的大小
				petScale:1,	//宠物的大小
				muted:true,
				redBoxData:{//红包设置数据对象
					count:'',
					money:'',
					message:'',
				},
				music:{
					title:'',//音乐标题
					url:'',	//音乐地址
				},
				relationId:'',	//场景id
				amount:'',	//场景总金额，如果有的话
				deg:0,
			}
		},
		beforeDestroy() {
			console.warn("***beforeDestroy-webgl_rxdz_krpanovr***");
		},
		mounted(options) {
			var that = this;
			console.warn("***webgl_rxdz_krpanovr-options***", this.$route.query)
			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			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.relationId = this.$route.query.relationId || '';//场景id
			this.amount = this.$route.query.amount || '';//场景总金额
			if(this.relationId){
				this.tabIndex = 2;
			}else{
				this.tabIndex = 0;
			}
			// this.AIPeople = this.$route.query.AIPeople ? JSON.parse(this.$route.query.AIPeople) : '';
			// this.AIPet = this.$route.query.AIPet ? JSON.parse(this.$route.query.AIPet) : '';
			// this.bgMusic = this.$route.query.bgMusic ? JSON.parse(this.$route.query.bgMusic) : '';
			// this.redBox = this.$route.query.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;
				}
			},
			clearHandle() {
				this.clearEvent();
			},
			updateMuted(){
				this.muted = !this.muted;
			},
			rotateVideo(){
				this.deg = this.deg + 45;
				this.deg = this.deg % 360;
				console.warn("******",this.deg)
				this.$refs.krpanoVideo.rotateVideo(this.deg);
			},
			getPosition(){
				let position = this.$refs.krpanoVideo.getPosition();
				return position;
			},
			rangeChange(e){
				let sca = 1;
				sca = (this.value - 50)/50 + 1;
				if(this.tabIndex==0){
					this.peopleScale = sca;//数字人的大小
					this.peopleRangeValue = this.value
				}else if(this.tabIndex==1){
					this.petScale = sca;//宠物的大小
					this.petRangeValue = this.value
				}
				this.$refs.krpanoVideo.scaleChange(sca,this.tabIndex);
			},
			tabChange(tabIndex){
				this.tabIndex = tabIndex;
				this.value = tabIndex==0?this.peopleRangeValue:this.petRangeValue;
			},
			redBox(type){
				this.$refs.krpanoVideo.redBoxChange(type);
			},
			setRedBox(){
				this.$refs.playTips.showRedBoxSet();
			},
			aiPeopleChange(item,type,tabIndex){
				let self = this;
				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);
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_krpanovr.scss";
	/* @import "@/common/css/common.css"; */
</style>