ZhongMianShowMacao/src/components/Controls/Control.Mobile.vue

<template>
  <FloorSwitch />
  <transition mode="out-in">
    <component class="limitwidth" :is="panelPage"></component>
  </transition>
</template>

<script setup>
import { useStore } from 'vuex';
import { onMounted, watch, computed, ref, shallowRef, nextTick } from 'vue';
import { useApp, getApp } from '@/app';
import FloorSwitch from './FloorSwitch';

import vMain from './Panel/Main';
import Guide from './Panel/Guide';

import guideShop from '../RTC/index';

import { Scrollbar, Dialog } from '@/global_components/';
import common from '@/utils/common';
import { useMusicPlayer } from '@/utils/sound';

const store = useStore();

const musicPlayer = useMusicPlayer();
const metadata = computed(() => store.getters['scene/metadata']);
const flying = computed(() => store.getters['flying']);
const controls = computed(() => {
  return metadata.value.controls;
});
const player = computed(() => store.getters['player']);
const mode = computed(() => store.getters['mode']);

let timer = null;

const panelPage = computed(() => {
  // let status = store.getters["tour/isPlay"] ? Guide :  vMain;
  let status = store.getters['tour/isHome'] ? vMain : Guide;
  return store.getters['shoppingguide'] ? guideShop : status;
});

const modeTips = ref('');
const isCollapse = ref(false);
const progressNum = ref(0);
const isInit = ref(false);
const tours = computed(() => store.getters['tour/tours']);

const isSelect = ref(false);
const labelTimer = ref(null);
const showTours = computed(() => store.getters['tour/showTours']);
const partId = computed(() => {
  let id = store.getters['tour/partId'];
  return id;
});

const frameId = computed(() => {
  let id = store.getters['tour/frameId'];
  return id;
});
const isPlay = computed(() => {
  let status = store.getters['tour/isPlay'];
  let map = document.querySelector('.kankan-app div[xui_min_map]');
  if (map) {
    if (status) {
      map.classList.add('disabled');
    } else {
      map.classList.remove('disabled');
    }
  }
  return status;
});
const onModeSwitch = (mode) => {
  if (labelTimer.value) {
    modeTips.value = '';
    clearTimeout(labelTimer.value);
  }
  modeTips.value = mode;
  labelTimer.value = setTimeout(() => {
    modeTips.value = '';
  }, 2000);
  console.log(mode);
  // flyToNewMode(mode)
  store.commit('setMode', mode);
};

const onCollapse = () => {
  if (player.value.showToolbar == false) {
    isCollapse.value = false;
    let show = !player.value.showToolbar;
    store.commit('SetPlayerOptions', {
      showMore: false,
      showMap: show == false,
      showToolbar: show,
      showDescription: false,
    });
  } else {
    isCollapse.value = !isCollapse.value;
    store.commit('tour/setData', { showTours: false });
  }
};

const hanlderTourPartPlay = (time) => {
  if (!timer) {
    timer = KanKan.Animate.transitions.start((progress) => {
      progressNum.value = progress * 100;
    }, time);
  }
};
const cancelTimer = () => {
  if (timer) {
    KanKan.Animate.transitions.cancel(timer);
    timer = null;
  }
};

const hanlderTour = async () => {
  let player = await getApp().TourManager.player;
  // player.on("play", (data) => {
  //   musicPlayer.pause(true);
  //   // if (tours.value.length > 1) {
  //   //     let time = getPartTime(data.partId)
  //   //     hanlderTourPartPlay(time)
  //   // }
  // });
  // player.on("pause", (tours) => {
  //   console.log("pause", player);
  //   musicPlayer.resume();

  //   progressNum.value = 0;
  //   cancelTimer();
  //   store.commit("tour/setData", { isPlay: false });
  // });
  // player.on("end", (tours) => {
  //   musicPlayer.resume();
  //   progressNum.value = 100;
  //   store.commit("tour/setData", { isPlay: false });
  //   cancelTimer();
  // });
  let currPartId = null;
  let currProgress = 0;
  let currFrames = 0;
  //   player.on("progress", (data) => {
  //     if (tours.value.length == 1) {
  //       progressNum.value = data.progress * 100;
  //     } else {
  //       // let time = getPartTime(data.partId)

  //       // hanlderTourPartPlay(time)

  //       if (currPartId != data.partId) {
  //         currPartId = data.partId;
  //         currFrames = tours.value[data.partId].list.length;
  //         currProgress = 0;
  //       } else {
  //         currProgress += data.progress / currFrames;
  //         if (currProgress >= 100) {
  //           currProgress = 100;
  //         }

  //         progressNum.value = currProgress;
  //       }
  //     }

  //     store.commit("tour/setData", { partId: data.partId, frameId: data.frameId, isPlay: true });
  //   });

  //   // nextTick(() => {
  //   //     editorMain.value = document.querySelector('.ui-editor-main')
  //   // })
};
const getPartTime = (partId) => {
  cancelTimer();
  let time = 0;
  // for (let i = 0; i < tours.value[partId].list.length - 1; i++) {
  //     time += tours.value[partId].list[i].time - 0
  // }
  // if (tours.value[partId].list[tours.value[partId].list.length - 1]._end) {
  //     if (tours.value[partId].list.length > 2) {
  //         time += (tours.value[partId].list.length - 1) * 1000
  //     }
  // } else {
  //     time += (tours.value[partId].list.length - 1) * 1000
  // }
  for (let i = 0; i < tours.value[partId].list.length; i++) {
    if (!tours.value[partId].list[i]._end) {
      time += tours.value[partId].list[i].time - 0;
      if (!tours.value[partId].list[i]._notrans) {
        time += 1000;
      }
    }
  }

  return time;
};

const openTours = () => {
  // showTours.value = !showTours.value

  store.commit('tour/setData', { showTours: !showTours.value });
};
const changeFrame = async (type, id) => {
  if (flying.value || isSelect.value) {
    return;
  }
  progressNum.value = 0;
  // recorder.selectFrame(id)
  let player = await getApp().TourManager.player;
  // player.selectFrame(id)
  isSelect.value = true;
  if (type == 1) {
    player.selectPart(id);
    let f_id = 0;
    if (tours.value[id].frameId) {
      f_id = tours.value[id].frameId;
    }
    player.selectFrame(f_id).then(() => {
      isSelect.value = false;
    });
    store.commit('tour/setData', {
      frameId: f_id,
      partId: id,
    });
  } else {
    player.selectFrame(id).then(() => {
      isSelect.value = false;
    });
    store.commit('tour/setData', {
      frameId: id,
    });
  }
};
const onClickHandler = async () => {
  if (isPlay.value) {
    let player = await getApp().TourManager.player;
    // player.pause();
    musicPlayer.resume();
  }
};
onMounted(() => {
  useApp().then(async (sdk) => {
    // hanlderTour();
  });

  nextTick(() => {
    let player = document.querySelector('.player[name="main"]');
    player.addEventListener('touchstart', onClickHandler);
  });
});
</script>

<style lang="scss" scoped>
.disable {
  opacity: 1;
}

.limitwidth {
  max-width: 500px;
  margin: 0 auto;
}

.switch {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  width: 1rem;
  height: 100%;
  align-items: center;
  i {
    margin-left: 0.2rem;
    font-size: 0.28rem;
  }
}
.guide {
  display: flex;
  height: 100%;
  width: calc(100vw - 2rem);
  flex-shrink: 0;
  &.flex {
    width: auto;
  }
  > div {
    height: 100%;
    width: 100%;
    &.play {
      display: none;
    }
    &.play {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 0.8rem;
      margin: 0 0.3rem;
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -0.3rem;
        width: 1px;
        height: 35%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.6);
        box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.2);
      }
    }

    &.rooms {
      flex: 1;
      width: 100%;
      overflow: hidden;
      padding: 4px 0;
      margin-left: 0.3rem;
    }
  }
}

@media (orientation: landscape) {
  .toolbar {
    padding-left: 0.5rem;
    bottom: 0.5rem;
    height: 0.8rem;
    font-size: 0.25rem;
    i {
      font-size: 0.25rem;
    }
  }
  .guide {
    width: calc(100vw - 4rem);
  }
  .ctrls {
    > div {
      height: 0.6rem;
      &.play {
        padding: 0.3rem 0;
        b,
        span {
          height: 0.8rem;
        }
      }
      &.rooms {
        left: 1rem;
        right: 1rem;
        bottom: 1.6rem;
        height: 0.8rem;
        transform-origin: 1.2rem 100%;
        &::after {
          left: 1.12rem;
        }
      }
    }
  }
  .switch {
    i {
      font-size: 0.2rem;
    }
  }
}
</style>