feat: 搭建快捷提问组件与一些样式调整

2026-04-27 16:31:56 +08:00
parent 722dec025e
commit 2c9377c019
8 changed files with 105 additions and 2 deletions
--- a/src/pages/Discovery/components/QuickQuestions/index.vue
+++ b/src/pages/Discovery/components/QuickQuestions/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <view class="container pl-12">
+    <ModuleTitle :title="themeName" />
+
+    <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"
+        v-for="(item, index) in recommendPostsList" :key="index" @click="sendReply(item)">
+
+        <view class="flex flex-row items-center"> 
+          <image class="card-img rounded-14" :src="item.coverPhoto" mode="aspectFill" />
+
+          <view class="ml-8 mt-4 border-box">
+            <view class="font-size-12 font-600 color-171717 ellipsis-1">
+              {{ item.title }}
+            </view>
+            <view class="font-size-9 color-94A3B8 ellipsis-1">
+              {{ item.subTitle }}
+            </view>
+          </view>
+        </view>
+        
+      </view>
+    </view>
+  </view>
+</template>
+
+<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 props = defineProps({
+  themeName: {
+    type: String,
+    default: "快捷提问",
+  },
+  recommendPostsList: {
+    type: Array,
+    default: () => [
+      {
+        title: "小七孔古桥",
+        subTitle: "小七孔古桥",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+      },
+      {
+        title: "翠谷瀑布",
+        subTitle: "翠谷瀑布",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+      },
+      {
+        title: "鸳鸯湖",
+        subTitle: "鸳鸯湖",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+        
+      },
+      {
+        title: "卧龙潭",
+        subTitle: "卧龙潭",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+      }
+    ],
+  },
+});
+
+const sendReply = (item) => {
+  if (item.userInputContentType && item.userInputContentType === '1') {
+    const commonItem = { type: item.userInputContent, title: item.topic }
+    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
+    return;
+  }
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
--- a/src/pages/Discovery/components/QuickQuestions/styles/index.scss
+++ b/src/pages/Discovery/components/QuickQuestions/styles/index.scss
@@ -0,0 +1,12 @@
+.container-scroll {
+  margin: 4px 0 6px;
+}
+
+.card-item {
+  width: 130px;
+}
+
+.card-img {
+  height: 40px;
+  width: 40px;
+}