feat: 保存

src/components/collectBox.vue

@@ -80,7 +80,7 @@ const handleDetail = () => {
     margin: 15px;
     padding-left: 1.5625rem;
     position: relative;
-    line-height: calc(var(--collect-box-title-font-size) * 2);
+    line-height: calc(var(--collect-box-title-font-size) * 2 - 5px);
     text-overflow: ellipsis;
     word-break: break-all;
     max-height: calc(var(--collect-box-title-font-size) * 3 + 15px * 2);

src/components/showCase.vue

@@ -91,9 +91,6 @@
 import { ref, computed } from "vue";
 import { useSound } from "@vueuse/sound";
 
-import arrowLeft from "../assets/arrow-left.png";
-import arrowRight from "../assets/arrow-right.png";
-
 const iframeRef = ref();
 const type = ref("model");
 const defaultType = ref(["model", "video", "audio", "gallery"]);

src/store/collect.js

@@ -6,6 +6,8 @@ export const useCollectStore = defineStore({
   state: () => {
     return {
       lists: [],
+      entity: {},
+      files: [],
       pagination: {
         dictLevel: "",
         endTime: "",
@@ -31,5 +33,16 @@ export const useCollectStore = defineStore({
         this.pagination.page = page;
       }
     },
+    async getDetail(id) {
+      const { data, status } = await request.get(`show/goods/detail/${id}`);
+      if (data.code === 0) {
+        const { entity, file } = data.data;
+        this.entity = entity;
+        this.files = file;
+      } else {
+        this.entity = {};
+        this.files = [];
+      }
+    },
   },
 });

src/views/collect-detail.vue

@@ -5,30 +5,22 @@
       <div class="left">
         <hero-sub-title :type="3" />
         <div class="detail">
+          <!-- {{ entity }} -->
           <div class="detail-wrapper">
             <div class="back" @click="$router.go(-1)"></div>
 
             <div class="info">
               <!-- <div class="show-case"></div> -->
               <show-case />
-              <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
+              <h3 class="title">{{ entity.name }}</h3>
               <div class="label-list">
-                <span>时代：土地革命时期</span>
-                <span>来源：澄潭三星</span>
-                <span>质地：纸质</span>
-                <span>级别：二级</span>
+                <span>时代：{{ entity.dictAge }}</span>
+                <span>来源：{{ entity.dictSource }}</span>
+                <span>质地：{{ entity.dictTexture }}</span>
+                <span>级别：{{ entity.dictLevel }}</span>
               </div>
               <div class="text">
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                {{ entity.description }}
               </div>
             </div>
           </div>
@@ -40,16 +32,29 @@
 </template>
 
 <script setup>
-import { watchEffect, ref } from "vue";
+import { watchEffect, ref, computed } from "vue";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
 import showCase from "../components/showCase";
-
+import { useCollectStore } from "../store/collect";
+const collectStore = useCollectStore();
+const entity = computed(() => collectStore.entity);
+const files = computed(() => collectStore.files);
 const title = ref("collect-detail");
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    default: () => null,
+    required: true,
+  },
+});
 
 watchEffect(() => {
   document.title = title.value;
+  if (props.id) {
+    collectStore.getDetail(props.id);
+  }
 });
 </script>
 
@@ -70,7 +75,7 @@ watchEffect(() => {
   background-position: top center;
   background-repeat: no-repeat;
   overflow: hidden;
-  // height: ;
+
   .detail-wrapper {
     display: block;
     width: 100%;