|
|
@@ -15,22 +15,21 @@
|
|
|
<!-- <div class="swcon" v-swiper:mySwiper="swiperOption" ref="floor1Swiper"> -->
|
|
|
<div class="swcon" ref="mySwiper">
|
|
|
<ul class="swiper-wrapper swiper-wrapper-n">
|
|
|
- <div class="swiper-slide" :class="{ active: index == activeIndex }" v-for="(i, index) in tourList">
|
|
|
+ <div class="swiper-slide" :class="{ active: index == guidePlayIndex }" v-for="(i, index) in tourList">
|
|
|
<img :src="i.heroLocations[0].thumbUrl" alt="" />
|
|
|
<div class="sl-item" :data-v="JSON.stringify({ data: i.heroLocations[0], index })">
|
|
|
<span>{{ i.heroLocations[0].name }}</span>
|
|
|
</div>
|
|
|
- {{ index }}
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="progress-box">
|
|
|
<div class="info">
|
|
|
- <span>{{ activeIndex + 1 }}</span
|
|
|
+ <span>{{ guidePlayIndex + 1 }}</span
|
|
|
>of<span>{{ tourList.length }}</span>
|
|
|
</div>
|
|
|
- <div class="bar-box"><div :style="`width:${100 / tourList.length}%;left:${(activeIndex * 100) / tourList.length}%;`" class="current-box"></div></div>
|
|
|
+ <div class="bar-box"><div :style="`width:${100 / tourList.length}%;left:${(guidePlayIndex * 100) / tourList.length}%;`" class="current-box"></div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -49,13 +48,14 @@ export default {
|
|
|
props: ["tourList"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
- return { activeIndex: 5 };
|
|
|
+ return {};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
panoId: "panoId",
|
|
|
guideIsPlay: "guideIsPlay",
|
|
|
+ guidePlayIndex: "guidePlayIndex",
|
|
|
}),
|
|
|
},
|
|
|
//监控data中的数据变化
|
|
|
@@ -64,14 +64,18 @@ export default {
|
|
|
methods: {
|
|
|
...mapMutations(["setData", "setPanoOver"]),
|
|
|
handleTour() {
|
|
|
+ if (this.guideIsPlay) {
|
|
|
+ player.director.tourInProgress && (player.director.stopTour(), player.director.endTourProgress());
|
|
|
+ } else {
|
|
|
+ settings.playTourNearBy ? player.director.playTourNearBy() : player.director.playTour();
|
|
|
+ }
|
|
|
this.setData({ guideIsPlay: !this.guideIsPlay });
|
|
|
},
|
|
|
closeGuide() {
|
|
|
this.setData({ showGuide: false });
|
|
|
},
|
|
|
changeGuide(i, index) {
|
|
|
- console.error(i);
|
|
|
- this.activeIndex = index;
|
|
|
+ this.guidePlayIndex = index;
|
|
|
},
|
|
|
initSwiper() {
|
|
|
new Swiper(this.$refs.mySwiper, {
|
|
|
@@ -85,6 +89,10 @@ export default {
|
|
|
centerInsufficientSlides: true,
|
|
|
centeredSlidesBounds: true,
|
|
|
on: {
|
|
|
+ init: () => {
|
|
|
+ console.error("init");
|
|
|
+ settings.playTourNearBy ? player.director.playTourNearBy() : player.director.playTour();
|
|
|
+ },
|
|
|
slideChangeTransitionEnd: function () {
|
|
|
// that.mbactive = this.realIndex;
|
|
|
},
|
|
|
@@ -93,12 +101,12 @@ export default {
|
|
|
// 这里的 obj 就是当前点击图片所对应的信息
|
|
|
|
|
|
let { index, data } = JSON.parse(event.target.getAttribute("data-v"));
|
|
|
- console.error(data, index);
|
|
|
- this.activeIndex = index;
|
|
|
+ this.setData({ guidePlayIndex: index });
|
|
|
+ player.director.goToHighlight([index, 0]);
|
|
|
// let { panoId, quaternion } = data.heroLocations[0];
|
|
|
- let { panoId, quaternion } = data;
|
|
|
+ // let { panoId, quaternion } = data;
|
|
|
// player.model.heroLocations里的那些item
|
|
|
- player.blackToPano({ pano: player.model.panos.get(panoId), quaternion: new THREE.Quaternion(quaternion._x, quaternion._y, quaternion._z, quaternion._w) });
|
|
|
+ // player.blackToPano({ pano: player.model.panos.get(panoId), quaternion: new THREE.Quaternion(quaternion._x, quaternion._y, quaternion._z, quaternion._w) });
|
|
|
}
|
|
|
},
|
|
|
},
|
