|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div v-show="player.showWidgets" class="root-panel">
|
|
|
- <div class="guide-panel">
|
|
|
+ <div class="guide-panel" :class="{disable:disable}">
|
|
|
<div class="g-con">
|
|
|
<div class="swiper-container" id="sw-guide">
|
|
|
<!-- <ul class="swiper-wrapper" v-if="tours.length > 1"> -->
|
|
@@ -8,14 +8,22 @@
|
|
|
<li
|
|
|
@click.stop="changeItem('part', index)"
|
|
|
class="swiper-slide"
|
|
|
- :style="`background-image:url(${i.frameId ? common.changeUrl(i.list[i.frameId].enter.cover) : common.changeUrl(i.list[0].enter.cover)});`"
|
|
|
+ :style="`background-image:url(${
|
|
|
+ i.frameId
|
|
|
+ ? common.changeUrl(i.list[i.frameId].enter.cover)
|
|
|
+ : common.changeUrl(i.list[0].enter.cover)
|
|
|
+ });`"
|
|
|
:class="{ active: isPlay && partId == index }"
|
|
|
v-for="(i, index) in tours"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div>{{ i.name }}</div>
|
|
|
|
|
|
- <span v-if="partId == index && progressNum > 0" class="bar" :style="{ '--w': progressNum + '%' }"></span>
|
|
|
+ <span
|
|
|
+ v-if="partId == index && progressNum > 0"
|
|
|
+ class="bar"
|
|
|
+ :style="{ '--w': progressNum + '%' }"
|
|
|
+ ></span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<!-- <ul class="swiper-wrapper" v-else>
|
|
@@ -36,11 +44,11 @@
|
|
|
<div class="back">
|
|
|
<div @click.stop="back">
|
|
|
<ui-icon type="back"></ui-icon>
|
|
|
- <div>{{ $t('common.back') }}</div>
|
|
|
+ <div>{{ $t("common.back") }}</div>
|
|
|
</div>
|
|
|
<div @click.stop="playTour">
|
|
|
<ui-icon :type="isPlay ? 'pause' : 'preview'"></ui-icon>
|
|
|
- <div>{{ isPlay ? $t('common.pause') : $t('common.play') }}</div>
|
|
|
+ <div>{{ isPlay ? $t("common.pause") : $t("common.play") }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -49,41 +57,42 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { useStore } from 'vuex';
|
|
|
-import common from '@/utils/common';
|
|
|
-import { onMounted, watch, computed, ref, nextTick } from 'vue';
|
|
|
-import { useApp, getApp } from '@/app';
|
|
|
-import { useMusicPlayer } from '@/utils/sound';
|
|
|
+import { useStore } from "vuex";
|
|
|
+import common from "@/utils/common";
|
|
|
+import { onMounted, watch, computed, ref, nextTick } from "vue";
|
|
|
+import { useApp, getApp } from "@/app";
|
|
|
+import { useMusicPlayer } from "@/utils/sound";
|
|
|
|
|
|
-import { useI18n, getLocale } from '@/i18n';
|
|
|
-const { t } = useI18n({ useScope: 'global' });
|
|
|
+import { useI18n, getLocale } from "@/i18n";
|
|
|
+const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
let timer = null;
|
|
|
|
|
|
const store = useStore();
|
|
|
const musicPlayer = useMusicPlayer();
|
|
|
-const flying = computed(() => store.getters['flying']);
|
|
|
const isSelect = ref(false);
|
|
|
+const disable = ref(false);
|
|
|
|
|
|
const isPlay = computed(() => {
|
|
|
- let status = store.getters['tour/isPlay'];
|
|
|
- let map = document.querySelector('.kankan-app div[xui_min_map]');
|
|
|
+ let status = store.getters["tour/isPlay"];
|
|
|
+ let map = document.querySelector(".kankan-app div[xui_min_map]");
|
|
|
if (map) {
|
|
|
if (status) {
|
|
|
- map.classList.add('disabled');
|
|
|
+ map.classList.add("disabled");
|
|
|
} else {
|
|
|
- map.classList.remove('disabled');
|
|
|
+ map.classList.remove("disabled");
|
|
|
}
|
|
|
}
|
|
|
return status;
|
|
|
});
|
|
|
|
|
|
-const partId = computed(() => store.getters['tour/partId']);
|
|
|
-const frameId = computed(() => store.getters['tour/frameId']);
|
|
|
+const partId = computed(() => store.getters["tour/partId"]);
|
|
|
+const frameId = computed(() => store.getters["tour/frameId"]);
|
|
|
const changeItem = async (type, id) => {
|
|
|
+ disable.value = true;
|
|
|
let player = await getApp().TourManager.player;
|
|
|
- if (type == 'part') {
|
|
|
- store.commit('tour/setData', {
|
|
|
+ if (type == "part") {
|
|
|
+ store.commit("tour/setData", {
|
|
|
frameId: 0,
|
|
|
partId: id,
|
|
|
});
|
|
@@ -94,15 +103,18 @@ const changeItem = async (type, id) => {
|
|
|
if (!isPlay.value) {
|
|
|
return;
|
|
|
}
|
|
|
- store.commit('tour/setData', {
|
|
|
+ store.commit("tour/setData", {
|
|
|
isPlay: true,
|
|
|
});
|
|
|
player.play(id);
|
|
|
+ disable.value = false;
|
|
|
});
|
|
|
} else {
|
|
|
- player.selectFrame(id).then(() => {});
|
|
|
- store.commit('tour/setData', {
|
|
|
- frameId: id,
|
|
|
+ player.selectFrame(id).then(() => {
|
|
|
+ store.commit("tour/setData", {
|
|
|
+ frameId: id,
|
|
|
+ });
|
|
|
+ disable.value = false;
|
|
|
});
|
|
|
}
|
|
|
// mySwiper.slideTo(id);
|
|
@@ -115,10 +127,10 @@ const changeItem = async (type, id) => {
|
|
|
const back = async () => {
|
|
|
let player = await getApp().TourManager.player;
|
|
|
if (isPlay.value) {
|
|
|
- store.commit('tour/setData', { isPlay: false });
|
|
|
+ store.commit("tour/setData", { isPlay: false });
|
|
|
player.pause();
|
|
|
}
|
|
|
- store.commit('tour/setData', {
|
|
|
+ store.commit("tour/setData", {
|
|
|
partId: 0,
|
|
|
isHome: true,
|
|
|
});
|
|
@@ -127,23 +139,23 @@ const playTour = async () => {
|
|
|
progressNum.value = 0;
|
|
|
let player = await getApp().TourManager.player;
|
|
|
if (isPlay.value) {
|
|
|
- store.commit('tour/setData', { isPlay: false });
|
|
|
+ store.commit("tour/setData", { isPlay: false });
|
|
|
player.pause();
|
|
|
} else {
|
|
|
- store.commit('tour/setData', { isPlay: true });
|
|
|
+ store.commit("tour/setData", { isPlay: true });
|
|
|
player.play(partId.value);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const progressNum = ref(0);
|
|
|
|
|
|
-const metadata = computed(() => store.getters['scene/metadata']);
|
|
|
+const metadata = computed(() => store.getters["scene/metadata"]);
|
|
|
|
|
|
const controls = computed(() => metadata.value.controls);
|
|
|
|
|
|
-const player = computed(() => store.getters['player']);
|
|
|
+const player = computed(() => store.getters["player"]);
|
|
|
|
|
|
-const tours = computed(() => store.getters['tour/tours']);
|
|
|
+const tours = computed(() => store.getters["tour/tours"]);
|
|
|
|
|
|
const brandlist = ref([]);
|
|
|
let mySwiper = null;
|
|
@@ -151,9 +163,9 @@ const brandScroll = () => {
|
|
|
nextTick(() => {
|
|
|
let t = setTimeout(() => {
|
|
|
clearTimeout(t);
|
|
|
- mySwiper = new Swiper('#sw-guide', {
|
|
|
+ mySwiper = new Swiper("#sw-guide", {
|
|
|
freeMode: true,
|
|
|
- slidesPerView: 'auto',
|
|
|
+ slidesPerView: "auto",
|
|
|
spaceBetween: 6,
|
|
|
|
|
|
on: {
|
|
@@ -168,7 +180,7 @@ const brandScroll = () => {
|
|
|
};
|
|
|
|
|
|
const onClickHandler = async () => {
|
|
|
- console.log('onClickHandler');
|
|
|
+ console.log("onClickHandler");
|
|
|
if (isPlay.value) {
|
|
|
let player = await getApp().TourManager.player;
|
|
|
player.pause();
|
|
@@ -184,7 +196,7 @@ const cancelTimer = () => {
|
|
|
|
|
|
const hanlderTour = async () => {
|
|
|
let player = await getApp().TourManager.player;
|
|
|
- player.on('play', (data) => {
|
|
|
+ player.on("play", (data) => {
|
|
|
progressNum.value = 0;
|
|
|
musicPlayer.pause(true);
|
|
|
// if (tours.value.length > 1) {
|
|
@@ -192,18 +204,18 @@ const hanlderTour = async () => {
|
|
|
// hanlderTourPartPlay(time)
|
|
|
// }
|
|
|
});
|
|
|
- player.on('pause', (tours) => {
|
|
|
+ player.on("pause", (tours) => {
|
|
|
// console.log('pause', player);
|
|
|
musicPlayer.resume();
|
|
|
|
|
|
progressNum.value = 0;
|
|
|
cancelTimer();
|
|
|
- store.commit('tour/setData', { isPlay: false });
|
|
|
+ store.commit("tour/setData", { isPlay: false });
|
|
|
});
|
|
|
- player.on('end', (tours) => {
|
|
|
+ player.on("end", (tours) => {
|
|
|
musicPlayer.resume();
|
|
|
progressNum.value = 100;
|
|
|
- store.commit('tour/setData', { isPlay: false });
|
|
|
+ store.commit("tour/setData", { isPlay: false });
|
|
|
cancelTimer();
|
|
|
});
|
|
|
let currPartId = null;
|
|
@@ -235,7 +247,7 @@ const hanlderTour = async () => {
|
|
|
// store.commit('tour/setData', { partId: data.partId, frameId: data.frameId, isPlay: true });
|
|
|
// });
|
|
|
|
|
|
- player.on('progress', (data) => {
|
|
|
+ player.on("progress", (data) => {
|
|
|
// if (tours.value.length == 1) {
|
|
|
// progressNum.value = data.progress * 100
|
|
|
// } else {
|
|
@@ -258,7 +270,11 @@ const hanlderTour = async () => {
|
|
|
}
|
|
|
// }
|
|
|
|
|
|
- store.commit('tour/setData', { partId: data.partId, frameId: data.frameId, isPlay: true });
|
|
|
+ store.commit("tour/setData", {
|
|
|
+ partId: data.partId,
|
|
|
+ frameId: data.frameId,
|
|
|
+ isPlay: true,
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
// nextTick(() => {
|
|
@@ -272,8 +288,8 @@ onMounted(() => {
|
|
|
});
|
|
|
nextTick(() => {
|
|
|
let player = document.querySelector('.player[name="main"]');
|
|
|
- player.addEventListener('touchstart', onClickHandler);
|
|
|
- player.addEventListener('click', onClickHandler);
|
|
|
+ player.addEventListener("touchstart", onClickHandler);
|
|
|
+ player.addEventListener("click", onClickHandler);
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
@@ -291,6 +307,10 @@ onMounted(() => {
|
|
|
.guide-panel {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
+ &.disable {
|
|
|
+ opacity: 0.8;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
.g-con {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 4px;
|
|
@@ -360,7 +380,7 @@ onMounted(() => {
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
display: inline-block;
|
|
|
background: rgba(24, 24, 24, 0.5);
|
|
|
}
|
|
@@ -378,7 +398,7 @@ onMounted(() => {
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
&::after {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
width: var(--w);
|
|
|
background: var(--editor-main-color);
|
|
|
height: 100%;
|