QiuShou-kiosk/src/components/showCase.vue

<template>
  <div class="show-case-container">
    <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 :src="video" autoplay playsinline></video>
    </div>
    <div class="show-case" v-if="isGallery">
      <n-carousel
        draggable
        :show-dots="false"
        show-arrow
        @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" />
          <img src="@/assets/zoom-out.png" />
          <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, watch } from "vue";

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

const iframeURL = ref("https://www.4dmodel.com/SuperTwo/index.html?m=TEST");

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);

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) {}
  }
};
</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;
        }
      }
    }
  }

  .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>