feat: 保存

src/components/exhibitionBox.vue

@@ -6,10 +6,15 @@
       </div>
       <div class="info">
         <div class="title">{{ title }}</div>
-        <div class="content—box"><div v-html="content"></div></div>
+        <div class="content—box">
+          <!-- <div v-html="content"></div> -->
+          {{ pureText(content) }}
+        </div>
         <div class="label-box">
           <div class="label location" v-if="location">{{ location }}</div>
-          <div class="label type" v-if="typeLabel(type)">{{ typeLabel(type) }}</div>
+          <div class="label type" v-if="typeLabel(type)">
+            {{ typeLabel(type) }}
+          </div>
           <div v-if="isHasVR" class="vr_button"></div>
         </div>
       </div>
@@ -73,6 +78,12 @@ const handleTodetail = () => {
     console.log("111", props.id);
   }
 };
+const pureText = computed(() => (content) => {
+  var temp = document.createElement("div");
+  temp.innerHTML = content;
+  const text = temp.textContent || temp.innerText || "";
+  return text.length > 160 ? text.substring(0, 160) + "..." : text;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -121,7 +132,7 @@ const handleTodetail = () => {
       .content—box {
         font-size: 1rem;
         color: #6e6e6e;
-        height: 100px;
+        height: 80px;
         overflow: hidden;
       }
       .label-box {
@@ -133,7 +144,7 @@ const handleTodetail = () => {
         color: #6e6e6e;
         font-size: 16px;
         .label {
-          background-image: url("img/dot.png");
+          background-image: url("/img/dot.png");
           background-size: 15px 15px;
           background-repeat: no-repeat;
           padding-left: 22px;

src/components/infoBox.vue

@@ -68,6 +68,8 @@ defineProps({
     height: 17.75rem;
     img {
       object-fit: cover;
+      height: 100%;
+      width: 100%;
     }
   }
   .title {

src/store/collect.js

@@ -28,7 +28,7 @@ export const useCollectStore = defineStore({
       if (data.code === 0) {
         const { records, total, current, page } = data.data;
         this.lists = records;
-        this.pagination.total = total;
+        this.total = total;
         this.pagination.current = current;
         this.pagination.page = page;
       }

src/store/info.js

@@ -41,7 +41,7 @@ export const useInfoStore = defineStore({
       });
       if (data.code === 0) {
         const { records, total, current, page } = data.data;
-        this.exhibition = records;
+        this.exhibitions = records;
         this.pagination.total = total;
         this.pagination.current = current;
         this.pagination.page = page;

src/views/collect-detail.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { watchEffect, ref, computed, watch, unref } from "vue";
+import { computed, unref, onMounted } from "vue";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
@@ -50,7 +50,7 @@ const props = defineProps({
   },
 });
 
-watchEffect(() => {
+onMounted(() => {
   if (props.id) {
     collectStore.getDetail(props.id);
   }

src/views/exhibition-detail.vue

@@ -16,7 +16,7 @@
 
           <div class="info">
             <div class="show-case"></div>
-            {{ detail }}
+            <!-- {{ detail }} -->
             <h3 class="title">{{ detail.name }}</h3>
             <div class="label-container">
               <div class="label-list">
@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-import { watchEffect, computed } from "vue";
+import { watchEffect, computed, unref, onMounted } from "vue";
 import heroSubTitle from "../components/heroSubTitle";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
@@ -47,6 +47,11 @@ import { useExhibitionStore } from "../store/exhibition";
 const exhibitionStore = useExhibitionStore();
 const router = useRouter();
 const detail = computed(() => exhibitionStore.detail);
+// const domain = ref(import.meta.env.VITE_DOMAIN_URL);
+
+const topBannerUrl = computed(
+  () =>detail.value.thumb? `url(${import.meta.env.VITE_DOMAIN_URL + detail.value.thumb})`:''
+);
 
 const typeLabel = computed(() => (type) => {
   switch (type) {
@@ -70,18 +75,22 @@ const props = defineProps({
     required: true,
   },
 });
-
-watchEffect(() => {
+onMounted(() => {
   if (props.id) {
     exhibitionStore.getDetail(props.id);
-    document.title = detail.name;
+  }
+});
+
+watchEffect(() => {
+  if (unref(detail)) {
+    document.title = unref(detail).name;
   }
 });
 </script>
 
 <style>
 .main {
-  --main-ex-top-banner: url("/img/ex_banner.png");
+  --main-ex-top-banner: v-bind(topBannerUrl);
 }
 </style>
 
@@ -98,7 +107,7 @@ watchEffect(() => {
   width: 100%;
   background-image: var(--main-ex-top-banner);
   height: 29.375rem;
-  background-position: center center;
+  background-position: top center;
   background-size: cover;
   position: relative;
   .go-back {

src/views/feedback.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <sub-header />
       <div class="left">
-        <hero-sub-title />
+        <hero-sub-title :type="5" />
         <div class="detail">
           <div class="back" @click="$router.go(-1)"></div>
 
@@ -66,7 +66,7 @@
 </template>
 
 <script setup>
-import { watchEffect, ref } from "vue";
+import { ref } from "vue";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
@@ -81,14 +81,11 @@ const feedBackStore = useFeedBackStore();
 const imageCode = ref(
   `${import.meta.env.VITE_API_URL}/show/getRandCode?t=` + Date.now()
 );
-const title = ref("detail");
+
 const feedBackContent = ref("");
 const nickName = ref("");
 const contact = ref("");
 const verifyCode = ref("");
-watchEffect(() => {
-  document.title = title.value;
-});
 
 const submit = async () => {
   try {

src/views/info-detail.vue

@@ -5,29 +5,36 @@
       <div class="left">
         <hero-sub-title />
         <div class="detail">
-          <!-- {{ detail }} -->
           <div class="detail-wrapper">
+            <!-- {{ detail }} -->
             <div class="back" @click="$router.go(-1)"></div>
             <div class="info">
-              <div class="show-case"></div>
-              <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
-              <div class="label-list">
+              <div class="show-case" v-if="detail.video">
+                <video
+                  :src="domain + detail.video"
+                  playsinline
+                  controls
+                ></video>
+              </div>
+              <h3 class="title">{{ detail.name }}</h3>
+
+              <!-- <div class="label-list">
                 <span>时代：土地革命时期</span>
                 <span>来源：澄潭三星</span>
                 <span>质地：纸质</span>
                 <span>级别：二级</span>
+              </div> -->
+              <div class="time-container">
+                <div class="time">
+                  <span>{{ detail.publishDate }}</span>
+                  <span>{{ typeLabel(detail.type) }} </span>
+                </div>
               </div>
-              <div class="text">
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+
+              <div class="text" v-html="detail.richText"></div>
+
+              <div class="show-case" v-if="detail.thumb">
+                <img :src="domain + detail.thumb" />
               </div>
             </div>
           </div>
@@ -40,15 +47,27 @@
 
 <script setup>
 import { watchEffect, ref, onMounted, computed } from "vue";
-import { useFullscreen } from "@vueuse/core";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
 import { useInfoStore } from "../store/info";
-const title = ref("detail");
+
 const infoStore = useInfoStore();
 const detail = computed(() => infoStore.detail);
+const domain = ref(import.meta.env.VITE_DOMAIN_URL);
 
+const typeLabel = computed(() => (type) => {
+  switch (type) {
+    case "exhibition":
+      return "展览";
+    case "news":
+      return "新闻";
+    case "activity":
+      return "活动";
+    case "notice":
+      return "通知";
+  }
+});
 const props = defineProps({
   id: {
     type: [String, Number],
@@ -56,11 +75,13 @@ const props = defineProps({
     required: true,
   },
 });
-watchEffect(() => {
-  document.title = title.value;
+onMounted(() => {
   if (props.id) {
     infoStore.getDetail(props.id);
   }
+  if (unref(detail)) {
+    document.title = unref(detail).name;
+  }
 });
 </script>
 
@@ -106,11 +127,27 @@ watchEffect(() => {
     max-width: 66.8125rem;
     margin: 0 auto;
     font-size: 1.25rem;
-    padding-bottom:5rem;
+    padding-bottom: 5rem;
     .title {
       font-size: 1.875rem;
       line-height: 3.75rem;
       margin: 1.2rem 0;
+      text-align: center;
+    }
+    .time-container {
+      display: inline-flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+    }
+    .time {
+      display: inline-flex;
+      font-size: var(--base-font-size);
+      width: 250px;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 auto;
     }
     .label-list {
       margin-bottom: 1.5rem;
@@ -137,6 +174,14 @@ watchEffect(() => {
     max-width: 66.8125rem;
     height: 34.1875rem;
     background: var(--main-show-case-background);
+    border-radius: 1.3125rem;
+    video,
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 1.3125rem;
+    }
   }
 }
 </style>

src/views/info.vue

@@ -16,31 +16,33 @@
             v-infinite-scroll="onLoadMore"
           >
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
-              <template v-for="(_, index) in 16">
+              <template v-for="item in exhibitions">
                 <n-gi>
-                  <infoBox
-                    :id="index + 1"
-                    :title="`湘鄂赣省工农银行洋银叁角纸币-${index + 1}`"
-                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-                    time="2023-01-02"
+                  <info-box
+                    :id="item.id"
+                    :title="item.name"
+                    :cover="domain + item.thumb"
+                    :time="item.publishDate"
                   />
                 </n-gi>
               </template>
             </n-grid>
+            <empty :show="exhibitions.length === 0" :height="500" />
           </n-tab-pane>
           <n-tab-pane name="activity" tab="活动">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
-              <template v-for="(_, index) in 16">
+              <template v-for="item in activates">
                 <n-gi>
-                  <infoBox
-                    :id="index + 1"
-                    title="卡片"
-                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-                    time="2023-01-02"
+                  <info-box
+                    :id="item.id"
+                    :title="item.name"
+                    :cover="domain + item.thumb"
+                    :time="item.publishDate"
                   />
                 </n-gi>
               </template>
             </n-grid>
+            <empty :show="activates.length === 0" :height="500" />
           </n-tab-pane>
           <n-tab-pane name="news" tab="新闻">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
@@ -55,20 +57,22 @@
                 </n-gi>
               </template>
             </n-grid>
+            <empty :show="news.length === 0" :height="500" />
           </n-tab-pane>
           <n-tab-pane name="notice" tab="通知">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
-              <template v-for="(_, index) in 16">
+              <template v-for="item in notices">
                 <n-gi>
                   <notice-box
-                    :id="`${index + 2}_notice`"
-                    title="这是一段标题这是一段标题"
+                    :id="item.id"
+                    :title="item.name"
                     content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
-                    time="2023-01-02"
+                    :time="item.publishDate"
                   />
                 </n-gi>
               </template>
             </n-grid>
+            <empty :show="notices.length === 0" :height="500" />
           </n-tab-pane>
         </n-tabs>
       </div>
@@ -84,12 +88,16 @@ import infoBox from "../components/infoBox";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import noticeBox from "../components/noticeBox";
+import empty from "../components/empty.vue";
 import { useInfoStore } from "../store/info";
+
 const infoStore = useInfoStore();
 const domain = ref(import.meta.env.VITE_DOMAIN_URL);
 const currentTab = ref("exhibition");
 const news = computed(() => infoStore.news);
-
+const notices = computed(() => infoStore.notices);
+const activates = computed(() => infoStore.activates);
+const exhibitions = computed(() => infoStore.exhibitions);
 const handleTabFetch = (type) => {
   switch (type) {
     case "exhibition":

src/views/survey-detail.vue

@@ -8,36 +8,70 @@
           <div class="back" @click="$router.go(-1)"></div>
           <div class="info">
             <!-- {{ details }} -->
-
-            <template v-for="detail in details">
-              <n-space
-                vertical
-                align="start"
-                justify="center"
-                style="padding: 1.25rem"
-              >
-                <h3>{{ detail.question }}</h3>
-                <n-radio-group
-                  v-model:value="detail.value"
-                  name="radiogroup"
-                  v-if="
-                    detail.answer &&
-                    JSON.parse(detail.answer).answer &&
-                    Number(detail.type) === 1
-                  "
+            <div>
+              <template v-for="detail in details">
+                <n-space
+                  vertical
+                  align="start"
+                  justify="center"
+                  style="padding: 1.25rem"
                 >
-                  <n-space>
-                    <n-radio
-                      v-for="answer in JSON.parse(detail.answer).answer"
-                      :key="answer.val"
-                      :value="answer.val"
+                  <h3>{{ detail.question }}</h3>
+
+                  <n-radio-group
+                    v-model:value="detail.value"
+                    name="radiogroup"
+                    v-if="
+                      detail.answer &&
+                      JSON.parse(detail.answer).answer &&
+                      Number(detail.type) === 1
+                    "
+                  >
+                    <n-space>
+                      <n-radio
+                        v-for="answer in JSON.parse(detail.answer).answer"
+                        :key="answer.val"
+                        :value="answer.val"
+                      >
+                        {{ answer.name }}
+                      </n-radio>
+                    </n-space>
+                    <n-space
+                      align="center"
+                      style="margin-top: 15px; min-width: 450px"
                     >
-                      {{ answer.name }}
-                    </n-radio>
-                  </n-space>
-                </n-radio-group>
-              </n-space>
-            </template>
+                      <n-radio key="diy" value="diy"> 其他 </n-radio>
+                      <n-input
+                        style="min-width: 450px"
+                        round
+                        maxlength="100"
+                        show-count
+                        placeholder="请输入内容 最多100字"
+                        v-model:value="detail[`custom-${detail['id']}`]"
+                      />
+                    </n-space>
+                  </n-radio-group>
+
+                  <n-checkbox-group
+                    v-model:value="detail.value"
+                    v-if="
+                      detail.answer &&
+                      JSON.parse(detail.answer).answer &&
+                      Number(detail.type) === 2
+                    "
+                  >
+                    <n-space item-style="display: flex;">
+                      <n-checkbox
+                        v-for="answer in JSON.parse(detail.answer).answer"
+                        :value="answer.val"
+                        :label="answer.name"
+                      />
+                    </n-space>
+                  </n-checkbox-group>
+                </n-space>
+              </template>
+            </div>
+
             <div class="btn">
               <n-button
                 class="submit"