|
|
@@ -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>
|
zjs_project
