feat: 补充文档

src/components/collectBox.vue

@@ -46,29 +46,31 @@ const handleDetail = () => {
 <style>
 .collect-box {
   --collect-box-remark-color: #9b9b9b;
-  --collect-box-background: url("/img/collect-box-bg.png");
-  --collect-box-title-font-size: 26px;
+  --collect-box-background: url("/img/collect-box_bg.png");
+  --collect-box-title-font-size: 22px;
   --collect-box-title-dot: url("/img/dot.png");
 }
 </style>
 <style lang="scss" scoped>
 .n-card.collect-box {
-  padding: 10px;
+  padding: 0.625rem;
   --n-padding-left: 0 !important;
   --n-padding-bottom: 0 !important;
   background: #f5f5f5;
-  box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
-  border-radius: 13px;
+  box-shadow: 0rem 0.125rem 0.25rem 0rem rgba(46, 25, 16, 0.16);
+  border-radius: 0.8125rem;
   padding: 0;
   cursor: pointer;
+
   .cover {
     background-color: #c1b2b2;
     overflow: hidden;
-    height: 14.1875rem;
+    height: 227px;
     width: 100%;
     display: inline-flex;
     justify-content: center;
     align-items: center;
+
     img {
       height: 90%;
       width: auto;
@@ -77,13 +79,13 @@ const handleDetail = () => {
   }
   .title {
     font-size: var(--collect-box-title-font-size);
-    margin: 15px;
-    padding-left: 1.5625rem;
+    margin: 0.9375rem;
+    padding-left: 25px;
     position: relative;
-    line-height: calc(var(--collect-box-title-font-size) * 2 - 5px);
+    line-height: calc(var(--collect-box-title-font-size) * 2);
     text-overflow: ellipsis;
     word-break: break-all;
-    max-height: calc(var(--collect-box-title-font-size) * 3 + 15px * 2);
+    max-height: calc(var(--collect-box-title-font-size) * 3 + 0.9375rem * 2);
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -94,9 +96,9 @@ const handleDetail = () => {
       left: 0;
       position: absolute;
       background-image: var(--collect-box-title-dot);
-      background-size: 20px 20px;
-      width: 20px;
-      height: 20px;
+      background-size: 1.25rem 1.25rem;
+      width: 1.25rem;
+      height: 1.25rem;
       background-repeat: no-repeat;
       background-position: center left;
     }
@@ -104,6 +106,13 @@ const handleDetail = () => {
   .info-line {
     display: flex;
     flex-direction: column;
+    min-height: 97px;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    background-image: var(--collect-box-background);
+    background-position: bottom right;
+    background-size: contain;
+    background-repeat: no-repeat;
     .time-line {
       width: 100%;
       flex: 1;
@@ -116,9 +125,9 @@ const handleDetail = () => {
         justify-content: center;
         align-items: center;
         img {
-          max-height: 16px;
+          max-height: 1rem;
           width: auto;
-          margin-left: 5px;
+          margin-left: 0.3125rem;
         }
       }
     }

src/components/showCase.vue

@@ -1,35 +1,24 @@
 <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="https://4dscene.4dage.com/new4dkk/v2/video/homeVideoNew.mp4"
-        autoplay
-        playsinline
-      ></video>
+      <video :src="video" 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"
-        />
+      <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 }">
+        <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" />
@@ -50,6 +39,7 @@
           <img src="@/assets/icon_model.png" /> 模型
         </n-button>
         <n-button
+          v-if="video"
           class="video btn"
           :class="{
             active: isVideo,
@@ -66,7 +56,10 @@
           round
           @click="handleSwitchType('gallery')"
         >
-          <img src="@/assets/icon_photo.png" />图片</n-button
+          <img src="@/assets/icon_photo.png" />图片
+          <span v-if="gallery.length > 0">{{
+            `${currentSlideIndex}/${gallery.length}`
+          }}</span></n-button
         >
       </n-space>
       <div class="actions">
@@ -75,12 +68,9 @@
           <img src="@/assets/zoom-out.png" />
           <img src="@/assets/reload.png" @click="reloadIframe" />
         </div>
-        <div v-if="isGallery">
-          <img src="@/assets/audio-muted.png" @click="stop" />
-          <img
-            src="@/assets/audio-unmuted.png"
-            @click="!isPlaying ? play() : () => {}"
-          />
+        <div v-if="isGallery && audio">
+          <img src="@/assets/audio-muted.png" @click="audioPause" />
+          <img src="@/assets/audio-unmuted.png" @click="audioPlay" />
         </div>
       </div>
     </div>
@@ -88,34 +78,21 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-import { useSound } from "@vueuse/sound";
+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 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";
-  }
-};
+const domain = ref(import.meta.env.VITE_DOMAIN_URL);
+const audioSound = ref("");
+const currentSlideIndex = ref(1);
 
 defineOptions({
   name: "show-case",
@@ -134,12 +111,38 @@ const props = defineProps({
     type: String,
     default: () => "",
   },
-  photos: {
+  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 {
@@ -156,7 +159,7 @@ const reloadIframe = () => {
   --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-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");
@@ -250,8 +253,8 @@ const reloadIframe = () => {
         // min-width: 80px;
         // padding: 10px 40px;
         img {
-          height: 1.25rem;
-          margin-right: 0.5rem;
+          height: 1.0625rem;
+          margin-right: 0.3125rem;
           width: auto;
         }
         &.btn {

src/store/collect.js

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { request } from "../api";
+const domain = import.meta.env.VITE_DOMAIN_URL;
 
 export const useCollectStore = defineStore({
   id: "collect",
@@ -19,7 +20,52 @@ export const useCollectStore = defineStore({
       },
     };
   },
-  getters: {},
+  getters: {
+    model() {
+      const model = this.files.find((item) => item.type === "model");
+  
+      console.log("model", model);
+      if (model) {
+        // const url =  model.id;
+        return model.id;
+      } else {
+        return "";
+      }
+    },
+    video() {
+      const video = this.files.find((item) => item.type === "video");
+      console.log("video", video);
+      if (video) {
+        const url = domain + video.filePath;
+        return url;
+      } else {
+        return "";
+      }
+    },
+    audio() {
+      const audio = this.files.find((item) => item.type === "audio");
+      if (audio) {
+        const url = domain + audio.filePath;
+        return url;
+      } else {
+        return "";
+      }
+    },
+    gallery() {
+      const gallery = this.files
+        .filter((item) => item.type === "img")
+        .map((item) => {
+          const url = domain + item.filePath;
+          return url;
+        });
+      console.log("gallery", gallery);
+      if (gallery) {
+        return gallery;
+      } else {
+        return [];
+      }
+    },
+  },
   actions: {
     async fetch() {
       const { data, status } = await request.post("/show/goods/pageList", {

src/views/collect-detail.vue

@@ -5,13 +5,19 @@
       <div class="left">
         <hero-sub-title :type="3" />
         <div class="detail">
-          <!-- {{ entity }} -->
+      
           <div class="detail-wrapper">
             <div class="back" @click="$router.go(-1)"></div>
-
+            <!-- {{ files }}
+          {{ entity }} -->
             <div class="info">
               <!-- <div class="show-case"></div> -->
-              <show-case />
+              <show-case
+                :video="video"
+                :gallery="gallery"
+                :audio="audio"
+                :model="model"
+              />
               <h3 class="title">{{ entity.name }}</h3>
               <div class="label-list">
                 <span>时代：{{ entity.dictAge }}</span>
@@ -41,7 +47,10 @@ import { useCollectStore } from "../store/collect";
 const collectStore = useCollectStore();
 const entity = computed(() => collectStore.entity);
 const files = computed(() => collectStore.files);
-// const title = ref("collect-detail");
+const video = computed(() => collectStore.video);
+const gallery = computed(() => collectStore.gallery);
+const audio = computed(() => collectStore.audio);
+const model = computed(() => collectStore.model);
 const props = defineProps({
   id: {
     type: [String, Number],