QiuShou-kiosk/src/components/showCase.vue

<template>
  <div class="show-case-container" ref="containerRef">
    <audio v-if="audio" ref="audioSound" :src="audio"></audio>
    <div class="show-case" v-if="isModel">
      <iframe ref="iframeRef" frameborder="0" :src="iframeURL"></iframe>
    </div>
    <div class="show-case" v-if="isVideo">
      <video
        ref="videoRef"
        :src="video"
        autoplay
        playsinline
        @ended="isVideoPlaying = false"
        @playing="isVideoPlaying = true"
        @pause="isVideoPlaying = false"
      ></video>
      <div class="video-icon">
        <svg
          class="play-icon icon"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 1024 1024"
          @click="videoRef.play()"
          v-if="!isVideoPlaying"
        >
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm144.1 454.9L437.7 677.8a8.02 8.02 0 0 1-12.7-6.5V353.7a8 8 0 0 1 12.7-6.5L656.1 506a7.9 7.9 0 0 1 0 12.9z"
            fill="currentColor"
          ></path>
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 28 28"
          v-if="isVideoPlaying"
          class="stop-icon icon"
          @click="videoRef.pause()"
        >
          <g fill="none">
            <path
              d="M14 26c6.627 0 12-5.373 12-12S20.627 2 14 2S2 7.373 2 14s5.373 12 12 12zM10.5 9h7a1.5 1.5 0 0 1 1.5 1.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 9 17.5v-7A1.5 1.5 0 0 1 10.5 9z"
              fill="currentColor"
            ></path>
          </g>
        </svg>
      </div>
    </div>
    <div class="show-case" v-if="isGallery">
      <n-carousel
        :draggable="gallery.length > 1"
        :show-dots="false"
        :show-arrow="gallery.length > 1"
        @update:current-index="handleSlideUpdate"
      >
        <template v-for="img in gallery">
          <img class="carousel-img" :src="img" />
        </template>

        <template #arrow="{ prev, next }" v-if="gallery.length > 1">
          <div class="custom-arrow">
            <img class="btn-img" src="@/assets/arrow-left.png" @click="prev" />
            <img class="btn-img" src="@/assets/arrow-right.png" @click="next" />
          </div>
        </template>
      </n-carousel>
    </div>
    <div class="tools">
      <n-space class="group-type" :size="25">
        <n-button
          class="model btn"
          :class="{
            active: isModel,
          }"
          round
          @click="handleSwitchType('model')"
        >
          <img src="@/assets/icon_model.png" /> 模型
        </n-button>
        <n-button
          v-if="video"
          class="video btn"
          :class="{
            active: isVideo,
          }"
          round
          @click="handleSwitchType('video')"
          ><img src="@/assets/icon_video.png" />视频</n-button
        >
        <n-button
          class="gallery btn"
          :class="{
            active: isGallery,
          }"
          round
          @click="handleSwitchType('gallery')"
        >
          <img src="@/assets/icon_photo.png" />图片
          <span v-if="gallery.length > 0">{{
            `${currentSlideIndex}/${gallery.length}`
          }}</span></n-button
        >
      </n-space>
      <div class="actions">
        <div v-if="isModel">
          <img src="@/assets/zoom-in.png" @click="handleFullScreen" />
          <img src="@/assets/zoom-out.png" @click="handleExitFullScreen" />
          <img src="@/assets/reload.png" @click="reloadIframe" />
        </div>
        <div v-if="isGallery && audio">
          <img src="@/assets/audio-muted.png" @click="audioPause" />
          <img src="@/assets/audio-unmuted.png" @click="audioPlay" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, unref } from "vue";
import { useFullscreen } from "@vueuse/core";

const iframeRef = ref();
const containerRef = ref();
const type = ref("model");
const defaultType = ref(["model", "video", "audio", "gallery"]);
const videoRef = ref();

// const iframeURL = ref("https://www.4dmodel.com/SuperTwo/index.html?m=TEST");
const iframeURL = ref(
  "https://model3d.4dage.com/model/showModel.html?m=d558c919-a001-4aef-a719-18af4ed2bd82"
);

const isModel = computed(() => type.value === "model");
const isVideo = computed(() => type.value === "video");
// const isAudio = computed(() => type.value === "audio");
const isGallery = computed(() => type.value === "gallery");
const domain = ref(import.meta.env.VITE_DOMAIN_URL);
const audioSound = ref("");
const currentSlideIndex = ref(1);
const { isFullscreen, enter, exit, toggle } = useFullscreen(containerRef);

const isVideoPlaying = ref(false);

defineOptions({
  name: "show-case",
});

const props = defineProps({
  model: {
    type: String,
    default: () => "",
  },
  video: {
    type: String,
    default: () => "",
  },
  audio: {
    type: String,
    default: () => "",
  },
  gallery: {
    type: Array,
    default: () => [""],
  },
});

const handleSwitchType = (value) => {
  if (defaultType.value.includes(value)) {
    type.value = value;
    if (value === "gallery") {
      audioPlay();
    } else {
      audioPause();
    }
  } else {
    type.value = "model";
  }
};

const audioPlay = () => {
  audioSound.value && audioSound.value.play();
};

const audioPause = () => {
  audioSound.value && audioSound.value.pause();
};

const handleSlideUpdate = (index) => {
  if (unref(props.gallery).length > 1) {
    currentSlideIndex.value = index + 1;
  }
};

const reloadIframe = () => {
  if (iframeRef.value) {
    try {
      iframeRef.value.src += "";
    } catch (error) {}
  }
};
const handleFullScreen = () => {
  enter();
};
const handleExitFullScreen = () => {
  exit();
};
</script>

<style>
.show-case-container {
  --show-case-width: 66.8125rem;
  --show-case-height: 34.1875rem;
  --show-case-border-radius: 0.625rem;
  --show-case-background: #c1b2b2;
  --show-case-tools-padding: 1rem;
  --show-case-btn-font-size: 16px;
  --show-case-btn-model-bg: url("/img/show_case_m_bg.png");
  --show-case-btn-model-bg-active: url("/img/show_case_m_bg_active.png");
  --show-case-btn-video-bg: url("/img/show_case_v_bg.png");
  --show-case-btn-video-bg-active: url("/img/show_case_v_bg_active.png");
  --show-case-btn-gallery-bg: url("/img/show_case_p_bg.png");
  --show-case-btn-gallery-bg-active: url("/img/show_case_p_bg_active.png");
}
</style>

<style lang="scss" scoped>
.show-case-container {
  width: var(--show-case-width);
  height: var(--show-case-height);
  position: relative;
  background-color: var(--show-case-background);
  border-radius: var(--show-case-border-radius);
  .show-case {
    width: 100%;
    height: 100%;
    iframe,
    video,
    :deep(.n-carousel) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    :deep(.n-carousel) {
      .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .custom-arrow {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        // background: red;
        z-index: 111;
        pointer-events: none;
        display: inline-flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        .btn-img {
          width: 3.8125rem;
          height: 3.8125rem;
          pointer-events: all;
          cursor: pointer;
          margin: 0 1.25rem;
        }
      }
    }
    .video-icon {
      width: 100%;
      height: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      &:hover {
        opacity: 1;
      }
      top: 0;
      left: 0;
      svg {
        width: 80px;
        height: 80px;
        color: #666;
        opacity: 0.9;
        pointer-events: auto;
        cursor: pointer;
      }
    }
  }

  .tools {
    display: inline-flex;
    position: absolute;
    height: 2.25rem;
    bottom: 1.25rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - var(--show-case-tools-padding) * 2);
    padding: 0 var(--show-case-tools-padding);
    pointer-events: none;
    .actions {
      display: inline-flex;
      align-items: center;
      img {
        height: 2.5rem;
        width: auto;
        margin: 0 0.3125rem;
        cursor: pointer;
        pointer-events: all;
      }
    }
    .group-type {
      :deep(.n-button) {
        --n-border: none !important;
        --n-border-hover: none !important;
        --n-border-pressed: none !important;
        --n-border-focus: none !important;
        --n-ripple-color: none !important;
        transition: none;
        background-color: transparent;
        color: white;
        pointer-events: all;
        font-size: var(--show-case-btn-font-size);
        // min-width: 80px;
        // padding: 10px 40px;
        img {
          height: 1.0625rem;
          margin-right: 0.3125rem;
          width: auto;
        }
        &.btn {
          background-size: contain;
          background-repeat: no-repeat;
          background-position: top center;
          border: none;
        }
        &.model {
          background-image: var(--show-case-btn-model-bg);
        }
        &.video {
          background-image: var(--show-case-btn-video-bg);
        }
        &.gallery {
          background-image: var(--show-case-btn-gallery-bg);
        }
        &.active {
          &.model {
            background-image: var(--show-case-btn-model-bg-active);
          }
          &.video {
            background-image: var(--show-case-btn-video-bg-active);
          }
          &.gallery {
            background-image: var(--show-case-btn-gallery-bg-active);
          }
        }
      }
    }
  }
}
</style>