cdfg_h5/src/components/Controls/Panel/Guide.vue

<template>
  <div v-show="player.showWidgets" class="root-panel">
    <div class="guide-panel" >
      <div class="g-con">
        
        <div class="swiper-container" id="sw-guide">
          <ul class="swiper-wrapper"  v-if="tours.length > 1">
            <li
              class="swiper-slide"
              :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 }"
              @click="changeFrame(1, 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>
            </li>
          </ul>
          <ul class="swiper-wrapper" v-else>
            <li
              class="swiper-slide"
              :style="`background-image:url(${common.changeUrl(i.enter.cover)});`"
              :class="{ active: isPlay && frameId == index }"
              @click="changeFrame(2, index)"
              v-for="(i, index) in tours[0].list"
              :key="index"
            >
              <div>{{ i.name }}</div>

              <span v-if="frameId == index && progressNum > 0" class="bar" :style="{ '--w': progressNum + '%' }"></span>
            </li>
          </ul>
        </div>
        <div class="back" @click.stop="playTour">
          <ui-icon type="back"></ui-icon>
          <div>返回</div>
        </div>
      </div>
    </div>
  </div>
</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";
let timer = null

const store = useStore();
const musicPlayer = useMusicPlayer();
const flying = computed(() => store.getters['flying'])
const isSelect = ref(false)

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 partId = computed(() => store.getters["tour/partId"]);
const frameId = computed(() => store.getters["tour/frameId"]);

const playTour = async () => {
  let player = await getApp().TourManager.player;
  if (isPlay.value) {
    store.commit("tour/setData", { isPlay: true });
    player.pause();
  } else {
    store.commit("tour/setData", { isPlay: true });
    player.play(partId.value);
  }
};

const progressNum = ref(0);

const metadata = computed(() => store.getters["scene/metadata"]);

const controls = computed(() => metadata.value.controls);

const player = computed(() => store.getters["player"]);

const tours = computed(() => store.getters["tour/tours"]);

const menulist = ref([
  {
    icon: "customer_service",
    name: "客服",
  },
  {
    icon: "guided_shopping",
    name: "導購",
  },
  {
    icon: "shopping",
    name: "購物",
  },
]);

const categorylist = ref([
  {
    id: "all",
    name: "全部",
  },
  {
    id: "all",
    name: "香化",
  },
  {
    id: "all",
    name: "香化",
  },
  {
    id: "all",
    name: "香化",
  },
  {
    id: "all",
    name: "香化",
  },
  {
    id: "all",
    name: "全部",
  },
  {
    id: "all",
    name: "全部",
  },
]);

const brandlist = ref([]);

const brandScroll = () => {
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      new Swiper("#sw-guide", {
        freeMode: true,
        slidesPerView: "auto",
        spaceBetween: 6,
        on: {
          touchMove(swiper, e) {
            e.stopPropagation();
            e.preventDefault();
          },
        },
      });
    }, 100);
  });
};

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()
    }
}
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 = Math.max(tours.value[data.partId].list.length-1,1);
        currProgress = 0;
      } else {
        console.log(currFrames);
        currProgress += data.progress / currFrames;
        if (currProgress >= 100) {
          currProgress = 100;
        }

        console.log(currProgress);

        progressNum.value = currProgress;
      }
    }

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

  // nextTick(() => {
  //     editorMain.value = document.querySelector('.ui-editor-main')
  // })
};

onMounted(() => {
  useApp().then(async (sdk) => {
    hanlderTour();
    brandScroll();
  });
  nextTick(() => {
        let player = document.querySelector('.player[name="main"]')
        player.addEventListener('touchstart', onClickHandler)
    })
});
</script>

<style lang="scss" scoped>
.root-panel {
  position: absolute;
  bottom: 46px;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  background: rgba(0,0,0,0.3000);
  border: 1px solid rgba(255,255,255,0.2000);
  .guide-panel {
    width: 100%;
    position: relative;
    .g-con {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 6px 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      .back {
        text-align: center;
        width: 100%;
        font-size: 0;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: solid 1px rgba(255,255,255,0.2000);
        height: 48px;

        > div {
          font-size: 14px;
          margin-left: 10px;
        }
      }
      #sw-guide {
        width: 100%;
        flex: auto;
        overflow: hidden;
        padding-right: 2px;
        position: relative;
        padding-bottom: 6px;
        > ul {
          > li {
            border-radius: 2px;
            position: relative;
            font-size: 0;
            width: 154px;
            height: 82px;
            overflow: hidden;
            background-size: cover;
            > img {
              width: 100%;
            }
            > div {
              width: 100%;
              position: absolute;
              font-size: 12px;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              text-align: center;
              padding: 0 4px;
              box-sizing: border-box;
              word-break: break-all;
            }
            &.active {
              &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: "";
                display: inline-block;
                background: rgba(24, 24, 24, 0.5);
              }
              color: var(--editor-main-color);

              .bar {
                display: inline-block;
                width: 70%;
                height: 2px;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 2px;
                position: absolute;
                z-index: 9;
                bottom: 10%;
                left: 50%;
                transform: translateX(-50%);
                &::after {
                  content: "";
                  width: var(--w);
                  background: var(--editor-main-color);
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>