feat(模板市场): 优化模板市场页面布局和功能

-调整模板市场页面的样式，增加搜索功能
- 优化模板分类和展示逻辑
- 添加更多模板探索的提示信息
- 修复模板市场相关的一些小问题

src/router/index.ts

@@ -98,8 +98,8 @@ const router = createRouter({
         {
           path: '/templateMarket',
           name: 'templateMarket',
-          meta:{
-            pureBGC: true,
+          meta: {
+            pureBGC: true
           },
           component: () => import('@/views/Home/components/Market/Index.vue')
         },
@@ -116,19 +116,21 @@ const router = createRouter({
           name: 'ad',
           meta: {
             pureBGC: true,
-            title: "伊调研",
-            shareAction : true,
-            shareFunc : () => {
-              if(window.ReactNativeWebView){
-                window.ReactNativeWebView.postMessage(JSON.stringify({
-                  type: 'shareModal',
-                  title: '分享标题',
-                  description:'分享副标题',
-                  thumbImageUrl:'https://logo.png',
-                  webpageUrl: window.location.href
-                }));
+            title: '伊调研',
+            shareAction: true,
+            shareFunc: () => {
+              if (window.ReactNativeWebView) {
+                window.ReactNativeWebView.postMessage(
+                  JSON.stringify({
+                    type: 'shareModal',
+                    title: '分享标题',
+                    description: '分享副标题',
+                    thumbImageUrl: 'https://logo.png',
+                    webpageUrl: window.location.href
+                  })
+                );
               }
-            } 
+            }
           },
           component: () => import('@/views/AD/Index.vue')
         }

src/stores/Questions/useQuestionStore.ts

@@ -4,7 +4,7 @@ import { AnswerApi } from '@/views/Survey/views/Preview/js/api';
 import { getLanguage } from '@/views/Survey/views/Preview/js/language';
 
 export const useQuestionStore = defineStore('questionStore', () => {
-  const currentSn =ref<string>('');
+  const currentSn = ref<string>('');
 
   const questionsData = ref();
 
@@ -52,8 +52,9 @@ export const useQuestionStore = defineStore('questionStore', () => {
     let { data } = await AnswerApi.getQuetions({
       id: urlParamSearch.get('sn'),
       data: {
-        is_preview: 0,
-        is_template: urlParamSearch.get('is_template') || 0,
+        is_preview: 1,
+        is_template: 0,
+        // is_template: urlParamSearch.get('is_template') || 0,
         source: urlParamSearch.get('source') ?? ''
       }
     });
@@ -72,7 +73,7 @@ export const useQuestionStore = defineStore('questionStore', () => {
   }
 
   return {
-    fetchQuestions:getQuestions,
+    fetchQuestions: getQuestions,
     currentSn,
     questionsData,
     styleInfo,

src/utils/date.ts

@@ -5,9 +5,9 @@
  * @param join 连接符
  * @returns 格式化后的时间
  */
-export function formatTime(time: string, split = ' ', join = ' '){
-    // 如果时间不存在，返回自身的值
-    if (!time) return time;
+export function formatTime(time: string, split = ' ', join = ' ') {
+  // 如果时间不存在，返回自身的值
+  if (!time) return time;
 
-    return time.split(split).join(join)
-} 
+  return time.split(split).join(join);
+}

src/views/Home/components/Market/Index.vue

@@ -1,27 +1,37 @@
 <template>
-  <!-- 模板 -->
-  <div class="market">
-    <search :value="searchValue"></search>
-    <van-tabs style="margin-top: 15px" v-model:active="active" class="px-1" @change="getMarketInfo">
-      <section>
-        <van-tab v-for="item in marketList" :key="item.title" :title="item.h5Title">
-          <template #title>
-            <section>{{ item.h5Title }}</section>
-          </template>
-        </van-tab>
-      </section>
-    </van-tabs>
-  </div>
-  <market-item :info="marketInfo" :marketItem="marketItem" />
-  <div class="more">
-    <p>-更多模板期待您的探索-</p>
-  </div>
+  <section class="market-container">
+    <!-- 模板 -->
+    <div class="market">
+      <search v-model:value="searchValue" @change="fetchTemplate"></search>
+      <van-tabs
+        v-model:active="active"
+        style="margin-top: 15px"
+        class="px-1"
+        @change="getMarketInfo"
+      >
+        <section>
+          <van-tab v-for="item in marketList" :key="item.title" :title="item.h5Title">
+            <template #title>
+              <section>{{ item.h5Title }}</section>
+            </template>
+          </van-tab>
+        </section>
+      </van-tabs>
+    </div>
+    <market-item :info="marketInfo" :marketItem="marketItem" />
+    <div class="more">
+      <p>-更多模板期待您的探索-</p>
+    </div>
+  </section>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import MarketItem from '@/components/MarketItem/MarketItem.vue';
 import { getListScene, getSurveyTemplates } from '@/api/home';
 import Search from '@/components/Search/Index.vue';
+import { fetchSearchResult } from '@/hooks/request/useSearch';
+
+const searchResult = ref([]);
 
 const marketList = ref([]);
 const active = ref(null);
@@ -65,6 +75,15 @@ const getMarketInfo = async (item: string | number, title?: string) => {
   }
 };
 
+/**
+ * 搜索模板
+ * @param keyword 搜索关键词
+ */
+function fetchTemplate() {
+  // const { templates } = fetchSearchResult(searchValue.value);
+  // searchResult.value = templates;
+}
+
 onMounted(() => {
   getTableList();
 });
@@ -84,37 +103,38 @@ onMounted(() => {
   justify-content: space-between;
 }
 
-.market {
-  padding: 10px;
-  border-radius: 0 0 16px 16px;
-  background-color: white;
-  overflow: hidden;
+.market-container {
+  .market {
+    padding: 20px;
+    border-radius: 0 0 16px 16px;
+    background-color: red;
 
-  .market_title {
-    margin-bottom: 5px;
-    color: #000;
-    font-size: 15px;
-  }
-
-  & > :first-child {
-    span {
-      color: grey;
-      font-size: 10px;
+    .market_title {
+      margin-bottom: 5px;
+      color: #000;
+      font-size: 15px;
     }
-  }
 
-  .market_table {
-    display: flex;
-    flex-flow: row nowrap;
-    overflow: scroll;
-    height: 20px;
-    font-size: 13px;
+    & > :first-child {
+      span {
+        color: grey;
+        font-size: 10px;
+      }
+    }
 
-    /* padding: 10px 0; */
+    .market_table {
+      display: flex;
+      flex-flow: row nowrap;
+      overflow: scroll;
+      height: 20px;
+      font-size: 13px;
 
-    & > div {
-      padding: 0 20px;
-      text-wrap: nowrap;
+      /* padding: 10px 0; */
+
+      & > div {
+        padding: 0 20px;
+        text-wrap: nowrap;
+      }
     }
   }
 }

src/views/Survey/components/SurveyItem.vue

@@ -152,7 +152,7 @@ function copyItem(item: SurveyItem) {
             <el-text style="max-width: 100px">
               <b v-html="survey.project_name"></b>
             </el-text>
-            <el-text v-if="survey.publish_number" class="wrap">
+            <el-text v-if="survey.is_publish_number" class="wrap">
               {{ survey.publish_number }}份
             </el-text>
             <el-text v-if="survey.is_time" class="wrap" style="text-wrap: nowrap">

src/views/Survey/types/survey.d.ts

@@ -1,4 +1,5 @@
 type SurveyItem = {
+  is_publish_number: any
   publish_number: string | number
   answer_num_h5: number
   recycle_progress_h5: number