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

This commit is contained in:
2026-04-27 16:31:56 +08:00
parent 722dec025e
commit 2c9377c019
8 changed files with 105 additions and 2 deletions

View File

@@ -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>