feat: 数据接口的字段对接 与交互对接

src/pages/Discovery/components/CardSwiper/index.vue

@@ -18,7 +18,7 @@
       >
         <view class="card-shell">
           <view class="card-media">
-            <image class="card-image" :src="slot.item.image" mode="aspectFill" />
+            <image class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
           </view>
 
           <view class="card-body">
@@ -28,8 +28,8 @@
             <view class="card-title ellipsis-1">
               {{ slot.item.title }}
             </view>
-            <view v-if="slot.item.desc" class="card-desc ellipsis-2">
+            <view v-if="slot.item.subTitle" class="card-desc ellipsis-2">
-              {{ slot.item.desc }}
+              {{ slot.item.subTitle }}
             </view>
           </view>
 
@@ -58,7 +58,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "change", "card-click"]);
+const emit = defineEmits(["update:modelValue", "change", "didSelectItem"]);
 
 const DURATION = 280;
 const CLICK_THRESHOLD = 8;
@@ -407,7 +407,7 @@ const handleTouchCancel = () => {
 
 const handleCardTap = (slot) => {
   if (slot.role !== "current" || isDragging.value || isAnimating.value) return;
-  emit("card-click", slot.item, slot.index);
+  emit("didSelectItem", slot.item, slot.index);
 };
 
 onBeforeUnmount(() => {

src/pages/Discovery/components/QuickQuestions/index.vue

@@ -4,17 +4,17 @@
 
     <view class="container-scroll font-size-0 scroll-x whitespace-nowrap">
 
-      <view class="card-item bg-white inline-block rounded-20 p-10 mr-10"
+      <view class="card-item bg-white inline-block rounded-20 mr-10"
-        v-for="(item, index) in recommendPostsList" :key="index" @click="sendReply(item)">
+        v-for="(item, index) in list" :key="index" @click="sendReply(item)">
 
-        <view class="flex flex-row items-center"> 
+        <view class="flex flex-row flex-justify-start p-10"> 
-          <image class="card-img rounded-14" :src="createSvg(item.bgColor, item.iconColor)" />
+          <image class="card-img flex-shrink-0 rounded-14" :src="createSvgIndex(index)" />
 
-          <view class="ml-8 mt-4 border-box">
+          <view class="min-width-0 flex flex-col flex-full border-box pl-8 py-4" >
-            <view class="font-size-12 font-600 color-171717 ellipsis-1">
+            <view class="w-full font-size-12 font-600 color-171717 ellipsis-1">
               {{ item.title }}
             </view>
-            <view class="font-size-9 color-94A3B8 ellipsis-1">
+            <view class="w-full font-size-9 color-94A3B8 ellipsis-1">
               {{ item.subTitle }}
             </view>
           </view>
@@ -27,60 +27,36 @@
 
 <script setup>
 import { defineProps } from "vue";
-import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
+const emit = defineEmits(["didSelectItem"]);
 
 const props = defineProps({
   themeName: {
     type: String,
     default: "快捷提问",
   },
-  recommendPostsList: {
+  list: {
     type: Array,
-    default: () => [
+    default: () => [],
-      {
-        title: "小七孔古桥",
-        subTitle: "小七孔古桥",
-        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
-        bgColor: '#ECFDF5',
-        iconColor: '#10B981'
-      },
-      {
-        title: "翠谷瀑布",
-        subTitle: "翠谷瀑布",
-        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
-        bgColor: '#FFFBEB',
-        iconColor: '#F59E0B'
-      },
-      {
-        title: "鸳鸯湖",
-        subTitle: "鸳鸯湖",
-        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
-        bgColor: '#EFF6FF',
-        iconColor: '#3B82F6'
-        
-      },
-      {
-        title: "卧龙潭",
-        subTitle: "卧龙潭",
-        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
-        bgColor: '#FFFBEB',
-        iconColor: '#F59E0B'  
   }
-    ],
-  },
 });
 
+/// 点击卡片
 const sendReply = (item) => {
-  if (item.userInputContentType && item.userInputContentType === '1') {
+  emit("didSelectItem", item);
-    const commonItem = { type: item.userInputContent, title: item.topic }
-    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
-    return;
-  }
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
 };
 
 /// 生成icon
+const createSvgIndex = (index) => {
+  const colors = [
+    { bgColor: '#ECFDF5', iconColor: '#10B981' },
+    { bgColor: '#FFFBEB', iconColor: '#F59E0B' },
+    { bgColor: '#EFF6FF', iconColor: '#3B82F6' },
+    { bgColor: '#FFFBEB', iconColor: '#F59E0B' }
+  ];
+  return createSvg(...Object.values(colors[index % colors.length]));
+}
+
 const createSvg = (bgColor = '#FFFBEB', iconColor = '#F59E0B', size = 40) => {
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 40 40" fill="none">

src/pages/Discovery/index.vue

@@ -10,9 +10,9 @@
     </view>
 
     <scroll-view class="flex-full border-box min-height-0" scroll-y show-scrollbar="false">
-      <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @card-click="cardClick" />
+      <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
 
-      <QuickQuestions />
+      <QuickQuestions v-if="discoveryQuickQuestions.length > 0" :list="discoveryQuickQuestions" @didSelectItem="handleQuickQuestionClick" />
 
     </scroll-view>
   </view>
@@ -33,37 +33,8 @@ const sceneId = appStore.sceneId || "";
 
 const activeIndex = ref(0);
 const discoveryTabs = ref([]);
-
+const discoveryCards = ref([]);
-const discoveryCards = ref([
+const discoveryQuickQuestions = ref([]);
-  {
-    title: "卧龙潭漂流",
-    tag: "夏日必玩",
-    desc: "15米极速落差，极致清凉体验。",
-    image: discoveryCover,
-    tabLabel: "卧龙潭",
-  },
-  {
-    title: "峡谷徒步",
-    tag: "清凉徒步",
-    desc: "穿行山谷栈道，沿路都是瀑布与云雾。",
-    image: discoveryCover,
-    tabLabel: "峡谷探秘",
-  },
-  {
-    title: "竹筏观景",
-    tag: "轻松观光",
-    desc: "低头可见鱼群，抬眼就是山水画卷。",
-    image: discoveryCover,
-    tabLabel: "竹筏观景",
-  },
-  {
-    title: "秘境潜游",
-    tag: "人气推荐",
-    desc: "近距离观察水下生态，沉浸感很强。",
-    image: discoveryCover,
-    tabLabel: "秘境潜游",
-  },
-]);
 
 /// tabs 切换事件
 const handleTabChange = ({ tab, idx }) => {
@@ -71,11 +42,6 @@ const handleTabChange = ({ tab, idx }) => {
   queryDiscoveryData(tab.id);
 }
 
-/// 卡片点击事件
-const cardClick = (item) => {
-  console.log(JSON.stringify(item));
-};
-
 /// 请求发现页tab数据
 const queryTabsList = async () => {
   const res = await homeTabsData();
@@ -112,7 +78,7 @@ const queryDiscoveryData = async (tabId) => {
 const queryDiscoveryCards = async (tabId) => {
   const res = await homeTabContentData({ tagId: tabId });
   if (res.code === 0) {
-
+    discoveryCards.value = configDataList(res.data);
   }
 }
 
@@ -120,10 +86,35 @@ const queryDiscoveryCards = async (tabId) => {
 const queryQuickQuestionData = async (tabId) => {
   const res = await homeQuickQuestionData({ tagId: tabId });
   if (res.code === 0) {
-    console.log("快速问题列表:", res.data);
+    discoveryQuickQuestions.value = configDataList(res.data);
   }
 }
 
+/// 统一处理接口返回数据结构
+const configDataList = (data) => { 
+  return data.map((item) => ({
+    id: item.id,
+    title: item.tabContent.mainTitle,
+    subTitle: item.tabContent.subTitle,
+    tag: item.tabContent.tag,
+    coverImage: item.tabContent.coverImage,
+    tabContentId: item.tabContent.id,
+    jumpContent: item.tabContent.jumpContent,
+    jumpDesc: item.tabContent.jumpDesc,
+    jumpType: item.tabContent.jumpType,
+  }));
+}
+
+/// 卡片点击事件
+const handleCardClick = (item) => {
+  console.log(JSON.stringify(item));
+};
+
+/// 快速问题点击事件
+const handleQuickQuestionClick = (item) => {
+  console.log(JSON.stringify(item));
+};
+
 /// 组件挂载后请求数据
 onMounted(() => {
   queryTabsList();