feat:首页联调

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

@@ -1,11 +1,3 @@
-<script setup lang="ts">
-import { ref, h } from 'vue';
-import { tables } from './hooks/useMarketHooks';
-import TestComponent from './components/TestComponent.vue';
-
-const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
-</script>
-
 <template>
   <!-- 模板 -->
   <div class="market">
@@ -15,15 +7,63 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
     </div>
 
     <div class="market_table">
-      <div v-for="item in tables" :key="item.title" @click="activeComponet = item.component">
+      <div v-for="item in tables" :key="item.title" @click="getMarketInfo(item)">
         {{ item.title }}
       </div>
     </div>
     <van-cell class="market_items">
-      <component :is="activeComponet" />
+      <market-item :info="marketInfo"></market-item>
+      <!--      <component :is="TestComponent" />-->
     </van-cell>
+    <p class="more">-更多模板期待您的探索-</p>
   </div>
 </template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import MarketItem from './components/MarketItem.vue';
+import { getListScene, getSurveyTemplates } from '@/api/home';
+
+interface SceneItem {
+  parentCode: number;
+  title: string;
+  component: any;
+  code: number;
+}
+
+const tables = ref<SceneItem[]>([]);
+const marketInfo = ref([]);
+
+const getTableList = async () => {
+  const res = await getListScene();
+  if (res.data.code === 0) {
+    res.data.data.forEach((item: SceneItem) => {
+      if (item.parentCode && item.parentCode === 1) {
+        tables.value.push(item);
+      }
+    });
+
+    getMarketInfo(tables.value[0]);
+  }
+};
+const getMarketInfo = async (item: SceneItem) => {
+  const params = {
+    page: 1,
+    per_page: 10,
+    group_id: 0,
+    is_public: 1,
+    scene_code_info: item.code,
+    sort: 'quote_nums, desc'
+  };
+  const res = await getSurveyTemplates(params);
+  if (res.data.code === 0) {
+    marketInfo.value = res.data.data;
+  }
+};
+
+onMounted(() => {
+  getTableList();
+});
+</script>
 
 <style scoped>
 .market {
@@ -70,5 +110,12 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
       background-color: white;
     }
   }
+
+  .more {
+    margin: 10px 0;
+    color: #666;
+    font-size: 14px;
+    text-align: center;
+  }
 }
 </style>

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

@@ -0,0 +1,57 @@
+<template>
+  <van-row :gutter="12">
+    <van-col v-for="(item, index) in info" :key="index" :span="12" class="market-item">
+      <div class="content">
+        <div class="title">
+          <span>{{ item.title }}</span>
+          <img
+            src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u42.svg"
+          />
+        </div>
+        <div class="desc">
+          <span>引用{{ item.quote_nums }}次</span> |
+          <span>创建人: {{ item.creator }}</span>
+        </div>
+      </div>
+    </van-col>
+  </van-row>
+</template>
+<script setup lang="ts">
+const { info } = defineProps({
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.market-item {
+  margin-bottom: 12px;
+
+  .content {
+    padding: 12px;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .desc {
+      color: #666;
+      font-size: 12px;
+    }
+  }
+}
+</style>

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

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-const { cn } = defineProps({
-  cn: {
-    type: String,
-    required: false,
-    deault: 'default'
-  }
-});
-</script>
-
-<template>
-  <van-row :gutter="4">
-    <van-col
-      v-for="item in 2"
-      :key="item"
-      :span="10"
-      style="
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
-      "
-    >
-      <div style="display: flex; align-items: center; justify-content: space-evenly; width: 100%">
-        <span>{{ cn }} 模板</span>
-        <img
-          src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u42.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64"
-        />
-      </div>
-
-      <div><span>引用10次</span> | <span>创建人: 张三</span></div>
-    </van-col>
-  </van-row>
-</template>
-
-<style lang="sass" scoped></style>

src/views/Home/components/Market/hooks/useMarketHooks.ts

@@ -1,4 +1,4 @@
-import TestComponent from '../components/TestComponent.vue';
+import TestComponent from '../components/MarketItem.vue';
 import { h } from 'vue';
 
 export const tables = [