Merge branch 'feature_AI优化' of elab-damai-h5/h5-webgl-program into develop

package.json

@@ -43,6 +43,8 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "file-loader": "^6.2.0",
+    "lottie-web": "^5.12.2",
     "node-sass": "^4.14.1",
     "px2rem-loader": "^0.1.9",
     "sass-loader": "^7.3.1",

public/index.html

@@ -13,6 +13,7 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+	<script type="text/javascript" src="https://dm.static.elab-plus.com/krpano-no-watermark.js"></script>
     <!-- built files will be auto injected -->
 	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
   </body>

src/App.vue

@@ -59,11 +59,12 @@
 			let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			this.isIOS = isIOS;
 			window.addEventListener('error', (error) => {
+				console.warn("***error***",error)
 				// 区分是否是js错误
 				if (error.message) {
-					alert("error" + message)
+					console.warn("error" + error.message)
 				} else {
-					alert('监测到E1004错误' + error);
+					console.warn('监测到E1004错误' + error);
 				}
 			}, true)
 

src/assets/common.css

@@ -62,9 +62,9 @@ div {
 
 .grid-view {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     /* grid-row-gap: 20rem; */
-    grid-gap: 20rem 80rem;
+    grid-gap: 20px 20px;
 }
 
 ::-webkit-scrollbar {
@@ -85,151 +85,3 @@ div {
     cursor: pointer
 }
 
-
-/* 项目提示信息 */
-
-.infoWindowHtml {
-    z-index: 1000!important;
-    cursor: pointer;
-}
-.project-view-content-scroll {
-    overflow: auto;
-}
-
-.show-flex1 {
-    display: flex;
-}
-
-.align-center {
-    align-items: center;
-}
-
-.column {
-    flex-direction: column;
-}
-
-.content-center {
-    justify-content: center;
-}
-
-.content-between {
-    justify-content: space-between;
-}
-
-.content-around {
-    justify-content: space-around;
-}
-
-.content-start {
-    justify-content: flex-start;
-}
-.content-end {
-    justify-content: flex-end;
-}
-
-.cursor-pointer {
-    cursor: pointer;
-}
-
-.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-}
-
-.el-select-dropdown {
-    border-radius: 10px;
-    backdrop-filter: blur(30px);
-    background-color: rgba(149, 149, 149, 0.9);
-    border: none;
-    /*color: #fff;*/
-}
-
-.el-select-dropdown__item {
-    color: #fff;
-}
-
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.el-select-dropdown__item.selected {
-    color: var(--themeColor11);
-    font-weight: 700;
-}
-
-.el-picker-panel {
-    border-radius: 10px;
-    backdrop-filter: blur(30px);
-    background-color: rgba(149, 149, 149, 0.5);
-    border: none;
-    color: #fff;
-}
-.el-input__inner:focus.el-focus{
-    border-color: var(--themeColor11);
-}
-.popper-class-12 .danwei{
-    color: rgba(255,255,255,0.8);
-    height: 32px;
-    line-height: 32px;
-}
-
-.align-start{
-    align-items: flex-start;
-}
-
-.align-end{
-    align-items: flex-end;
-}
-
-
-.el-date-table td.end-date span, .el-date-table td.start-date span {
-    background-color: var(--themeColor11) !important;
-    color: #6E6F72;
-}
-
-.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
-    background-color: rgba(242, 246, 252, 0.2);
-}
-
-.el-date-table td.today span {
-    color: var(--themeColor11);
-}
-
-.el-date-table td:hover {
-    color: var(--themeColor11);
-}
-
-.el-date-table td.available:hover {
-    color:  var(--themeColor11);
-}
-
-.el-picker-panel__icon-btn{
-    color: var(--themeColor9);
-}
-
-.el-date-range-picker__content.is-left {
-    border-right: 1px solid var(--themeColor9_1);
-}
-
-.el-date-table th {
-    border-bottom: 1px solid var(--themeColor9_1);
-}
-.pp-planstatus{
-    margin-left: -15px;
-
-}
-.pp-planstatus .el-select-dropdown__item{
-   font-size: 13px;
-    padding: 0 15px;
-}
-.el-button:focus, .el-button:hover{
-	color: unset;
-	border-color: unset;
-	background-color: unset;
-	/* background-image: linear-gradient(124deg, rgba(245, 201, 82, 0.4) 0%, rgba(239, 149, 57, 0.4) 100%); */
-}
-.el-button--primary{
-	background-color: #FD9429;
-	border-color: #F5C952;
-}

src/components/krpanoImg/index.scss

@@ -0,0 +1,259 @@
+.panoramic-components {
+    font-size: 12px;
+    .refresh-btn {
+        position: fixed;
+        right: 20px;
+        top: 20px;
+        z-index: 4;
+        width: 20px;
+        height: 17px;
+        > img {
+            width: 20px;
+            height: 17px;
+        }
+    }
+    .krpano-img-before {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        transition: opacity 0.5s ease-in;
+        pointer-events: none;
+        > img {
+            width: 100%;
+			object-fit: cover;
+			position: absolute;
+        }
+    }
+    .krpano-img-after {
+        opacity: 0;
+    }
+    .play-img {
+        position: fixed;
+        width: 1.37rem;
+        height: 1.52rem;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+        transform: scale(2);
+        transition: transform 0.5s ease-in;
+        opacity: 0;
+        z-index: 10;
+        > img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .play-img-show {
+        opacity: 1;
+        transform: scale(1);
+    }
+    .prompt-720-img {
+        position: fixed;
+        z-index: 10;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 10;
+        margin: auto;
+        pointer-events: none;
+        transition: opacity 0.5s ease-out;
+        > img {
+            width: 2.8rem;
+            height: 4.06rem;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+    }
+    .img-hide {
+        opacity: 0;
+    }
+    .img-hide-once {
+        display: none;
+    }
+    @keyframes promptImg {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(0.6);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+    .disclaimer {
+        position: fixed;
+        display: inline-block;
+        z-index: 1;
+        word-wrap: break-word;
+        width: 12px;
+        line-height: 14px;
+        right: 0.26rem;
+        top: 135px;
+        > a {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.5);
+            text-decoration: none;
+        }
+    }
+    #panoramic-krpano {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .panoramic-tab-content {
+        position: fixed;
+        bottom: 2.44rem;
+        width: 100%;
+        .voice {
+            display: flex;
+            align-items: center;
+            margin-left: 0.3rem;
+            box-sizing: border-box;
+            .sales-head {
+                width: 0.94rem;
+                height: 0.98rem;
+                box-sizing: border-box;
+                overflow: hidden;
+                > img {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    margin-left: 0.03rem;
+                    // margin-top: 0.02rem;
+                }
+            }
+            .voice-content {
+                border-radius: 16px;
+                width: 1rem;
+                height: 0.6rem;
+                line-height: 0.6rem;
+                text-align: center;
+                position: relative;
+                .voice-bg-img {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 1rem;
+                    height: 0.6rem;
+                }
+                .horn {
+                    position: absolute;
+                    right: 0;
+                    margin: auto;
+                    left: 0;
+                    display: inline-flex;
+                    align-items: center;
+                    top: 0;
+                    bottom: 0;
+                    > img {
+                        width: 0.28rem;
+                        right: 0;
+                        margin: auto;
+                        left: 0;
+                    }
+                    > span {
+                        font-size: 0.28rem;
+                        font-weight: 400;
+                        color: #533c12;
+                        padding-left: 0.08rem;
+                    }
+                }
+            }
+        }
+        .swiper-container-class {
+            padding-left: 0.3rem;
+            overflow: visible;
+            .content {
+                font-size: 12px;
+                display: flex;
+                align-items: center;
+                > div {
+                    border: 2px solid rgba(0, 0, 0, 0);
+                    padding: 0.04rem 0.18rem;
+                    width: auto;
+                    display: inline-block;
+                    background: rgba(205, 242, 163, 0.6);
+                    border-radius: 0.2rem 0.2rem 0.2rem 0rem;
+                    margin-right: 0.24rem;
+                    position: relative;
+                    display: inline-flex;
+                    align-items: baseline;
+                    .person-img {
+                        width: 0.2rem;
+                        margin-right: 0.18rem;
+                        display: none;
+                    }
+                    > span {
+                        color: rgba(70, 70, 70, 0.8);
+                    }
+                    .logo {
+                        position: absolute;
+                        left: -2px;
+                        width: 1px;
+                        height: 0.3rem;
+                        border-left: 2px solid rgba(205, 242, 163, 0.6);
+                        bottom: -0.34rem;
+                        > i {
+                            width: 6px;
+                            height: 6px;
+                            opacity: 1;
+                            background: rgba(205, 242, 163, 0.6);
+                            border-radius: 50%;
+                            display: inline-block;
+                            bottom: -0.1rem;
+                            left: -4px;
+                            position: absolute;
+                        }
+                    }
+                }
+                .select-style {
+                    border: 2px solid #ffffff;
+                    background: rgba(205, 242, 163, 1);
+                    .person-img {
+                        display: none; // 这里需要跟设计商量，修改小人的位置
+                    }
+                    > span {
+                        color: rgba(70, 70, 70, 1);
+                    }
+                    .logo {
+                        position: absolute;
+                        border-left: 2px solid #ffffff;
+                        > i {
+                            background: #ffffff;
+                            width: 8px;
+                            height: 8px;
+                            left: -5px;
+                        }
+                    }
+                }
+            }
+            .btn-line {
+                position: absolute;
+                left: -0.3rem;
+                right: 0;
+                height: 1px;
+                opacity: 0.2;
+                background: #ffffff;
+                bottom: -0.34rem;
+            }
+        }
+    }
+}

src/components/krpanoImg/index.vue

@@ -0,0 +1,357 @@
+<template>
+    <!-- @touchstart="touchstartFunc" -->
+    <div class="panoramic-components">
+        <!-- 刷新按钮 -->
+        <div class="refresh-btn" @click="refreshPage">
+            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
+        </div>
+        <!-- 引导用户  触屏图片 -->
+        <div class="prompt-720-img" :class="isTouchstart ? '' : 'img-hide'">
+            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
+        </div>
+        <!-- 封面引导 蒙城图 -->
+        <!-- <div class="krpano-img-before" :class="!videoBefore ? 'krpano-img-after' : ''">
+            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
+        </div> -->
+        <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
+            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
+        </div>
+        <!-- 免责声明 -->
+        <div class="disclaimer">
+            <a
+                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
+        </div>
+        <!-- krpano -->
+        <div id="panoramic-krpano"></div>
+    </div>
+</template>
+
+<script>
+    // import BScroll from 'better-scroll';
+    const panoramicXML = require("./panoramic.xml");
+    export default {
+        data() {
+            return {
+                tabList: [],
+                selectTabIndex: 0,
+                isPayVoice: false,
+                isPromptShow: true,
+                sceneObj: { id: '', name: '' },
+                isTouchstart: false, // 是否触屏一次
+                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
+                videoBefore: true,
+                isPlayImg: false, // 暂停按钮出现
+                bgMusicList: {
+                    '1': 'https://dm.static.elab-plus.com/djp-bg-2.mp3',
+                    '2': 'https://dm.static.elab-plus.com/typ-bg-2.mp3',
+                    '3': 'https://dm.static.elab-plus.com/zyp-bg-2.mp3'
+                },
+                maxTabList: {
+                    '1': [
+                        {
+                            id: 'YZ', name: '私家庭院',
+                            music: 'https://dm.static.elab-plus.com/djp-yz-3.mp3',  //语音没有给
+                            videourl: "https://dm.static.elab-plus.com/sjty-A-floor.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/sjty-A-floor.jpg',
+                            isShowHotspot: false,
+                        },
+                        {
+                            id: 'XJEGC', name: '夏加尔广场',
+                            music: 'https://dm.static.elab-plus.com/djp-xjegc-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/djp-xjegc-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/djp-xjegc-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/djp-xjegc-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'FLXZ', name: '芙乐小镇',
+                            music: 'https://dm.static.elab-plus.com/djp-flxz-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/djp-flxz-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/djp-flxz-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/djp-flxz-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        }
+                    ],
+                    '2': [
+                        {
+                            id: 'YZ', name: '私家庭院',
+                            music: 'https://dm.static.elab-plus.com/sjty-D-music.mp3',  //语音没有给
+                            videourl: "https://dm.static.elab-plus.com/sjty-D-floor.mp4", // 有狗的
+                            bgImg: 'https://dm.static.elab-plus.com/sjty-D-floor.jpg', // 有狗的
+                            isShowHotspot: false,
+                        },
+                        {
+                            id: 'XRKHY', name: '向日葵花园',
+                            music: 'https://dm.static.elab-plus.com/typ-xrkhy-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/typ-xrkhy-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/typ-xrkhy-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/typ-xrkhy-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'XYCHY', name: '无影教堂',
+                            music: 'https://dm.static.elab-plus.com/typ-wyjt-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/typ-wyjt-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/typ-wyjt-3.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/typ-wyjt-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'MNHY', name: '莫奈花园',
+                            music: 'https://dm.static.elab-plus.com/typ-mnhy-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/hqc-file/zyp-mnhy-10-12-one.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/hqc-file/zyp-mnhy-10-12-two.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/hqc-file/typ-mnhy-bg-10-12.jpeg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        }
+                    ],
+                    '3': [
+                        {
+                            id: 'YZ', name: '私家庭院',
+                            music: 'https://dm.static.elab-plus.com/sjty-G-music.mp3',  //语音没有给
+                            videourl: "https://dm.static.elab-plus.com/sjty-G-floor.mp4", // 有狗的
+                            bgImg: 'https://dm.static.elab-plus.com/sjty-G-floor.jpg', // 有狗的
+                            isShowHotspot: false,
+                        },
+                        {
+                            id: 'ZJGJD', name: '最佳观景点',
+                            music: 'https://dm.static.elab-plus.com/zyp-zjgjd-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/zyp-zjgjd-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/zyp-zjgjd-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/zyp-zjgjd-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'BSZY', name: '半山庄园',
+                            music: 'https://dm.static.elab-plus.com/zyp-bszy-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/zyp-bszy-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/zyp-bszy-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/zyp-bszy-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'PTTY', name: '葡萄田园',
+                            music: 'https://dm.static.elab-plus.com/zyp-ptty-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/hqc-file/zyp-ptty-10-12-one.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/hqc-file/zyp-ptty-10-12-two.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/hqc-file/zyp-ptty-bg-10-12.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        }
+                    ]
+                },
+            }
+        },
+        methods: {
+            // 更新title
+            updateTitle(name) {
+                document.title = name;
+            },
+            // 刷新页面
+            refreshPage() {
+                let href = window.location.href;
+                let route = this.$route;
+                let query = route.query;
+                let type = this.type;
+                let tabObj = this.maxTabList[type][this.selectTabIndex];
+                let newLocation = tabObj.id;
+                let newHref;
+                // 判断是否有 location
+                if (query.location) {
+                    newHref = href.replace(`location=${query.location}`, `location=${newLocation}`);
+                } else {
+                    if (JSON.stringify(query).length > 2) {
+                        // 当有参数，但是没有location
+                        newHref = `${href}&location=${newLocation}`;
+                    } else {
+                        // 当没有参数的时候
+                        newHref = `${href}?location=${newLocation}`;
+                    }
+                }
+                window.location.replace(newHref);
+                window.location.reload();
+            },
+            panoramic() {
+				console.warn("***panoramicKrpano***")
+                this.panoramicKrpano = document.getElementById('panoramic');
+                // 设置播放的场景
+                // this.switchScene(this.selectTabIndex);
+				// krpano.call("loadscene(scene_yuanjing, null, MERGE, BLEND(1))");
+				this.panoramicKrpano.call("loadscene(scene_ceshi, null, MERGE, BLEND(1))");
+                // 视频加载完
+                window.videoready = () => {
+                    this.videoBefore = false;
+                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
+                    if (!this.isShowOneGuideMask) {
+                        // 视频加载完
+                        this.isTouchstart = true;
+                    }
+                    if (this.tipSwiper) {
+                        this.controlVoice(this.selectTabIndex, true, true);
+                    }
+                };
+                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
+                window.videopausedFunc = () => {
+                    // this.refreshPage();
+                    // this.switchScene();
+                    // 关闭播放的的图片
+                    // this.isPayVoice = false;
+                    this.refreshPage();
+                }
+                // 当在视频里面切换不同的场景
+                // window.switchScenesType = () => {
+                //     this.tipSwiper = false;
+                //     this.switchScene();
+                // }
+                // 声音播放完
+                window.musicPlayComplete = () => {
+                    this.isPayVoice = false;
+                };
+                // 播放声音状态
+                window.payVoiceStatus = (isPlayStatus) => {
+                    this.isPayVoice = isPlayStatus == 'true' ? true : false;
+                }
+                // 暂停视频，显示图片
+                window.switchPlayImg = (isPlayStatus) => {
+                    this.isPlayImg = !this.isPlayImg;
+                }
+            },
+            // 点击播放音乐，点击暂停音乐
+            // isStartPay 重新播放
+            controlVoice(index = this.selectTabIndex, isPayVoice, isStartPay) {
+                if (isPayVoice === false) {
+                    this.isPayVoice = false;
+                } else {
+                    this.isPayVoice = isPayVoice ? true : this.isPayVoice = !this.isPayVoice;
+                }
+                // 获取声音的名称
+                let voiceObj = this.tabList[index];
+                // // 播放声音
+                // if (this.isPayVoice) {
+                // 是不是
+
+                this.panoramicKrpano.call(`playsoundMusic(${voiceObj.id},${voiceObj.music},${isStartPay})`);
+                // } else {
+                //     // 暂停声音
+                //     this.panoramicKrpano.call(`pausesoundMusic(${voiceObj.id})`);
+                // }
+
+            },
+        },
+        watch: {
+            isTouchstart(val, oldVal) {
+                if (val == true) {
+                    this.isShowOneGuideMask = true;
+                    setTimeout(() => {
+                        this.isTouchstart = false;
+                        // 当引导图都隐藏后，才能触屏
+                        this.panoramicKrpano.call(`suspendedPlay()`);
+                    }, 3000);
+                }
+            }
+        },
+        mounted() {
+			embedpano({
+			    // swf: "https://dm.static.elab-plus.com/krpano.swf",
+			    swf: "https://dm.static.elab-plus.com/miniProgram/krpano/tour.swf",
+			    xml: panoramicXML,
+			    target: "panoramic-krpano",
+			    html5: "auto",
+			    mobilescale: 1.0,
+			    passQueryParameters: true,
+			    id: "panoramic",
+			    onready: this.panoramic,
+			});
+            // embedpano({
+            //     swf: "https://dm.static.elab-plus.com/krpano.swf",
+            //     xml: panoramicXML,
+            //     bgcolor: "#000",
+            //     target: "panoramic-krpano",
+            //     passQueryParameters: false,
+            //     consolelog: true,
+            //     id: "panoramic",
+            //     mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
+            //     onready: this.panoramic
+            // });
+            let _that_ = this;
+            // this.mySwiper = new Swiper('.swiper-container', {
+            //     loop: false,
+            //     loopAdditionalSlides: 2,
+            //     slidesPerView: 'auto',
+            //     preventClicksPropagation: false,
+            //     on: {
+            //         click: function (e) {
+            //             let index = e.target.getAttribute("name");
+            //             // 重复点击一个无效
+            //             if (!index || _that_.selectTabIndex == index) {
+            //                 return false;
+            //             }
+            //             // 播放按钮隐藏
+            //             _that_.isPlayImg = false;
+            //             // 暂停现在播放的语音
+            //             _that_.controlVoice(_that_.selectTabIndex, false, false);
+            //             // 然后赋值
+            //             _that_.selectTabIndex = index;
+            //             // 滚动到对应的值
+            //             _that_.slideToIndex(index);
+            //             let name = _that_.tabList[index].name;
+            //             // 暂停全部声音
+            //             // _that_.panoramicKrpano.call(`closeVoice()`);
+            //             // 更新title名称
+            //             _that_.updateTitle(name);
+            //             // 切换场景
+            //             _that_.switchScene(index, true);
+            //             // 当切换过场景后，才能播放声音
+            //             _that_.tipSwiper = true;
+            //             _that_.$emit("setTab", _that_.tabList[index]);
+            //         },
+            //     },
+            // });
+            if (this.selectTabIndex != 0) {
+                // this.slideToIndex(this.selectTabIndex);
+            }
+            let name = this.tabList[this.selectTabIndex].name;
+            // 更新title名称
+            this.updateTitle(name);
+            // this.$emit("setTab", this.tabList[this.selectTabIndex]);
+        },
+        created() {
+			console.warn("***this.type***")
+            // type 1,2,3  表示 度假派、田园派、庄园派
+            this.type = this.$route.query.type || 1;
+            this.locationName = this.$route.query.location;
+            this.tabList = this.maxTabList[this.type];
+            // 寻找对应的场景
+            if (this.locationName) {
+                this.tabList.map((item, index) => {
+                    if (item.id == this.locationName) {
+                        // 取对应的值
+                        this.sceneObj = item;
+                        // 然后滚动到对应的区域
+                        this.selectTabIndex = index;
+                    }
+                });
+            } else {
+                // 如果没有默认第一个
+                this.sceneObj = this.tabList[0];
+            }
+			console.warn("***this.type***",this.sceneObj)
+            // // 监听屏幕大小变化
+            // window.addEventListener('resize', ()=>{
+            // });
+        },
+        beforeDestroy() {
+            // this.panoramicKrpano.call(`closeVoice()`);
+        }
+    }
+</script>
+<style scoped lang="scss">
+    @import "index.scss";
+</style>

src/components/krpanoImg/panoramic.xml

@@ -0,0 +1,157 @@
+<krpano version="1.20.9" title="Virtual Tour">
+
+	<!-- <include url="%VIEWER%/skin/vtourskin.xml" /> -->
+
+	<skin_settings maps="false"
+	               maps_type="google"
+	               maps_bing_api_key=""
+	               maps_zoombuttons="false"
+	               gyro="false"
+	               webvr="false"
+	               littleplanetintro="true"
+	               title="false"
+	               thumbs="true"
+	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
+	               thumbs_opened="false"
+	               thumbs_text="false"
+	               thumbs_dragging="true"
+	               thumbs_onhoverscrolling="false"
+	               thumbs_scrollbuttons="false"
+	               thumbs_scrollindicator="false"
+	               thumbs_loop="false"
+	               tooltips_buttons="false"
+	               tooltips_thumbs="false"
+	               tooltips_hotspots="false"
+	               tooltips_mapspots="false"
+	               deeplinking="false"
+	               loadscene_flags="MERGE"
+	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
+	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
+	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
+	               loadingtext="loading..."
+	               layout_width="100%"
+	               layout_maxwidth="814"
+	               controlbar_width="-24"
+	               controlbar_height="40"
+	               controlbar_offset="20"
+	               controlbar_offset_closed="-40"
+	               controlbar_overlap.no-fractionalscaling="10"
+	               controlbar_overlap.fractionalscaling="0"
+	               design_skin_images="vtourskin.png"
+	               design_bgcolor="0x2D3E50"
+	               design_bgalpha="0.0"
+	               design_bgborder="0"
+	               design_bgroundedge="1"
+	               design_bgshadow="0 0 0 0x000000 0.0"
+	               design_thumbborder_bgborder="3 0xFFFFFF 1.0"
+	               design_thumbborder_padding="2"
+	               design_thumbborder_bgroundedge="0"
+	               design_text_css="color:#5D7B53; font-family:Arial;"
+	               design_text_shadow="1"
+	               />
+
+	<!--
+	    For an alternative skin design either change the <skin_settings> values
+	    from above or optionally include one of the predefined designs from below.
+	-->
+	<!-- <include url="skin/vtourskin_design_flat_light.xml"  /> -->
+	<!-- <include url="skin/vtourskin_design_glass.xml"       /> -->
+	<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
+	<!-- <include url="skin/vtourskin_design_117.xml"         /> -->
+	<!-- <include url="skin/vtourskin_design_117round.xml"    /> -->
+	<!-- <include url="skin/vtourskin_design_black.xml"       /> -->
+
+	<action name="mytest">
+	  screentosphere(mouse.x, mouse.y, toh, tov);
+	  jscall(calc('console.log("'+toh+'")'));
+	  jscall(calc('console.log("'+tov+'")'));
+	</action>
+	<events
+		onclick="mytest();"
+	/>
+
+	<!-- startup action - load the first scene -->
+	<action name="startup" autorun="onstart">
+		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
+		loadscene(get(startscene), null, MERGE);
+		if(startactions !== null, startactions() );
+	</action>
+
+	<!-- <events onenterfullscreen=""          切换到全屏显示执行
+	        onexitfullscreen=""           从全屏切换回普通视图时执行
+	        onxmlcomplete=""              XML文件加载完成时执行
+	        onpreviewcomplete=""          预览图加载完成时执行
+	        onloadcomplete=""             全景切片图片加载完毕时执行
+	        onnewpano=""                  当启动新的全景场景时执行
+	        onremovepano=""               当前场景被关闭时执行（加载新场景前）
+	        onnewscene=""                 新场景加载完成时执行
+	        onloaderror=""                加载错误时执行，执行被设置后，屏幕将不显示默认的错误信息
+	        οnkeydοwn=""                  当某个键盘被按下时执行
+	        οnkeyup=""                    当某个键盘松开时执行
+	        οnclick=""                    当鼠标点击全景场景时执行
+	        οnmοusedοwn=""                当鼠标按下时执行
+	        οnmοuseup=""                  当鼠标松开时执行
+	        onmousewheel=""               当鼠标滚轮滚动时执行
+	        onidle=""                     当无用户操作在设定秒数后执行
+	        onviewchange=""               当场景转变时执行（渲染开始时）
+	        onviewchanged=""              当场景转变时执行（渲染完成时）
+	        οnresize=""                   当浏览器大小改变时执行
+	        /> -->
+	<!-- <events onloadcomplete="visible_hotspotGroupA"></events> -->
+	<scene name="scene_ceshi" title="ceshi" onstart="" havevrimage.mobilevr="false" havevrimage.no-mobilevr="true" thumburl="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/thumb.jpg" lat="" lng="" heading="">
+
+		<control bouncinglimits="calc:image.cube ? true : false" />
+
+		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="90.000" maxpixelzoom="2.0" fovmin="70" fovmax="120" limitview="auto" />
+
+		<preview url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/preview.jpg" />
+
+		<image if="!(webvr.isenabled OR device.mobilevr)">
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" /> -->
+			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
+		</image>
+
+		<image if="webvr.isenabled OR device.mobilevr">
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/vr/pano_%s.jpg" /> -->
+			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
+		</image>
+		<!--火车站-->
+		<!-- <hotspot name="spot2" url="skin/plugin.png" distorted="true" keep="false" ath="145.763" atv="22" visible="true"></hotspot>
+		<plugin  parent="hotspot[spot2]" name="hottiyan_2" type="container"  width="40" bgalpha="0.0" bgcapture="true" >
+			<layer  name="title2_hottiyan" style="text" align="bottom" x="0" y="75" width="100%" html="火车站" css="text-align:center; color:#5D7B53; font-family:Arial; font-weight:400; font-size:17px;border: 0px solid #fff;border-radius:10px;padding: 10px 5px; box-sizing: border-box;background: rgba(255, 255, 255, 0.2);border-radius: 10px;backdrop-filter: blur(50px);">
+			</layer>
+			<layer  name="title2_line1_hottiyan" style="text" align="top center" x="0" y="-80" height="80px" css="background-color:#fff;width:1px;height:80px"  />
+			<layer  name="title2_line2_hottiyan" style="text" align="top center" x="0" y="0" css="background-color:#fff;width:6px;height:6px;border-radius:50%;"  />
+		</plugin> -->
+		<!-- <preview url="test3333.png"/> -->
+		<hotspot name="video"
+				ath="145.763" atv="22"
+		        url="https://dm.static.elab-plus.com/videoplayer.js"
+		        videourl="https://dm.static.elab-plus.com/miniProgram/green.mp4"
+		        chromakey="0x238E54|0.294|0.133"
+		        loop="true"
+		        distorted="true"
+		        zoom="true"
+		        scale="0.3"
+		        ondown="draghotspot();"
+		        onclick="togglepause();"
+		        cursor="grab"
+				ondown.addevent="set(cursor,grabbing);"
+				onup.addevent="set(cursor,grab);"
+		        
+		/>
+		<action name="draghotspot">
+			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
+			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
+			sub(drag_adjusty, mouse.stagey, hotspotcentery);
+			asyncloop(pressed,
+				sub(dx, mouse.stagex, drag_adjustx);
+				sub(dy, mouse.stagey, drag_adjusty);
+				screentosphere(dx, dy, ath, atv);
+		
+			  );
+		</action>
+	</scene>
+
+
+</krpano>

src/components/krpanoVideo/index.scss

@@ -0,0 +1,261 @@
+.panoramic-components {
+	position: relative;
+    font-size: 12px;
+	z-index: 5;
+    .refresh-btn {
+        position: fixed;
+        right: 20px;
+        top: 20px;
+        z-index: 4;
+        width: 20px;
+        height: 17px;
+        > img {
+            width: 20px;
+            height: 17px;
+        }
+    }
+    .krpano-img-before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        transition: opacity 0.5s ease-in;
+        pointer-events: none;
+        > img {
+            width: 100%;
+			height: 100%;
+			object-fit: cover;
+        }
+    }
+    .hide {
+        opacity: 0;
+    }
+    .play-img {
+        position: fixed;
+        width: 1.37rem;
+        height: 1.52rem;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+        transform: scale(2);
+        transition: transform 0.5s ease-in;
+        opacity: 0;
+        z-index: 10;
+        > img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .play-img-show {
+        opacity: 1;
+        transform: scale(1);
+    }
+    .prompt-720-img {
+        position: absolute;
+        z-index: 10;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 10;
+        margin: auto;
+        pointer-events: none;
+        transition: opacity 0.5s ease-out;
+        > img {
+            width: 2.8rem;
+            height: 4.06rem;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+    }
+    .img-hide {
+        opacity: 0;
+    }
+    .img-hide-once {
+        display: none;
+    }
+    @keyframes promptImg {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(0.6);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+    .disclaimer {
+        position: fixed;
+        display: inline-block;
+        z-index: 1;
+        word-wrap: break-word;
+        width: 12px;
+        line-height: 14px;
+        right: 0.26rem;
+        top: 135px;
+        > a {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.5);
+            text-decoration: none;
+        }
+    }
+    #panoramic-krpano {
+        position: relative;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .panoramic-tab-content {
+        position: fixed;
+        bottom: 2.44rem;
+        width: 100%;
+        .voice {
+            display: flex;
+            align-items: center;
+            margin-left: 0.3rem;
+            box-sizing: border-box;
+            .sales-head {
+                width: 0.94rem;
+                height: 0.98rem;
+                box-sizing: border-box;
+                overflow: hidden;
+                > img {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    margin-left: 0.03rem;
+                    // margin-top: 0.02rem;
+                }
+            }
+            .voice-content {
+                border-radius: 16px;
+                width: 1rem;
+                height: 0.6rem;
+                line-height: 0.6rem;
+                text-align: center;
+                position: relative;
+                .voice-bg-img {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 1rem;
+                    height: 0.6rem;
+                }
+                .horn {
+                    position: absolute;
+                    right: 0;
+                    margin: auto;
+                    left: 0;
+                    display: inline-flex;
+                    align-items: center;
+                    top: 0;
+                    bottom: 0;
+                    > img {
+                        width: 0.28rem;
+                        right: 0;
+                        margin: auto;
+                        left: 0;
+                    }
+                    > span {
+                        font-size: 0.28rem;
+                        font-weight: 400;
+                        color: #533c12;
+                        padding-left: 0.08rem;
+                    }
+                }
+            }
+        }
+        .swiper-container-class {
+            padding-left: 0.3rem;
+            overflow: visible;
+            .content {
+                font-size: 12px;
+                display: flex;
+                align-items: center;
+                > div {
+                    border: 2px solid rgba(0, 0, 0, 0);
+                    padding: 0.04rem 0.18rem;
+                    width: auto;
+                    display: inline-block;
+                    background: rgba(205, 242, 163, 0.6);
+                    border-radius: 0.2rem 0.2rem 0.2rem 0rem;
+                    margin-right: 0.24rem;
+                    position: relative;
+                    display: inline-flex;
+                    align-items: baseline;
+                    .person-img {
+                        width: 0.2rem;
+                        margin-right: 0.18rem;
+                        display: none;
+                    }
+                    > span {
+                        color: rgba(70, 70, 70, 0.8);
+                    }
+                    .logo {
+                        position: absolute;
+                        left: -2px;
+                        width: 1px;
+                        height: 0.3rem;
+                        border-left: 2px solid rgba(205, 242, 163, 0.6);
+                        bottom: -0.34rem;
+                        > i {
+                            width: 6px;
+                            height: 6px;
+                            opacity: 1;
+                            background: rgba(205, 242, 163, 0.6);
+                            border-radius: 50%;
+                            display: inline-block;
+                            bottom: -0.1rem;
+                            left: -4px;
+                            position: absolute;
+                        }
+                    }
+                }
+                .select-style {
+                    border: 2px solid #ffffff;
+                    background: rgba(205, 242, 163, 1);
+                    .person-img {
+                        display: none; // 这里需要跟设计商量，修改小人的位置
+                    }
+                    > span {
+                        color: rgba(70, 70, 70, 1);
+                    }
+                    .logo {
+                        position: absolute;
+                        border-left: 2px solid #ffffff;
+                        > i {
+                            background: #ffffff;
+                            width: 8px;
+                            height: 8px;
+                            left: -5px;
+                        }
+                    }
+                }
+            }
+            .btn-line {
+                position: absolute;
+                left: -0.3rem;
+                right: 0;
+                height: 1px;
+                opacity: 0.2;
+                background: #ffffff;
+                bottom: -0.34rem;
+            }
+        }
+    }
+}

src/components/krpanoVideo/index.vue

@@ -0,0 +1,535 @@
+<template>
+    <!-- @touchstart="touchstartFunc" -->
+    <div class="panoramic-components">
+        <!-- 刷新按钮 -->
+        <!-- <div class="refresh-btn" @click="refreshPage">
+            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
+        </div> -->
+        <!-- 引导用户  触屏图片 -->
+        <div v-if="pvCurPageName!='webgl_clipImg'" class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
+            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
+        </div>
+        <!-- 封面引导 蒙层图 -->
+        <div class="krpano-img-before" :class="videoBefore ? '' : 'hide'">
+            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
+        </div>
+        <!-- <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
+            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
+        </div> -->
+        <!-- 免责声明 -->
+        <!-- <div class="disclaimer">
+            <a
+                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
+        </div> -->
+        <!-- krpano -->
+        <div id="panoramic-krpano" :style="{'height':canvasHeight+'px'}"></div>
+    </div>
+</template>
+
+<script>
+    // import BScroll from 'better-scroll';
+    const panoramicXML = require("./panoramic.xml");
+    const panoramicNODragXML = require("./panoramic_no_drag.xml");
+	const util = require('@/utils/util.js').default;
+    export default {
+        data() {
+            return {
+                tabList: [],
+                selectTabIndex: 0,
+                isPayVoice: false,
+                isPromptShow: true,
+                sceneObj: { id: '', name: '' },
+                isTouchstart: false, // 是否触屏一次
+                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
+                videoBefore: true,//显示引导蒙层图
+				sceneLoaded:false,//场景是否加载完毕了
+				peopleData:null,
+				petData:null,
+				redBoxData:null,
+				bgMusicData:null,
+				scale:1,
+            }
+        },
+		props:{
+			videoUrl: {
+				type: String,
+				default: '',
+			},
+			bgUrl: {
+				type: String,
+				default: '',
+			},
+			muted: {
+				type: [Boolean,String],
+				default: true,
+			},
+			// scale: {
+			// 	type: [Number,String],
+			// 	default: 1,
+			// },
+			coordinate: {
+				type: String,
+				default: '',
+			},
+		},
+		watch: {
+			videoUrl: {
+				handler(newVal,oldVal) {
+					if (newVal && newVal.length>0) {
+						console.warn("***videoUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+						if(this.sceneLoaded){
+							// this.playVideo(newVal)
+						}
+					}
+				},
+				immediate:true,
+			},
+			bgUrl: {
+				handler(newVal,oldVal) {
+					console.warn("***bgUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+					if(this.panoramicKrpano){
+						this.setSphereUrl(newVal)
+					}
+				},
+				immediate: true,
+			},
+			muted: {
+				handler(newVal,oldVal) {
+					console.warn("***muted-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+					if(this.panoramicKrpano){
+						this.panoramicKrpano.call(`toggleMute(${newVal})`);
+						let video = this.panoramicKrpano.get("hotspot[video]");
+						if(video && video.visible){
+							console.warn("**peopleAtv***",video.ath,video.atv)
+						}
+					}
+				},
+				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"
+					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()`);
+				}
+			},
+			scaleChange(scale,tabIndex){
+				console.warn("**scaleChange****",scale,tabIndex)
+				if(tabIndex==0){//数字人
+					this.panoramicKrpano.call(`scalePeopleChange(${scale})`);
+					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+					if(image_hotspot){
+						image_hotspot.scale = scale;
+					}
+					this.scale = scale;//缩放比例
+				}else if(tabIndex==1){//数字宠物
+					this.panoramicKrpano.call(`scalePetChange(${scale})`);
+				}
+			},
+			initPeople(item){
+				if(item.url){
+					this.playVideo(item.url)
+				}
+				if(item.scale){
+					this.panoramicKrpano.call(`scalePeopleChange(${item.scale})`);
+					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+					if(image_hotspot){
+						image_hotspot.scale = item.scale;
+					}
+					this.scale = item.scale;
+				}
+				if(item.ath){
+					let object = this.panoramicKrpano.get("hotspot[video]");
+					object.ath = item.ath;
+					object.atv = item.atv;
+					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+					if(image_hotspot){
+						image_hotspot.ath = item.ath;
+						image_hotspot.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)
+				}
+			},
+			updataVideoSize(item){
+				//如果存在视频尺寸
+				if(!item.width || !item.height){
+					item.width = 180;
+					item.height = 320;
+				}
+				let object = this.panoramicKrpano.get("hotspot[video]");
+				let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+				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;
+						image_hotspot.height = realHeight;
+						image_hotspot.scale = this.scale;
+						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow22.png';
+					}
+				}else{//竖直版视频
+					let realWidth = 180;
+					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;
+						image_hotspot.height = realHeight;
+						image_hotspot.scale = this.scale;
+						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow11.png';
+					}
+				}
+				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)
+				if(tabIndex==0){
+					if(type=='add'){
+						this.playVideo(item.url);
+						this.updataVideoSize(item);
+					}else if(type=='canel'){
+						this.stopPeopleVideo()
+					}
+				}else if(tabIndex==1){
+					if(type=='add'){
+						this.playPetVideo(item.url)
+					}else if(type=='canel'){
+						this.stopPetVideo()
+					}
+				}else if(tabIndex==3){
+					if(type=='add'){
+						this.playBgMusic(item.url)
+					}else if(type=='canel'){
+						this.stopBgMusic()
+					}
+				}
+			},
+			playVideo(url){
+				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(){
+				this.panoramicKrpano.call(`stopPeopleVideo()`);
+				console.warn("***playSceneName-stopPeopleVideo***")
+			},
+			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(){
+				this.panoramicKrpano.call(`stopPetVideo()`);
+				console.warn("***playSceneName-stopPetVideo***")
+			},
+            playBgMusic(url){
+				this.panoramicKrpano.call(`playBgMusic(${url},${this.muted})`);
+			},
+			stopBgMusic(url){
+				this.panoramicKrpano.call(`closeVoice()`);
+			},
+			panoramic() {
+				console.warn("***panoramicKrpano***",this.videoUrl)
+                this.panoramicKrpano = document.getElementById('panoramic');
+				if(this.bgUrl){
+					// 设置全景图的路径
+					this.setSphereUrl(this.bgUrl)
+				}
+                // 场景加载完毕了
+				window.sceneload = ()=>{
+					console.warn("***sceneLoad***")
+					this.videoBefore = false;
+					this.sceneLoaded = true;
+					// this.playVideo();//播放绿幕视频
+					setTimeout(()=>{
+						if(this.peopleData && this.peopleData.ath){
+							this.initPeople(this.peopleData)
+							this.updataVideoSize(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)
+						}
+						console.warn("***sceneLoad1***",this.peopleData,this.petData,this.redBoxData,this.bgMusicData)
+					},200)
+					
+				}
+                // 视频加载完
+                window.videoready = () => {
+					console.warn("***videoready***",this.$parent.isIOS,this.isTouchstart)
+                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
+					if(this.$parent.isIOS){
+						if (!this.isShowOneGuideMask) {
+						    // 视频加载完
+						    this.isTouchstart = true;
+						}
+					}
+                };
+                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
+                window.videopausedFunc = () => {
+                }
+				//红包被点击中了，说明抢到了红包
+				window.toggleRedBox = () => {
+					console.warn("***winLottery***")
+					this.$parent.winLottery();//中奖了
+				}
+				//截图成功了
+				window.show_img = (shotImg='',shareImg='') => {
+					console.warn("***show_img***",shotImg,shareImg)
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23121401', //点击ID
+						clkName: 'webgl_cover_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "封面确认",
+							locusValue: shotImg
+						}
+					};
+					util.trackRequest(param);
+					this.$parent.closeToast();
+					if(window.__wxjs_environment === 'miniprogram'){
+						wx.miniProgram.postMessage({data: {bgUrl:shotImg,shareImg:shareImg}})
+						wx.miniProgram.navigateBack();
+					}else{
+						// window.location.href = shottingImg;
+						window.open(shotImg)
+					}
+				}
+				
+				// 视频播放
+				window.onvideoplay = () => {
+					console.warn("***onvideoplay***")
+				}
+				//针对手机端的处理
+				document.addEventListener("touchend", ()=> {
+					if(this.isShowOneGuideMask==false){
+						this.isShowOneGuideMask = true;
+						this.isTouchstart = true;
+					}
+					// console.warn("***kpanoraTouch***",this.isTouchstart)
+				})
+				//针对PC端的处理
+				document.addEventListener("click", ()=> {
+					if(this.isShowOneGuideMask==false){
+						this.isShowOneGuideMask = true;
+						this.isTouchstart = true;
+					}
+					// console.warn("***kpanoraTouch***",this.isTouchstart)
+				})
+				window.getScaleHandle = (scale) => {
+					console.warn("***getScaleHandle***",scale)
+				}
+            },
+			makescreenshot(){
+				// let screenshotcanvas = this.panoramicKrpano.webGL("krpano[webGL]");
+				let pix = 1 || window.devicePixelRatio;
+				let x = parseInt(this.$parent.bottomLeftX*pix);
+				let y = parseInt(this.$parent.top*pix);
+				let width = parseInt(this.$parent.width*pix);
+				let height = parseInt(this.$parent.height*pix);
+				let hasRedBox = this.redBoxData && this.redBoxData.ath?true:false;
+				console.warn("***screenshotcanvas***",x,y,width,height,hasRedBox)
+				this.panoramicKrpano.call("makescreenshot("
+				+ x+','
+				+ y+','
+				+ width+','
+				+ height+','
+				+ hasRedBox+")");
+			},
+			// getScale(){
+			// 	let video = this.panoramicKrpano.get("hotspot[video]");
+			// 	console.warn("***getPeolpeScale***",video.scale);
+			// },
+			// getPetScale(){
+			// 	let petVideo = this.panoramicKrpano.get("hotspot[petVideo]");
+			// 	console.warn("***getPetScale***",petVideo.scale);
+			// },
+			getPosition(){
+				let posi = {}
+				let video = this.panoramicKrpano.get("hotspot[video]");
+				if(video && video.visible){
+					posi.peopleAth = video.ath;
+					posi.peopleAtv = video.atv;
+				}
+				let petVideo = this.panoramicKrpano.get("hotspot[petVideo]");
+				if(petVideo && petVideo.visible){
+					posi.petAth = petVideo.ath;
+					posi.petAtv = petVideo.atv;
+				}
+				let redBox = this.panoramicKrpano.get("hotspot[redBox]");
+				if(redBox && redBox.visible){
+					posi.redBoxAth = redBox.ath;
+					posi.redBoxAtv = redBox.atv;
+				}
+				// console.warn("***getPosition***",posi);
+				return posi
+			},
+			setPosition(position){
+				let video = this.panoramicKrpano.get("hotspot[video]");
+				let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+				video.ath = position.ath;
+				video.atv = position.atv;
+				if(image_hotspot){
+					image_hotspot.ath = position.ath;
+					image_hotspot.atv = position.atv;
+				}
+				//移动视角到AI人物上
+				this.panoramicKrpano.set('view.hlookat', position.ath);
+				this.panoramicKrpano.set('view.vlookat', position.atv);
+				console.warn("***setPosition***",position);
+			},
+			//设置全景图图片地址
+			setSphereUrl(url){
+				if(!url){
+					return false
+				}
+				this.panoramicKrpano.set("panorama_url",url)
+				console.warn("***setSphereUrl***",url);
+			},
+			//设置视频地址
+			// setVideoUrl(url){
+			// 	if(!url){
+			// 		return false
+			// 	}
+			// 	this.panoramicKrpano.set("video_url",url)
+			// 	console.warn("***setVideoUrl***",url);
+			// },
+        },
+        mounted() {
+            embedpano({
+                swf: "https://dm.static.elab-plus.com/krpano.swf",
+                xml: this.$parent.pvCurPageName == 'add_AI_people' ? panoramicXML : panoramicNODragXML,
+                bgcolor: "#fff",
+                target: "panoramic-krpano",
+                passQueryParameters: false,
+                consolelog: true,
+                id: "panoramic",
+                mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
+                onready: this.panoramic,
+            });
+			this.scale = this.$parent.peopleScale;
+			// console.warn("***mounted***",this.$route.query.AIPeople,this.$route.query.bgMusic);
+			// this.peopleData = this.$route.query.AIPeople ? JSON.parse(this.$route.query.AIPeople) : {};
+			// this.petData = this.$route.query.AIPet ? JSON.parse(this.$route.query.AIPet) : {};
+			// this.redBoxData = this.$route.query.bgMusic ? JSON.parse(this.$route.query.bgMusic) : {};
+			// this.bgMusicData = this.$route.query.redBox ? JSON.parse(this.$route.query.redBox) : {};
+        },
+        created() {
+			console.warn("***this.type***")
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if (window.innerWidth && window.screen.width) {
+				screenWidth = Math.min(window.innerWidth, window.screen.width)
+			}
+			if (window.innerHeight && window.screen.height) {
+				screenHeight = Math.min(window.innerHeight, window.screen.height)
+			}
+			this.canvasHeight = this.$parent.pvCurPageName == 'add_AI_people' ? screenWidth : screenHeight;
+			this.pvCurPageName = this.$parent.pvCurPageName
+            // // 监听屏幕大小变化
+            // window.addEventListener('resize', ()=>{
+            // });
+        },
+        beforeDestroy() {
+            // this.panoramicKrpano.call(`closeVoice()`);
+        }
+    }
+</script>
+<style scoped lang="scss">
+    @import "index.scss";
+</style>

src/components/krpanoVideo/index_720视频.vue

@@ -0,0 +1,422 @@
+<template>
+    <!-- @touchstart="touchstartFunc" -->
+    <div class="panoramic-components">
+        <!-- 刷新按钮 -->
+        <div class="refresh-btn" @click="refreshPage">
+            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
+        </div>
+        <!-- 引导用户  触屏图片 -->
+        <div class="prompt-720-img" :class="isTouchstart ? '' : 'img-hide'">
+            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
+        </div>
+        <!-- 封面引导 蒙城图 -->
+        <div class="krpano-img-before" :class="!videoBefore ? 'krpano-img-after' : ''">
+            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
+        </div>
+        <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
+            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
+        </div>
+        <!-- 免责声明 -->
+        <div class="disclaimer">
+            <a
+                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
+        </div>
+        <!-- krpano -->
+        <div id="panoramic-krpano"></div>
+
+        <!-- <div class="panoramic-tab-content">
+            <div class="voice">
+                <div class="sales-head">
+                    <img src="https://dm.static.elab-plus.com/image/hqc/img_girl_head.png">
+                </div>
+                <div class="voice-content">
+                    <img class="voice-bg-img" src="./img/voice-bg-img.png">
+                    <div class="horn" @click="controlVoice()">
+                        <img :src="!isPayVoice ? require('./img/horn-img.png') : require('./img/play-horn-img.gif')" />
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-container swiper-container-class">
+                <div class="swiper-wrapper content">
+                    <div v-for="(tab, index) in tabList" :key="index" :name="index"
+                        :class="selectTabIndex == index ? 'select-style swiper-slide' : 'swiper-slide'">
+                        <img class="person-img" src="./img/person-img.png" />
+                        <span :name="index">{{tab.name}}</span>
+                        <div class="logo">
+                            <i></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="btn-line"></div>
+            </div>
+        </div> -->
+    </div>
+</template>
+
+<script>
+    // import BScroll from 'better-scroll';
+    const panoramicXML = require("./panoramic.xml");
+    export default {
+        data() {
+            return {
+                tabList: [],
+                selectTabIndex: 0,
+                isPayVoice: false,
+                isPromptShow: true,
+                sceneObj: { id: '', name: '' },
+                isTouchstart: false, // 是否触屏一次
+                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
+                videoBefore: true,
+                isPlayImg: false, // 暂停按钮出现
+                bgMusicList: {
+                    '1': 'https://dm.static.elab-plus.com/djp-bg-2.mp3',
+                    '2': 'https://dm.static.elab-plus.com/typ-bg-2.mp3',
+                    '3': 'https://dm.static.elab-plus.com/zyp-bg-2.mp3'
+                },
+                maxTabList: {
+                    '1': [
+                        {
+                            id: 'YZ', name: '私家庭院',
+                            music: 'https://dm.static.elab-plus.com/djp-yz-3.mp3',  //语音没有给
+                            videourl: "https://dm.static.elab-plus.com/sjty-A-floor.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/sjty-A-floor.jpg',
+                            isShowHotspot: false,
+                        },
+                        {
+                            id: 'XJEGC', name: '夏加尔广场',
+                            music: 'https://dm.static.elab-plus.com/djp-xjegc-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/djp-xjegc-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/djp-xjegc-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/djp-xjegc-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'FLXZ', name: '芙乐小镇',
+                            music: 'https://dm.static.elab-plus.com/djp-flxz-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/djp-flxz-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/djp-flxz-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/djp-flxz-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        }
+                    ],
+                    '2': [
+                        {
+                            id: 'YZ', name: '私家庭院',
+                            music: 'https://dm.static.elab-plus.com/sjty-D-music.mp3',  //语音没有给
+                            videourl: "https://dm.static.elab-plus.com/sjty-D-floor.mp4", // 有狗的
+                            bgImg: 'https://dm.static.elab-plus.com/sjty-D-floor.jpg', // 有狗的
+                            isShowHotspot: false,
+                        },
+                        {
+                            id: 'XRKHY', name: '向日葵花园',
+                            music: 'https://dm.static.elab-plus.com/typ-xrkhy-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/typ-xrkhy-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/typ-xrkhy-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/typ-xrkhy-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'XYCHY', name: '无影教堂',
+                            music: 'https://dm.static.elab-plus.com/typ-wyjt-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/typ-wyjt-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/typ-wyjt-3.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/typ-wyjt-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'MNHY', name: '莫奈花园',
+                            music: 'https://dm.static.elab-plus.com/typ-mnhy-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/hqc-file/zyp-mnhy-10-12-one.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/hqc-file/zyp-mnhy-10-12-two.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/hqc-file/typ-mnhy-bg-10-12.jpeg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        }
+                    ],
+                    '3': [
+                        {
+                            id: 'YZ', name: '私家庭院',
+                            music: 'https://dm.static.elab-plus.com/sjty-G-music.mp3',  //语音没有给
+                            videourl: "https://dm.static.elab-plus.com/sjty-G-floor.mp4", // 有狗的
+                            bgImg: 'https://dm.static.elab-plus.com/sjty-G-floor.jpg', // 有狗的
+                            isShowHotspot: false,
+                        },
+                        {
+                            id: 'ZJGJD', name: '最佳观景点',
+                            music: 'https://dm.static.elab-plus.com/zyp-zjgjd-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/zyp-zjgjd-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/zyp-zjgjd-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/zyp-zjgjd-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'BSZY', name: '半山庄园',
+                            music: 'https://dm.static.elab-plus.com/zyp-bszy-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/zyp-bszy-1.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/zyp-bszy-2.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/zyp-bszy-bg.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        },
+                        {
+                            id: 'PTTY', name: '葡萄田园',
+                            music: 'https://dm.static.elab-plus.com/zyp-ptty-3.mp3',
+                            videourl: "https://dm.static.elab-plus.com/hqc-file/zyp-ptty-10-12-one.mp4",
+                            videourlTwo: "https://dm.static.elab-plus.com/hqc-file/zyp-ptty-10-12-two.mp4",
+                            bgImg: 'https://dm.static.elab-plus.com/hqc-file/zyp-ptty-bg-10-12.jpg',
+                            currentUrlName: '',  //当前播放的地址
+                            isShowHotspot: true,
+                        }
+                    ]
+                },
+            }
+        },
+        methods: {
+            // 更新title
+            updateTitle(name) {
+                document.title = name;
+            },
+            // 刷新页面
+            refreshPage() {
+                let href = window.location.href;
+                let route = this.$route;
+                let query = route.query;
+                let type = this.type;
+                let tabObj = this.maxTabList[type][this.selectTabIndex];
+                let newLocation = tabObj.id;
+                let newHref;
+                // 判断是否有 location
+                if (query.location) {
+                    newHref = href.replace(`location=${query.location}`, `location=${newLocation}`);
+                } else {
+                    if (JSON.stringify(query).length > 2) {
+                        // 当有参数，但是没有location
+                        newHref = `${href}&location=${newLocation}`;
+                    } else {
+                        // 当没有参数的时候
+                        newHref = `${href}?location=${newLocation}`;
+                    }
+                }
+                window.location.replace(newHref);
+                window.location.reload();
+            },
+            panoramic() {
+				console.warn("***panoramicKrpano***")
+                this.panoramicKrpano = document.getElementById('panoramic');
+                // 设置播放的场景
+                this.switchScene(this.selectTabIndex);
+                // 视频加载完
+                window.videoready = () => {
+                    this.videoBefore = false;
+                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
+                    if (!this.isShowOneGuideMask) {
+                        // 视频加载完
+                        this.isTouchstart = true;
+                    }
+                    if (this.tipSwiper) {
+                        this.controlVoice(this.selectTabIndex, true, true);
+                    }
+                };
+                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
+                window.videopausedFunc = () => {
+                    // this.refreshPage();
+                    // this.switchScene();
+                    // 关闭播放的的图片
+                    // this.isPayVoice = false;
+                    this.refreshPage();
+                }
+                // 当在视频里面切换不同的场景
+                window.switchScenesType = () => {
+                    this.tipSwiper = false;
+                    this.switchScene();
+                }
+                // 声音播放完
+                window.musicPlayComplete = () => {
+                    this.isPayVoice = false;
+                };
+                // 播放声音状态
+                window.payVoiceStatus = (isPlayStatus) => {
+                    this.isPayVoice = isPlayStatus == 'true' ? true : false;
+                }
+                // 暂停视频，显示图片
+                window.switchPlayImg = (isPlayStatus) => {
+                    this.isPlayImg = !this.isPlayImg;
+                }
+            },
+            manualUpdateSlide(index) {
+                // swiper  loop: true模式下 双向数据绑定无效，手动更新class
+                if (!this.slideList) {
+                    let slideListDom = document.querySelectorAll('.swiper-slide');
+                    this.slideList = Array.prototype.slice.call(slideListDom, 0);
+                }
+                this.slideList.map((dom) => {
+                    var indexName = dom.getAttribute('name');
+                    if (indexName == index) {
+                        dom.classList.add('select-style');
+                    } else {
+                        dom.classList.remove('select-style');
+                    }
+                });
+            },
+            // 点击播放音乐，点击暂停音乐
+            // isStartPay 重新播放
+            controlVoice(index = this.selectTabIndex, isPayVoice, isStartPay) {
+                if (isPayVoice === false) {
+                    this.isPayVoice = false;
+                } else {
+                    this.isPayVoice = isPayVoice ? true : this.isPayVoice = !this.isPayVoice;
+                }
+                // 获取声音的名称
+                let voiceObj = this.tabList[index];
+                // // 播放声音
+                // if (this.isPayVoice) {
+                // 是不是
+
+                this.panoramicKrpano.call(`playsoundMusic(${voiceObj.id},${voiceObj.music},${isStartPay})`);
+                // } else {
+                //     // 暂停声音
+                //     this.panoramicKrpano.call(`pausesoundMusic(${voiceObj.id})`);
+                // }
+
+            },
+            slideToIndex(index) {
+                // this.mySwiper.slideTo(index, 300, false);
+                // 手动更新class
+                this.manualUpdateSlide(index)
+            },
+            // 切换场景
+            switchScene(index = this.selectTabIndex, isStartPlay) {
+                // 视频加载之前, 加载遮住层
+                this.videoBefore = true;
+                // 解决黑屏的问题
+                // 获取对应的场景名称
+                let sceneName = this.tabList[index].id;
+                let videourl = this.tabList[index].videourl;
+                let bgImg = this.tabList[index].bgImg;
+                let isShowHotspot = this.tabList[index].isShowHotspot;
+                // 当前播放的url名称
+                let currentUrlName = this.tabList[index].currentUrlName;
+                // 当有下一个场景切换的时候
+                if (isShowHotspot) {
+                    if (currentUrlName == 'videourl' && !!currentUrlName && !isStartPlay) {
+                        videourl = this.tabList[index].videourlTwo;
+                        this.tabList[index].currentUrlName = 'videourlTwo';
+                    } else {
+                        this.tabList[index].currentUrlName = 'videourl';
+                    }
+                }
+                // 切换场景, 播放音乐
+                // 如果上次延时，没执行，则清理
+                if (this.timeId) {
+                    clearTimeout(this.timeId);
+                }
+                this.timeId = setTimeout(() => {
+                    let bgMusicPath = this.bgMusicList[this.type];
+                    this.panoramicKrpano.call(`playSceneName(${videourl}, ${bgImg},${bgMusicPath},${isShowHotspot})`);
+                }, (!this.tipSwiper ? 500 : 0));
+            },
+        },
+        watch: {
+            isTouchstart(val, oldVal) {
+                if (val == true) {
+                    this.isShowOneGuideMask = true;
+                    setTimeout(() => {
+                        this.isTouchstart = false;
+                        // 当引导图都隐藏后，才能触屏
+                        this.panoramicKrpano.call(`suspendedPlay()`);
+                    }, 3000);
+                }
+            }
+        },
+        mounted() {
+            embedpano({
+                swf: "https://dm.static.elab-plus.com/krpano.swf",
+                xml: panoramicXML,
+                bgcolor: "#000",
+                target: "panoramic-krpano",
+                passQueryParameters: false,
+                consolelog: true,
+                id: "panoramic",
+                mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
+                onready: this.panoramic
+            });
+            let _that_ = this;
+            // this.mySwiper = new Swiper('.swiper-container', {
+            //     loop: false,
+            //     loopAdditionalSlides: 2,
+            //     slidesPerView: 'auto',
+            //     preventClicksPropagation: false,
+            //     on: {
+            //         click: function (e) {
+            //             let index = e.target.getAttribute("name");
+            //             // 重复点击一个无效
+            //             if (!index || _that_.selectTabIndex == index) {
+            //                 return false;
+            //             }
+            //             // 播放按钮隐藏
+            //             _that_.isPlayImg = false;
+            //             // 暂停现在播放的语音
+            //             _that_.controlVoice(_that_.selectTabIndex, false, false);
+            //             // 然后赋值
+            //             _that_.selectTabIndex = index;
+            //             // 滚动到对应的值
+            //             _that_.slideToIndex(index);
+            //             let name = _that_.tabList[index].name;
+            //             // 暂停全部声音
+            //             // _that_.panoramicKrpano.call(`closeVoice()`);
+            //             // 更新title名称
+            //             _that_.updateTitle(name);
+            //             // 切换场景
+            //             _that_.switchScene(index, true);
+            //             // 当切换过场景后，才能播放声音
+            //             _that_.tipSwiper = true;
+            //             _that_.$emit("setTab", _that_.tabList[index]);
+            //         },
+            //     },
+            // });
+            if (this.selectTabIndex != 0) {
+                this.slideToIndex(this.selectTabIndex);
+            }
+            let name = this.tabList[this.selectTabIndex].name;
+            // 更新title名称
+            this.updateTitle(name);
+            this.$emit("setTab", this.tabList[this.selectTabIndex]);
+        },
+        created() {
+			console.warn("***this.type***")
+            // type 1,2,3  表示 度假派、田园派、庄园派
+            this.type = this.$route.query.type || 1;
+            this.locationName = this.$route.query.location;
+            this.tabList = this.maxTabList[this.type];
+            // 寻找对应的场景
+            if (this.locationName) {
+                this.tabList.map((item, index) => {
+                    if (item.id == this.locationName) {
+                        // 取对应的值
+                        this.sceneObj = item;
+                        // 然后滚动到对应的区域
+                        this.selectTabIndex = index;
+                    }
+                });
+            } else {
+                // 如果没有默认第一个
+                this.sceneObj = this.tabList[0];
+            }
+			console.warn("***this.type***",this.sceneObj)
+            // // 监听屏幕大小变化
+            // window.addEventListener('resize', ()=>{
+            // });
+        },
+        beforeDestroy() {
+            // this.panoramicKrpano.call(`closeVoice()`);
+        }
+    }
+</script>
+<style scoped lang="scss">
+    @import "index.scss";
+</style>

src/components/krpanoVideo/panoramic.xml

@@ -0,0 +1,287 @@
+<krpano version="1.20.9" title="Virtual Tour">
+
+	<action name="mytest">
+	  screentosphere(mouse.x, mouse.y, toh, tov);
+	  jscall(calc('console.log("'+toh+'")'));
+	  jscall(calc('console.log("'+tov+'")'));
+	</action>
+	
+	<events
+		onclick="mytest();"
+	/>
+	
+	<!-- startup action - load the first scene -->
+	<action name="startup" autorun="onstart">
+		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
+		loadscene(get(startscene), null, MERGE);
+		if(startactions !== null, startactions() );
+	</action>
+	<events onloadcomplete="sceneload"></events>
+	<action name="sceneload">
+	    jscall('window.sceneload()');
+	</action>
+	<!-- <events onenterfullscreen=""          切换到全屏显示执行
+	        onexitfullscreen=""           从全屏切换回普通视图时执行
+	        onxmlcomplete=""              XML文件加载完成时执行
+	        onpreviewcomplete=""          预览图加载完成时执行
+	        onloadcomplete=""             全景切片图片加载完毕时执行
+	        onnewpano=""                  当启动新的全景场景时执行
+	        onremovepano=""               当前场景被关闭时执行（加载新场景前）
+	        onnewscene=""                 新场景加载完成时执行
+	        onloaderror=""                加载错误时执行，执行被设置后，屏幕将不显示默认的错误信息
+	        οnkeydοwn=""                  当某个键盘被按下时执行
+	        οnkeyup=""                    当某个键盘松开时执行
+	        οnclick=""                    当鼠标点击全景场景时执行
+	        οnmοusedοwn=""                当鼠标按下时执行
+	        οnmοuseup=""                  当鼠标松开时执行
+	        onmousewheel=""               当鼠标滚轮滚动时执行
+	        onidle=""                     当无用户操作在设定秒数后执行
+	        onviewchange=""               当场景转变时执行（渲染开始时）
+	        onviewchanged=""              当场景转变时执行（渲染完成时）
+	        οnresize=""                   当浏览器大小改变时执行
+	        /> -->
+	<!-- <events onloadcomplete="visible_hotspotGroupA"></events> -->
+	<scene name="mainScene" onstart=""
+		havevrimage.mobilevr="false" 
+		havevrimage.no-mobilevr="true" lat="" lng="" heading="">
+
+		<control bouncinglimits="calc:image.cube ? true : false" />
+
+		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="90.000" maxpixelzoom="2.0" fovmin="70" fovmax="120" limitview="auto" />
+
+		<!-- <preview url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/preview.jpg" /> -->
+
+		<image if="!(webvr.isenabled OR device.mobilevr)">
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" /> -->
+			<!-- <sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" /> -->
+			<sphere url="%$panorama_url%" />
+		</image>
+
+		<image if="webvr.isenabled OR device.mobilevr">
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/vr/pano_%s.jpg" /> -->
+			<!-- <sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" /> -->
+			<sphere url="%$panorama_url%" />
+		</image>
+		<!--火车站-->
+		<!-- <hotspot name="spot2" url="skin/plugin.png" distorted="true" keep="false" ath="145.763" atv="22" visible="true"></hotspot>
+		<plugin  parent="hotspot[spot2]" name="hottiyan_2" type="container"  width="40" bgalpha="0.0" bgcapture="true" >
+			<layer  name="title2_hottiyan" style="text" align="bottom" x="0" y="75" width="100%" html="火车站" css="text-align:center; color:#5D7B53; font-family:Arial; font-weight:400; font-size:17px;border: 0px solid #fff;border-radius:10px;padding: 10px 5px; box-sizing: border-box;background: rgba(255, 255, 255, 0.2);border-radius: 10px;backdrop-filter: blur(50px);">
+			</layer>
+			<layer  name="title2_line1_hottiyan" style="text" align="top center" x="0" y="-80" height="80px" css="background-color:#fff;width:1px;height:80px"  />
+			<layer  name="title2_line2_hottiyan" style="text" align="top center" x="0" y="0" css="background-color:#fff;width:6px;height:6px;border-radius:50%;"  />
+		</plugin> -->
+		<!-- <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"
+			ondown="draghotspot();"
+			onclick="togglepause();"
+			cursor="grab"
+			ondown.addevent="set(cursor,grabbing);"
+			onup.addevent="set(cursor,grab);"
+			zorder="2"
+			enabled="true"
+		>
+		</hotspot>
+		<!-- 电子人的阴影 -->
+		<hotspot name="image_hotspot" ath="50.082" atv="14" rotate="0" zorder="1"
+			distorted="true" scale="1" alpha="0.5" visible="false" width="180" height="320"
+			url="https://dm.static.elab-plus.com/miniProgram/shadow11.png" keep="true"></hotspot>
+		<action name="draghotspot">
+			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
+			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
+			sub(drag_adjusty, mouse.stagey, hotspotcentery);
+			asyncloop(pressed,
+				sub(dx, mouse.stagex, drag_adjustx);
+				sub(dy, mouse.stagey, drag_adjusty);
+				screentosphere(dx, dy, ath, atv);
+				set(hotspot[image_hotspot].ath, get(ath));
+				set(hotspot[image_hotspot].atv, get(atv));
+			);
+		</action>
+		<!-- 宠物视频 -->
+		<hotspot name="petVideo"
+			ath="80.0" 
+			atv="14"
+			url="https://dm.static.elab-plus.com/videoplayer.js"
+			videourl=""
+			width="180"
+			height="180"
+			chromakey="0x238E54|0.294|0.133"
+			preload="true"
+			pausedonstart="false"
+			loop="true"
+			distorted="true"
+			muted="true"
+			zoom="true"
+			autopause="true"
+			autoresume="true"
+			scale="1"
+			ondown="dragpetspot();"
+			cursor="grab"
+			ondown.addevent="set(cursor,grabbing);"
+			onup.addevent="set(cursor,grab);"
+			zorder="2"
+		>
+		</hotspot>
+		<action name="dragpetspot">
+			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
+			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
+			sub(drag_adjusty, mouse.stagey, hotspotcentery);
+			asyncloop(pressed,
+				sub(dx, mouse.stagex, drag_adjustx);
+				sub(dy, mouse.stagey, drag_adjusty);
+				screentosphere(dx, dy, ath, atv);
+			);
+		</action>
+		<!-- 红包 -->
+		<!-- <hotspot name="redBox" ath="50.082" atv="14" rotate="-45.0" zorder="1"
+			distorted="true"  ondown="dragRedSpot();"
+			url="https://dm.static.elab-plus.com/miniProgram/redbox.gif">
+		</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"
+			ondown="dragRedSpot();"
+			cursor="grab"
+			ondown.addevent="set(cursor,grabbing);"
+			onup.addevent="set(cursor,grab);"
+			zorder="2"
+		>
+		</hotspot>
+		<action name="dragRedSpot">
+			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
+			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
+			sub(drag_adjusty, mouse.stagey, hotspotcentery);
+			asyncloop(pressed,
+				sub(dx, mouse.stagex, drag_adjustx);
+				sub(dy, mouse.stagey, drag_adjusty);
+				screentosphere(dx, dy, ath, atv);
+			);
+		</action>
+		<action name="showRedBox">
+			def(scale, string, get(hotspot[redBox].scale));
+			set(hotspot[redBox].visible, 'true');
+			hotspot[redBox].playvideo(%1, '', false);
+			set(hotspot[redBox].scale, get(scale));
+		</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);
+		</action>
+		<action name="playSceneName">
+			def(scale, string, get(hotspot[video].scale));
+		    <!-- 打印日志 -->
+		    <!-- showlog(true, top); -->
+		    <!-- mobilescale(); -->
+		    <!-- 播放视频 -->
+			set(hotspot[video].visible, 'true');
+			set(hotspot[image_hotspot].visible, 'true');
+		    hotspot[video].playvideo(%1, '', false);
+			set(hotspot[video].scale, get(scale));
+		</action>
+		<action name="stopPeopleVideo">
+			<!-- 播放视频 -->
+			<!-- hotspot[video].playvideo('', '', false); -->
+			hotspot[video].stop();
+			set(hotspot[video].visible, get(false));
+			set(hotspot[image_hotspot].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].playvideo('', '', false); -->
+			hotspot[petVideo].stop();
+			set(hotspot[petVideo].visible, get(false));
+		</action>
+		
+		<!-- 设置缩放大小 -->
+		<action name="scalePeopleChange">
+			set(hotspot[video].scale, %1);
+		</action>
+		<!-- 设置缩放大小 -->
+		<action name="scalePetChange">
+			set(hotspot[petVideo].scale, %1);
+		</action>
+		<!-- 切换状态播放，暂停 -->
+		<action name="toggleMute">
+			set(hotspot[video].muted, %1);
+			set(hotspot[petVideo].muted, %1);
+			<!-- set(plugin[soundinterface].mute, %1); -->
+			mutesound(bgsnd,%1);
+		</action>
+		<!-- 视频初始化完成 -->
+		<action name="videoreadyFunc">
+		    jscall('window.videoready()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<!-- 视频播放 -->
+		<action name="videoplayHandle">
+		    jscall('window.onvideoplay()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<action name="playBgMusic">
+		    <!-- 播放背景音乐 -->
+		    playsound(bgsnd, %1, true);
+			mutesound(bgsnd,%2);
+		</action>
+		<!-- 关闭所有的声音 -->
+		<action name="closeVoice">
+		    destroysound(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"
+			muted="true"
+		    ></plugin>
+		<!-- 引导图加载完成后 -->
+		<!-- <action name="suspendedPlay">
+		    set(hotspot[video].isVideoreadyType, true);
+		</action> -->
+	</scene>
+
+
+</krpano>

src/components/krpanoVideo/panoramic_720视频.xml

@@ -0,0 +1,231 @@
+<krpano name="globalObject">
+    <plugin name="video"
+            url.html5="https://dm.static.elab-plus.com/videoplayer.js" 
+            videourl=""
+            muted="true"
+            preload="true"
+            pausedonstart="false"
+            onvideoready="videoreadyFunc"
+            onvideopaused="videopausedFunc"
+            url.flash="https://dm.static.elab-plus.com/videoplayer.swf"
+            loop="true"
+            isPlayBg="false"
+            voicesList=""
+            playName = ""
+            isPay = "false"
+            isVideoreadyType="false"
+            isTip = "false"
+            />
+    <image>
+        <sphere url="plugin:video" />
+    </image>
+    <!-- 热点地址 -->
+    <hotspot 
+        name="hotspot-yard"
+        type="image"
+        edge="lefttop"
+        url="https://dm.static.elab-plus.com/hqc-img/forward.png"
+        alturl="https://dm.static.elab-plus.com/hqc-img/forward.png"
+        distorted="true"
+		ath="0"
+        atv="0"
+        width="74"
+        height="91"
+        visible="false"
+        onclick="switchScenesType"
+        />
+    <settings width="100" height="50" />
+    <view hlookat="0" vlookat="0" fov="120" fovmin="90.0" fovmax="130.0" fovtype="DFOV"/>
+    <action name="switchScenesType">
+        jscall('window.switchScenesType()');
+    </action>
+    <action name="mobilescale" autorun="preinit" devices="mobile">
+        mul(stagescale,0.5);
+    </action>
+    <action name="playSceneName">
+        <!-- 打印日志 -->
+        <!-- showlog(true, top); -->
+        mobilescale();
+        <!-- 播放视频 -->
+        plugin[video].playvideo(%1, %2, false);
+        def(b, string, get(plugin[video].isPlayBg));
+        if(b == false, playBgMusic(%3));
+        if(b == suspend, delayedcall(0.5 , playBgMusic(%3, true)););
+        <!-- 是否显示热点 -->
+        if(
+            %4 == true,
+                set(hotspot[hotspot-yard].visible, true);
+                ,
+                set(hotspot[hotspot-yard].visible, false);
+            )
+    </action>
+    <action name="playBgMusic">
+        <!-- 播放背景音乐 -->
+        ifnot(%2 == true, playsound(bgsnd, %1, 0););
+        if(%2 == true, pausesoundtoggle(bgsnd););
+        set(plugin[video].isPlayBg, true);
+    </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="musicPlayComplete">
+        <!-- 删掉保存的状态 -->
+        <!-- 播放的数组 -->
+        def(voicesList, string, get(plugin[video].voicesList));
+        <!-- 刚播放完的名称 -->
+        def(voicesName, string, get(plugin[video].playName));
+        txtreplace(voicesList, get(voicesName), '');
+        set(plugin[video].playName, '');
+        set(plugin[video].isPay, false);
+        set(plugin[video].voicesList, voicesList);
+
+        jscall('window.musicPlayComplete()');
+    </action>
+    <!-- 播放声音 -->
+    <action name="playsoundMusic">
+        def(voicesList, string, get(plugin[video].voicesList));
+        def(voicesName, string, %1);
+        def(voicesUrl, string, %2);
+        def(isStartPay, string, %3);
+        <!-- 当前播放的名称 -->
+        set(plugin[video].playName, get(voicesName));
+        <!-- 当之前没有播放过，则播放声音 -1就是没有播放过-->
+        indexoftxt(index, get(voicesList), get(voicesName));
+        <!-- isStartPay true 播放音乐 false 暂停音乐  index == -1 播放音乐  其他的则切换音乐状态 -->
+        if(
+            isStartPay == true,
+                startPayMusic(get(voicesName), get(voicesUrl), get(voicesList));
+            ,
+                if(
+                    isStartPay == false,
+                        pausesoundMusic(get(voicesName));
+                    ,
+                        if(
+                            index == -1,
+                                startPayMusic(get(voicesName), get(voicesUrl), get(voicesList));
+                            ,
+                                toggleMusic(get(voicesName));
+                        )
+                )
+        );
+    </action>
+    <!-- 重新开始播放 -->
+    <action name="startPayMusic" args="voicesName, voicesUrl, voicesList">
+        <!-- 将播放的字符 添加到总字符中 -->
+        txtadd(voicesConcat, get(voicesList), get(voicesName));
+        <!-- 设置播放的字符集合 -->
+        set(plugin[video].voicesList, get(voicesConcat));
+        <!-- 是否在播放 -->
+        set(plugin[video].isPay, true);
+        <!-- 播放声音 -->
+        def(b, string, get(plugin[video].isPlayBg));
+        if(
+            b == suspend,
+                delayedcall(0.5,playsound(get(voicesName), get(voicesUrl), 1, musicPlayComplete););
+            ,
+                playsound(get(voicesName), get(voicesUrl), 1, musicPlayComplete);
+        );
+    </action>
+    <!-- 切换状态播放，暂停 -->
+    <action name="toggleMusic" args="voicesName">
+        def(isPay, string, get(plugin[video].isPay));
+        if(
+            isPay == false,
+                set(plugin[video].isPay, true);
+                resumesoundMusic(get(voicesName))
+            ,
+                set(plugin[video].isPay, false);
+                pausesoundMusic(get(voicesName));
+        );
+    </action>
+    <!-- 暂停声音 -->
+    <action name="pausesoundMusic">
+        pausesound(%1);
+    </action>
+    <!-- 恢复声音 -->
+    <action name="resumesoundMusic">
+        resumesound(%1);
+    </action>
+    <!-- 关闭所有的声音 -->
+    <action name="closeVoice">
+        pausesoundtoggle(bgsnd);
+    </action>
+    <!-- 视频初始化完成 -->
+    <action name="videoreadyFunc">
+        jscall('window.videoready()');
+    </action>
+    <!-- 引导图加载完成后 -->
+    <action name="suspendedPlay">
+        set(plugin[video].isVideoreadyType, true);
+    </action>
+    <!-- 视频暂停 -->
+    <!-- 解决ios手机 切换页面返回不自动播放的原因 devices="ios"-->
+    <action name="videopausedFunc" devices="ios">
+        def(isTip, string, get(plugin[video].isTip));
+        trace(plugin[video].isTip);
+        
+        pausesound(bgsnd);
+        set(plugin[video].isPay, false);
+        def(voicesName, string, get(plugin[video].playName));
+        ifnot(voicesName == '' ,pausesoundMusic(get(voicesName)););
+     
+
+        if(isTip == true, 
+            set(plugin[video].isTip, false);
+        ,
+            jscall('window.videopausedFunc()');
+        );
+    </action>
+    <!-- 滚动到中心位置 -->
+    <events onclick="clickFunc"></events>
+    <action name="clickFunc">
+        <!-- screentosphere(mouse.x, mouse.y, h, v);
+        trace(h,',',v); -->
+        def(isVideoreadyType, string, get(plugin[video].isVideoreadyType));
+        if(isVideoreadyType == true,
+            <!-- 获取当前播放的声音名称 -->
+            def(voicesName, string, get(plugin[video].playName));
+            <!-- 切换播放的状态 -->
+            <!-- plugin[video].togglepause(); -->
+
+            def(isPlayBg, string, get(plugin[video].isPlayBg));
+            if(isPlayBg == true,
+            <!-- 暂停声音 -->
+                    <!-- 暂停视频 -->
+                    plugin[video].pause();
+                       <!-- 是因为点击导致视频暂停 -->
+                    set(plugin[video].isTip, true);
+                    pausesound(bgsnd);
+                    set(plugin[video].isPlayBg, false);
+                    jscall(calc("window.switchPlayImg('"+ false +"')") );
+                    <!-- 当有播放声音的名称，则切换播放的状态 -->
+                    ifnot(voicesName == '' ,
+                        <!-- 暂停声音 -->
+                        set(plugin[video].isPay, false);
+                        pausesoundMusic(get(voicesName));
+                        jscall(calc("window.payVoiceStatus('"+ false +"')") );); 
+                ,
+            <!-- 播放声音 -->
+                    <!-- 播放视频 -->
+                    plugin[video].play();
+                    resumesound(bgsnd);
+                    set(plugin[video].isPlayBg, true);
+                    jscall(calc("window.switchPlayImg('"+ true +"')") );
+                    <!-- 当有播放声音的名称，则切换播放的状态 -->
+                    ifnot(voicesName == '' ,
+                        <!-- 播放声音 -->
+                        set(plugin[video].isPay, true);
+                        resumesoundMusic(get(voicesName));
+                        jscall(calc("window.payVoiceStatus('"+ true +"')") );); 
+            );
+        );
+        
+        
+    </action>
+</krpano>

src/components/krpanoVideo/panoramic_no_drag.xml

@@ -0,0 +1,325 @@
+<krpano version="1.20.9" title="Virtual Tour">
+	<!-- <plugin name="pp_light" keep="true"
+		url="https://dm.static.elab-plus.com/miniProgram/krpano/plugins/pp_light.js"
+		enabled="true"
+		exposure="0.0"
+		lights="1.0"
+		shadows="5.0"
+		filterrange="60.0"
+		masking="1.0"
+		quality="7"
+		order="1"
+		phase="1"
+		/>
+	
+	<plugin name="pp_sharpen" keep="true"
+		url="https://dm.static.elab-plus.com/miniProgram/krpano/plugins/pp_sharpen.js"
+		enabled="true"
+		strength="5.0"
+		range="5"
+		quality="5"
+		luminanceonly="true"
+		order="2"
+		phase="1"
+		/> -->
+	<action name="mytest">
+		screentosphere(mouse.x, mouse.y, toh, tov);
+		jscall(calc('console.log("'+toh+'")'));
+		jscall(calc('console.log("'+tov+'")'));
+	</action>
+
+	<events onclick="mytest();" />
+
+	<!-- startup action - load the first scene -->
+	<action name="startup" autorun="onstart">
+		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
+		loadscene(get(startscene), null, MERGE);
+		if(startactions !== null, startactions() );
+	</action>
+	<events onloadcomplete="sceneload"></events>
+	<action name="sceneload">
+		jscall('window.sceneload()');
+	</action>
+	<scene name="mainScene" onstart="" havevrimage.mobilevr="false" havevrimage.no-mobilevr="true" lat="" lng=""
+		heading="">
+
+		<control bouncinglimits="calc:image.cube ? true : false" />
+
+		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="90.000" maxpixelzoom="4.0" fovmin="70" fovmax="120"
+			limitview="auto" />
+
+		<!-- <preview
+			url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/preview.jpg" /> -->
+
+		<image if="!(webvr.isenabled OR device.mobilevr)">
+			<sphere url="%$panorama_url%" />
+		</image>
+
+		<image if="webvr.isenabled OR device.mobilevr">
+			<sphere url="%$panorama_url%" />
+		</image>
+		<!-- 电子人 -->
+		<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="0" zorder="1"
+			distorted="true" scale="1" alpha="0.5" visible="false" width="180" height="320"
+			url="https://dm.static.elab-plus.com/miniProgram/shadow11.png" keep="true"></hotspot>
+		<!-- 宠物视频 -->
+		<hotspot name="petVideo"
+			ath="80.0" 
+			atv="14"
+			url="https://dm.static.elab-plus.com/videoplayer.js"
+			videourl=""
+			width="180"
+			height="180"
+			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="true"
+			onclick="toggleRedBox();"
+		>
+		</hotspot>
+		<action name="toggleRedBox">
+			jscall('window.toggleRedBox()');
+		</action>
+		<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);
+		</action>
+		<action name="playSceneName">
+			def(scale, string, get(hotspot[video].scale));
+		    <!-- 打印日志 -->
+		    <!-- showlog(true, top); -->
+		    <!-- mobilescale(); -->
+		    <!-- 播放视频 -->
+			set(hotspot[video].visible, 'true');
+			set(hotspot[image_hotspot].visible, 'true');
+		    hotspot[video].playvideo(%1, '', false);
+			set(hotspot[video].scale, get(scale));
+		</action>
+		<action name="stopPeopleVideo">
+			<!-- 播放视频 -->
+			<!-- hotspot[video].playvideo('', '', false); -->
+			hotspot[video].stop();
+			set(hotspot[video].visible, get(false));
+			set(hotspot[image_hotspot].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="scalePetChange">
+			set(hotspot[petVideo].scale, %1);
+		</action>
+		<!-- 切换状态播放，暂停 -->
+		<action name="toggleMute">
+			set(hotspot[video].muted, %1);
+			set(hotspot[petVideo].muted, %1);
+			mutesound(bgsnd,%1);
+		</action>
+		<!-- 视频初始化完成 -->
+		<action name="videoreadyFunc">
+		    jscall('window.videoready()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<!-- 视频播放 -->
+		<action name="videoplayHandle">
+		    jscall('window.onvideoplay()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<action name="playBgMusic">
+		    <!-- 播放背景音乐 -->
+		    playsound(bgsnd, %1, true);
+			mutesound(bgsnd,%2);
+			<!-- mutesound(bgsnd,%2); -->
+		</action>
+		<!-- 关闭所有的声音 -->
+		<action name="closeVoice">
+		    destroysound(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"
+			muted="true"
+		    ></plugin>
+		<!-- 截图 -->
+		<action name="makescreenshot_init" type="Javascript" autorun="onstart"><![CDATA[
+			// count the screenshots (for the filenames)
+			krpano.makescreenshot_count = 1;
+			// create an empty Object as makeScreenshot cache
+			var makeScreenshotCache = {};
+			// add a 'makescreenshot' action to krpano
+			krpano.makescreenshot = function(leftX,leftY,screenshotwidth,screenshotheight,hasRedBox=false)
+			{
+				// if there is already a screenshot layer, remove it now
+				console.warn("***makescreenshot***",krpano.webGL,leftX,leftY,screenshotwidth,screenshotheight)
+				var canvas = krpano.webGL.canvas;
+				var pix = window.devicePixelRatio;
+				// make a screenshot as canvas
+				var sizeinfo = {w:screenshotwidth*pix, h:screenshotheight*pix};
+				var crop = {
+					x:leftX*pix,
+					y:leftY*pix,
+					w:screenshotwidth*pix, 
+					h:screenshotheight*pix
+				};
+				var scaledCanvas = document.createElement("canvas");
+				var scaledContext = scaledCanvas.getContext('2d');
+				scaledCanvas.width = 1684;//分享小图的尺寸-宽度-二倍图
+				scaledCanvas.height = 1344;//分享小图的尺寸-高度-二倍图
+				var unit = sizeinfo.w/scaledCanvas.width;
+				var vfw = sizeinfo.w;
+				var vfh = scaledCanvas.height * unit;
+				var screenshotcanvas = krpano.webGL.makeScreenshot(
+					canvas.width, 
+					canvas.height,
+					true, 
+					"png",
+					1.0, 
+					crop, 
+					sizeinfo, 
+					makeScreenshotCache);
+				var shotImg = '';
+				var shareImg = '';
+				if (screenshotcanvas)
+				{
+					//var imgBase64 = screenshotcanvas.toDataURL();
+					// var shotImgBase64 = screenshotcanvas;
+					var imgBase64 = screenshotcanvas;
+					console.warn("***makescreenshot1***",vfw,vfh,scaledCanvas.width,scaledCanvas.height,hasRedBox)
+					if(hasRedBox=='true'){//有前置背景
+						var image = new Image();;
+						image.src = imgBase64;
+						image.onload = function() {
+							scaledContext.save();
+							scaledContext.drawImage(image,0,0,vfw,vfh,0,0,scaledCanvas.width,scaledCanvas.height);
+							scaledContext.restore();
+							var imageObj = new Image();;
+							imageObj.src = 'https://dm.static.elab-plus.com/miniProgram/shareBg.png';
+							imageObj.setAttribute("crossOrigin", "anonymous");
+							imageObj.onload = function() {
+								scaledContext.drawImage(imageObj,0,0,scaledCanvas.width,scaledCanvas.height,0,0,scaledCanvas.width,scaledCanvas.height);
+								var img_src = scaledCanvas.toDataURL();
+								screenshot(img_src,2);//生成分享的图
+							}
+						}
+					}
+					
+					
+					screenshot(imgBase64,1);
+					function screenshot(imgBase64,type){
+						var reqUrl = window.$config.api_url + 'elab-marketing-file/upload/uploadBase64';
+						var data = JSON.stringify({
+							base64Str: imgBase64
+						})
+						var request = $.ajax({
+							type: "POST",
+							url: reqUrl,
+							contentType: 'application/json;charset=UTF-8',
+							data: data
+						});
+						request.done(function(result) {
+							console.warn("***krpano-request-result****",hasRedBox,result)
+							if (result && result.success) {
+								let shottingImg = result.single.filePath;
+								if(type==1){
+									shotImg = shottingImg;
+								}else if(type==2){
+									shareImg = shottingImg;
+								}
+								if(hasRedBox=='true'){
+									if(shotImg && shareImg){
+										window.show_img(shotImg,shareImg);
+									}
+								}else{
+									window.show_img(shotImg,shareImg);
+								}
+							}
+						});
+						request.fail(function(jqXHR, textStatus) {
+							console.warn("Request failed: " + textStatus);
+						});
+					}
+				}
+			}	
+		]]>
+		</action>
+		
+	</scene>
+</krpano>

src/components/newBottomCom/viewAI/viewAI.html

@@ -0,0 +1,164 @@
+<div class="ai-view">
+	<div class="ai-title rows">
+		<!-- v-if="relationId" -->
+		<div v-if="relationId" 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.gif" 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>
+		<div class="title-btn rows justify-center" :class="{active:tabIndex==3}" @click.stop="tabChange(3)">音乐</div>
+	</div>
+	<div class="ai-people" v-if="tabIndex==0">
+		<div class="main grid-view1">
+			<div :class="['item', peopleIndex==idx ? 'active': '']" v-for="(item, idx) in leftList"
+				:key="idx">
+				<template v-if="item.userUpload">
+					<div v-if="!videoUrl">
+						<div class="empty-item" @click="showMask">
+							<div class="add-icon rows justify-center">
+								<img class="bg" :src="uploadStatus==1 || uploadStatus==2 || uploadStatus==4?'https://dm.static.elab-plus.com/miniProgram/person_icon1.png':'https://dm.static.elab-plus.com/miniProgram/person_icon.png'"/>
+							</div> 
+							<div class="rows justify-center" v-if="uploadStatus==1" style="width: 100%;height: 100%;">
+								<el-progress :format="format" :stroke-width="8"
+								define-back-color="#fff" color="#92CE8B" 
+								text-color="#92CE8B" type="circle" :percentage="progress"></el-progress>
+							</div>
+							<div class="rows justify-center" v-if="uploadStatus==2" style="width: 100%;height: 100%;">
+								<el-progress :format="format" :stroke-width="8"
+								define-back-color="#fff" color="#92CE8B" 
+								text-color="#92CE8B" type="circle" :percentage="ktProgress"></el-progress>
+							</div>
+						</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="showPopViewHandle">
+							<div class="close-view rows justify-center">
+								<i class="iconfont icon-close rows justify-center"></i>
+							</div>
+							取消
+						</div>
+					</div>
+					<div v-else>
+						<img class="itemImg" :src="item.icon" @click.stop="selectAction(item,idx)" />
+						<div class="item-name rows justify-center">
+							<i class="iconfont icon-ic-huanyihuan rows justify-center"></i>
+							替换
+							<form id='uploadVideoFrom1' class="uploadVideoFrom">
+								<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom1',2)"
+								 name="file" accept="video/*" class="el-upload__input">
+							</form>
+						</div>
+					</div>
+				</template>
+				<template v-else>
+					<img class="itemImg" :src="item.icon" @click.stop="selectAction(item,idx)"/>
+					<div class="item-name rows justify-center" @click.stop="selectAction(item,idx)">{{item.value}}</div>
+				</template>
+			</div>
+		</div>
+	</div>
+	<div class="ai-people" v-else-if="tabIndex==1">
+		<div class="main grid-view1">
+			<div :class="['item', petIndex==idx ? 'active': '']" v-for="(item, idx) in rightList"
+				:key="idx" @click="selectAction(item,idx)">
+				<img class="itemImg" :src="item.icon"/>
+				<div class="item-name rows justify-center">{{item.value}}</div>
+			</div>
+		</div>
+	</div>
+	<!-- 红包视图 -->
+	<div class="redbox" v-else-if="tabIndex==2">
+		<div class="main-box rows rows-between flex-start">
+			<div class="left-box">
+				<div class="left-main rows">
+					<div class="main-red columns justify-center">
+						<img class="red-img" src="https://dm.static.elab-plus.com/miniProgram/redbox.gif"/>
+						<!-- <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" @click="setRedBox">
+								红包调整
+							</div>
+						</div> -->
+						<div class="red-info" v-if="amount">
+							<div class="red-money">
+								<span class="tips">￥</span>{{amount}}
+							</div>
+							<div class="word">
+								场景礼包总奖励金
+							</div>
+						</div>
+					</div>
+					<div class="plus">+</div>
+					<div id="special-img" class="special-img"></div>
+				</div>
+				<div class="title"></div>
+			</div>
+			<div class="right-box">
+				<div class="select-view columns" style="justify-content:space-around">
+					<div class="select-btn" :class="{active:specialIndex==0}" @click.stop="specialChange(0)">金光闪闪</div>
+					<div class="select-btn" :class="{active:specialIndex==1}" @click.stop="specialChange(1)">烟花喷射</div>
+					<div class="select-btn" :class="{active:specialIndex==2}" @click.stop="specialChange(2)">彩带飘落</div>
+				</div>
+				<div class="title">打开特效</div>
+			</div>
+		</div>
+		<div class="playTips rows justify-center" @click="setRedBox">
+			玩法说明 >
+		</div>
+	</div>
+	<!-- 音乐列表 -->
+	<div class="ai-people" v-else-if="tabIndex==3">
+		<div class="main grid-view1">
+			<div :class="['item', musicIndex==idx ? 'active': '']" v-for="(item, idx) in musicList"
+				:key="idx" @click="selectAction(item,idx)">
+				<img class="itemImg" :src="item.icon?item.icon:'https://dm.static.elab-plus.com/miniProgram/ai-icon.png'"/>
+				<div class="item-name rows justify-center">{{item.value}}</div>
+			</div>
+		</div>
+	</div>
+	<div class="ai-tips">
+		{{tabIndex==0?'点击添加到场景中，可调整大小和拖动到摆放位置':(tabIndex==1?'点击宠物添加到场景中，可调整大小和拖动到摆放位置':(tabIndex==3?'点击音乐添加到场景中':''))}}
+	</div>
+	<div class="ai-bottom rows justify-center" @click.stop="mynavigateFuc">立即发布</div>
+	<!-- 弹出层-添加个人形象 -->
+	<div class="mask-view" v-if="showPersonView" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
+		<div class="content">
+			<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 />
+				生成前会以人物剪影的方式在场景中占位
+			</div>
+			<img class="img" src="https://dm.static.elab-plus.com/miniProgram/mask-img.png"/>
+			<div class="section-text">
+				1.文件小于50M，时长小于20秒<br />
+				2.人物需全身照，拍摄时需保持稳定<br />
+				3.人物双脚需靠近摄像画面底部<br />
+				4.背景不要太乱，推荐美颜相机
+			</div>
+			<div class="btn">
+				<div class="bg rows justify-center">上传</div>
+				<form id='uploadVideoFrom' class="uploadVideoFrom">
+					<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom',1)"
+					 name="file" accept="video/*" class="el-upload__input">
+				</form>
+			</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>
+	<!-- <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

@@ -0,0 +1,448 @@
+.ai-view{
+	position: relative;
+	width: 100%;
+	height: calc(100% - 750px);
+	background: #fff;
+	padding-top: 20px;
+	.ai-title{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		margin-bottom: 20px;
+		.title-btn{
+			// width: 210px;
+			height: 56px;
+			border-radius: 16px;
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 30px;
+			background: #fff;
+			color: #4e4e4e;
+			padding: 0px 17px;
+			box-sizing: border-box;
+			.redbox_icon{
+				width: 56px;
+				height: 56px;
+				// margin-right: 15px;
+			}
+		}
+		.title-btn.active{
+			background: #343434;
+			color: #cef5bc;
+		}
+		
+	}
+	.ai-tips{
+		position: absolute;
+		bottom: 160px;
+		width: 100%;
+		height: 34px;
+		// padding-left: 40px;
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 26px;
+		color: #4e4e4e;
+		opacity: 0.5;
+		// margin-bottom: 30px;
+		// margin-top: 20px;
+		text-align:center;
+	}
+	.grid-view1 {
+	    display: grid;
+	    grid-template-columns: repeat(4, 1fr);
+	    /* grid-row-gap: 20rem; */
+	    grid-gap: 20px 20px;
+	}
+	.ai-people{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		padding-right: 40px;
+		height: calc(100% - 76px - 28px - 194px);
+		.main{
+			// max-height: 400px;
+			max-height: 100%;
+			overflow-y: auto;
+			.item{
+				// margin-right: 20px;
+				font-size: 0px;
+				.item-name{
+					position:relative;
+					font-family: "Verdana";
+					font-weight: 400;
+					font-size: 24px;
+					color: #4e4e4e;
+					height: 34px;
+					.icon-ic-huanyihuan{
+						font-size: 24px;
+						color: #000;
+						margin-right: 4px;
+					}
+					.close-view{
+						width: 24px;
+						height: 24px;
+						line-height: 24px;
+						margin-right: 4px;
+						background: #231815;
+						opacity: 0.28;
+						color: #fff;
+						border-radius: 50%;
+						.icon-close{
+							font-size: 14px;
+						}
+					}
+				}
+				.empty-item{
+					position: relative;
+					width: 150px;
+					height: 140px;
+					border-radius: 20px;
+					background: transparent;
+					border: 2px dashed rgba(40, 44, 51, 0.2);
+					box-sizing: border-box;
+					margin-bottom: 10px;
+					.add-icon{
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						z-index: -1;
+						font-size: 70px;
+						// color:rgba(40, 44, 51, 0.25);
+						.bg{
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+						}
+					}
+					::v-deep .el-progress-circle{
+						width: 110px!important;
+						height: 110px!important;
+					}
+					::v-deep .el-progress__text{
+						font-family: "Verdana";
+						font-weight: 400;
+						white-space: pre;
+						font-size: 22px!important;
+						color: #8aff7c;
+					}
+				}
+				.empty-text{
+					font-size: 24px;
+				}
+				.itemImg{
+					width: 150px;
+					height: 140px;
+					border-radius: 20px;
+					border: solid 4px transparent;
+					font-size: 0px;
+					margin-bottom: 4px;
+					box-sizing: border-box;
+					object-fit: contain;
+				}
+			}
+			.item:last-child{
+				margin-right: 0px;
+			}
+			.item.active{
+				color: #85b474;
+			}
+			.active .itemImg{
+				border: solid 4px #94DB75;
+			}
+			
+			
+		}
+	}
+	.ai-bottom{
+		position: absolute;
+		left: 116px;
+		bottom: 60px;
+		width: 518px;
+		height: 80px;
+		border-radius: 40px;
+		background: linear-gradient(130.79deg, #a0ed84 0%, #e8f4b7 100%);
+		border: 2px solid rgba(255, 255, 255, 0.22);
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 34px;
+		color: #365d39;
+	}
+}
+
+.redbox{
+	position: relative;
+	box-sizing: border-box;
+	padding: 0px 20px;
+	margin-top: 50px;
+	.main-box{
+		margin-bottom: 44px;
+		.title{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 24px;
+			text-align: center;
+			color: #4e4e4e;
+			opacity: 0.5;
+		}
+		.left-box{
+			.title{
+				text-align: center;
+				width: 217px;
+			}
+			.left-main{
+				position: relative;
+				.main-red{
+					.red-img{
+						width: 217px;
+						height: 217px;
+					}
+					.icon-icon_delete{
+						width: 54px;
+						height: 54px;
+						border-radius: 27px;
+						background: rgba(118, 118, 118, 0.1);
+						font-size: 20px;
+						margin-right: 10px;
+					}
+					.red-btn{
+						width: 166px;
+						height: 54px;
+						border-radius: 27px;
+						background: #f27966;
+						font-family: "DIN Alternate Bold";
+						font-weight: 700;
+						font-size: 24px;
+						color: #fff;
+					}
+					.red-adjust{
+						background: rgba(242, 121, 102, 0.1);
+						color: #f27966;
+					}
+					.red-info{
+						.red-money{
+							color: rgb(229, 85, 85);
+							font-size: 40px;
+							font-family: DINCondensed-Bold;
+							font-weight: 700;
+							text-align: center;
+							.tips{
+								font-size: 26px;
+							}
+						}
+						.word{
+							font-family: "Verdana";
+							font-weight: 400;
+							font-size: 24px;
+							text-align: center;
+							color: rgba(78, 78, 78, 0.5);
+						}
+					}
+				}
+				.plus{
+					position: absolute;
+					left: 217px;
+					font-size: 30px;
+					top: 136px;
+				}
+				.special-img{
+					width: 286px;
+					height: 342px;
+					margin-left:49px;
+				}
+				
+			}
+		}
+		.right-box{
+			.select-view{
+				margin-top: 50px;
+			}
+			.select-btn{
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				margin-bottom: 27px;
+				color: rgba(54, 93, 57, 0.3);
+			}
+			.select-btn.active{
+				color: #365d39;
+			}
+		}
+	}
+	.playTips{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 26px;
+		color: #4e4e4e;
+	}
+}
+
+
+.tips-view{
+	position: absolute;
+	left:50%;
+	transform:translateX(-50%);
+	top:-50px;
+	font-family: "Verdana";
+	font-weight: 400;
+	font-size: 26px;
+	line-height: 30px;
+	text-align: center;
+	color: #2b2b2b;
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.mask-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;
+		bottom: 0px;
+		width: 100%;
+		height: 1320px;
+		border-radius: 40px 40px 0 0;
+		background: #fff;
+		box-sizing: border-box;
+		font-size:0px;
+		padding: 40px;
+		.close{
+			position: absolute;
+			right: 10px;
+			top: 10px;
+			width: 80px;
+			height: 80px;
+			color: rgba(68, 68, 68, 0.44);
+			z-index: 999;
+		}
+		.title{
+			font-family: "Verdana Bold";
+			font-weight: 700;
+			font-size: 34px;
+			color: #000;
+			margin-bottom: 30px;
+		}
+		.desc{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 34px;
+			color: rgba(33, 33, 33, 0.76);
+			text-align: center;
+			margin-bottom: 30px;
+		}
+		.img{
+			width: 441.42px;
+			height: 628.98px;
+			background: transparent;
+			// margin-bottom: 45px;
+			margin-left: 50%;
+			transform: translateX(-50%);
+		}
+		.section-text{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 28px;
+			// line-height: 48px;
+			margin-left: 70px;
+			color: rgba(33, 33, 33, 0.76);
+		}
+		.btn{
+			position: absolute;
+			left: 60px;
+			bottom: 60px;
+			width: 630px;
+			height: 80px;
+			border-radius: 40px;
+			background: #92ce8b;
+			font-size: 0px;
+			.bg{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				font-family: "DIN Alternate Bold";
+				font-weight: 700;
+				font-size: 32px;
+				color: #fff;
+			}
+			
+			
+		}
+	}
+}
+.uploadVideoFrom{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	font-size: 0px;
+	.el-upload__input {
+		position: absolute;
+		cursor: pointer;
+		width: 100%;
+		height: 100%;
+		right: 0px;
+		top: 0px;
+		opacity: 0;
+		-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

@@ -0,0 +1,742 @@
+<template src="./viewAI.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 {
+				leftList: [],
+				rightList: [],
+				musicList: [], //音乐列表
+				dataList: [],
+				tabIndex: 0, //当前选中的tab序号
+				selectIndex: -1,
+				peopleIndex: -1,
+				petIndex: -1,
+				musicIndex: -1,
+				specialIndex: 1,
+				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:'彩带',
+					},
+				],
+				hasRedBox:false,	//是否添加了红包
+				limit:20,
+				videoId:'',	//上传视频的id
+				videoUrl:'',	//处理好的视频地址
+				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,	//取消上传的操作对象
+				repeartFlag:false,	//防止重复点击
+			}
+		},
+		props: {
+			relationId: {
+				type: String,
+				default: '',
+			},
+			amount: {
+				type: String,
+				default: '',
+			},
+		},
+		watch: {
+			relationId(newVal, oldVal) {
+				if (newVal == null) {
+					return;
+				}
+				console.log("当前空间数据relationId:", newVal);
+				this.tabIndex = 2;//有红包时默认切换为红包
+				if(!this.hasRedBox){
+					setTimeout(()=>{
+						this.addRedBox();//添加红包
+					},500)
+					this.$nextTick(() => {
+						// 播放lottie动画
+						lottie.destroy("markLoading");
+						var element = document.getElementById("special-img");
+						this.anim = lottie.loadAnimation({
+							container: element,
+							name: "markLoading",
+							renderer: "svg",
+							loop: true,
+							autoplay: true,
+							path: this.specialList[this.specialIndex].url, //动画json
+						});
+					});
+				}
+				// this.curSpaceArea = parseFloat(
+				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
+				// ).toFixed(2);
+				// this.getOverallArrangementDetailsList();
+			},
+		},
+		// mixins: [touchHandle],
+		async mounted() {
+			// await this.getCityHouseList();		
+			console.warn("***viewAI***")
+			Indicator.open('加载中...');
+			this.getDatalist(0);
+			this.getDatalist(1);
+			this.getDatalist(3);
+			// this.getRelationInfo();//获取场景信息
+		},
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
+		// 页面被展示时执行
+		onPageShow: function() {
+
+		},
+		//页面被隐藏时执行
+		onPageHide: function() {
+			// console.warn("***detached-hide***")
+		},
+		methods: {
+			format(percentage) {
+				let text = "上传中";
+				if(this.uploadStatus==1){
+					text = "上传中";
+				}else if(this.uploadStatus==2){
+					text = "抠图中";
+				}
+				return `${text}\n${percentage}%`;
+			},
+			resolveIndex(index) {
+				this.selectIndex = index || 0;
+			},
+			catchTapEvent:function(){
+				return false;
+			},
+			specialChange(index) {
+				if (this.specialIndex == index) {
+					return false;
+				}
+				this.specialIndex = index;
+				this.$nextTick(() => {
+					// 播放lottie动画
+					lottie.destroy("markLoading");
+					var element = document.getElementById("special-img");
+					this.anim = lottie.loadAnimation({
+						container: element,
+						name: "markLoading",
+						renderer: "svg",
+						loop: true,
+						autoplay: true,
+						path: this.specialList[this.specialIndex].url, //动画json
+					});
+				});
+			},
+			tabChange(index) {
+				if (this.tabIndex == index) {
+					return false;
+				}
+				if (this.$parent.repeatFlag == true) {
+					Toast({
+						message: '加载中...请稍后再试',
+					});
+					return false
+				}
+				this.tabIndex = index;
+				this.$emit("tabChange", this.tabIndex); //通知页面，户型大类发生了变更
+				if(this.tabIndex==2 && this.specialIndex>-1){
+					if(!this.hasRedBox){
+						this.addRedBox();//添加红包
+					}
+					this.$nextTick(() => {
+						// 播放lottie动画
+						lottie.destroy("markLoading");
+						var element = document.getElementById("special-img");
+						this.anim = lottie.loadAnimation({
+							container: element,
+							name: "markLoading",
+							renderer: "svg",
+							loop: true,
+							autoplay: true,
+							path: this.specialList[this.specialIndex].url, //动画json
+						});
+					});
+				}
+			},
+			initStatus(){
+				this.progress = 0;
+				this.ktProgress = 0;
+				this.count = 0;
+				this.videoUrl = '';
+				this.widthHeight = '';
+				this.leftList[0].icon = '';
+				this.leftList[0].url = '';
+				this.uploadStatus = 0;//处理完毕
+			},
+			uploadImgObj(e,form,type=1){
+				this.stopFlag = false;//上传开始时，开启上传
+				if(type==2){
+					this.initStatus();//重置上传状态到初始值
+				}
+				//上传图片
+				var file = e.target.files[0];
+				var fileSize = file.size / 1024 / 1024;
+				// 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
+				}
+				if (fileSize > this.limit) {
+					this.$message.warning('您的上传的视频过大，请低于' + this.limit + 'MB');
+					var videoForm = document.getElementById(form); //获取表单对象
+					videoForm && videoForm.reset(); // 重置表单
+					return false
+				}
+				if (file.name.length > 100) {
+					this.$message.warning('文件名过长，请不要超过100个字符');
+					var videoForm = document.getElementById(form); //获取表单对象
+					videoForm && videoForm.reset(); // 重置表单
+					return false;
+				}
+				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;
+					};
+					reader.readAsDataURL(file);
+				}
+			},
+			//视频上传进度处理
+			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('上传已取消');//通知取消上传
+					Toast({
+						message: '上传已取消',
+					});
+				}
+				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) {
+				this.uploadStatus = 0;
+				this.peopleIndex = 0;	//选中第一个
+				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);
+				console.warn("***uploadMaterielFile***");
+				this.uploadStatus = 1;//上传中
+				this.showPersonView = false;
+				this.addSilhouette();//添加剪影视频
+				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();//开始轮询获取结果
+				}
+				var videoForm = document.getElementById(form); //获取表单对象
+				videoForm && videoForm.reset(); // 重置表单
+			},
+			async getVideoUrl() {
+				if(this.stopFlag){
+					this.stopInterval();
+				}
+				if(!this.videoId){
+					Toast({
+						message: '请先上传视频',
+					});
+					return false;
+				}
+				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{
+					this.videoUrl = "https://test.static.elab-plus.com/digital_human/f4c16cffae9711ee9853845cf3fb2826.mp4";//视频地址
+					this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/0";
+					this.leftList[0].url = this.videoUrl;
+					this.uploadStatus = 4;//处理失败
+				}
+			},
+			//添加剪影视频
+			addSilhouette(){
+				let data = {
+					url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
+					value:'个人形象',
+					width:'',
+					height:'',
+				}
+				this.aiPeopleChange(data, 'add')
+			},
+			//添加用户绿幕视频
+			addRealVideo(){
+				let data = {
+					url:this.videoUrl,
+					value:'个人形象',
+					width:this.widthHeight.split('x')[0],
+					height:this.widthHeight.split('x')[1],
+				}
+				this.aiPeopleChange(data, 'add')
+			},
+			//上传结果处理
+			resultHandle(single){
+				if(!single){
+					return false;
+				}
+				if(single.status=='completed' && single.output){//有结果
+					this.ktProgress = 100;//抠图进度100%
+					this.videoUrl = single.output;//视频地址
+					// this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/5";
+					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;//处理完毕
+					// alert("***virtualBg***"+single.virtualBg);
+					this.stopInterval();//停止轮询
+					if(this.peopleIndex==0 && this.tabIndex==0){//如果当前在个人形象上，则替换视频
+						this.addRealVideo();
+					}
+				}else{//没有结果
+					let progress = single.progress;
+					progress = progress.replace(this.videoId + ':','');
+					let index = progress.indexOf("|");
+					progress = progress.substr(0,index);
+					console.warn("***抠图进度条***",progress);
+					this.ktProgress = parseFloat(progress);//提取出来的进度条
+					if(this.ktProgress>99){
+						this.ktProgress = 99;
+					}
+				}
+			},
+			//开始生成AI图的轮询，每隔1s轮询一次
+			startInterval() {
+				if(this.timer){
+					return false;
+				}
+				let self = this;
+				this.count = 0;//轮询次数
+				this.uploadStatus = 2;//绿幕抠图中
+				this.getVideoUrl();//获取结果
+				this.timer = setInterval(()=>{
+					this.getVideoUrl();//获取结果
+				},1000);//1秒轮询一次
+				this.setOutTimer();//设置超时逻辑
+			},
+			//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
+			setOutTimer() {
+				var self = this;
+				if (this.outTimer) {
+					clearTimeout(this.outTimer)
+					this.outTimer = null
+				}
+				this.outTimer = setTimeout(function() {
+					if(!self.videoUrl){//没有结果
+						MessageBox.confirm('',{
+							title: '提示',
+							message: '当前AI使用火爆，请继续尝试?',
+							showCancelButton: true,
+							confirmButtonText:'继续尝试',
+							cancelButtonText:'取消等待',
+						}).then(action => {
+							console.warn("***MessageBox-action***",action)
+							if(action == 'confirm'){
+								// self.confirmHandle(1);
+							}
+						}).catch(err=>{
+							console.warn("***MessageBox-err***",err)
+							if(err == 'cancel'){
+								// self.cancelHandle();
+							}
+						});
+						// MessageBox.confirm('确定执行此操作?')
+					}
+					self.stopInterval();//停止轮询
+				}, this.timeOut);
+			},
+			//停止轮询
+			stopInterval() {
+				if (this.timer) {
+					clearInterval(this.timer);
+					this.timer = null;
+				}
+				if (this.outTimer) {
+					clearTimeout(this.outTimer)
+					this.outTimer = null
+				}
+				// this.uploadStatus = 0;//回到初始上传状态
+			},
+			
+			showMask(){
+				//上传过程中，不允许再次上传
+				if(this.uploadStatus==1 || this.uploadStatus == 2){
+					return false;
+				}
+				this.showPersonView = true;
+				console.warn("***showMask***",this.showPersonView)
+			},
+			//AI数字人切换
+			selectAction(selItem, index) {
+				console.log('点击动作111：', selItem, index,this.leftList)
+				if (this.tabIndex == 0) {
+					if(!this.leftList[index].url){
+						return false
+					}
+					if (this.peopleIndex == index) { //取消选中
+						this.aiPeopleChange(this.leftList[this.peopleIndex], 'canel')
+						this.peopleIndex = -1;
+						return false
+					}
+				} else if (this.tabIndex == 1) {
+					if (this.petIndex == index) { //取消选中
+						this.aiPeopleChange(this.rightList[this.petIndex], 'canel')
+						this.petIndex = -1;
+						return false
+					}
+				} else if (this.tabIndex == 3) {
+					if (this.musicIndex == index) { //取消选中
+						this.aiPeopleChange(this.musicList[this.musicIndex], 'canel')
+						this.musicIndex = -1;
+						return false
+					}
+				}
+				if (this.$parent.repeatFlag == true) {
+					Toast({
+						message: '加载中...请稍后再试',
+					});
+					return false
+				}
+				if (this.tabIndex == 0) {
+					this.peopleIndex = index;
+					this.aiPeopleChange(this.leftList[this.peopleIndex], 'add')
+				} else if (this.tabIndex == 1) {
+					this.petIndex = index;
+					this.aiPeopleChange(this.rightList[this.petIndex], 'add')
+				} else if (this.tabIndex == 3) {
+					this.musicIndex = index;
+					this.aiPeopleChange(this.musicList[this.musicIndex], 'add')
+				}
+			},
+			// // 获取场景信息
+			// async getRelationInfo() {
+			// 	if(!this.$parent.relationId){
+			// 		return false;
+			// 	}
+			// 	var parmas = {
+			// 		"relationId": this.$parent.relationId,
+			// 		"brandId": $config.brandId,
+			// 	}
+			// 	let res = await requestConfig('getRelationInfo', parmas)
+			// 	this.selectIndex = 0;
+			// 	if (res && res.success) {
+			// 		this.count = res.single.count;
+			// 	}
+			// },
+			// 获取瀑布流数据
+			async getDatalist(type) {
+				let typeName = "Virtual_Human";
+				if (type == 0) {
+					typeName = "Virtual_Human";
+				} else if (type == 1) {
+					typeName = "Virtual_Pet";
+				} else if (type == 3) {
+					typeName = "Virtual_Music";
+					Indicator.close();
+				}
+				var parmas = {
+					"type": typeName,
+					// "brandId": $config.brandId,
+				}
+				let res = await requestConfig('queryEnumList', parmas)
+				this.selectIndex = 0;
+				if (res && res.success && res.list) {
+					let list = res.list;
+					if (type == 0) {
+						this.leftList.push({
+							icon:'',
+							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) {
+						this.musicList = list;
+					}
+				}
+			},
+			catchTouchMove: function() {
+				return false;
+			},
+			addRedBox(){//添加红包
+				console.warn("***添加红包***")
+				this.$emit("redBox",'add');
+				this.hasRedBox = true;
+			},
+			removeRedBox(){//去除红包
+				this.$emit("redBox",'canel');
+				this.hasRedBox = false;
+			},
+			setRedBox(){
+				this.$emit("setRedBox");
+			},
+			//AI数字人切换
+			aiPeopleChange(item, type) {
+				this.$emit("aiPeopleChange", item, type, this.tabIndex); //通知页面，AI数字人切换了
+			},
+			//发布全景
+			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;
+					// 	}
+					// }
+					if(this.peopleIndex==0 && (this.uploadStatus ==1 || this.uploadStatus ==2)){
+						Toast({
+							message: '请在个人形象上传完成后发布！',
+						});
+						return false;
+					}
+					if(this.repeartFlag){
+						return false;
+					}
+					this.repeartFlag = true;
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23121301', //点击ID
+						clkName: 'webgl_public_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "720发布",
+						}
+					};
+					util.trackRequest(param);
+					let _ps = this.$parent.getPosition();
+					if (window.__wxjs_environment === 'miniprogram') {
+						let url = '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query.houseId || '') 
+						url += '&bgUrl=' + encodeURIComponent(this.$parent.bgUrl)
+						if(this.peopleIndex>-1){
+							let people = {
+								url:this.leftList[this.peopleIndex].url,
+								ath:_ps.peopleAth,
+								atv:_ps.peopleAtv,
+								width:this.leftList[this.peopleIndex].width || '',
+								height:this.leftList[this.peopleIndex].height || '',
+								scale:this.$parent.peopleScale,
+								userUpload:this.peopleIndex==0?true:false,//是否使用了个人形象
+							}
+							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,
+								lottieIndex:this.specialIndex,
+								// 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: url,
+							complete:(e)=>{
+								this.repeartFlag = false;
+							}
+						})
+					} else {
+						console.warn("data:", _ps)
+						Toast({
+							message: '敬请期待',
+						});
+					}
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./viewAI.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

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/newBottomCom/viewMask/viewMask.vue

@@ -256,19 +256,19 @@
 			// if(this.seedItem){
 			// 	this.title = this.seedItem.seedText;
 			// }
-			wx.checkJsApi({
-				jsApiList: ['previewImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
-				success: function(res) {
-					// 以键值对的形式返回，可用的api值true，不可用为false
-					// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
-					console.warn("checkJsApi",res)
-					// alert('su'+ JSON.stringify(res))
-				},
-				fail:(err)=>{
-					console.warn("checkJsApi-err",err)
-					// alert('err'+ JSON.stringify(err) )
-				}
-			})
+			// wx.checkJsApi({
+			// 	jsApiList: ['previewImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
+			// 	success: function(res) {
+			// 		// 以键值对的形式返回，可用的api值true，不可用为false
+			// 		// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
+			// 		console.warn("checkJsApi",res)
+			// 		// alert('su'+ JSON.stringify(res))
+			// 	},
+			// 	fail:(err)=>{
+			// 		console.warn("checkJsApi-err",err)
+			// 		// alert('err'+ JSON.stringify(err) )
+			// 	}
+			// })
 			this.screenWidth = window.screen.width;
 			this.screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
@@ -466,7 +466,7 @@
 			},
 			//预览图片-使用微信自带的预览功能，即H5中不可用
 			previewAction() {
-				if(window.__wxjs_environment === 'miniprogram'){
+				if(wx && typeof(wx.previewImage)=='function'){
 					let imglist = this.aiImagesList.map(it=>it.image);
 					wx.previewImage({
 						current: this.currentIndex,

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/components/playTips/playTips.html

@@ -0,0 +1,18 @@
+<div class="pay-view" v-if="showRedBox">
+	<div class="pay-main">
+		<i class="modelClose iconfont icon-close" @click.stop="hideRedBoxSet"></i>
+		<div class="pay-title rows justify-center">玩法说明</div>
+		<div class="desc">
+			1.每个场景都有总奖励金，发光为止 <br />
+			<br />
+			2.创建场景礼包会有概率获取一定奖励，并且转发当<br />前场景，礼盒每被打开1次，再随机获得一定奖励金<br />
+			<br />
+			3. 打开带有该场景礼包的人，也会获得一定奖励金<br />
+			<br />
+			4.每人天可开同一场景礼盒次数有一定上限，每人每<br />天获得的同一场景的奖励金有一定上限
+		</div>
+		<div class="pay-btn rows justify-center" @click.stop="hideRedBoxSet">
+			好的
+		</div>
+	</div>
+</div>

src/components/playTips/playTips.scss

@@ -0,0 +1,87 @@
+.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;
+		bottom: 0px;
+		width: 100%;
+		height: 782px;
+		border-radius: 40px 40px 0 0;
+		background: #fff;
+		padding: 40px;
+		box-sizing: border-box;
+		.pay-title{
+			font-family: "Verdana Bold";
+			font-weight: 700;
+			font-size: 34px;
+			color: #000;
+			margin-bottom: 40px;
+		}
+		.desc{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 28px;
+			line-height: 48px;
+			color: rgba(33, 33, 33, 0.76);
+			margin-bottom: 90px;
+		}
+		.pay-btn{
+			margin-left: 50%;
+			transform: translateX(-50%);
+			margin-bottom: 20px;
+			width: 550px;
+			height: 80px;
+			border-radius: 40px;
+			background: #3b3b3b;
+			border: 2px solid #ffffff38;
+			font-family: DINCondensed-Bold;
+			font-weight: 700;
+			font-size: 32px;
+			color: #fff;
+		}
+	}
+}
+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/playTips/playTips.vue

@@ -0,0 +1,40 @@
+<template src="./playTips.html">
+
+</template>
+<script>
+	const util = require('@/utils/util.js').default;
+	// 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,	//是否显示红包设置
+			}
+		},
+		props: {
+
+		},
+		async mounted() {
+			// await this.getCityHouseList();		
+			console.warn("***playTips***")
+		},
+		methods: {
+			showRedBoxSet() {
+				this.showRedBox = true;
+			},
+			hideRedBoxSet() {
+				this.showRedBox = false;
+			},
+			// hideOrShowActor(type){
+			// 	this.$emit('hideOrShowActor',type);//隐藏所有视角
+			// },
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./playTips.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/mixins/screenshot.js

@@ -1,5 +1,7 @@
 // const util = require('@/static/utils/util.js');
+	import * as THREE from 'three';
 const config = require('@/services/urlConfig.js');
+	import { MessageBox } from 'mint-ui';
 export default {
 	data() {
 		return {
@@ -29,22 +31,22 @@ export default {
 		},
 		// 翻转Y轴-像素方案
 		flip(pixels, w, h, c) {
+			if (!w || !h){
+				return false;
+			};
 			// handle Arrays
 			if (Array.isArray(pixels)) {
-				var result = this.flip(new Float64Array(pixels), w, h, c);
+				var result = this.flip(new Uint8Array(pixels), w, h, c);
 				for (var i = 0; i < pixels.length; i++) {
 					pixels[i] = result[i];
 				}
 				return pixels;
 			}
-		
-			if (!w || !h) throw Error('Bad dimensions');
-			if (!c) c = pixels.length / (w * h);
-		
+			// try{
+			if (!c) c = pixels.length / (w * h);	
 			var h2 = h >> 1;
 			var row = w * c;
 			var Ctor = pixels.constructor;
-		
 			// make a temp buffer to hold one row
 			var temp = new Ctor(w * c);
 			for (var y = 0; y < h2; ++y) {
@@ -57,6 +59,47 @@ export default {
 				// copy the copy of the top half row to the bottom half
 				pixels.set(temp, bottomOffset);
 			}
+			// }catch(e){
+			// 	//TODO handle the exception
+			// 	alert(e+row+":"+topOffset+'-'+bottomOffset)
+			// }
+			
+		},
+		
+		getClipPicUrl(resolve){
+			let gl = this.renderer.getContext();
+			let frameBuffer = new THREE.Vector2();
+			let pix = window.devicePixelRatio;
+			// this.renderer.getDrawingBufferSize(frameBuffer);//返回一个包含渲染器绘图缓存宽度和高度(单位像素)的对象。
+			let width = parseInt(this.width*pix )|| frameBuffer.x;
+			let height = parseInt(this.height*pix) || frameBuffer.y;
+			console.warn("***getClipPicUrl***",width,height,this.bottomLeftX*pix,this.bottomLeftY*pix);
+			let pixelData = new Uint8Array(width * height * 4);
+			gl.readPixels(this.bottomLeftX*pix, this.bottomLeftY*pix, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+			this.flip(pixelData, width, height, 4);//入参必须是整数 width height
+			// alert("getClipPicUrl1"+width)
+			const canvas = document.getElementById('canvas');
+			let context = canvas.getContext('2d');
+			
+			let img = context.createImageData(width, height);
+			for (var i = 0; i < img.data.length; i += 4) {
+			    img.data[i + 0] = pixelData[i + 0];
+			    img.data[i + 1] = pixelData[i + 1];
+			    img.data[i + 2] = pixelData[i + 2];
+			    img.data[i + 3] = pixelData[i + 3];
+			}
+			// img.data = pixelData;
+			canvas.height = img.height;
+			canvas.width = img.width;
+			context.putImageData(img, 0, 0);
+			// alert("getClipPicUrl2"+width)
+		    // let data = drawCanvasCtx.getImageData(100, 100, 200, 200);
+		    // canvas.width = 100;
+		    // canvas.height = 100;
+		    // context.putImageData(data, 0, 0)
+			let imgBase64 = canvas.toDataURL();
+			this.uploadFile(imgBase64,resolve);
+		    // return 
 		},
 		/**
 		 * 截图
@@ -67,35 +110,23 @@ export default {
 			return new Promise(resolve => {
 				this.screenPromiseShot().then((param) => {
 					if(param){
-						this.flip(param[0], param[1], param[2], 4);
-						const canvas = this.canvas2d;
-						const ctx = canvas.getContext('2d');
-						//  ImageData 对象，data是像素 一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示
-						const img = canvas.createImageData(param[0], param[1], param[2]);
+						let {pixelData,width,height} = param;
+						this.flip(pixelData,width,height, 4);
+						let canvas = document.getElementById('canvas');
+						let context = canvas.getContext('2d');
+						
+						let img = context.createImageData(width, height);
+						for (var i = 0; i < img.data.length; i += 4) {
+							img.data[i + 0] = pixelData[i + 0];
+							img.data[i + 1] = pixelData[i + 1];
+							img.data[i + 2] = pixelData[i + 2];
+							img.data[i + 3] = pixelData[i + 3];
+						}
 						canvas.height = img.height;
 						canvas.width = img.width;
-						ctx.putImageData(img, 0, 0);
-						uni.canvasToTempFilePath({
-							x: 0,
-							y: 0,
-							destWidth:  canvas.width,
-							destHeight: canvas.height,
-							canvasId: "canvas",
-							canvas: canvas,
-							fileType: 'jpg',
-							quality: 1,
-							success: (res)=> {
-								console.log("***canvasToTempFilePath-success***", res)
-								this.upload(res.tempFilePath,resolve);
-							},
-							fail: (res)=> {
-								console.warn("***canvasToTempFilePath-fail***", res);
-								if(this && this.starRender && typeof(this.starRender)=='function'){
-									this.starRender()//启动渲染
-								}
-								resolve('')
-							}
-						})
+						context.putImageData(img, 0, 0);
+						let imgBase64 = canvas.toDataURL();
+						this.uploadFile(imgBase64,resolve);
 					}else{
 						// let imgBase64 = this.canvas.toDataURL();
 						// this.base64src(imgBase64, (res) => {
@@ -108,10 +139,9 @@ export default {
 						let imgBase64 = this.canvas.toDataURL();
 						if(type==2){
 							resolve(imgBase64)
-						}else{
+						}else if(type==1){
 							this.uploadFile(imgBase64,resolve)
 						}
-						// this.uploadFile(imgBase64,resolve)
 					}					
 				})
 			})

src/mixins/touchHandle.js

@@ -17,7 +17,7 @@ export default {
         mytouchmove(e) {
         	let startX = this.startX // 开始x坐标 
         	let startY = this.startY //开始y坐标
-        	let touchMoveX = e.changedTouches[0].clientx //滑动变化坐标 
+        	let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标 
         	let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
         	this.clientX = touchMoveX - startX;
         	this.clientY = touchMoveY - startY;

src/pages/webgl_rxdz_720/webgl_rxdz_720.html

@@ -0,0 +1,37 @@
+<!--
+ * @Author: caodongdong caodongdoong@gmail.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: caodongdong caodongdoong@gmail.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">
+	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
+	<!-- 主要操作视图 -->
+	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
+	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>
+	<div id="status" style="position:fixed;top:100px;left:30px;cursor:pointer;opacity:0.9;z-index:10000">
+		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
+		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
+	</div> -->
+	<div id="mapDiv" ref="webgl">
+		<div v-if="videoUrl" class="voice-btn rows justify-center" @click="updateMuted">
+			<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
+		</div>
+	</div>
+	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
+		 width="100vw" height="100vh">
+	</canvas>
+	<div class="guide-mask" id="guide-mask">
+		<img src="https://dm.static.elab-plus.com/guide-mask.png">
+	</div>
+	<!-- AI结果覆盖层 -->
+	<!-- <viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
+	  :spaceObj="curSpaceObj" ></viewMask> -->
+	<!-- 生成截屏的画布对象 -->
+	<canvas id="canvas" type="2d" :style="{'height':'100vh','top':'100vh'}"></canvas>
+	<video id="myvideo" style="display: none;" loop :muted="muted"
+	autoplay controls="false" ></video>
+	<!-- <video id="myvideo" loop muted autoplay width="304" height="540" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src="https://dm.static.elab-plus.com/miniProgram/001.mp4"></video> -->
+</div>

src/pages/webgl_rxdz_720/webgl_rxdz_720.scss

@@ -0,0 +1,65 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+}
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	right: 20px;
+	top: 20px;
+	border-radius: 50%;
+	z-index: 99999;
+}
+canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;}
+#mapDiv{
+	background-color: #fff;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	// position: absolute;
+	left:0px;
+}
+.canvas-view{
+	position:relative;
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 9;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 100px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.guide-mask-hide {
+	opacity: 0;
+	pointer-events: none;
+}

src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -0,0 +1,678 @@
+<template src="./webgl_rxdz_720.html">
+
+</template>
+<script>
+	import * as THREE from 'three';
+	import Stats from 'three/addons/libs/stats.module.js';
+	import {
+		OrbitControls
+	} from 'three/addons/controls/OrbitControls.js';
+	import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
+	import {
+		getStorage
+	} from '@/utils/localStorage';
+	var requestId = "";
+	const util = require('@/utils/util.js').default;
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	export default {
+		mixins: [commonPageMethod],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvCurPageName: "webgl_720",
+				locusBehaviorName: "720展示",
+				pvCurPageParams: null,
+				houseId: "",
+				pvId: 'p_2cmina_23121201',
+				canvas: null,
+				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,
+				},
+				id: '', // 户型编号
+				loader: null,
+				scene: null,
+				camera: null,
+				controlStarPosition: {
+					x: 0,
+					y: 0,
+					z: 0
+				}, //控制器初始位置
+				cameraStarPosition: {
+					x: 0,
+					y: 0,
+					z: 5
+				}, //摄像头初始位置
+				cameraLastPosition: null, //摄像头上一次移动到的位置
+				controlLastPosition: null, //观察点上一次移动到的位置
+				myLoadingStatus: false,
+				repeatFlag: false, //重复点击
+				canvasHeight: '',
+				isIOS: false,
+				videoUrl: '', //绿幕视频地址
+				bgUrl: '',
+				coordinate: '',
+				scale:'',
+				hasOneTouch: false,
+				muted: true, //视频是否静音
+			}
+		},
+		beforeDestroy() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			if (this.renderer instanceof THREE.WebGLRenderer) {
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object => {
+					if (object instanceof THREE.Mesh) {
+						return object
+					}
+				})
+				if (deleList && deleList.length > 0) {
+					this.scene.remove(...deleList);
+				}
+				this.scene.traverse(function(object) {
+					if (object instanceof THREE.Mesh) {
+						if (object.geometry && typeof(object.geometry.dispose) == 'function') {
+							object.geometry.dispose();
+						}
+						if (object.material && typeof(object.material.dispose) == 'function') {
+							object.material.dispose();
+						}
+						if (object.texture && typeof(object.texture.dispose) == 'function') {
+							object.texture.dispose();
+						}
+					}
+				});
+				this.renderer.clear();
+				this.renderer.dispose();
+				this.renderer.forceContextLoss();
+				this.renderer.context = null;
+				this.renderer.domElement = null;
+				this.renderer = null;;
+			}
+			console.warn("***beforeDestroy-webgl_rxdz_720***");
+		},
+		mounted(options) {
+			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 || 'https://dm.static.elab-plus.com/miniProgram/002.mp4';
+			this.bgUrl = this.$route.query.bgUrl ||
+				'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
+			this.coordinate = this.$route.query.coordinate || '';
+			this.scale = this.$route.query.scale || '';
+			this.type = this.$route.query.type || '';
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if (window.innerWidth && window.screen.width) {
+				screenWidth = Math.min(window.innerWidth, window.screen.width)
+			}
+			if (window.innerHeight && window.screen.height) {
+				screenHeight = Math.min(window.innerHeight, window.screen.height)
+			}
+			let unit = screenWidth / 750; //单位rpm 对应 px 的值
+			this.canvasHeight = screenHeight;
+			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
+			this.spaceId = this.$route.query.spaceId ? this.$route.query.spaceId : '';
+			let container = this.$refs.webgl;
+			let canvas3d = this.canvas = this.$refs.glcanvas;
+			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
+
+			let camera = null,
+				renderer = null;
+			let needRender = false; //是否需要渲染 false表示不需要渲染；true 表示需要渲染
+			let scene = this.scene = new THREE.Scene();
+			let controls = null,
+				boundary = null;
+			let stats;
+			let videoMeshGroup = [];
+			let cubeCamera = null;
+			// let lineMesh = null;
+			let radius = 50;	//全景图半径-全景图是个球体
+			let lastPosition = new THREE.Vector3(0, -20, -27.49);
+			init();
+			// this.clearEvent = clearEvent;
+			// this.attendEvent = attendEvent;
+			this.starRender = starRender; //对外暴露启动渲染的方法
+			this.stopRender = stopRender; //对外暴露停止渲染的方法
+			if (window.__wxjs_environment === 'miniprogram') {
+				this.navbar.showCapsule = 0;
+			}
+
+			function init() {
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000);
+				// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
+				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				scene.add(camera);
+				that.camera = camera;
+
+				// 环境光会均匀的照亮场景中的所有物体
+				// const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
+				// scene.add(ambientLight);
+				// 辅助方格
+				// const axesHelper = new THREE.AxesHelper( 50 );
+				// scene.add( axesHelper );
+				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
+				// gridHelper.position.y = 0;
+				// gridHelper.position.x = 0;
+				// scene.add(gridHelper);
+				//加载环境720贴图
+				// let loader = new THREE.TextureLoader();
+				// let texture = loader.load(that.bgUrl, () => {
+				// 	let rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+				// 	rt.fromEquirectangularTexture(renderer, texture);
+				// 	scene.background = rt.texture;
+				// });
+				makeShaderCube();
+				// makeInstance();
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+				renderer = that.renderer = new THREE.WebGLRenderer({
+					canvas: canvas3d,
+					alpha: true,
+				});
+				renderer.setPixelRatio(window.devicePixelRatio);
+				renderer.setSize(screenWidth, that.canvasHeight);
+				container.appendChild(renderer.domElement);
+
+				controls = new OrbitControls(camera, renderer.domElement);
+				controls.enableDamping = true; //启动缓动
+				controls.minDistance = 0.0001;
+				controls.maxDistance = radius -10;
+				// controls.minPolarAngle = 0; // 默认0
+				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
+				controls.enableZoom = true; //启用/禁用摄像机的缩放
+				controls.enablePan = false; //启用/禁用摄像机平移
+				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
+
+				// 监听相机移动事件-限制只能在当前空间范围内移动
+				// controls.addEventListener('change', () => {
+				// 	// 获取OrbitControls的缩放值
+				// 	var scale = controls.scale;
+				// 	// 检查相机位置是否超出边界框
+				// 	// if (boundary && !boundary.containsPoint(camera.position)) {
+				// 	// 	let clampedPosition = new THREE.Vector3();
+				// 	// 	boundary.clampPoint(camera.position, clampedPosition);
+				// 	// 	if (clampedPosition) {
+				// 	// 		camera.position.copy(clampedPosition);
+				// 	// 	}
+				// 	// }
+				// });
+				// camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
+				if (that.coordinate) {
+					let position = JSON.parse(that.coordinate);
+					// camera.lookAt(position.x, position.y, position.z);
+				}
+				starRender(); //启动渲染
+				if (that.isIOS) {
+					// document.addEventListener("WeixinJSBridgeReady", function() {
+					// 	if (that.type) {
+					// 		moreTest()
+					// 	} else {
+					// 		videoHandle({
+					// 			videoUrl: that.videoUrl,
+					// 			coordinate: that.coordinate,
+					// 			muted: that.muted
+					// 		});
+					// 	}
+					// }, false)
+					wx.config({
+						debug: false,
+						appId: '',
+						timestamp: '',
+						nonceStr: '',
+						signature: '',
+						jsApiList: []
+					})
+					wx.ready(function() {
+						// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+						if (that.type) {
+							moreTest()
+						} else {
+							videoHandle({
+								videoUrl: that.videoUrl,
+								coordinate: that.coordinate,
+								muted: that.muted
+							});
+						}
+					})
+				}
+				var guideMask = document.querySelector('#guide-mask');
+				document.addEventListener("touchend", function() {
+					guideMask.classList.add('guide-mask-hide');
+					if (!that.isIOS && that.hasOneTouch == false) {
+						that.hasOneTouch = true;
+						if (that.type) {
+							moreTest()
+						} else {
+							videoHandle({
+								videoUrl: that.videoUrl,
+								coordinate: that.coordinate,
+								muted: that.muted
+							});
+						}
+					}
+				}, false);
+			}
+			//把720VR图转化为一个球体模网格型
+			function makeShaderCube() {
+				let loader = new THREE.TextureLoader();
+				let resultTexture = loader.load(that.bgUrl);
+				// 创建一个ShaderMaterial
+				var material = new THREE.ShaderMaterial({
+					uniforms: {
+						mytexture: {
+							value: resultTexture
+						}
+					},
+					vertexShader: `
+						varying vec3 vWorldPosition;
+						varying vec2 vUv;    
+						void main() {
+							vUv = uv;
+							vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+							vWorldPosition = worldPosition.xyz;
+							gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+						}
+					`,
+					fragmentShader: `
+						varying vec2 vUv;
+						uniform sampler2D mytexture;
+						varying vec3 vWorldPosition;
+						
+						void main() {
+							vec2 uv = vUv;
+							vec3 direction = normalize(vWorldPosition);
+							vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
+							vec2 sampleUV1 = vec2(1.0 - uv.x, uv.y);
+							gl_FragColor = texture2D(mytexture, sampleUV1);
+						}
+					`,
+					side: THREE.BackSide
+				});
+				//创建一个球体几何体
+				var sphereGeometry = new THREE.SphereGeometry(radius, 60, 40);
+				//创建一个球体并应用材质
+				var sphere = new THREE.Mesh(sphereGeometry, material);
+				scene.add(sphere);
+				// 创建一个圆柱几何体
+				// var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 60, 1, true);
+				// var cylinder = new THREE.Mesh(cylinderGeometry, material);
+				// scene.add(cylinder);
+			}
+			
+
+			function makeInstance() {
+				// let geometry = new THREE.BoxGeometry(10, 10, 10);
+				// //加载环境720贴图
+				// var loader1 = new THREE.TextureLoader();
+				// var texture1 = loader1.load(that.bgUrl, () => {
+				// 	let cubeRenderTarget  = new THREE.WebGLCubeRenderTarget(texture1.image.height);
+				// 	cubeRenderTarget.fromEquirectangularTexture(renderer, texture1);
+				// 	// scene.background = cubeRenderTarget.texture;
+				// 	// 创建一个立方体贴图相机
+				// 	cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
+				// 	// 创建材质并应用纹理
+				// 	let material = new THREE.MeshBasicMaterial({ envMap: cubeRenderTarget.texture,side:THREE.BackSide });
+				// 	// const material = new THREE.MeshPhongMaterial({color});
+				// 	let cube = new THREE.Mesh(geometry, material);
+				// 	cube.position.set(0,0,0);
+				// 	scene.add(cube);
+				// });
+				// 创建一个立方体贴图加载器
+				var loader = new THREE.CubeTextureLoader();
+				// 加载Equirectangular map
+				loader.load([
+					'https://dm.static.elab-plus.com/miniProgram/pos-x.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/neg-x.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/pos-y.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/neg-y.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/pos-z.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/neg-z.jpg',
+				], function(texture) {
+					// 将Equirectangular map 应用到天空盒的材质上
+					//创建一个球体几何体
+					var sphereGeometry = new THREE.SphereGeometry(10, 60, 40);
+					const materials = new THREE.MeshStandardMaterial({
+					  metalness:0.8, // 金属材质
+					  roughness:0.1, // 粗糙度
+					  envMap:texture, // 环境贴图
+					  side: THREE.BackSide
+					})
+					const sphere = new THREE.Mesh(sphereGeometry,materials)
+					scene.add(sphere)
+				});
+			}
+
+			function moreTest() {
+				let data = [{
+						videoUrl: 'https://dm.static.elab-plus.com/miniProgram/002.mp4',
+						coordinate: '{"x":6,"y":-5,"z":0}',
+						muted: true,
+					},
+					{
+						videoUrl: 'https://dm.static.elab-plus.com/miniProgram/004.mp4',
+						coordinate: '{"x":-13,"y":16,"z":8}',
+						muted: false,
+					},
+					{
+						videoUrl: 'https://dm.static.elab-plus.com/miniProgram/005.mp4',
+						coordinate: '{"x":13,"y":-14,"z":-35}',
+						muted: true,
+					},
+					{
+						videoUrl: 'https://dm.static.elab-plus.com/miniProgram/007.mp4',
+						coordinate: '{"x":0,"y":4,"z":25}',
+						muted: true,
+					},
+					{
+						videoUrl: 'https://dm.static.elab-plus.com/miniProgram/008.mov',
+						coordinate: '{"x":3,"y":-4,"z":-5}',
+						muted: true,
+					}
+				]
+				data.forEach(it => {
+					videoHandle(it);
+				})
+			}
+
+			function videoHandle(item) {
+				if (!item.videoUrl) {
+					return false;
+				}
+				// 创建视频元素
+				// var video = document.createElement('video');
+				var video;
+				if(that.type){
+					video = document.createElement('video');
+				}else{
+					video = document.getElementById('myvideo');
+				}
+				video.src = item.videoUrl; // 视频文件的路径
+				video.setAttribute("crossOrigin", "Anonymous");
+				video.loop = true;
+				video.muted = that.type?item.muted:that.muted;
+				video.controls = false;
+				video.autoplay = true;
+				video.preload = 'auto';
+				video.setAttribute('webkit-playsinline', true);
+				video.setAttribute('playsinline', true);
+				video.load();
+
+				console.warn("***video***", video, video.width);
+
+				setTimeout(() => {
+					video.play();
+					// 创建视频纹理
+					var videoTexture = new THREE.VideoTexture(video);
+					// videoTexture.minFilter = THREE.LinearFilter;
+					// videoTexture.format = THREE.RGBFormat;
+
+					var keyColorObject = new THREE.Color("#00ff05");
+					var myuniforms = {
+						pointTexture: {
+							type: "t",
+							value: videoTexture
+						},
+						color: {
+							type: "c",
+							value: keyColorObject
+						},
+						videowidth: {
+							type: "f",
+							value: 501.0
+						},
+						videoheight: {
+							type: "f",
+							value: 1024.0
+						},
+						filterType: {
+							type: "i",
+							value: 0
+						},
+						lightLevel: {
+							type: "f",
+							value: 0.2
+						},
+						gridSize: {
+							type: "f",
+							value: 0.8
+						}
+					};
+					// 创建绿幕着色器
+					let greenScreenShader = {
+						uniforms: myuniforms,
+						transparent: true,
+						vertexShader: `    
+							varying vec2 vUv;    
+							void main() {
+								vUv = uv;
+								vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+								gl_Position = projectionMatrix * mvPosition;
+							}  `,
+						fragmentShader: `
+							precision mediump float;
+							uniform sampler2D pointTexture;
+							uniform sampler2D colorlut;
+							uniform vec3 color;
+							uniform float videowidth;
+							uniform float videoheight;
+							uniform int filterType;
+							uniform float gridSize;
+							uniform float lightLevel;
+							
+							varying vec2 vUv;
+							float alter=3.0;
+							float u_mode=0.0;
+							float u_threshold=1.0;
+							float u_clipBlack=0.9;
+							float u_clipWhite=1.0;
+							
+							float rgb2cb(float r, float g, float b){
+								return 0.5 + -0.168736*r - 0.331264*g + 0.5*b;
+							}
+							float rgb2cr(float r, float g, float b){
+								return 0.5 + 0.5*r - 0.418688*g - 0.081312*b;
+							}
+							float smoothclip(float low, float high, float x){
+								if (x <= low){
+									return 0.0;
+								}
+								if(x >= high){
+									return 1.0;
+								}
+								return (x-low)/(high-low);
+							}
+							vec4 greenscreen(vec4 colora, float Cb_key,float Cr_key, float tola,float tolb, float clipBlack, float clipWhite){
+								float cb = rgb2cb(colora.r,colora.g,colora.b);
+								float cr = rgb2cr(colora.r,colora.g,colora.b);
+								float alpha = distance(vec2(cb, cr), vec2(Cb_key, Cr_key));
+								alpha = smoothclip(tola, tolb, alpha);
+								float r = max(gl_FragColor.r - (1.0-alpha)*color.r, 0.0);
+								float g = max(gl_FragColor.g - (1.0-alpha)*color.g, 0.0);
+								float b = max(gl_FragColor.b - (1.0-alpha)*color.b, 0.0);
+								if(alpha < clipBlack){
+									alpha = r = g = b = 0.0;
+								}
+								if(alpha > clipWhite){
+									alpha = 1.0;
+								}
+								if(clipWhite < 1.0){
+									alpha = alpha/max(clipWhite, 0.9);
+								}
+								return vec4(r,g,b, alpha);
+							}
+							
+							void main()
+							{
+								gl_FragColor = texture2D( pointTexture, vUv );
+								float tola = 0.0;
+								float tolb = u_threshold/2.0;
+								float cb_key = rgb2cb(color.r, color.g, color.b);
+								float cr_key = rgb2cr(color.r, color.g, color.b);
+								gl_FragColor = greenscreen(gl_FragColor, cb_key, cr_key, tola, tolb, u_clipBlack, u_clipWhite);
+								if(u_mode > 0.5 && u_mode < 1.5){
+									gl_FragColor = mix(vec4(1.0, 1.0, 1.0, 1.0), gl_FragColor, gl_FragColor.a);
+									gl_FragColor.a = 1.0;
+								}
+								if(u_mode > 1.5 && u_mode < 2.5){
+									gl_FragColor = vec4(gl_FragColor.a, gl_FragColor.a, gl_FragColor.a, 1.0);
+								}
+								vec4 color = texture2D(pointTexture, vUv);
+								if (color.rgb == vec3(0.0, 0.0, 0.0)) {
+									discard; 
+								}
+								if(filterType==1){
+									float gray = 0.2989*gl_FragColor.r+0.5870*gl_FragColor.g+0.1140*gl_FragColor.b;
+									gl_FragColor = vec4(gray,gray,gray , gl_FragColor.a);
+								}else if(filterType==2){
+									vec3 tColor2 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]) ).rgb;
+									vec3 tColor3 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]) ).rgb;
+									vec3 tColor4 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
+									vec3 tColor5 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
+									vec3 tColor6 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
+									vec3 tColor7 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
+									vec3 tColor8 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
+									vec3 tColor9 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
+									vec3 tColor10 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
+									vec3 tColor11 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
+									gl_FragColor = vec4( (gl_FragColor.r+tColor2[0]+tColor3[0]+tColor4[0]+tColor5[0]+tColor6[0]+tColor7[0]+tColor8[0]+tColor9[0]+tColor10[0]+tColor11[0])/11.0,
+									(gl_FragColor.g+tColor2[1]+tColor3[1]+tColor4[1]+tColor5[1]+tColor6[1]+tColor7[1]+tColor8[1]+tColor9[1]+tColor10[1]+tColor11[1])/11.0,
+									(gl_FragColor.b+tColor2[2]+tColor3[2]+tColor4[2]+tColor5[2]+tColor6[2]+tColor7[2]+tColor8[2]+tColor9[2]+tColor10[2]+tColor11[2])/11.0,
+									gl_FragColor.a);
+								}else if(filterType==3){
+									float brightr=gl_FragColor.r+lightLevel;
+									float brightg=gl_FragColor.g+lightLevel;
+									float brightb=gl_FragColor.b+lightLevel;
+									gl_FragColor = vec4(brightr,brightg,brightb , gl_FragColor.a);
+								}else if(filterType==4){
+									float reverser=1.0 - gl_FragColor.r;
+									float reverseg=1.0 - gl_FragColor.g;
+									float reverseb=1.0 - gl_FragColor.b;
+									gl_FragColor = vec4(reverser,reverseg,reverseb,gl_FragColor.a);
+								}else if(filterType==5){
+									float dx = fract(sin(dot(vUv ,vec2(12.9898,78.233))) * 43758.5453);
+									vec3 cResult = gl_FragColor.rgb + gl_FragColor.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
+									vec2 sc = vec2( sin( vUv.y * 4096.0 ), cos( vUv.y * 4096.0 ) );
+									cResult += gl_FragColor.rgb * vec3( sc.x, sc.y, sc.x ) * 0.025;
+									cResult = gl_FragColor.rgb + clamp( 0.35, 0.0,1.0 ) * ( cResult - gl_FragColor.rgb );
+									if( false ) {
+										cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
+									}
+									float oldr=0.393*cResult[0]+0.769*cResult[1]+0.189*cResult[2];
+									float oldg=0.349*cResult[0]+0.686*cResult[1]+0.168*cResult[2];
+									float oldb=0.272*cResult[0]+0.534*cResult[1]+0.131*cResult[2];
+									gl_FragColor =  vec4( oldr,oldg,oldb , gl_FragColor.a);
+								}else if(filterType==6){
+									float average = ( gl_FragColor.r + gl_FragColor.g + gl_FragColor.b ) / 2.0;
+									float s = sin( 0.5 ), c = cos( 0.5 );
+									vec2 tex = vUv * vec2(videowidth,videoheight) - vec2(0,0);
+									vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * gridSize;
+									float pattern =  ( sin( point.x ) * sin( point.y ) ) * 4.0;
+									float seed = average * 10.0 - 5.0 + pattern ;
+									gl_FragColor = vec4(  seed*0.3+gl_FragColor.r*0.7,seed*0.3+gl_FragColor.g*0.7 ,seed*0.3+gl_FragColor.b*0.7, gl_FragColor.a );
+								}
+							}
+						`,
+					};
+					// 创建绿幕材质
+					let greenScreenMaterial = new THREE.ShaderMaterial(greenScreenShader);
+					greenScreenMaterial.side = THREE.DoubleSide;
+					let geometry = new THREE.PlaneGeometry(9, 16);
+					// 应用绿幕材质到对象上
+					let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
+					if (item.coordinate) {
+						let position = JSON.parse(item.coordinate);
+						mesh.position.set(position.x, position.y, position.z); //设置视频位置
+					} else {
+						mesh.position.copy(lastPosition);//设置视频位置
+					}
+					if (that.scale) {
+						let scale = JSON.parse(that.scale);
+						mesh.scale.set(scale.x, scale.y, 1); //设置视频缩放比例
+					}
+					
+					// mesh.lookAt(camera.position);
+					scene.add(mesh);
+					videoMeshGroup.push(mesh);
+					// // 创建一个PlaneGeometry
+					// var planeGeometry = new THREE.PlaneGeometry(9, 16);
+					// // 创建一个边框材质
+					// var edgeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff});
+					// // 创建边框几何体
+					// var edges = new THREE.EdgesGeometry(planeGeometry);
+					// let line  = new THREE.LineSegments(edges, edgeMaterial);
+					// line.position.set(0, -10, -10);//设置视频位置
+					// scene.add(line);
+					// lineMesh = line;
+				}, 1000)
+
+				// videoMesh = mesh;
+			}
+
+			function stopRender() {
+				needRender = false;
+			}
+
+			function starRender() {
+				if (needRender == true) { //如果已经在渲染中了，则不能再次开启，避免渲染过多
+					false;
+				}
+				needRender = true;
+				render(); //开始渲染
+			}
+
+			function render() {
+				if (needRender == false) {
+					return false;
+				}
+				// stats.update();
+				controls.update();
+				if (videoMeshGroup) {
+					videoMeshGroup.forEach(it => {
+						it.lookAt(camera.position)
+					})
+					// if(lineMesh){
+					// 	lineMesh.lookAt(camera.position);
+					// 	lineMesh.position.copy(videoMeshGroup[0].position);
+					// }
+				}
+				if (cubeCamera) {
+					cubeCamera.update(renderer, scene);
+				}
+				renderer.render(scene, camera); //单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+			}
+
+		},
+		methods: {
+			navbarBackClk() {
+
+			},
+			clearHandle() {
+				this.clearEvent();
+			},
+			updateMuted(){
+				this.muted = !this.muted;
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_720.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg.html

@@ -0,0 +1,30 @@
+<div class="main-view">
+	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
+	<div id="mapDiv" ref="webgl"></div>
+	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
+		 width="100vw" height="100vh">
+	</canvas>
+	<!-- <div class="guide-mask" id="guide-mask">
+		<img src="https://dm.static.elab-plus.com/coverTips.png">
+	</div> -->
+	<div class="cover-box" :style="{'width':width+'px','height':height+'px','left':left+'px','top':top+'px'}">
+		<div class="box-empty"></div>
+		<div class="left-top boundary"></div>
+		<div class="right-top boundary"></div>
+		<div class="left-bottom boundary"></div>
+		<div class="right-bottom boundary"></div>
+		<div class="operate operate1" @touchstart.stop="mytouchstart($event,'1')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate2" @touchstart.stop="mytouchstart($event,'2')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate3" @touchstart.stop="mytouchstart($event,'3')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate4" @touchstart.stop="mytouchstart($event,'4')" @touchmove.stop="mytouchmove"></div>
+	</div>
+	<div class="cover-btn rows justify-center" @click.stop="clipImgHandle">
+		确认为封面
+	</div>
+	<!-- AI结果覆盖层 -->
+	<!-- <viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
+	  :spaceObj="curSpaceObj" ></viewMask> -->
+	<!-- 生成截屏的画布对象 -->
+	<canvas id="canvas" type="2d" :style="{'height':'200px','top':'200px'}"></canvas>
+	<!-- <video id="myvideo" v-if="videoUrl" style="display: none;" loop muted autoplay controls="false" :src="videoUrl"></video> -->
+</div>

src/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg.scss

@@ -0,0 +1,150 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+}
+canvas:focus {
+  outline:none;
+}
+#mapDiv{
+	background-color: #fff;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	// position: absolute;
+	left:0px;
+}
+.canvas-view{
+	position:relative;
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	// background: rgba(0, 0, 0, 0.3);
+	z-index: 7;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 200px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.guide-mask-hide {
+	opacity: 0;
+	pointer-events: none;
+}
+.cover-box{
+	position: absolute;
+	max-width:100vw;
+	// top:50%;
+	// left: 50%;
+	// transform: translate(-50%,-50%);
+	// width: 620px;
+	// height: 620px;
+	background: transparent;
+	z-index: 10;
+	pointer-events: none;
+	padding: 8px;
+	.box-empty{
+		// position: absolute;
+		width: 100%;
+		height: 100%;
+		// margin-top: 6px;
+		// margin-left: 6px;
+		border: 4px solid #fff;
+		// box-sizing: content-box;
+		box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;
+	}
+	.boundary{
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		border: solid 4px #fff;
+		pointer-events: auto;
+		z-index: 8;
+	}
+	.left-top{
+		top: 0px;
+		left: 0px;
+		border-right: none;
+		border-bottom: none;
+	}
+	.right-top{
+		top: 0px;
+		right: 0px;
+		border-left: none;
+		border-bottom: none;
+	}
+	.left-bottom{
+		bottom: 0px;
+		left: 0px;
+		border-right: none;
+		border-top: none;
+	}
+	.right-bottom{
+		bottom: 0px;
+		right: 0px;
+		border-left: none;
+		border-top: none;
+	}
+	.operate{
+		position: absolute;
+		pointer-events: auto;
+		width: 100px;
+		height: 100px;
+		z-index: 9;
+	}
+	.operate1{
+		left: -0px;
+		top: -0px;
+	}
+	.operate2{
+		right: -0px;
+		top: -0px;
+	}
+	.operate3{
+		right: -0px;
+		bottom: -0px;
+	}
+	.operate4{
+		left: -0px;
+		bottom: -0px;
+	}
+}
+.cover-btn{
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 132px;
+	width: 292px;
+	height: 80px;
+	border-radius: 40px;
+	background: #fff;
+	font-family: "DIN Alternate Bold";
+	font-weight: 700;
+	font-size: 32px;
+	color: #222;
+	z-index: 11;
+}

src/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg.vue

@@ -0,0 +1,701 @@
+<template src="./webgl_rxdz_clipImg.html">
+
+</template>
+<script>
+	import * as THREE from 'three';
+	import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+	import {getStorage} from '@/utils/localStorage';
+	import { MessageBox } from 'mint-ui';
+	var requestId = "";
+	const util = require('@/utils/util.js').default;
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	import screenshot from '@/mixins/screenshot.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	export default {
+		mixins: [commonPageMethod,screenshot],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvCurPageName: "webgl_720",
+				locusBehaviorName: "720设置封面",
+				pvCurPageParams: null,
+				houseId: "",
+				pvId: 'p_2cmina_23121201',
+				canvas: null,
+				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,
+				},
+				id: '', // 户型编号
+				loader: null,
+				scene: null,
+				camera: null,
+				controlStarPosition: {
+					x: 0,
+					y: -5,
+					z: 0
+				}, //控制器初始位置
+				cameraStarPosition: {
+					x: 0,
+					y: 0,
+					z: 5
+				}, //摄像头初始位置
+				cameraLastPosition: null, //摄像头上一次移动到的位置
+				controlLastPosition: null, //观察点上一次移动到的位置
+				myLoadingStatus: false,
+				repeatFlag: false, //重复点击
+				canvasHeight:'',
+				isIOS: false,
+				videoUrl:'',	//绿幕视频地址
+				bgUrl:'',
+				width:'620',
+				height:'620',
+				left:'65',
+				top:'300',
+				startX:0,
+				startY:0,
+				clientX:0,
+				clientY:0,
+				unit:0.5,
+				screenWidth:0,
+				screenHeight:0,
+				type:1,
+				bottomLeftX:0,
+				bottomLeftY:0,
+				coordinate:'',
+				scale:'',
+				screenshotResolve:null,
+			}
+		},
+		beforeDestroy() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			if (this.renderer instanceof THREE.WebGLRenderer) {
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object => {
+					if (object instanceof THREE.Mesh) {
+						return object
+					}
+				})
+				if (deleList && deleList.length > 0) {
+					this.scene.remove(...deleList);
+				}
+				this.scene.traverse(function(object) {
+					if (object instanceof THREE.Mesh) {
+						if (object.geometry && typeof(object.geometry.dispose) == 'function') {
+							object.geometry.dispose();
+						}
+						if (object.material && typeof(object.material.dispose) == 'function') {
+							object.material.dispose();
+						}
+						if (object.texture && typeof(object.texture.dispose) == 'function') {
+							object.texture.dispose();
+						}
+					}
+				});
+				this.renderer.clear();
+				this.renderer.dispose();
+				this.renderer.forceContextLoss();
+				this.renderer.context = null;
+				this.renderer.domElement = null;
+				this.renderer = null;;
+			}
+			console.warn("***beforeDestroy-webgl_rxdz_clipImg***");
+		},
+		mounted(options) {
+			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.bgUrl = this.$route.query.bgUrl || 'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
+			this.coordinate = this.$route.query.coordinate || '';
+			this.scale = this.$route.query.scale || '';
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if (window.innerWidth && window.screen.width) {
+				this.screenWidth = screenWidth = Math.min(window.innerWidth, window.screen.width);
+			}
+			if (window.innerHeight && window.screen.height) {
+				this.screenHeight = screenHeight = Math.min(window.innerHeight, window.screen.height)
+			}
+			let unit = screenWidth / 750; //单位rpm 对应 px 的值
+			this.unit = unit;
+			this.width = this.width * unit;
+			this.height = this.height * unit;
+			this.left = this.left * unit;
+			this.top = this.top * unit;
+			this.canvasHeight = screenHeight;
+			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
+			let container = this.$refs.webgl;
+			let canvas3d = this.canvas = this.$refs.glcanvas;
+			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
+
+			let camera = null,
+				renderer = null;
+			let needRender = false; //是否需要渲染 false表示不需要渲染；true 表示需要渲染
+			let scene = this.scene = new THREE.Scene();
+			let controls = null,
+				boundary = null;
+			let videoMesh = null;
+			let radius = 50;	//全景图半径-全景图是个球体
+			let lastPosition = new THREE.Vector3(0, -20, -27.49);
+			init();
+			this.starRender = starRender; //对外暴露启动渲染的方法
+			this.stopRender = stopRender; //对外暴露停止渲染的方法
+			if(window.__wxjs_environment === 'miniprogram'){
+				this.navbar.showCapsule = 0;
+			}
+			function init() {
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000);
+				// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
+				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				scene.add(camera);
+				that.camera = camera;
+				
+				// 辅助方格
+				// const axesHelper = new THREE.AxesHelper( 50 );
+				// scene.add( axesHelper );
+				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
+				// gridHelper.position.y = 0;
+				// gridHelper.position.x = 0;
+				// scene.add(gridHelper);
+				//加载环境720贴图
+				// const loader = new THREE.TextureLoader();
+				// const texture = loader.load(that.bgUrl, () => {
+				// 	const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+				// 	rt.fromEquirectangularTexture(renderer, texture);
+				// 	scene.background = rt.texture;
+				// });
+				makeShaderCube();//把720VR图转化为一个球体模网格型
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+				renderer = that.renderer = new THREE.WebGLRenderer({
+					canvas:canvas3d,
+					alpha: true, 
+					antialias:false,
+					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
+					preserveDrawingBuffer: true,
+				});
+				renderer.setPixelRatio(window.devicePixelRatio);
+				renderer.setSize(screenWidth, that.canvasHeight);
+				container.appendChild(renderer.domElement);
+
+				controls = new OrbitControls(camera, renderer.domElement);
+				controls.enableDamping = true; //启动缓动
+				controls.minDistance = 0.0001;
+				controls.maxDistance = radius - 10;
+				// controls.minPolarAngle = 0; // 默认0
+				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
+				controls.enableZoom = true; //启用摄像机的缩放
+				controls.enablePan = false; //禁用摄像机平移
+				controls.enableRotate = true; //启用摄像机水平或垂直旋转
+
+				// 监听相机移动事件-限制只能在当前空间范围内移动
+				// controls.addEventListener('change', () => {
+				// 	// 检查相机位置是否超出边界框
+				// 	if (boundary && !boundary.containsPoint(camera.position)) {
+				// 		let clampedPosition = new THREE.Vector3();
+				// 		boundary.clampPoint(camera.position, clampedPosition);
+				// 		if (clampedPosition) {
+				// 			camera.position.copy(clampedPosition);
+				// 		}
+				// 	}
+				// });
+				if(that.coordinate){
+					let position = JSON.parse(that.coordinate);
+					// mesh.position.set();//设置视频位置
+					camera.lookAt(position.x, position.y, position.z);
+				}
+				// camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
+				starRender(); //启动渲染
+				// var guideMask = document.querySelector('#guide-mask');
+				if(that.isIOS){
+					document.addEventListener("WeixinJSBridgeReady", function (){
+					    videoHandle();
+					}, false)
+				}else{
+					document.addEventListener("touchend",  ()=> {
+						// guideMask.classList.add('guide-mask-hide');
+						videoHandle();
+					}, false);
+				}
+				
+			}
+			
+			//把720VR图转化为一个球体模网格型
+			function makeShaderCube() {
+				let loader = new THREE.TextureLoader();
+				let resultTexture = loader.load(that.bgUrl);
+				// 创建一个ShaderMaterial
+				var material = new THREE.ShaderMaterial({
+					uniforms: {
+						mytexture: {
+							value: resultTexture
+						}
+					},
+					vertexShader: `
+						varying vec3 vWorldPosition;
+						varying vec2 vUv;    
+						void main() {
+							vUv = uv;
+							vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+							vWorldPosition = worldPosition.xyz;
+							gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+						}
+					`,
+					fragmentShader: `
+						varying vec2 vUv;
+						uniform sampler2D mytexture;
+						varying vec3 vWorldPosition;
+						
+						void main() {
+							vec2 uv = vUv;
+							vec3 direction = normalize(vWorldPosition);
+							vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
+							vec2 sampleUV1 = vec2(1.0 - uv.x, uv.y);
+							gl_FragColor = texture2D(mytexture, sampleUV1);
+						}
+					`,
+					side: THREE.BackSide
+				});
+				//创建一个球体几何体
+				var sphereGeometry = new THREE.SphereGeometry(radius, 60, 40);
+				//创建一个球体并应用材质
+				var sphere = new THREE.Mesh(sphereGeometry, material);
+				scene.add(sphere);
+				// 创建一个圆柱几何体
+				// var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 60, 1, true);
+				// var cylinder = new THREE.Mesh(cylinderGeometry, material);
+				// scene.add(cylinder);
+			}
+			
+			function videoHandle() {
+				if(!that.videoUrl){
+					return false;
+				}
+				if(videoMesh){
+					return false
+				}
+				// 创建视频元素
+				var video = document.createElement('video');
+				// var video = document.getElementById('myvideo');
+				video.src = that.videoUrl; // 视频文件的路径
+				video.setAttribute("crossOrigin", "Anonymous");
+				video.loop = true;
+				video.muted = true;
+				video.controls = false;
+				video.setAttribute('webkit-playsinline', true);
+				video.setAttribute('playsinline', true);
+				// video['custom-cache'] = false;
+				// video['x5-playsinline'] = '';
+				// video['webkit-playsinline'] = true;
+				// video['playsinline'] = true;
+				// video['x-webkit-airplay'] = '';
+				// // video['x5-video-player-fullscreen'] = false;
+				// video['x5-video-player-type'] = 'h5-page';
+				video.play();
+				
+				console.warn("***video***",video,video.width);
+				// 创建视频纹理
+				var videoTexture = new THREE.VideoTexture(video);
+				// videoTexture.minFilter = THREE.LinearFilter;
+				// videoTexture.format = THREE.RGBFormat;
+
+				var keyColorObject = new THREE.Color("#00ff05");
+				var myuniforms = {
+				    pointTexture: {
+				        type: "t",
+				        value: videoTexture
+				    },
+				    color: {
+				        type: "c",
+				        value: keyColorObject
+				    },
+				    videowidth: {
+				        type: "f",
+				        value: 501.0
+				    },
+				    videoheight: {
+				        type: "f",
+				        value: 1024.0
+				    },
+				    filterType: {
+				        type: "i",
+				        value: 0
+				    },
+				    lightLevel: {
+				        type: "f",
+				        value: 0.2
+				    },
+				    gridSize: {
+				        type: "f",
+				        value: 0.8
+				    }
+				};
+				// 创建绿幕着色器
+				let greenScreenShader = {
+					uniforms: myuniforms,
+					transparent: true,
+					vertexShader: `    
+						varying vec2 vUv;    
+						void main() {
+							vUv = uv;
+							vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+							gl_Position = projectionMatrix * mvPosition;
+						}  `,
+					fragmentShader: `
+						precision mediump float;
+						uniform sampler2D pointTexture;
+						uniform sampler2D colorlut;
+						uniform vec3 color;
+						uniform float videowidth;
+						uniform float videoheight;
+						uniform int filterType;
+						uniform float gridSize;
+						uniform float lightLevel;
+						
+						varying vec2 vUv;
+						float alter=3.0;
+						float u_mode=0.0;
+						float u_threshold=1.0;
+						float u_clipBlack=0.9;
+						float u_clipWhite=1.0;
+						
+						float rgb2cb(float r, float g, float b){
+							return 0.5 + -0.168736*r - 0.331264*g + 0.5*b;
+						}
+						float rgb2cr(float r, float g, float b){
+							return 0.5 + 0.5*r - 0.418688*g - 0.081312*b;
+						}
+						float smoothclip(float low, float high, float x){
+							if (x <= low){
+								return 0.0;
+							}
+							if(x >= high){
+								return 1.0;
+							}
+							return (x-low)/(high-low);
+						}
+						vec4 greenscreen(vec4 colora, float Cb_key,float Cr_key, float tola,float tolb, float clipBlack, float clipWhite){
+							float cb = rgb2cb(colora.r,colora.g,colora.b);
+							float cr = rgb2cr(colora.r,colora.g,colora.b);
+							float alpha = distance(vec2(cb, cr), vec2(Cb_key, Cr_key));
+							alpha = smoothclip(tola, tolb, alpha);
+							float r = max(gl_FragColor.r - (1.0-alpha)*color.r, 0.0);
+							float g = max(gl_FragColor.g - (1.0-alpha)*color.g, 0.0);
+							float b = max(gl_FragColor.b - (1.0-alpha)*color.b, 0.0);
+							if(alpha < clipBlack){
+								alpha = r = g = b = 0.0;
+							}
+							if(alpha > clipWhite){
+								alpha = 1.0;
+							}
+							if(clipWhite < 1.0){
+								alpha = alpha/max(clipWhite, 0.9);
+							}
+							return vec4(r,g,b, alpha);
+						}
+						
+						void main()
+						{
+							gl_FragColor = texture2D( pointTexture, vUv );
+							float tola = 0.0;
+							float tolb = u_threshold/2.0;
+							float cb_key = rgb2cb(color.r, color.g, color.b);
+							float cr_key = rgb2cr(color.r, color.g, color.b);
+							gl_FragColor = greenscreen(gl_FragColor, cb_key, cr_key, tola, tolb, u_clipBlack, u_clipWhite);
+							if(u_mode > 0.5 && u_mode < 1.5){
+								gl_FragColor = mix(vec4(1.0, 1.0, 1.0, 1.0), gl_FragColor, gl_FragColor.a);
+								gl_FragColor.a = 1.0;
+							}
+							if(u_mode > 1.5 && u_mode < 2.5){
+								gl_FragColor = vec4(gl_FragColor.a, gl_FragColor.a, gl_FragColor.a, 1.0);
+							}
+							vec4 color = texture2D(pointTexture, vUv);
+							if (color.rgb == vec3(0.0, 0.0, 0.0)) {
+								discard; 
+							}
+							if(filterType==1){
+								float gray = 0.2989*gl_FragColor.r+0.5870*gl_FragColor.g+0.1140*gl_FragColor.b;
+								gl_FragColor = vec4(gray,gray,gray , gl_FragColor.a);
+							}else if(filterType==2){
+								vec3 tColor2 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]) ).rgb;
+								vec3 tColor3 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]) ).rgb;
+								vec3 tColor4 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
+								vec3 tColor5 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
+								vec3 tColor6 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
+								vec3 tColor7 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
+								vec3 tColor8 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
+								vec3 tColor9 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
+								vec3 tColor10 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
+								vec3 tColor11 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
+								gl_FragColor = vec4( (gl_FragColor.r+tColor2[0]+tColor3[0]+tColor4[0]+tColor5[0]+tColor6[0]+tColor7[0]+tColor8[0]+tColor9[0]+tColor10[0]+tColor11[0])/11.0,
+								(gl_FragColor.g+tColor2[1]+tColor3[1]+tColor4[1]+tColor5[1]+tColor6[1]+tColor7[1]+tColor8[1]+tColor9[1]+tColor10[1]+tColor11[1])/11.0,
+								(gl_FragColor.b+tColor2[2]+tColor3[2]+tColor4[2]+tColor5[2]+tColor6[2]+tColor7[2]+tColor8[2]+tColor9[2]+tColor10[2]+tColor11[2])/11.0,
+								gl_FragColor.a);
+							}else if(filterType==3){
+								float brightr=gl_FragColor.r+lightLevel;
+								float brightg=gl_FragColor.g+lightLevel;
+								float brightb=gl_FragColor.b+lightLevel;
+								gl_FragColor = vec4(brightr,brightg,brightb , gl_FragColor.a);
+							}else if(filterType==4){
+								float reverser=1.0 - gl_FragColor.r;
+								float reverseg=1.0 - gl_FragColor.g;
+								float reverseb=1.0 - gl_FragColor.b;
+								gl_FragColor = vec4(reverser,reverseg,reverseb,gl_FragColor.a);
+							}else if(filterType==5){
+								float dx = fract(sin(dot(vUv ,vec2(12.9898,78.233))) * 43758.5453);
+								vec3 cResult = gl_FragColor.rgb + gl_FragColor.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
+								vec2 sc = vec2( sin( vUv.y * 4096.0 ), cos( vUv.y * 4096.0 ) );
+								cResult += gl_FragColor.rgb * vec3( sc.x, sc.y, sc.x ) * 0.025;
+								cResult = gl_FragColor.rgb + clamp( 0.35, 0.0,1.0 ) * ( cResult - gl_FragColor.rgb );
+								if( false ) {
+									cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
+								}
+								float oldr=0.393*cResult[0]+0.769*cResult[1]+0.189*cResult[2];
+								float oldg=0.349*cResult[0]+0.686*cResult[1]+0.168*cResult[2];
+								float oldb=0.272*cResult[0]+0.534*cResult[1]+0.131*cResult[2];
+								gl_FragColor =  vec4( oldr,oldg,oldb , gl_FragColor.a);
+							}else if(filterType==6){
+								float average = ( gl_FragColor.r + gl_FragColor.g + gl_FragColor.b ) / 2.0;
+								float s = sin( 0.5 ), c = cos( 0.5 );
+								vec2 tex = vUv * vec2(videowidth,videoheight) - vec2(0,0);
+								vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * gridSize;
+								float pattern =  ( sin( point.x ) * sin( point.y ) ) * 4.0;
+								float seed = average * 10.0 - 5.0 + pattern ;
+								gl_FragColor = vec4(  seed*0.3+gl_FragColor.r*0.7,seed*0.3+gl_FragColor.g*0.7 ,seed*0.3+gl_FragColor.b*0.7, gl_FragColor.a );
+							}
+						}
+					`,
+				};
+				// 创建绿幕材质
+				let greenScreenMaterial = new THREE.ShaderMaterial(greenScreenShader);
+				greenScreenMaterial.side = THREE.DoubleSide;
+				let geometry = new THREE.PlaneGeometry(9, 16);
+				// 应用绿幕材质到对象上
+				let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
+				if(that.coordinate){
+					let position = JSON.parse(that.coordinate);
+					mesh.position.set(position.x, position.y, position.z);//设置视频位置
+				}else{
+					mesh.position.copy(lastPosition);//设置视频位置
+				}
+				if (that.scale) {
+					let scale = JSON.parse(that.scale);
+					mesh.scale.set(scale.x, scale.y, 1); //设置视频缩放比例
+				}
+				scene.add(mesh);
+				videoMesh = mesh;
+			}
+
+			function stopRender() {
+				needRender = false;
+			}
+
+			function starRender() {
+				if (needRender == true) { //如果已经在渲染中了，则不能再次开启，避免渲染过多
+					false;
+				}
+				needRender = true;
+				render(); //开始渲染
+			}
+
+			function render() {
+				if (needRender == false) {
+					return false;
+				}
+				controls.update();
+				if(videoMesh){
+					videoMesh.lookAt(camera.position);
+				}
+				renderer.render(scene, camera); //单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+				if (that.screenshotResolve) {
+					let gl = renderer.getContext();
+					let pix = window.devicePixelRatio;
+					let width = parseInt(that.width*pix);
+					let height = parseInt(that.height*pix);
+					let pixelData = new Uint8Array(width * height * 4);
+					if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+						// gl.readPixels(0, 0, frameBuffer.x, frameBuffer.y, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+						gl.readPixels(that.bottomLeftX*pix, that.bottomLeftY*pix, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+						// 确保有像素，微信小程序安卓在进入子页面返回本页面后，再一次readPixels稳定无像素
+						if (pixelData.some(i => i !== 0)) {
+							stopRender();
+							console.warn("***screenshotResolve-pixelData***");
+							that.screenshotResolve({pixelData, width, height})
+							that.screenshotResolve = null;//释放Promise
+							pixelData = null;//清空内存中的数据
+						}
+					}
+				}
+			}
+
+		},
+		methods: {
+			async clipImgHandle(){
+				this.bottomLeftX = this.left;
+				this.bottomLeftY = this.screenHeight - this.top - this.height;
+				let shottingImg = await this.shottingAction(3);//开始截图
+				console.warn("***clipImgHandle1***",shottingImg);
+				// alert(shottingImg)
+				// alert('getClipPicUrl3'+img.width)
+				// MessageBox({
+				// 	title: '提示',
+				// 	message: shottingImg,
+				// 	showCancelButton: true
+				// });
+				// window.open(shottingImg, "_blank");
+				// window.location.href = shottingImg
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_23121401', //点击ID
+					clkName: 'webgl_cover_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "封面确认",
+						locusValue: shottingImg
+					}
+				};
+				util.trackRequest(param);
+				if(window.__wxjs_environment === 'miniprogram'){
+					wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
+					wx.miniProgram.navigateBack();
+					// wx.miniProgram.navigateTo({
+					// 	url: '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId='+this.$store.state.houseId
+					// 	+ '&coordinate=' + encodeURIComponent(this.$route.query.coordinate) 
+					// 	+ '&bgUrl=' + shottingImg
+					// 	+ '&videoUrl=' + encodeURIComponent(this.$route.query.videoUrl)})
+				}else{
+					// window.location.href = shottingImg
+				}
+			},
+			navbarBackClk() {
+
+			},
+			mytouchstart(e,type) {
+				console.warn("***mytouchstart***",type)
+				this.type = type;
+				this.startLeft = this.left;
+				// this.clientX = 0;
+				// this.clientY = 0;
+				this.startX = e.changedTouches[0].clientX;
+				this.startY = e.changedTouches[0].clientY;
+				e.preventDefault();
+			},
+			mytouchmove(e) {
+				let startX = this.startX; 	// 开始x坐标 
+				let startY = this.startY; 	//开始y坐标
+				let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标 
+				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
+				// this.clientX = touchMoveX - startX;
+				// this.clientY = touchMoveY - startY;
+				this.widthHandle(touchMoveX,1);
+				e.preventDefault();
+			},
+			mytouchend(e) {
+				
+			},
+			widthHandle(touchMoveX){
+				let clientX = touchMoveX - this.startX;
+				if(this.type==1){//左上角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}
+					this.height = this.width;
+				}else if(this.type==2){//右上角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}
+					this.height = this.width;
+				}else if(this.type==3){//右下角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}
+					this.height = this.width;
+				}else if(this.type==4){//左下角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}
+					this.height = this.width;
+				}
+				// this.unit = unit;
+				// this.width = this.width * unit;
+				// this.height = this.height * unit;
+				// this.left = this.left * unit;
+				// this.top = this.top * unit;
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_clipImg.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.html

@@ -0,0 +1,116 @@
+<!--
+ * @Author: 353810753@qq.com
+ * @Date: 2023-05-17 15:46:34
+ * @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">
+	<krpanoVideo ref="krpanoVideo" :bgUrl="bgUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<div v-if="bgMusic || AIPeople || AIPet" class="voice-btn rows justify-center" @click="updateMuted">
+		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
+	</div>
+	<div class="music-view rows justify-center" v-if="bgMusic.title">
+		<img class="icon-yinle" src="https://dm.static.elab-plus.com/miniProgram/music_icon.png" alt=""></img>
+		{{bgMusic.title || ''}}
+	</div>
+	<div id="lottie-view" class="lottie-view" v-show="showAnim"></div>
+	<!-- 中奖蒙层 -->
+	<div class="mask-lottery" v-if="showLottery">
+		<!-- 成功 -->
+		<div class="main win" v-if="result.status==1">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="win-title">
+				恭喜您<br />
+				获得场景奖励
+			</div>
+			<!-- <div class="win-info rows justify-center" style="align-items: flex-end;">
+				<span class="win-unit">￥</span>{{result.amount}}
+			</div> -->
+			<div class="win-messges">
+				请到微信钱包<br />
+				领取金额
+			</div>
+			<div class="btn btn-style rows justify-center" @click="closeLottery">立即收下</div>
+		</div>
+		<!-- 已经领过了 -->
+		<div class="main fail" v-else-if="result.status==2">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="common-title">
+				领过啦！
+			</div>
+			<div class="common-desc">
+				已领过该礼包<br />
+				去广场看看其他作品吧！
+			</div>
+			<img class="common-img1 imgSty2" src="https://dm.static.elab-plus.com/miniProgram/hasRedImg.png" alt=""></img>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
+		</div>
+		<!-- 礼盒领完了 -->
+		<div class="main fail" v-else-if="result.status==3">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="common-title">
+				礼包已抢完
+			</div>
+			<div class="common-desc">
+				礼包已被抢完了！<br />
+				去广场看看其他作品吧
+			</div>
+			<img class="common-img1" src="https://dm.static.elab-plus.com/miniProgram/red-over.png" alt=""></img>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
+		</div>
+		<!-- 过期 -->
+		<div class="main fail" v-else-if="result.status==4">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="common-title">
+				礼包已过期
+			</div>
+			<div class="common-desc">
+				礼包已经过期了，<br />
+				去广场看看其他作品吧
+			</div>
+			<img class="common-img" src="https://dm.static.elab-plus.com/miniProgram/red-fail.png" alt=""></img>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
+		</div>
+		<!-- 达到金额领取限制 -->
+		<div class="main fail" v-else-if="result.status==5">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="common-title">
+				达到金额领取上限
+			</div>
+			<div class="common-desc">
+				抱歉，您领取金额已达到<br />
+				今日可领取上限，明日再来吧~
+			</div>
+			<img class="common-img1 imgSty3" src="https://dm.static.elab-plus.com/miniProgram/fail-img.png" alt=""></img>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
+		</div>
+		<!-- 达到领取次数限制 -->
+		<div class="main fail" v-else-if="result.status==6">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="common-title">
+				领取次数已用完
+			</div>
+			<div class="common-desc">
+				抱歉，今日领取次数已用完，<br />
+				明日再来吧~
+			</div>
+			<img class="common-img1 imgSty3" src="https://dm.static.elab-plus.com/miniProgram/fail-img.png" alt=""></img>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
+		</div>
+		<!-- 达到创建次数限制 -->
+		<div class="main fail" v-else-if="result.status==7">
+			<div class="iconfont icon-cancel" @click="closeLottery"></div>
+			<div class="common-title">
+				创建次数已用完
+			</div>
+			<div class="common-desc">
+				抱歉，今日创建次数已用完，<br />
+				明日再来吧~
+			</div>
+			<img class="common-img1 imgSty3" src="https://dm.static.elab-plus.com/miniProgram/fail-img.png" alt=""></img>
+			<div class="btn common-style rows justify-center" @click="closeLottery">知道了</div>
+		</div>
+	</div>
+</div>

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.scss

@@ -0,0 +1,185 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+}
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	left: 30px;
+	top: 30px;
+	border-radius: 50%;
+	z-index: 99999;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.music-view{
+	position: absolute;
+	right: 30px;
+	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;
+	}
+}
+.mask-lottery{
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	left: 0px;
+	top: 0px;
+	z-index: 999;
+	background-color: transparent;
+	.main{
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		width: 450px;
+		height: 594px;
+		border-radius: 60px;
+		box-sizing: border-box;
+		padding-top: 78px;
+		// padding-left:30px;
+		text-align: center
+	}
+	.win{
+		width: 100%;
+		height: 1026px;
+		padding-top: 0px;
+		background-image: url('https://dm.static.elab-plus.com/miniProgram/red-get.png');
+		background-repeat: no-repeat;
+		background-size: cover;
+		// backdrop-filter: blur(30px);
+		// background: linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%,  rgba(255, 64, 64, 0.8)100%);
+		// border: 6px solid #ffb8a7;
+	}
+	.win-title{
+		font-family: "Helvetica Bold";
+		font-weight: 700;
+		font-size: 44px;
+		color: #fff;
+		margin-top: 362px;
+		margin-bottom: 38px;
+	}
+	.win-info{
+		color: rgb(255, 255, 255);
+		font-family: Verdana;
+		font-weight: 700;
+		margin-bottom: 36px;
+		font-size: 100px;
+		// line-height: 100px;
+		box-sizing: border-box;
+	}
+	.win-unit{
+		font-size: 52px;
+		margin-bottom: 10px;
+	}
+	.win-messges{
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 40px;
+		color: #931029;
+	}
+	.fail{
+		background: linear-gradient(360deg, #fff 0%, #ffeaea 100%);
+	}
+	.btn{
+		width: 290px;
+		height: 84px;
+		border-radius: 40px;
+		background: #fff;
+		font-family: "Helvetica Neue Bold";
+		font-weight: 700;
+		font-size: 32px;
+		color: #ff895e;
+	}
+	.btn-style{
+		position: absolute;
+		bottom: 180px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.common-style{
+		position: absolute;
+		bottom: 20px;
+		left: 50%;
+		transform: translateX(-50%);
+		background: #c96161;
+		color: #fff;
+	}
+	.common-title{
+		font-family: "Helvetica Bold";
+		font-weight: 700;
+		font-size: 44px;
+		color: #5f1a1a;
+		margin-bottom: 20px;
+	}
+	.common-desc{
+		font-family: "Helvetica";
+		font-weight: 400;
+		font-size: 26px;
+		color: rgba(39, 39, 39, 0.6);
+		margin-bottom: 20px;
+	}
+	.common-img{
+		width: 192.46px;
+		height: 144.6px;
+		opacity: 0.24;
+	}
+	.common-img1{
+		margin-top: 48px;
+		width: 204.72px;
+		height: 148.5px;
+		opacity: 0.46;
+		object-fit: cover;
+	}
+	.imgSty2{
+		margin-top: 23px;
+		width: 158px;
+		height: 172.24px;
+	}
+	.imgSty3{
+		margin-top: 44px;
+		width: 111px;
+		height: 111px;
+	}
+	.icon-cancel{
+		position: absolute;
+		right: -30px;
+		top: -50px;
+		font-size: 50px;
+		color: #fff;
+	}
+	.win .icon-cancel{
+		position: absolute;
+		right: 60px;
+		top: 75px;
+		font-size: 50px;
+		color: #fff;
+	}
+}
+.lottie-view{
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	width: 100vw;
+	height: 100vh;
+	z-index: 9999;
+	pointer-events: none;
+}

src/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720.vue

@@ -0,0 +1,181 @@
+<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>

src/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg.html

@@ -0,0 +1,11 @@
+<!--
+ * @Author: caodongdong caodongdoong@gmail.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: caodongdong caodongdoong@gmail.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">
+	<krpanoImg></krpanoImg>
+</div>

src/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg.scss

@@ -0,0 +1,21 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+	position: relative;
+}
+canvas { z-index: 10;}
+.mapDiv{
+	position: relative;
+	background-color: #fff;
+	font-size: 0px;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+

src/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg.vue

@@ -0,0 +1,72 @@
+<template src="./webgl_rxdz_krpanoImg.html">
+
+</template>
+<script>
+	import krpanoImg from "@/components/krpanoImg/index.vue";
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	export default {
+		components: {
+			krpanoImg
+		},
+		mixins: [commonPageMethod],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvCurPageName: "panor",
+				locusBehaviorName: "panor",
+				pvCurPageParams: null,
+				houseId: "",
+				pvId: 'p_2cmina_23080402',
+				canvas: null,
+				navbar: {
+					showCapsule: 1,
+					title: 'panor',
+					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:'',
+			}
+		},
+		beforeDestroy() {
+			console.warn("***beforeDestroy-webgl_rxdz_krpanoImg***");
+		},
+		mounted(options) {
+			var that = this;
+			console.warn("***webgl_rxdz_krpanoImg-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';
+			
+		},
+		methods: {
+			clearHandle() {
+				this.clearEvent();
+			},
+			updateMuted(){
+				this.muted = !this.muted;
+			},
+			iosPlay(){
+				this.videoHandle();
+				this.hasOneTouch = true;
+			},
+			
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_krpanoImg.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.html

@@ -0,0 +1,27 @@
+<div class="main-view">
+	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
+	<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> -->
+	<div class="cover-box" :style="{'width':width+'px','height':height+'px','left':left+'px','top':top+'px'}">
+		<div class="box-empty"></div>
+		<div class="left-top boundary"></div>
+		<div class="right-top boundary"></div>
+		<div class="left-bottom boundary"></div>
+		<div class="right-bottom boundary"></div>
+		<div class="operate operate1" @touchstart.stop="mytouchstart($event,'1')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate2" @touchstart.stop="mytouchstart($event,'2')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate3" @touchstart.stop="mytouchstart($event,'3')" @touchmove.stop="mytouchmove"></div>
+		<div class="operate operate4" @touchstart.stop="mytouchstart($event,'4')" @touchmove.stop="mytouchmove"></div>
+	</div>
+	<div class="cover-btn rows justify-center" @click.stop="clipImgHandle">
+		确认为封面
+	</div>
+	<!-- AI结果覆盖层 -->
+	<!-- <viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
+	  :spaceObj="curSpaceObj" ></viewMask> -->
+	<!-- 生成截屏的画布对象 -->
+	<canvas id="canvas" type="2d" :style="{'height':'200px','top':'200px'}"></canvas>
+	<!-- <video id="myvideo" v-if="videoUrl" style="display: none;" loop muted autoplay controls="false" :src="videoUrl"></video> -->
+</div>

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.scss

@@ -0,0 +1,150 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+}
+canvas:focus {
+  outline:none;
+}
+#mapDiv{
+	background-color: #fff;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	// position: absolute;
+	left:0px;
+}
+.canvas-view{
+	position:relative;
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	// background: rgba(0, 0, 0, 0.3);
+	z-index: 7;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 200px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.guide-mask-hide {
+	opacity: 0;
+	pointer-events: none;
+}
+.cover-box{
+	position: absolute;
+	max-width:100vw;
+	// top:50%;
+	// left: 50%;
+	// transform: translate(-50%,-50%);
+	// width: 620px;
+	// height: 620px;
+	background: transparent;
+	z-index: 10;
+	pointer-events: none;
+	padding: 8px;
+	.box-empty{
+		// position: absolute;
+		width: 100%;
+		height: 100%;
+		// margin-top: 6px;
+		// margin-left: 6px;
+		border: 4px solid #fff;
+		// box-sizing: content-box;
+		box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;
+	}
+	.boundary{
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		border: solid 4px #fff;
+		pointer-events: auto;
+		z-index: 8;
+	}
+	.left-top{
+		top: 0px;
+		left: 0px;
+		border-right: none;
+		border-bottom: none;
+	}
+	.right-top{
+		top: 0px;
+		right: 0px;
+		border-left: none;
+		border-bottom: none;
+	}
+	.left-bottom{
+		bottom: 0px;
+		left: 0px;
+		border-right: none;
+		border-top: none;
+	}
+	.right-bottom{
+		bottom: 0px;
+		right: 0px;
+		border-left: none;
+		border-top: none;
+	}
+	.operate{
+		position: absolute;
+		pointer-events: auto;
+		width: 100px;
+		height: 100px;
+		z-index: 9;
+	}
+	.operate1{
+		left: -0px;
+		top: -0px;
+	}
+	.operate2{
+		right: -0px;
+		top: -0px;
+	}
+	.operate3{
+		right: -0px;
+		bottom: -0px;
+	}
+	.operate4{
+		left: -0px;
+		bottom: -0px;
+	}
+}
+.cover-btn{
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 132px;
+	width: 292px;
+	height: 80px;
+	border-radius: 40px;
+	background: #fff;
+	font-family: "DIN Alternate Bold";
+	font-weight: 700;
+	font-size: 32px;
+	color: #222;
+	z-index: 1111;
+}

src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.vue

@@ -0,0 +1,251 @@
+<template src="./webgl_rxdz_krpanoclipImg.html">
+
+</template>
+<script>
+	import krpanoVideo from "@/components/krpanoVideo/index.vue";
+	import {getStorage} from '@/utils/localStorage';
+	import { MessageBox } from 'mint-ui';
+	import {
+		Toast
+	} from 'mint-ui';
+	var requestId = "";
+	const util = require('@/utils/util.js').default;
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	import screenshot from '@/mixins/screenshot.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	export default {
+		components: {
+			krpanoVideo,
+		},
+		mixins: [commonPageMethod,screenshot],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvCurPageName: "webgl_clipImg",
+				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,
+				},
+				id: '', // 户型编号
+				houseId:'',
+				canvasHeight:'',
+				isIOS: false,
+				videoUrl:'',	//绿幕视频地址
+				bgUrl:'',
+				scale:'',
+				coordinate:'',
+				muted: true, //视频是否静音
+				width:'620',
+				height:'620',
+				left:'65',
+				top:'150',
+				startX:0,
+				startY:0,
+				clientX:0,
+				clientY:0,
+				screenWidth:0,
+				screenHeight:0,
+				type:1,
+				bottomLeftX:0,
+				bottomLeftY:0,
+				AIPeople:'',
+				AIPet:'',
+				bgMusic:'',
+				redBox:'',
+				bili: 2/3,
+				instance:null,
+			}
+		},
+		beforeDestroy() {
+			console.warn("***beforeDestroy-webgl_rxdz_krpanoclipImg***");
+		},
+		mounted(options) {
+			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.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.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) : '';
+			
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if (window.innerWidth && window.screen.width) {
+				this.screenWidth = screenWidth = Math.min(window.innerWidth, window.screen.width);
+			}
+			if (window.innerHeight && window.screen.height) {
+				this.screenHeight = screenHeight = Math.min(window.innerHeight, window.screen.height)
+			}
+			let unit = screenWidth / 750; //单位rpm 对应 px 的值
+			this.width = this.width * unit;
+			this.height = parseInt(this.height/this.bili) * unit;
+			this.left = this.left * unit;
+			this.top = this.top * unit;
+			this.canvasHeight = screenHeight;
+			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
+			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.instance = Toast({
+					message: '正在截图，请稍后',
+					duration:-1,
+				});
+				this.bottomLeftX = this.left;
+				this.bottomLeftY = this.screenHeight - this.top - this.height;
+				this.$refs.krpanoVideo.makescreenshot();
+			},
+			closeToast(){
+				this.instance && this.instance.close();
+			},
+			navbarBackClk() {
+
+			},
+			mytouchstart(e,type) {
+				console.warn("***mytouchstart***",type)
+				this.type = type;
+				this.startLeft = this.left;
+				// this.clientX = 0;
+				// this.clientY = 0;
+				this.startX = e.changedTouches[0].clientX;
+				this.startY = e.changedTouches[0].clientY;
+				e.preventDefault();
+			},
+			mytouchmove(e) {
+				let startX = this.startX; 	// 开始x坐标 
+				let startY = this.startY; 	//开始y坐标
+				let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标 
+				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
+				// this.clientX = touchMoveX - startX;
+				// this.clientY = touchMoveY - startY;
+				this.widthHandle(touchMoveX,1);
+				e.preventDefault();
+			},
+			mytouchend(e) {
+				
+			},
+			widthHandle(touchMoveX){
+				let clientX = touchMoveX - this.startX;
+				if(this.type==1){//左上角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}
+					this.height = parseInt(this.width/this.bili);
+				}else if(this.type==2){//右上角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}
+					this.height = parseInt(this.width/this.bili);
+				}else if(this.type==3){//右下角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}
+					this.height = parseInt(this.width/this.bili);
+				}else if(this.type==4){//左下角
+					if(clientX < 0){//左移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft - _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left < 0){
+							this.left = 0;
+							this.width = this.screenWidth;
+						}
+					}else if(clientX > 0){//右移动
+						let _juli = Math.abs(clientX);
+						this.left = this.startLeft + _juli;
+						this.width = this.screenWidth - (this.left * 2);
+						if(this.left > (this.screenWidth - 200)/2){
+							this.left = (this.screenWidth - 200)/2;
+							this.width = 200;
+						}
+					}
+					this.height = parseInt(this.width/this.bili);
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_krpanoclipImg.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.html

@@ -0,0 +1,37 @@
+<!--
+ * @Author: 353810753@qq.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: 353810753@qq.com
+ * @LastEditTime: 2023-06-30 16:20:04
+-->
+<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>
+	</div>
+	<div class="slide-mask" v-if="tabIndex==0 || tabIndex==1"></div>
+	<!-- 数字人大小滚动条 -->
+	<div class="slide-view columns rows-between" v-if="tabIndex==0 || tabIndex==1">
+		<div class="slide-tips">{{tabIndex==0?'数字人':'宠物'}}<br>大小</div>
+		<div class="slide-word">放大</div>
+		<el-slider
+			class="rangeview"
+		    v-model="value"
+		    vertical
+			:min="10"
+			:max="100"
+			:show-tooltip="false"
+			@change="rangeChange"
+		    >
+		</el-slider>
+		<div class="slide-word">缩小</div>
+	</div>
+	<!-- AI数字人组件 -->
+	<viewAI ref="viewAI" :relationId="relationId" :amount="amount" @aiPeopleChange="aiPeopleChange" @tabChange="tabChange" @setRedBox="setRedBox" @redBox="redBox" style="z-index: 130;"></viewAI>
+	<!-- <payView ref="payView"></payView> -->
+	<playTips ref="playTips"></playTips>
+</div>

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.scss

@@ -0,0 +1,151 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+	position: relative;
+}
+canvas { z-index: 10;}
+.mapDiv{
+	position: relative;
+	background-color: #fff;
+	font-size: 0px;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	left:0px;
+}
+.canvas-view{
+	position:relative;
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	left: 20px;
+	top: 650px;
+	border-radius: 50%;
+	z-index: 99;
+}
+.slide-mask{
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	width: 126px;
+	height: 750px;
+	background: linear-gradient(90.13deg, #00000000 0%, #00000080 100%);
+	z-index: 9;
+}
+.slide-view{
+	position: absolute;
+	right: 10px;
+	top: 80px;
+	width: 72px;
+	height: calc(750px - 60px - 60px);
+	z-index: 10;
+	.slide-tips{
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		margin-bottom: 20px;
+	}
+	.slide-word{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 24px;
+		text-align: center;
+		color: #b9ff98;
+	}
+	.rangeview{
+		right: 0px;
+		height: 472px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+}
+
+// /deep/.el-slider.is-vertical .el-slider__button-wrapper{
+// 	top: 50%;
+// 	left: 50%;
+// 	transform: translate(-50%,-50%);
+// }
+/deep/.el-slider__button-wrapper{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+/deep/.el-slider__bar{
+	background-color: #B9FF98;
+}
+/deep/.el-slider__button{
+	border: 2px solid #B9FF98;
+}
+/deep/.el-slider.is-vertical .el-slider__bar{
+	width: 8px;
+	border-radius: 0 0 4px 4px;
+}
+/deep/.el-slider.is-vertical .el-slider__runway{
+	width: 8px;
+	background-color: rgba(255, 255, 255, 0.5);
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 90;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 100px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.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

@@ -0,0 +1,162 @@
+<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:'',	//场景总金额，如果有的话
+			}
+		},
+		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;
+			},
+			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>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -295,9 +295,9 @@
 				tweenCameraAnma = value
 			}
 			function attendEvent () {
-				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
-				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
-				renderer.domElement.addEventListener('touchend', onPointerUp, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchmove', onPointerMove, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchend', onPointerUp, false);
 			}
 			//取消事件监听-避免二次进入时触发多次事件
 			function clearEvent(){

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.html

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <div class="main-view">
-	<mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" />
+	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
 	<!-- 主要操作视图 -->
 	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
 	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>
@@ -15,15 +15,39 @@
 		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
 		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
 	</div> -->
-	<div id="mapDiv" ref="webgl"></div>
+	<div class="mapDiv" ref="webgl">
+		<div class="voice-btn rows justify-center" @click="updateMuted">
+			<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
+		</div>
+	</div>
 	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
 		 width="100vw" 
 		:style="{'height':canvasHeight+'px'}">
 	</canvas>
-	<!-- AI结果覆盖层 -->
-	<!-- <viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
-	  :spaceObj="curSpaceObj" ></viewMask> -->
+	<div class="slide-mask"></div>
+	<!-- 数字人大小滚动条 -->
+	<div class="slide-view columns rows-between">
+		<div class="slide-tips">数字人<br>大小</div>
+		<div class="slide-word">放大</div>
+		<el-slider
+			class="rangeview"
+		    v-model="rangeValue"
+		    vertical
+			:min="10"
+			:max="100"
+			:show-tooltip="false"
+			@change="rangeChange"
+		    >
+		</el-slider>
+		<div class="slide-word">缩小</div>
+	</div>
+	<!-- <div class="guide-mask" id="guide-mask" v-if="!isIOS">
+		<img src="https://dm.static.elab-plus.com/guide-mask.png">
+	</div> -->
+	<!-- AI数字人组件 -->
+	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
 	<!-- 生成截屏的画布对象 -->
 	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
-	<!-- <video id="video" style="display:none" autoplay playsinline src="https://dm.static.elab-plus.com/miniProgram/green.mp4"></video> -->
+	<video id="myvideo" style="display: none;" loop :muted="muted" 
+	autoplay controls="false" ></video>
 </div>

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.scss

@@ -2,10 +2,13 @@
 	width:100vw;
 	height:100vh;
 	overflow: hidden;
+	position: relative;
 }
-canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;}
-#mapDiv{
+canvas { z-index: 10;}
+.mapDiv{
+	position: relative;
 	background-color: #fff;
+	font-size: 0px;
 }
 page {
     -webkit-user-select: none;
@@ -19,7 +22,6 @@ page {
 #canvas {
 	width: 100vw;
 	z-index: -1;
-	// position: absolute;
 	left:0px;
 }
 .canvas-view{
@@ -29,3 +31,104 @@ page {
 	position:absolute;
 	width:100vw;
 }
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	left: 20px;
+	bottom: 20px;
+	border-radius: 50%;
+}
+.slide-mask{
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	width: 126px;
+	height: 750px;
+	background: linear-gradient(90.13deg, #00000000 0%, #00000080 100%);
+	z-index: 9;
+}
+.slide-view{
+	position: absolute;
+	right: 10px;
+	top: 80px;
+	width: 72px;
+	height: calc(750px - 60px - 60px);
+	z-index: 10;
+	.slide-tips{
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		margin-bottom: 20px;
+	}
+	.slide-word{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 24px;
+		text-align: center;
+		color: #b9ff98;
+	}
+	.rangeview{
+		right: 0px;
+		height: 472px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+}
+
+// /deep/.el-slider.is-vertical .el-slider__button-wrapper{
+// 	top: 50%;
+// 	left: 50%;
+// 	transform: translate(-50%,-50%);
+// }
+/deep/.el-slider__button-wrapper{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+/deep/.el-slider__bar{
+	background-color: #B9FF98;
+}
+/deep/.el-slider__button{
+	border: 2px solid #B9FF98;
+}
+/deep/.el-slider.is-vertical .el-slider__bar{
+	width: 8px;
+	border-radius: 0 0 4px 4px;
+}
+/deep/.el-slider.is-vertical .el-slider__runway{
+	width: 8px;
+	background-color: rgba(255, 255, 255, 0.5);
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 90;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 100px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.guide-mask-hide {
+	opacity: 0;
+	pointer-events: none;
+}

src/router/index.js

@@ -10,6 +10,12 @@ import webgl_rxdz_look from '@/pages/webgl_rxdz_look/webgl_rxdz_look.vue'
 import webgl_rxdz_customize from '@/pages/webgl_rxdz_customize/webgl_rxdz_customize'
 
 import webgl_rxdz_vr from '@/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue'
+import webgl_rxdz_720 from '@/pages/webgl_rxdz_720/webgl_rxdz_720.vue'
+import webgl_rxdz_clipImg from '@/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg';//webgl 截图功能
+import webgl_rxdz_krpanovr from '@/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr';//krpanoImg-720视频
+import webgl_rxdz_krpanoImg from '@/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg';//krpanoImg-720图
+import webgl_rxdz_krpano720 from '@/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720';//webgl_rxdz_krpano720
+import webgl_rxdz_krpanoclipImg from '@/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg';//webgl_rxdz_krpanoclipImg
 
 Vue.use(Router)
 const router = new Router({
@@ -17,54 +23,102 @@ const router = new Router({
     // mode: 'history',
     routes: [
         // 页面初始化
-        {
-            path: '/',
-            redirect: '/pages/webgl_rxdz'
-        },
 		{
-		    path: '/pages/webgl_rxdz',
-		    name: 'webgl_rxdz',
-		    component: webgl_rxdz,
+			path: '/',
+			redirect: '/pages/webgl_rxdz'
+		},
+		{
+			path: '/pages/webgl_rxdz',
+			name: 'webgl_rxdz',
+			component: webgl_rxdz,
 			meta:{
 				keepAlive:true
 			}
 		},
-        {
-            path: '/pages/webgl_rxdz_roam',
-            name: 'webgl_rxdz_roam',
-            component: webgl_rxdz_roam,
+		{
+			path: '/pages/webgl_rxdz_roam',
+			name: 'webgl_rxdz_roam',
+			component: webgl_rxdz_roam,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_look',
+			name: 'webgl_rxdz_look',
+			component: webgl_rxdz_look,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_customize',
+			name: 'webgl_rxdz_customize',
+			component: webgl_rxdz_customize,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/mapComponent',
+			name: 'mapComponent',
+			component: mapComponent,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_vr',
+			name: 'webgl_rxdz_vr',
+			component: webgl_rxdz_vr,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_720',
+			name: 'webgl_rxdz_720',
+			component: webgl_rxdz_720,
 			meta:{
 				keepAlive:false
 			}
-        },
+		},
 		{
-		    path: '/pages/webgl_rxdz_look',
-		    name: 'webgl_rxdz_look',
-		    component: webgl_rxdz_look,
+			path: '/pages/webgl_rxdz_clipImg',
+			name: 'webgl_rxdz_clipImg',
+			component: webgl_rxdz_clipImg,
 			meta:{
 				keepAlive:false
 			}
 		},
-        {
-            path: '/pages/webgl_rxdz_customize',
-            name: 'webgl_rxdz_customize',
-            component: webgl_rxdz_customize,
+		{
+			path: '/pages/webgl_rxdz_krpanovr',
+			name: 'webgl_rxdz_krpanovr',
+			component: webgl_rxdz_krpanovr,
 			meta:{
 				keepAlive:false
 			}
-        },
+		},
+		{
+			path: '/pages/webgl_rxdz_krpanoImg',
+			name: 'webgl_rxdz_krpanoImg',
+			component: webgl_rxdz_krpanoImg,
+			meta:{
+				keepAlive:false
+			}
+		},
 		{
-		    path: '/pages/mapComponent',
-		    name: 'mapComponent',
-		    component: mapComponent,
+			path: '/pages/webgl_rxdz_krpano720',
+			name: 'webgl_rxdz_krpano720',
+			component: webgl_rxdz_krpano720,
 			meta:{
 				keepAlive:false
 			}
 		},
 		{
-		    path: '/pages/webgl_rxdz_vr',
-		    name: 'webgl_rxdz_vr',
-		    component: webgl_rxdz_vr,
+			path: '/pages/webgl_rxdz_krpanoclipImg',
+			name: 'webgl_rxdz_krpanoclipImg',
+			component: webgl_rxdz_krpanoclipImg,
 			meta:{
 				keepAlive:false
 			}

src/services/request.js

@@ -1,9 +1,9 @@
 import store from "@/store";
 import axios from 'axios';
+import router from "@/router";
 import {getStorage, removeItem} from '@/utils/localStorage'
 var requestCount = 0; //记录下同时的请求数
 // import ElementUI from 'element-ui';
-var showToast = true;
 
 axios.defaults.headers.post['elabEnvironment'] = '4'; //axios默认的请求方式,可以自己设置
 axios.defaults.headers.post['userType'] = '1000'; //axios默认的请求方式,可以自己设置
@@ -24,17 +24,22 @@ axios.interceptors.request.use(function(config) {
 		console.warn("***图片get请求***",config.url)
 		return config;
 	} else {
-		config.url = window.$config.api_url + config.url;
-		if (config.url.includes('elab-marketing-operate/mofangTest/user/login')||config.url.includes('elab-marketing-user/vcode/send/verifyCode')) {
+		if(config.url.startsWith('http')){
+			config.url = config.url;
+		}else{
+			config.url = window.$config.api_url + config.url;
+		}
+		if (config.url.includes('elab-marketing-operate/mofangTest/user/login')
+		||config.url.includes('elab-marketing-user/vcode/send/verifyCode')) {
 			config.headers['userId'] = "";
 			config.headers['ip'] = "";
-			showToast = true;
 		} else {//uploadOss 上传format文件过大时提示不成功，接口500，通过测试与header有关，注释掉上传的header就好了
-			if (!config.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')){
-				let userinfo = getStorage('userInfoThing');
-				config.headers['userId'] = userinfo ? JSON.parse(userinfo).dataUserId : '';
-				config.headers['ip'] = getStorage('ip');
-				config.headers['maiya_token'] =  getStorage('userInfoThing') ? JSON.parse(getStorage('userInfoThing')).maiya_token || "" : ""; //token
+			if (!config.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')
+			&& !config.url.includes('/robust_video')){
+				config.headers['userId'] = mapVue.$route.query.leavePhoneCustomerId || '';
+				config.headers['openId'] = mapVue.$route.query.openid || '';
+				// config.headers['ip'] = getStorage('ip');
+				// config.headers['maiya_token'] =  getStorage('userInfoThing') ? JSON.parse(getStorage('userInfoThing')).maiya_token || "" : ""; //token
 			}
 		}
 	}
@@ -58,17 +63,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

@@ -36,10 +36,18 @@ const endpoints = {
 	generateProcess: 'elab-marketing-content/aiGenerateImg/getResult', // 获取任务进度-阿里云
 	img2img_local: 'elab-marketing-content/aiGenerateImg/img2img_local', // 生成图第一次请求
 	getPredictions: 'elab-marketing-content/aiGenerateImg/getPredictions', // 获取任务进度-新版
-	shareDetail: '/elab-marketing-content/aiDreamHouse/V3.0/shareDetail', // 分享查看
+	shareDetail: 'elab-marketing-content/aiDreamHouse/V3.0/shareDetail', // 分享查看
+	queryEnumList: 'elab-marketing-user/enum/queryEnumList', // 获取数字人
+	rob: 'elab-marketing-file/redpack/rob', // 抢红包
+	robust_video: 'https://robustvideomatting.elab-plus.com/robust_video', // 上传视频
+	get_result: 'https://robustvideomatting.elab-plus.com/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') => {
+// 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 {
@@ -84,30 +92,41 @@ window.requestConfig = async(endpoint, options, isHideLoading = false, preventDo
         store.state.loading = false; //显示loading态
     }
     if (requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/importLocations') ||
-        requestOptions.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')) {
-        requestOptions.ContentType = 'multipart/form-data'
+        requestOptions.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss') ||
+		requestOptions.url.includes('/robust_video')) {
+        requestOptions.ContentType = 'multipart/form-data';
+		if(uploadProgress && typeof(uploadProgress)==='function'){
+			requestOptions.uploadProgress = uploadProgress;
+		}
+		
     }
     if (requestOptions) {
         let platform = (window.userInfo && window.userInfo['userAccount'] && window.userInfo['userAccount'].platform) ? window.userInfo['userAccount'].platform : ''; //TODO 要还原成‘’的
         let currentProject = store.state.currentProject ? store.state.currentProject : null;
         let landId = currentProject ? currentProject.id : '';
         requestOptions.data = requestOptions.data ? requestOptions.data : {};
-        let userTypeId = window.userInfo && window.userInfo.userType ? window.userInfo.userType.id : ''; //1客户端 ，2投手端
-        if (userTypeId == 2) {
-            if (!requestOptions.data.hasOwnProperty('platform') || !requestOptions.data.platform) {
-                requestOptions.data.platform = platform
-            }
-        }
-        if (!requestOptions.data.hasOwnProperty('landId') || !requestOptions.data.landId) {
-            requestOptions.data.landId = landId
-        }
     }
     var response;
-    if (requestOptions.url.includes('http') || method == 'get') {
+    if (!requestOptions.url.includes('robust_video') && (requestOptions.url.includes('http') || method == 'get')) {
         let params = requestOptions.data;
         response = await axios.get(requestOptions.url, { params });
     } else {
-        response = await axios.post(requestOptions.url, requestOptions.data);
+		if(requestOptions.uploadProgress && typeof(requestOptions.uploadProgress)==='function'){
+			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);
+		}
+        
     }
     //说明该接口需要防止连击
     if (preventDoubleClick && doubleClickList[requestOptions.path] && doubleClickList[requestOptions.path]

src/services/urlConfig.js

@@ -2,7 +2,7 @@ var config = function(env) {
     let WEB_CONF = {}
     if (env === 'test') {
         WEB_CONF = {
-			brandId: 94,
+			brandId: 102,
 			xcxHouseId: '100296',
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
@@ -27,7 +27,7 @@ var config = function(env) {
         }
     } else if (env === 'test2') {
         WEB_CONF = {
-			brandId: 94,
+			brandId: 102,
 			xcxHouseId: '100296',
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
@@ -52,7 +52,7 @@ var config = function(env) {
         }
     } else if (env === 'test3') {
         WEB_CONF = {
-			brandId: 94,
+			brandId: 102,
 			xcxHouseId: '100296',
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
@@ -77,7 +77,7 @@ var config = function(env) {
         }
     } else if (env === 'test4') {
         WEB_CONF = {
-			brandId: 94,
+			brandId: 102,
 			xcxHouseId: '100296',
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',

vue.config.js

@@ -34,5 +34,23 @@ module.exports = {
 				remUnit: 75, //根据视觉稿，rem为px的⼗分之⼀，750px  75rem
 				remPrecision: 4 //保留8位⼩数
 			}).end();
+		config.module
+		    .rule('xml')
+		    .test(/\.xml$/)
+		    .use('file-loader')
+		    .loader('file-loader')
+			.options({
+				esModule: false
+			})
+		    .end()
+		config.module
+		    .rule('swf')
+		    .test(/\.swf/)
+		    .use('file-loader')
+		    .loader('file-loader')
+			.options({
+				esModule: false
+			})
+		    .end()
 	}
 }