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

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

</template>
<script>
	import krpanoVideo from "@/components/krpanoVideo/index.vue";
	import commonPageMethod from '@/mixins/commonPageMethod.js';
	import lottie from "lottie-web"; //lottie
	import {
		Toast
	} from 'mint-ui';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	export default {
		components: {
			krpanoVideo,
		},
		mixins: [commonPageMethod],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvCurPageName: "webgl_720",
				locusBehaviorName: "720展示",
				pvCurPageParams: null,
				houseId: "",
				pvId: 'p_2cmina_23121201',
				navbar: {
					showCapsule: 1,
					title: '',
					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: '',
				rangeValue: 50,
				scale: 1,
				muted: true,
				coordinate: '',
				type:'',
				AIPeople:'',
				AIPet:'',
				bgMusic:'',
				redBox:'',
				showLottery:false,//是否显示中红包状态
				result:{
					"amount": 0,	//抢的红包金额
					"status": -1,	//状态 1：领取成功，2：已经领过了，3：礼盒领完了，4：礼盒已过期，5：达到金额领取限制，6：达到领取次数限制，7：达到创建次数限制
				},	//中奖
				showAnim:false,	//是否添加lottie动画
				anim:null,
				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:'彩带',
					},
				],
			}
		},
		beforeDestroy() {
			console.warn("***beforeDestroy-webgl_rxdz_krpano720***");
		},
		mounted(options) {
			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.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.type = this.$route.query.type || '';
			
			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;
				}
			},
			updateMuted() {
				this.muted = !this.muted;
			},
			closeLottery(){
				this.showLottery = false;
				lottie.destroy("lottieView");
				this.showAnim = false;
			},
			//用户选中了红包，要派奖了
			async winLottery(){
				//必须是微信用户
				if(!this.$route.query.leavePhoneCustomerId){
					console.warn("***no-leavePhoneCustomerId***")
					return false
				}
				if(!this.$route.query.boxNo){
					console.warn("***no-boxNo***")
					return false
				}
				let res = await requestConfig("rob", {
					"brandId": $config.brandId,
					"boxNo": this.$route.query.boxNo,
					"userId": this.$route.query.leavePhoneCustomerId,
					"openId": this.$route.query.openid,
					"worksId": this.$route.query.worksId || '', //作品id
					"sharer": this.$route.query.sharer || '', //分享者秘钥
				});
				if (res.success) {
					this.result = res.single;
					this.showLottery = true;
					if(this.result.status==1){
						this.lottieAni()
					}else if(this.result.status==99){
						Toast({
							message: '网络异常,请稍后再试',
						});
					}
				}else{
					this.result = null;
				}
			},
			//播放lottie动画
			lottieAni(){
				this.showAnim = true;
				let lottieIndex = this.redBox.lottieIndex || 0;
				// 播放lottie动画
				lottie.destroy("lottieView");
				var element = document.getElementById("lottie-view");
				this.anim = lottie.loadAnimation({
					container: element,
					name: "lottieView",
					renderer: "svg",
					loop: true,
					autoplay: true,
					path: this.specialList[lottieIndex].url, //动画json
				});
				// setTimeout(()=>{
				// 	lottie.destroy("lottieView");
				// 	this.showAnim = false;
				// },2000)
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_krpano720.scss";
	/* @import "@/common/css/common.css"; */
</style>