feat: 保存

.env.production

@@ -1,3 +1,3 @@
-VITE_DOMAIN_URL="http://192.168.20.61:8059"
-VITE_API_URL="http://192.168.20.61:8059/api/"
+VITE_DOMAIN_URL="https://sit-qiushoubwg.4dage.com"
+VITE_API_URL="https://sit-qiushoubwg.4dage.com/api"
 VITE_PUBLIC_DIR="/web/"

src/router/index.js

@@ -55,6 +55,7 @@ const routes = [
     path: "/info-detail/:id",
     name: "infoDetail",
     component: () => import("@/views/info-detail.vue"),
+    props: true,
     meta: {
       title: "",
     },
@@ -63,6 +64,7 @@ const routes = [
     path: "/exhibition-detail/:id",
     name: "exhibitionDetail",
     component: () => import("@/views/exhibition-detail.vue"),
+    props: true,
     meta: {
       title: "",
     },
@@ -71,6 +73,7 @@ const routes = [
     path: "/collect-detail/:id",
     name: "collectDetail",
     component: () => import("@/views/collect-detail.vue"),
+    props: true,
     meta: {
       title: "",
     },
@@ -79,6 +82,7 @@ const routes = [
     path: "/survey-detail/:id",
     name: "surveyDetail",
     component: () => import("@/views/survey-detail.vue"),
+    props: true,
     meta: {
       title: "",
     },

src/store/home.js

@@ -1,4 +1,3 @@
-import { triggerRef } from "vue";
 import { defineStore } from "pinia";
 import { request } from "../api";
 

src/store/info.js

@@ -1,4 +1,3 @@
-import { triggerRef } from "vue";
 import { defineStore } from "pinia";
 import { request } from "../api";
 

src/store/survey.js

@@ -0,0 +1,62 @@
+import { defineStore } from "pinia";
+import { request } from "../api";
+
+export const useSurveyStore = defineStore({
+  id: "survey",
+  state: () => {
+    return {
+      lists: [],
+      details: [
+        {
+          answer: "",
+          createTime: "",
+          creatorId: "",
+          creatorName: "",
+          display: null,
+          hasDiy: true,
+          id: null,
+          question: "",
+          questionnaireId: null,
+          type: null,
+          updateTime: "",
+        },
+      ],
+      pagination: {
+        pageNum: 1,
+        pageSize: 20,
+        searchKey: "",
+        type: "",
+        total: 0,
+        pages: 0,
+        current: 0,
+      },
+    };
+  },
+  getters: {},
+  actions: {
+    async getLists(pageNum) {
+      this.pagination.pageNum = pageNum || 1;
+      const { data, status } = await request.post(
+        "/show/questionnaire/pageList",
+        {
+          ...this.pagination,
+        }
+      );
+      if (data.code === 0) {
+        const { records, total, current, page } = data.data;
+        this.lists = records;
+        this.pagination.total = total;
+        this.pagination.current = current;
+        this.pagination.page = page;
+      }
+    },
+    async getDetail(id) {
+      const { data, status } = await request.get(
+        `/show/questionnaire/detail/${id}`
+      );
+      if (data.code === 0) {
+        this.details = data.data;
+      }
+    },
+  },
+});

src/views/survey-detail.vue

@@ -6,7 +6,49 @@
         <hero-sub-title :type="4" />
         <div class="detail">
           <div class="back" @click="$router.go(-1)"></div>
-          <div class="info"></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
+                  "
+                >
+                  <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-radio-group>
+              </n-space>
+            </template>
+            <div class="btn">
+              <n-button
+                class="submit"
+                size="large"
+                type="primary"
+                @click="submit"
+              >
+                提交
+              </n-button>
+            </div>
+          </div>
         </div>
       </div>
       <side-menu />
@@ -15,63 +57,95 @@
 </template>
 
 <script setup>
-import { watchEffect, ref } from "vue";
-import { useFullscreen } from "@vueuse/core";
+import { watchEffect, ref, onMounted, computed } from "vue";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
-import { useInfoStore } from "../store/info";
+import { useSurveyStore } from "../store/survey";
+const surveyStore = useSurveyStore();
 const title = ref("detail");
 
+const details = computed(() => surveyStore.details);
+
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    default: () => null,
+    required: true,
+  },
+});
 watchEffect(() => {
   document.title = title.value;
+  if (props.id) {
+    surveyStore.getDetail(props.id);
+  }
 });
+
+const submit = () => {};
 </script>
 
 <style lang="scss" scoped>
 .detail {
   --main-show-case-background: #ddd5d5;
-  --main-detail-margin: 1.875rem;
-  --main-detail-padding: 1.875rem;
+  --main-detail-margin: 30px;
+  --main-detail-padding: 30px;
   margin: var(--main-detail-margin);
   margin-bottom: 0;
   flex: 1;
-  border-radius: 0.8125rem;
-  padding: 2rem 3rem 4rem 3rem;
+  border-radius: 13px;
+  padding: 32px 48px 64px 48px;
   overflow-y: scroll;
   background-image: var(--main-detail-background-img);
   background-size: cover;
-  background-position: top 100%;
+  background-position: top center;
   background-repeat: no-repeat;
+  display: inline-flex;
 
   .back {
     background-image: url("/img/back_arrow.png");
-    width: 7.5rem;
-    height: 1.875rem;
+    width: 120px;
+    height: 30px;
     background-repeat: no-repeat;
     background-size: contain;
-    margin-bottom: 0.75rem;
+    margin-bottom: 12px;
   }
   .info {
-    max-width: 66.8125rem;
+    max-width: 1069px;
     margin: 0 auto;
-    font-size: 20px;
-
+    font-size: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    :deep(.n-radio) {
+      --n-font-size: 1.125rem !important;
+    }
     .title {
-      font-size: 1.875rem;
-      line-height: 3.75rem;
-      margin: 1.2rem 0;
+      font-size: 30px;
+      line-height: 60px;
+      margin: 19.2px 0;
     }
     .text {
       font-weight: 400;
       color: #6e6e6e;
-      line-height: 2.125rem;
-      font-size: 1.25rem;
+      line-height: 34px;
+      font-size: 20px;
+    }
+    .btn {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      :deep(.n-button) {
+        font-size: 1.25rem;
+        padding: 25px 50px;
+        border-radius: 60px;
+      }
     }
   }
   .show-case {
-    max-width: 66.8125rem;
-    height: 34.1875rem;
+    max-width: 1069px;
+    height: 547px;
     background: var(--main-show-case-background);
   }
 }

src/views/survey.vue

@@ -7,13 +7,13 @@
         <div class="detail">
           <div class="info">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
-              <template v-for="(_, index) in 16">
+              <template v-for="item in lists">
                 <n-gi>
                   <survey-box
-                    :id="`${index + 1}`"
-                    title="这是一段标题这是一段标题"
-                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
-                    time="2023-01-02"
+                    :id="item.id"
+                    :title="item.name"
+                    :content="item.description"
+                    :time="item.publishDate"
                   />
                 </n-gi>
               </template>
@@ -27,20 +27,31 @@
 </template>
 
 <script setup>
-import { watchEffect, ref } from "vue";
+import { watchEffect, ref, onMounted, computed } from "vue";
 
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
 import surveyBox from "../components/surveyBox";
+import { useSurveyStore } from "../store/survey";
+const surveyStore = useSurveyStore();
+
+const lists = computed(() => surveyStore.lists);
+
 const title = ref("detail");
 const YGap = ref(50);
 
 watchEffect(() => {
   document.title = title.value;
 });
+onMounted(async () => {
+  try {
+    await surveyStore.getLists();
+  } catch (error) {}
+});
 </script>
 
+
 <style lang="scss" scoped>
 .detail {
   --main-show-case-background: #ddd5d5;