feat:全部问卷接口联调

src/views/Survey/Index.vue

@@ -1,87 +1,112 @@
 <template>
-  <div class="new-survey-container">
-    <div v-for="item in 10" :key="item" class="new-survey_item">
+  <div class="new-survey-container container">
+    <div v-for="item in survey" :key="item" class="new-survey_item">
       <!--  问卷详情    -->
       <div class="survey_item_info">
         <div style="position: relative">
           <div class="survey_item_info_title">
             <el-text>
-              <b>{{ '报名签到问卷标题' }}</b>
+              <b>{{ item.project_name }}</b>
             </el-text>
-            <el-text>{{ 100 }}份</el-text>
+            <el-text>{{ item.answer_num }}份</el-text>
           </div>
           <div class="survey_item_info_status">
             <el-space spacer="|">
               <!--报名签到-->
               <div>
                 <span><img src="" alt="" /></span>
-                <el-text size="small">{{ '报名签到' }}</el-text>
+                <el-text size="small">{{ item.scene_name }}</el-text>
               </div>
               <!-- 问卷来源 -->
               <div>
                 <span><img src="" alt="" /></span>
-                <el-text size="small">{{ '移动端' }}</el-text>
+                <el-text size="small">{{ item.source === 1 ? '移动端' : 'PC端' }}</el-text>
               </div>
               <!-- 问卷时间 -->
               <div>
                 <span><img src="" alt="" /></span>
-                <el-text size="small">{{ '2025.03.04' }}</el-text>
+                <el-text size="small">{{ item.created_at }}</el-text>
               </div>
             </el-space>
           </div>
           <div class="survey_item_status">
-            <span class="survey_item_info_status_text">-已结束-</span>
+            <span class="survey_item_info_status_text">-{{ item.status_txt }}-</span>
           </div>
         </div>
         <!--问卷描述-->
-        <div class="survey_item_info_desc">
+        <div v-if="item.remarks" class="survey_item_info_desc">
           <el-text>
-            {{ '问卷描述：为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要' }}
+            {{ item.remarks }}
           </el-text>
         </div>
       </div>
       <!-- action 功能位置 -->
       <div class="survey_item_action">
-        <el-space direction="horizontal">
-          <div>
-            <el-button> 删除</el-button>
-            <el-button> 复制</el-button>
-            <el-button style="border: 2px solid #71b73c">
-              <el-text style="color: #71b73c">预览</el-text>
-            </el-button>
-            <el-button color="#6fb937">
-              <el-text style="color: white">开启投放</el-text>
-            </el-button>
-          </div>
-          <el-dropdown placement="top-end" trigger="click" style="">
-            <Io5EllipsisHorizontalSharp />
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item>编辑</el-dropdown-item>
-                <el-dropdown-item>存为模板</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-space>
+        <!--        <el-space direction="horizontal">-->
+        <div>
+          <el-button> 删除</el-button>
+          <el-button> 复制</el-button>
+          <el-button style="border: 2px solid #71b73c">
+            <el-text style="color: #71b73c">预览</el-text>
+          </el-button>
+          <el-button color="#6fb937">
+            <el-text style="color: white">开启投放</el-text>
+          </el-button>
+        </div>
+        <el-dropdown placement="top-end" trigger="click" style="">
+          <Io5EllipsisHorizontalSharp />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>编辑</el-dropdown-item>
+              <el-dropdown-item>存为模板</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <!--        </el-space>-->
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-// import { ref } from 'vue';
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getSurveysPage } from '@/api/home/index.js';
 import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
+const survey = ref([]);
+const form = ref({
+  page: 1,
+  pageSize: 10
+});
 
-// const surveyStatus = ref('end');
-// const getSurveyStatusUrl = computed(() => {
-//   const urlMap: { [key: string]: string } = {
-//     end: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32',
-//     edit: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa20b2a05d267d040d17ba3aca15ae8c8f43fc3d2541283276b51d601d069bcc',
-//     publish:
-//       'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbdfd7252fb5f0fa698039bafcab00305a5b80f0e19c67522e6d4d29820f0d58e'
-//   };
-//   return `url(${urlMap[surveyStatus.value]})`;
-// });
+const fetchSurveys = async () => {
+  const params = {
+    page: form.value.page,
+    per_page: form.value.pageSize,
+    group_id: 0
+  };
+  const res = await getSurveysPage(params);
+  if (res.data.code === 0) {
+    survey.value = res.data.data;
+    survey.value.forEach((item) => {
+      const sceneName = JSON.parse(JSON.stringify(item.scene_name));
+      const nameList = sceneName.split('-');
+      if (nameList.length > 0) {
+        item.scene_name = nameList[1] ? nameList[1] : nameList[0];
+      }
+
+      const timeList = item.created_at.split(' ');
+      if (nameList.length) {
+        item.created_at = timeList[0];
+      }
+    });
+  } else {
+    // Toast()
+  }
+};
+
+onMounted(() => {
+  fetchSurveys();
+});
 </script>
 
 <style scoped lang="scss">
@@ -91,7 +116,8 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
 .new-survey-container {
   min-height: calc(100vh - 100px);
   padding: 1px;
-  background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
+
+  //background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
 
   .new-survey_item {
     margin: 10px;
@@ -100,12 +126,17 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
     background-color: white;
 
     .survey_item_info {
+      .survey_item_info_status {
+        margin-bottom: 15px;
+      }
+
       .survey_item_status {
         position: absolute;
         top: 0;
         right: 10px;
         padding: 28px 13px 19px 7px;
-        background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32') 100% no-repeat;
+        background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32')
+          100% no-repeat;
         background-size: 100% 100%;
         opacity: 1;
 
@@ -129,10 +160,10 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
           font-size: 15px;
         }
 
-        &> :nth-child(2) {
+        & > :nth-child(2) {
           position: relative;
           left: 10px;
-          padding: 1px;
+          padding: 1px 3px;
           border: 2px solid #f5f5f5;
           border-radius: 6px;
           font-size: 12px;
@@ -140,7 +171,7 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
       }
 
       .survey_item_info_desc {
-        margin: 15px 7px 0 0;
+        margin: 0 7px 0 0;
         padding: 7px 9px 6px;
         border-radius: 8px;
         background-color: rgba(246, 247, 248, 0.5);
@@ -161,7 +192,9 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
     }
 
     .survey_item_action {
-      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       padding: 5px;
       border-top: 1px dashed #f5f5f5;