qiushou-kiosk/src/components/showCase.vue

<template>
  <div class="show-case-container">
    <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="https://4dscene.4dage.com/new4dkk/v2/video/homeVideoNew.mp4"
        autoplay
        playsinline
      ></video>
    </div>
    <div class="show-case" v-if="isGallery">
      <n-carousel draggable :show-dots="false" show-arrow>
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
        />
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
        />
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
        />
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
        />

        <template #arrow="{ prev, next }">
          <div class="custom-arrow">
            <img class="btn-img" src="/img/arrow-left.png" @click="prev" />
            <img class="btn-img" src="/img/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="/img/icon_model.png" /> 模型
        </n-button>
        <n-button
          class="video btn"
          :class="{
            active: isVideo,
          }"
          round
          @click="handleSwitchType('video')"
          ><img src="/img/icon_video.png" />视频</n-button
        >
        <n-button
          class="gallery btn"
          :class="{
            active: isGallery,
          }"
          round
          @click="handleSwitchType('gallery')"
        >
          <img src="/img/icon_photo.png" />图片</n-button
        >
      </n-space>
      <div class="actions">
        <div v-if="isModel">
          <img src="/img/zoom-in.png" />
          <img src="/img/zoom-out.png" />
          <img src="/img/reload.png" @click="reloadIframe" />
        </div>
        <div v-if="isGallery">
          <img src="/img/audio-muted.png" @click="stop" />
          <img
            src="/img/audio-unmuted.png"
            @click="!isPlaying ? play() : () => {}"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useSound } from "@vueuse/sound";

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 { play, isPlaying, stop } = useSound(
  "//samplelib.com/lib/preview/mp3/sample-15s.mp3"
);

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

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

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

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: 1.125rem;
  --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) {
        background-color: #ababab;
        color: white;
        pointer-events: all;
        font-size: var(--show-case-btn-font-size);
        padding: 10px 40px;
        img {
          height: 1.25rem;
          margin-right: 0.5rem;
          width: auto;
        }
        &.btn {
          background-size: cover;
          background-repeat: no-repeat;
        }
        &.model {
          // background-image: var(--show-case-btn-model-bg);
        }
        &.active {
          background-color: var(--main-primary-color);
          border-color: var(--main-primary-color);
        }
      }
    }
  }
}
</style>