zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 格式化代码

Browse Source
This commit is contained in:
zoujing 2025-08-27 18:37:50 +08:00
parent 9de068e7fc
commit 0e51fdcd69
21 changed files with 1502 additions and 1522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
pages/chat/ChatCardAI.vue
View File

@ -1,14 +1,18 @@
<template> <template>
<view class="container"> <view class="container">
<view class="chat-ai"> <view class="chat-ai">
<view class="loading-container" > <view class="loading-container">
<image v-if="isLoading" class="loading-img" src="/static/msg_loading.svg" /> <image
<ChatMarkdown :key="textKey" :text="processedText" /> v-if="isLoading"
</view> class="loading-img"
<slot name="content"></slot> src="/static/msg_loading.svg"
</view> />
<slot name="footer"></slot> <ChatMarkdown :key="textKey" :text="processedText" />
</view>
<slot name="content"></slot>
</view> </view>
<slot name="footer"></slot>
</view>
</template> </template>
<script setup> <script setup>
@ -16,14 +20,14 @@ import { defineProps, computed, ref, watch } from "vue";
import ChatMarkdown from "./ChatMarkdown.vue"; import ChatMarkdown from "./ChatMarkdown.vue";
const props = defineProps({ const props = defineProps({
text: { text: {
type: String, type: String,
default: "", default: "",
}, },
isLoading: { isLoading: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); });
// 用于强制重新渲染的key // 用于强制重新渲染的key
@ -31,63 +35,62 @@ const textKey = ref(0);
// 处理文本内容 // 处理文本内容
const processedText = computed(() => { const processedText = computed(() => {
if (!props.text) { if (!props.text) {
return ""; return "";
} }
// 确保文本是字符串类型 // 确保文本是字符串类型
const textStr = String(props.text); const textStr = String(props.text);
// 处理加载状态的文本
if (textStr.includes("加载中") || textStr.includes("...")) {
return textStr;
}
// 处理加载状态的文本
if (textStr.includes("加载中") || textStr.includes("...")) {
return textStr; return textStr;
}
return textStr;
}); });
// 监听text变化，强制重新渲染 // 监听text变化，强制重新渲染
watch( watch(
() => props.text, () => props.text,
(newText, oldText) => { (newText, oldText) => {
if (newText !== oldText) { if (newText !== oldText) {
textKey.value++; textKey.value++;
} }
}, },
{ immediate: true } { immediate: true }
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度 max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开 overflow-x: hidden; // ✅ 防止横向撑开
.chat-ai { .chat-ai {
margin: 6px 12px; margin: 6px 12px;
padding: 0 12px; padding: 0 12px;
min-width: 90px; min-width: 90px;
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px 20px 20px 20px; border-radius: 4px 20px 20px 20px;
border: 1px solid; border: 1px solid;
border-color: #ffffff; border-color: #ffffff;
} }
} }
.loading-container { .loading-container {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px 0; padding: 4px 0;
} }
.loading-img { .loading-img {
margin-left: -4px; margin-left: -4px;
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
</style> </style>

77
pages/chat/ChatCardMine.vue
View File

@ -1,46 +1,45 @@
<template> <template>
<view class="chat-mine"> <view class="chat-mine">
<text>{{ text }}</text> <text>{{ text }}</text>
<slot></slot> <slot></slot>
</view> </view>
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue"; import { defineProps } from "vue";
defineProps({ defineProps({
text: { text: {
type: String, type: String,
default: '' default: "",
} },
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chat-mine { .chat-mine {
margin: 6px 12px; margin: 6px 12px;
padding: 8px 16px; padding: 8px 16px;
background-color: #00A6FF; background-color: #00a6ff;
box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.1); box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px 4px 20px 20px; border-radius: 20px 4px 20px 20px;
border: 1px solid; border: 1px solid;
border-color: #FFFFFF; border-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度 max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开 overflow-x: hidden; // ✅ 防止横向撑开
text { text {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #ffffff;
line-height: 22px; line-height: 22px;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
} }
</style> </style>

57
pages/chat/ChatCardOther.vue
View File

@ -1,36 +1,35 @@
<template> <template>
<view class="chat-other"> <view class="chat-other">
<text>{{ text }}</text> <text>{{ text }}</text>
<slot></slot> <slot></slot>
</view> </view>
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue"; import { defineProps } from "vue";
defineProps({ defineProps({
text: { text: {
type: String, type: String,
default: '' default: "",
} },
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chat-other { .chat-other {
width: 100%; width: 100%;
margin: 6px 0; margin: 6px 0;
padding: 0 12px; padding: 0 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度 max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开 overflow-x: hidden; // ✅ 防止横向撑开
text { text {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
}
} </style>
</style>

425
pages/chat/ChatInputArea.vue
View File

@ -1,65 +1,62 @@
<template> <template>
<view class="input-area-wrapper"> <view class="input-area-wrapper">
<view v-if="!visibleWaveBtn" class="area-input"> <view v-if="!visibleWaveBtn" class="area-input">
<!-- 语音/键盘切换 --> <!-- 语音/键盘切换 -->
<view class="input-container-voice" @click="toggleVoiceMode"> <view class="input-container-voice" @click="toggleVoiceMode">
<image <image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image>
v-if="!isVoiceMode" <image v-else src="/static/input_keyboard_icon.png"></image>
src="/static/input_voice_icon.png" </view>
></image>
<image v-else src="/static/input_keyboard_icon.png"></image>
</view>
<!-- 输入框/语音按钮容器 --> <!-- 输入框/语音按钮容器 -->
<view class="input-button-container"> <view class="input-button-container">
<textarea <textarea
ref="textareaRef" ref="textareaRef"
v-if="!isVoiceMode" v-if="!isVoiceMode"
class="textarea" class="textarea"
type="text" type="text"
cursor-spacing="20" cursor-spacing="20"
confirm-type="send" confirm-type="send"
v-model="inputMessage" v-model="inputMessage"
auto-height auto-height
:confirm-hold="true" :confirm-hold="true"
:placeholder="placeholder" :placeholder="placeholder"
:show-confirm-bar="false" :show-confirm-bar="false"
:hold-keyboard="holdKeyboard" :hold-keyboard="holdKeyboard"
:adjust-position="true" :adjust-position="true"
:disable-default-padding="true" :disable-default-padding="true"
maxlength="300" maxlength="300"
@confirm="sendMessage" @confirm="sendMessage"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@touchstart="handleTouchStart" @touchstart="handleTouchStart"
@touchend="handleTouchEnd" @touchend="handleTouchEnd"
/> />
<view <view
v-if="isVoiceMode" v-if="isVoiceMode"
class="hold-to-talk-button" class="hold-to-talk-button"
@longpress="handleVoiceTouchStart" @longpress="handleVoiceTouchStart"
@touchend="handleVoiceTouchEnd" @touchend="handleVoiceTouchEnd"
@touchcancel="handleVoiceTouchEnd" @touchcancel="handleVoiceTouchEnd"
> >
按住 说话 按住 说话
</view>
</view>
<view class="input-container-send">
<view class="input-container-send-btn" @click="sendMessage">
<image
v-if="props.isSessionActive"
src="/static/input_stop_icon.png"
></image>
<image v-else src="/static/input_send_icon.png"></image>
</view>
</view>
</view> </view>
</view>
<!-- 录音按钮 --> <view class="input-container-send">
<RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" /> <view class="input-container-send-btn" @click="sendMessage">
<image
v-if="props.isSessionActive"
src="/static/input_stop_icon.png"
></image>
<image v-else src="/static/input_send_icon.png"></image>
</view>
</view>
</view> </view>
<!-- 录音按钮 -->
<RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
</view>
</template> </template>
<script setup> <script setup>
@ -70,18 +67,18 @@ const plugin = requirePlugin("WechatSI");
const manager = plugin.getRecordRecognitionManager(); const manager = plugin.getRecordRecognitionManager();
const props = defineProps({ const props = defineProps({
modelValue: String, modelValue: String,
holdKeyboard: Boolean, holdKeyboard: Boolean,
isSessionActive: Boolean, isSessionActive: Boolean,
stopRequest: Function, stopRequest: Function,
}); });
const emit = defineEmits([ const emit = defineEmits([
"update:modelValue", "update:modelValue",
"send", "send",
"noHideKeyboard", "noHideKeyboard",
"keyboardShow", "keyboardShow",
"keyboardHide", "keyboardHide",
"sendVoice", "sendVoice",
]); ]);
const textareaRef = ref(null); const textareaRef = ref(null);
@ -95,137 +92,137 @@ const visibleWaveBtn = ref(false);
// 保持和父组件同步 // 保持和父组件同步
watch( watch(
() => props.modelValue, () => props.modelValue,
(val) => { (val) => {
inputMessage.value = val; inputMessage.value = val;
} }
); );
// 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新） // 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新）
watch(inputMessage, (val) => { watch(inputMessage, (val) => {
// 只有当值真正不同时才emit，避免循环更新 // 只有当值真正不同时才emit，避免循环更新
if (val !== props.modelValue) { if (val !== props.modelValue) {
emit("update:modelValue", val); emit("update:modelValue", val);
} }
}); });
// 切换语音/文本模式 // 切换语音/文本模式
const toggleVoiceMode = () => { const toggleVoiceMode = () => {
isVoiceMode.value = !isVoiceMode.value; isVoiceMode.value = !isVoiceMode.value;
}; };
// 处理语音按钮长按开始 // 处理语音按钮长按开始
const handleVoiceTouchStart = () => { const handleVoiceTouchStart = () => {
manager.start({ lang: "zh_CN" }); manager.start({ lang: "zh_CN" });
visibleWaveBtn.value = true; visibleWaveBtn.value = true;
// 启动音频条动画 // 启动音频条动画
nextTick(() => { nextTick(() => {
if (recordingWaveBtnRef.value) { if (recordingWaveBtnRef.value) {
recordingWaveBtnRef.value.startAnimation(); recordingWaveBtnRef.value.startAnimation();
} }
}); });
}; };
// 处理语音按钮长按结束 // 处理语音按钮长按结束
const handleVoiceTouchEnd = () => { const handleVoiceTouchEnd = () => {
manager.stop(); manager.stop();
// 停止音频条动画 // 停止音频条动画
if (recordingWaveBtnRef.value) { if (recordingWaveBtnRef.value) {
recordingWaveBtnRef.value.stopAnimation(); recordingWaveBtnRef.value.stopAnimation();
} }
visibleWaveBtn.value = false; visibleWaveBtn.value = false;
}; };
// 处理发送原语音 // 处理发送原语音
const initRecord = () => { const initRecord = () => {
manager.onRecognize = (res) => { manager.onRecognize = (res) => {
let text = res.result; let text = res.result;
inputMessage.value = text; inputMessage.value = text;
}; };
// 识别结束事件 // 识别结束事件
manager.onStop = (res) => { manager.onStop = (res) => {
console.log(res, 37); console.log(res, 37);
let text = res.result; let text = res.result;
if (text == "") { if (text == "") {
console.log("没有说话"); console.log("没有说话");
return; return;
} }
inputMessage.value = text; inputMessage.value = text;
// 在语音识别完成后发送消息 // 在语音识别完成后发送消息
emit("send", text); emit("send", text);
}; };
}; };
// 监听键盘高度变化 // 监听键盘高度变化
onMounted(() => { onMounted(() => {
// 监听键盘弹起 // 监听键盘弹起
uni.onKeyboardHeightChange((res) => { uni.onKeyboardHeightChange((res) => {
keyboardHeight.value = res.height; keyboardHeight.value = res.height;
if (res.height) { if (res.height) {
emit("keyboardShow", res.height); emit("keyboardShow", res.height);
} else { } else {
emit("keyboardHide"); emit("keyboardHide");
} }
}); });
initRecord(); initRecord();
}); });
const sendMessage = () => { const sendMessage = () => {
if (props.isSessionActive) { if (props.isSessionActive) {
// 如果会话进行中，调用停止请求函数 // 如果会话进行中，调用停止请求函数
if (props.stopRequest) { if (props.stopRequest) {
props.stopRequest(); props.stopRequest();
}
} else {
// 否则发送新消息
if (!inputMessage.value.trim()) return;
emit("send", inputMessage.value);
// 发送后保持焦点（可选）
if (props.holdKeyboard && textareaRef.value) {
nextTick(() => {
textareaRef.value.focus();
});
}
} }
} else {
// 否则发送新消息
if (!inputMessage.value.trim()) return;
emit("send", inputMessage.value);
// 发送后保持焦点（可选）
if (props.holdKeyboard && textareaRef.value) {
nextTick(() => {
textareaRef.value.focus();
});
}
}
}; };
const handleFocus = () => { const handleFocus = () => {
isFocused.value = true; isFocused.value = true;
emit("noHideKeyboard"); emit("noHideKeyboard");
}; };
const handleBlur = () => { const handleBlur = () => {
isFocused.value = false; isFocused.value = false;
}; };
const handleTouchStart = () => { const handleTouchStart = () => {
emit("noHideKeyboard"); emit("noHideKeyboard");
}; };
const handleTouchEnd = () => { const handleTouchEnd = () => {
emit("noHideKeyboard"); emit("noHideKeyboard");
}; };
// 手动聚焦输入框 // 手动聚焦输入框
const focusInput = () => { const focusInput = () => {
if (textareaRef.value) { if (textareaRef.value) {
textareaRef.value.focus(); textareaRef.value.focus();
} }
}; };
// 手动失焦输入框 // 手动失焦输入框
const blurInput = () => { const blurInput = () => {
if (textareaRef.value) { if (textareaRef.value) {
textareaRef.value.blur(); textareaRef.value.blur();
} }
}; };
// 暴露方法给父组件 // 暴露方法给父组件
@ -234,87 +231,87 @@ defineExpose({ focusInput });
<style scoped lang="scss"> <style scoped lang="scss">
.area-input { .area-input {
display: flex;
align-items: center;
border-radius: 22px;
background-color: #ffffff;
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
margin: 0 12px;
margin-bottom: 8px;
.input-container-voice {
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 22px; justify-content: center;
align-self: flex-end;
width: 44px;
height: 44px;
image {
width: 22px;
height: 22px;
}
}
.input-button-container {
flex: 1;
position: relative;
}
.hold-to-talk-button {
width: 100%;
height: 44px;
color: #333333;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05); transition: all 0.2s ease;
margin: 0 12px; user-select: none;
margin-bottom: 8px; -webkit-user-select: none;
}
.input-container-voice { .input-container-send {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
align-self: flex-end; align-self: flex-end;
width: 44px; width: 44px;
height: 44px; height: 44px;
image { .input-container-send-btn {
width: 22px; display: flex;
height: 22px; align-items: center;
} justify-content: center;
width: 100%;
height: 100%;
} }
.input-button-container { image {
flex: 1; width: 28px;
position: relative; height: 28px;
}
}
.textarea {
flex: 1;
box-sizing: border-box;
width: 100%;
max-height: 92px;
min-height: 22px;
font-size: 16px;
line-height: 22px;
margin: 6px 0;
&::placeholder {
color: #cccccc;
line-height: normal;
} }
.hold-to-talk-button { &:focus {
width: 100%; outline: none;
height: 44px;
color: #333333;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
transition: all 0.2s ease;
user-select: none;
-webkit-user-select: none;
}
.input-container-send {
display: flex;
align-items: center;
justify-content: center;
align-self: flex-end;
width: 44px;
height: 44px;
.input-container-send-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
image {
width: 28px;
height: 28px;
}
}
.textarea {
flex: 1;
box-sizing: border-box;
width: 100%;
max-height: 92px;
min-height: 22px;
font-size: 16px;
line-height: 22px;
margin: 6px 0;
&::placeholder {
color: #cccccc;
line-height: normal;
}
&:focus {
outline: none;
}
} }
}
} }
</style> </style>

1022
pages/chat/ChatMainList.vue
View File

File diff suppressed because it is too large Load Diff

27
pages/chat/ChatMarkdown.vue
View File

@ -1,21 +1,18 @@
<template> <template>
<view> <view>
<zero-markdown-view :markdown="text" :aiMode='true'></zero-markdown-view> <zero-markdown-view :markdown="text" :aiMode="true"></zero-markdown-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue"; import { defineProps } from "vue";
defineProps({ defineProps({
text: { text: {
type: String, type: String,
default: '' default: "",
} },
}) });
</script> </script>
<style scoped> <style scoped></style>
</style>

226
pages/chat/ChatQuickAccess.vue
View File

@ -1,27 +1,25 @@
<template> <template>
<view class="quick-access"> <view class="quick-access">
<view class="quick-access-scroll"> <view class="quick-access-scroll">
<view <view
class="quick-access-item" class="quick-access-item"
v-for="(item, index) in itemList" v-for="(item, index) in itemList"
:key="index" :key="index"
@click="sendReply(item)" @click="sendReply(item)"
> >
<image <image
class="quick-access-item-bg" class="quick-access-item-bg"
src="/static/quick/quick_icon_bg.png" src="/static/quick/quick_icon_bg.png"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<view class="quick-access-item-title"> <view class="quick-access-item-title">
<image :src="item.icon"></image> <image :src="item.icon"></image>
<text>{{ item.title }}</text> <text>{{ item.title }}</text>
</view>
<text class="quick-access-item-content">{{
item.content
}}</text>
</view>
</view> </view>
<text class="quick-access-item-content">{{ item.content }}</text>
</view>
</view> </view>
</view>
</template> </template>
<script setup> <script setup>
@ -31,113 +29,113 @@ const itemList = ref([]);
const emits = defineEmits(["replySent"]); const emits = defineEmits(["replySent"]);
const sendReply = (item) => { const sendReply = (item) => {
emits("replySent", item); // 向父组件传递数据 emits("replySent", item); // 向父组件传递数据
}; };
onMounted(() => { onMounted(() => {
initData(); initData();
}); });
const initData = () => { const initData = () => {
itemList.value = [ itemList.value = [
{ {
icon: "/static/quick/quick_icon_yuding.png", icon: "/static/quick/quick_icon_yuding.png",
title: "快速预定", title: "快速预定",
content: "预定门票、房间、餐食", content: "预定门票、房间、餐食",
type: "Command.quickBooking", type: "Command.quickBooking",
}, },
{ {
icon: "/static/quick/quick_icon_find.png", icon: "/static/quick/quick_icon_find.png",
title: "探索发现", title: "探索发现",
content: "探索玩法、出片佳地", content: "探索玩法、出片佳地",
type: "Command.discovery", type: "Command.discovery",
}, },
{ {
icon: "/static/quick/quick_icon_order.png", icon: "/static/quick/quick_icon_order.png",
title: "订单/工单", title: "订单/工单",
content: "我的订单/工单", content: "我的订单/工单",
type: "MyOrder", type: "MyOrder",
}, },
{ {
icon: "/static/quick/quick_icon_call.png", icon: "/static/quick/quick_icon_call.png",
title: "呼叫服务", title: "呼叫服务",
content: "加水、客房服务等", content: "加水、客房服务等",
type: "Command.createWorkOrder", type: "Command.createWorkOrder",
}, },
]; ];
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.quick-access { .quick-access {
width: 100%; width: 100%;
&-scroll { &-scroll {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
}
.quick-access-item {
flex: 0 0 104px;
border-radius: 8px;
margin: 4px 4px 8px 4px;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
padding: 12px;
display: inline-flex;
flex-direction: column;
position: relative;
&:first-child {
margin-left: 12px;
} }
.quick-access-item { &:last-child {
flex: 0 0 104px; margin-right: 12px;
border-radius: 8px;
margin: 4px 4px 8px 4px;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
padding: 12px;
display: inline-flex;
flex-direction: column;
position: relative;
&:first-child {
margin-left: 12px;
}
&:last-child {
margin-right: 12px;
}
.quick-access-item-bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: 8px;
width: 128px;
height: 56px;
}
.quick-access-item-title {
display: flex;
align-items: center;
z-index: 1;
image {
width: 16px;
height: 16px;
margin-right: 4px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #201f32;
line-height: 16px;
}
}
.quick-access-item-content {
z-index: 1;
margin-top: 4px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 10px;
color: #678cad;
line-height: 18px;
}
} }
.quick-access-item-bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: 8px;
width: 128px;
height: 56px;
}
.quick-access-item-title {
display: flex;
align-items: center;
z-index: 1;
image {
width: 16px;
height: 16px;
margin-right: 4px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #201f32;
line-height: 16px;
}
}
.quick-access-item-content {
z-index: 1;
margin-top: 4px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 10px;
color: #678cad;
line-height: 18px;
}
}
} }
</style> </style>

28
pages/chat/ChatTopBgImg.vue
View File

@ -1,20 +1,18 @@
<template> <template>
<view class="top-bg"> <view class="top-bg"> </view>
</view>
</template> </template>
<script> <script></script>
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-bg { .top-bg {
width: 100%; width: 100%;
height: 270px; height: 270px;
overflow: hidden; overflow: hidden;
background: linear-gradient( 180deg, #42ADF9 0%, #6CD1FF 51%, #E9F3F7 99%); background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
.top-bg-img { .top-bg-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
</style> </style>

80
pages/chat/ChatTopNavBar.vue
View File

@ -1,48 +1,46 @@
<template> <template>
<view class="nav-bar"> <view class="nav-bar">
<view class="nav-item" @click="showDrawer('showLeft')"> <view class="nav-item" @click="showDrawer('showLeft')">
<uni-icons type="bars" size="24" color="#333"></uni-icons> <uni-icons type="bars" size="24" color="#333"></uni-icons>
</view> </view>
<uni-drawer ref="showLeft" mode="left" :width="320"> <uni-drawer ref="showLeft" mode="left" :width="320">
<DrawerHome @closeDrawer="closeDrawer('showLeft')" /> <DrawerHome @closeDrawer="closeDrawer('showLeft')" />
</uni-drawer> </uni-drawer>
</view>
</view>
</template> </template>
<script setup> <script setup>
import { defineEmits, ref } from 'vue' import { defineEmits, ref } from "vue";
import DrawerHome from "@/pages/drawer/DrawerHome.vue"; import DrawerHome from "@/pages/drawer/DrawerHome.vue";
const showLeft = ref(false) const showLeft = ref(false);
// 打开窗口 // 打开窗口
const showDrawer = (e) => { const showDrawer = (e) => {
showLeft.value.open() showLeft.value.open();
} };
// 关闭窗口 // 关闭窗口
const closeDrawer = (e) => { const closeDrawer = (e) => {
showLeft.value.close() showLeft.value.close();
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-bar { .nav-bar {
display: flex; display: flex;
align-items: center; align-items: center;
height: 44px; height: 44px;
padding: 0 15px; padding: 0 15px;
.nav-item { .nav-item {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 10px; margin-right: 10px;
} }
.nav-item-icon { .nav-item-icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
</style> </style>

87
pages/chat/ChatTopWelcome.vue
View File

@ -1,18 +1,15 @@
<template> <template>
<view class="top-bg-content"> <view class="top-bg-content">
<view class="top-item"> <view class="top-item">
<!-- :style="backgroundStyle" --> <!-- :style="backgroundStyle" -->
<image <image
class="top-item-left" class="top-item-left"
:src="initPageImages.welcomeImageUrl" :src="initPageImages.welcomeImageUrl"
></image> ></image>
<image <image class="top-item-right" :src="initPageImages.logoImageUrl"></image>
class="top-item-right"
:src="initPageImages.logoImageUrl"
></image>
</view>
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
</view> </view>
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
</view>
</template> </template>
<script setup> <script setup>
@ -20,56 +17,56 @@ import { defineProps, computed, ref } from "vue";
import ChatCardAI from "./ChatCardAI.vue"; import ChatCardAI from "./ChatCardAI.vue";
const props = defineProps({ const props = defineProps({
initPageImages: { initPageImages: {
type: Object, type: Object,
default: { default: {
backgroundImageUrl: "", backgroundImageUrl: "",
logoImageUrl: "", logoImageUrl: "",
welcomeImageUrl: "", welcomeImageUrl: "",
},
},
welcomeContent: {
type: String,
default:
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
}, },
},
welcomeContent: {
type: String,
default:
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
},
}); });
// 计算背景样式 // 计算背景样式
const backgroundStyle = computed(() => { const backgroundStyle = computed(() => {
return { return {
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`, backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
backgroundSize: "cover", backgroundSize: "cover",
backgroundPosition: "center", backgroundPosition: "center",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}; };
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-bg-content { .top-bg-content {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
} }
.top-item { .top-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 32px; padding: 0 32px;
margin-bottom: -6px; margin-bottom: -6px;
} }
.top-item-left { .top-item-left {
width: 118px; width: 118px;
height: 52px; height: 52px;
} }
.top-item-right { .top-item-right {
width: 130px; width: 130px;
height: 130px; height: 130px;
} }
</style> </style>

302
pages/chat/styles/ChatMainList.scss
View File

@ -1,153 +1,155 @@
.chat-container { .chat-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #E9F3F7; background-color: #e9f3f7;
display: flex;
flex-direction: column;
overflow: hidden !important;
position: relative;
/* 确保在键盘弹起时布局正确 */
box-sizing: border-box;
.chat-container-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 0;
height: 270px;
background: linear-gradient( 180deg, #42ADF9 0%, #6CD1FF 51%, #E9F3F7 99%);
}
.chat-content {
width: 100vw;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
z-index: 1;
overflow: hidden;
}
.chat-container-top-bannar {
width: 100vw;
flex-shrink: 0;
touch-action: none;
}
.area-msg-list {
width: 100vw;
flex: 1;
overflow-y: auto;
min-height: 0;
height: 0;
padding: 4px 0 0;
overscroll-behavior: contain; /* 阻止滚动穿透 */
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
.message-item-ai {
display: flex;
justify-content: flex-start;
}
.message-item-mine {
display: flex;
justify-content: flex-end;
}
.message-item-other {
display: flex;
justify-content: center;
}
}
}
.footer-area {
width: 100vw;
flex-shrink: 0;
padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
background-color: #E9F3F7;
touch-action: pan-x;
overflow-x: auto;
overflow-y: hidden;
min-height: fit-content;
/* 安卓键盘适配 - 使用相对定位配合adjustPan */
position: relative;
z-index: 1;
transition: padding-bottom 0.3s ease;
/* 确保输入区域始终可见 */
// transform: translateZ(0);
// -webkit-transform: translateZ(0);
}
.area-input {
display: flex;
align-items: center;
border-radius: 22px;
background-color: #FFFFFF;
box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
margin: 0 12px;
.input-container-voice {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
align-self: flex-end;
image {
width: 22px;
height: 22px;
}
}
.input-container-send {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
align-self: flex-end;
image {
width: 28px;
height: 28px;
}
}
.textarea {
flex: 1;
max-height: 92px;
min-height: 22px;
font-size: 16px;
line-height: 22px;
margin-bottom: 2px;
align-items: center;
}
}
// 打字机光标闪烁动画 display: flex;
.typing-cursor { flex-direction: column;
display: inline-block; overflow: hidden !important;
color: #42ADF9; position: relative;
font-weight: bold; /* 确保在键盘弹起时布局正确 */
font-size: 1.2em; box-sizing: border-box;
animation: blink 1s infinite;
margin-left: 2px;
}
@keyframes blink { .chat-container-bg {
0%, 50% { position: fixed;
opacity: 1; top: 0;
} left: 0;
51%, 100% { right: 0;
opacity: 0; z-index: 0;
} height: 270px;
} background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
}
.chat-content {
width: 100vw;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
z-index: 1;
overflow: hidden;
}
.chat-container-top-bannar {
width: 100vw;
flex-shrink: 0;
touch-action: none;
}
.area-msg-list {
width: 100vw;
flex: 1;
overflow-y: auto;
min-height: 0;
height: 0;
padding: 4px 0 0;
overscroll-behavior: contain; /* 阻止滚动穿透 */
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
.message-item-ai {
display: flex;
justify-content: flex-start;
}
.message-item-mine {
display: flex;
justify-content: flex-end;
}
.message-item-other {
display: flex;
justify-content: center;
}
}
}
.footer-area {
width: 100vw;
flex-shrink: 0;
padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
background-color: #e9f3f7;
touch-action: pan-x;
overflow-x: auto;
overflow-y: hidden;
min-height: fit-content;
/* 安卓键盘适配 - 使用相对定位配合adjustPan */
position: relative;
z-index: 1;
transition: padding-bottom 0.3s ease;
/* 确保输入区域始终可见 */
// transform: translateZ(0);
// -webkit-transform: translateZ(0);
}
.area-input {
display: flex;
align-items: center;
border-radius: 22px;
background-color: #ffffff;
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
margin: 0 12px;
.input-container-voice {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
align-self: flex-end;
image {
width: 22px;
height: 22px;
}
}
.input-container-send {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
align-self: flex-end;
image {
width: 28px;
height: 28px;
}
}
.textarea {
flex: 1;
max-height: 92px;
min-height: 22px;
font-size: 16px;
line-height: 22px;
margin-bottom: 2px;
align-items: center;
}
}
// 打字机光标闪烁动画
.typing-cursor {
display: inline-block;
color: #42adf9;
font-weight: bold;
font-size: 1.2em;
animation: blink 1s infinite;
margin-left: 2px;
}
@keyframes blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}

88
pages/drawer/DrawerHome.vue
View File

@ -1,50 +1,54 @@
<template> <template>
<view class="drawer-home"> <view class="drawer-home">
<view class="drawer-home-nav"> <view class="drawer-home-nav">
<uni-icons type="closeempty" size="22" color="#333333" class="close-icon" @click="closeDrawer"></uni-icons> <uni-icons
<text class="title">我的</text> type="closeempty"
</view> size="22"
color="#333333"
<MineSetting/> class="close-icon"
@click="closeDrawer"
</view> ></uni-icons>
<text class="title">我的</text>
</view>
<MineSetting />
</view>
</template> </template>
<script setup> <script setup>
import MineSetting from './MineSetting.vue' import MineSetting from "./MineSetting.vue";
import { defineEmits } from 'vue' import { defineEmits } from "vue";
const emits = defineEmits(['closeDrawer']) const emits = defineEmits(["closeDrawer"]);
const closeDrawer = () => { const closeDrawer = () => {
emits('closeDrawer') emits("closeDrawer");
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.drawer-home { .drawer-home {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: #fff; background-color: #fff;
padding-top: 44px; padding-top: 44px;
} }
.drawer-home-nav { .drawer-home-nav {
position: relative; position: relative;
padding: 12px; padding: 12px;
display: flex; display: flex;
justify-content: center; /* 文字水平居中 */ justify-content: center; /* 文字水平居中 */
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
.title { .title {
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
color: #333333; color: #333333;
} }
.close-icon { .close-icon {
position: absolute; position: absolute;
left: 12px; /* 距离左边12px */ left: 12px; /* 距离左边12px */
} }
} }
</style> </style>

68
pages/drawer/MineSetting.vue
View File

@ -19,10 +19,10 @@
<!-- 中间功能入口（循环渲染） --> <!-- 中间功能入口（循环渲染） -->
<view class="menu-card"> <view class="menu-card">
<view <view
class="menu-item" class="menu-item"
v-for="(item, index) in menuList" v-for="(item, index) in menuList"
:key="index" :key="index"
@click="handleMenuClick(item)" @click="handleMenuClick(item)"
> >
<text class="label">{{ item.label }}</text> <text class="label">{{ item.label }}</text>
@ -36,60 +36,64 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from "vue";
import { getLoginUserPhone } from '@/request/api/LoginApi' import { getLoginUserPhone } from "@/request/api/LoginApi";
// 假数据 // 假数据
const userInfo = ref({ const userInfo = ref({
avatar: '/static/default-avatar.png', avatar: "/static/default-avatar.png",
nickname: '微信用户', nickname: "微信用户",
phone: '' phone: "",
}) });
// 功能菜单列表（带 type 区分操作类型） // 功能菜单列表（带 type 区分操作类型）
const menuList = ref([ const menuList = ref([
// { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' }, // { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' },
{ label: '账号注销', type: 'navigate', url: '/pages/cancel-account/cancel-account' }, {
label: "账号注销",
type: "navigate",
url: "/pages/cancel-account/cancel-account",
},
// { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' }, // { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' },
{ label: '联系客服', type: 'action', action: 'contactService' } { label: "联系客服", type: "action", action: "contactService" },
]) ]);
// 生命周期钩子 // 生命周期钩子
onMounted(() => { onMounted(() => {
getLoginUserPhoneInfo() getLoginUserPhoneInfo();
}) });
const getLoginUserPhoneInfo = async () => { const getLoginUserPhoneInfo = async () => {
const res = await getLoginUserPhone() const res = await getLoginUserPhone();
if (res.code === 0) { if (res.code === 0) {
userInfo.value.phone = res.data userInfo.value.phone = res.data;
} }
} };
// 处理菜单点击 // 处理菜单点击
const handleMenuClick = (item) => { const handleMenuClick = (item) => {
if (item.type === 'navigate' && item.url) { if (item.type === "navigate" && item.url) {
uni.navigateTo({ url: item.url }) uni.navigateTo({ url: item.url });
} else if (item.type === 'action') { } else if (item.type === "action") {
if (item.action === 'contactService') { if (item.action === "contactService") {
uni.showToast({ title: '联系客服功能待实现', icon: 'none' }) uni.showToast({ title: "联系客服功能待实现", icon: "none" });
} }
} }
} };
// 退出登录 // 退出登录
const handleLogout = () => { const handleLogout = () => {
uni.showModal({ uni.showModal({
title: '温馨提示', title: "温馨提示",
content: '确定要退出登录吗？', content: "确定要退出登录吗？",
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
uni.clearStorageSync() uni.clearStorageSync();
uni.reLaunch({ url: '/pages/login/index' }) uni.reLaunch({ url: "/pages/login/index" });
} }
} },
}) });
} };
</script> </script>
<style scoped> <style scoped>

37
pages/module/attach/AttachListComponent.vue
View File

@ -12,32 +12,31 @@
</template> </template>
<script setup> <script setup>
import { ref, nextTick, defineEmits } from 'vue' import { ref, nextTick, defineEmits } from "vue";
import { onMounted } from 'vue' import { onMounted } from "vue";
import { SCROLL_TO_BOTTOM } from '@/constant/constant' import { SCROLL_TO_BOTTOM } from "@/constant/constant";
const props = defineProps({ const props = defineProps({
question: { question: {
type: String, type: String,
default: '' default: "",
} },
}) });
const tags = ref([]) const tags = ref([]);
const emits = defineEmits(['replySent']); const emits = defineEmits(["replySent"]);
const handleClick = (item) => { const handleClick = (item) => {
emits('replySent', item) emits("replySent", item);
} };
onMounted(() => { onMounted(() => {
tags.value = props.question.split(/[&|;]/).filter(tag => tag.trim() !== '') tags.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== "");
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true) uni.$emit(SCROLL_TO_BOTTOM, true);
}, 300) }, 300);
}); });
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -59,7 +58,7 @@ onMounted(() => {
} }
.tag-text { .tag-text {
color: #00A6FF; /* 蓝色文字，可根据设计调整 */ color: #00a6ff; /* 蓝色文字，可根据设计调整 */
font-size: 14px; font-size: 14px;
} }
</style> </style>

144
pages/module/banner/ActivityListComponent.vue
View File

@ -1,82 +1,82 @@
<template> <template>
<view class="container"> <view class="container">
<swiper class="swiper" circular <swiper
:indicator-dots="activityList.length > 1" class="swiper"
indicator-color="#FFFFFF" circular
indicator-active-color="#00A6FF" :indicator-dots="activityList.length > 1"
:autoplay="autoplay" indicator-color="#FFFFFF"
:interval="interval" indicator-active-color="#00A6FF"
:duration="duration"> :autoplay="autoplay"
<swiper-item v-for="item in activityList" :key="item.id"> :interval="interval"
<view class="swiper-item" @click="handleClick(item)"> :duration="duration"
<image :src="item.activityCover" mode="aspectFill"></image> >
<view class="corner-btn">快速预定</view> <swiper-item v-for="item in activityList" :key="item.id">
</view> <view class="swiper-item" @click="handleClick(item)">
</swiper-item> <image :src="item.activityCover" mode="aspectFill"></image>
</swiper> <view class="corner-btn">快速预定</view>
</view>
</view> </swiper-item>
</swiper>
</view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from "vue";
import { SEND_COMMAND_TEXT } from '@/constant/constant' import { SEND_COMMAND_TEXT } from "@/constant/constant";
const autoplay = ref(true) const autoplay = ref(true);
const interval = ref(3000) const interval = ref(3000);
const duration = ref(500) const duration = ref(500);
const props = defineProps({ const props = defineProps({
activityList: { activityList: {
type: Array, type: Array,
default: [] default: [],
} },
}) });
const handleClick = (item) => {
uni.$emit(SEND_COMMAND_TEXT, '快速预定')
}
const handleClick = (item) => {
uni.$emit(SEND_COMMAND_TEXT, "快速预定");
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
margin-bottom: 6px; margin-bottom: 6px;
.uni-margin-wrap { .uni-margin-wrap {
width: 100%; width: 100%;
} }
.swiper { .swiper {
height: 120px; height: 120px;
border-radius: 8px; border-radius: 8px;
} }
.swiper-item { .swiper-item {
position: relative; position: relative;
display: block; display: block;
height: 120px; height: 120px;
line-height: 120px; line-height: 120px;
text-align: center; text-align: center;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
display: block; display: block;
} }
.corner-btn { .corner-btn {
position: absolute; position: absolute;
right: 12px; right: 12px;
bottom: 12px; bottom: 12px;
background-color: #ffeb00; background-color: #ffeb00;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 4px 12px; padding: 4px 12px;
border-radius: 20px; border-radius: 20px;
line-height: 1.5; line-height: 1.5;
} }
} }
}
} </style>
</style>

1
pages/module/booking/QuickBookingCalender.vue
View File

@ -22,7 +22,6 @@
<text class="calendar-text">日历</text> <text class="calendar-text">日历</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>

2
pages/module/booking/QuickBookingComponent.vue
View File

@ -71,4 +71,4 @@ onMounted(() => {
width: 100%; width: 100%;
} }
} }
</style> </style>

45
pages/module/detail/DetailCardCompontent.vue
View File

@ -1,36 +1,33 @@
<template> <template>
<view class="container"> <view class="container">
<template v-if="toolCall.picture && toolCall.picture.length > 0"> <template v-if="toolCall.picture && toolCall.picture.length > 0">
<ModuleTitle :title="图片详情" /> <ModuleTitle :title="图片详情" />
<ImageSwiper :images="toolCall.picture" /> <ImageSwiper :images="toolCall.picture" />
</template> </template>
<template v-if="toolCall.commodityList"> <template v-if="toolCall.commodityList">
<DetailCardGoodsContentList :commodityList="toolCall.commodityList" /> <DetailCardGoodsContentList :commodityList="toolCall.commodityList" />
</template> </template>
</view>
</view>
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue' import { defineProps } from "vue";
import ModuleTitle from '@/components/ModuleTitle/index.vue' import ModuleTitle from "@/components/ModuleTitle/index.vue";
import ImageSwiper from '@/components/ImageSwiper/index.vue' import ImageSwiper from "@/components/ImageSwiper/index.vue";
import DetailCardGoodsContentList from './DetailCardGoodsContentList.vue' import DetailCardGoodsContentList from "./DetailCardGoodsContentList.vue";
const props = defineProps({
toolCall: {
type: Object,
default: {}
}
})
const props = defineProps({
toolCall: {
type: Object,
default: {},
},
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 100%; width: 100%;
padding: 12px 0; padding: 12px 0;
} }
</style> </style>

65
pages/module/discovery/DiscoveryCardComponent.vue
View File

@ -1,43 +1,42 @@
<template> <template>
<view class="container"> <view class="container">
<view v-for="item in themeDTOList" :key="item.title"> <view v-for="item in themeDTOList" :key="item.title">
<RecommendPostsList :recommendTheme="item" /> <RecommendPostsList :recommendTheme="item" />
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, nextTick } from 'vue' import { ref, nextTick } from "vue";
import { onMounted } from 'vue' import { onMounted } from "vue";
import { discoveryCradComponent } from '@/request/api/MainPageDataApi' import { discoveryCradComponent } from "@/request/api/MainPageDataApi";
import RecommendPostsList from '../recommend/RecommendPostsList.vue' import RecommendPostsList from "../recommend/RecommendPostsList.vue";
import { SCROLL_TO_BOTTOM } from '@/constant/constant' import { SCROLL_TO_BOTTOM } from "@/constant/constant";
const themeDTOList = ref([]) const themeDTOList = ref([]);
const loadDiscoveryCradComponent = async () => { const loadDiscoveryCradComponent = async () => {
const res = await discoveryCradComponent() const res = await discoveryCradComponent();
if(res.code === 0 && res.data) { if (res.code === 0 && res.data) {
themeDTOList.value = res.data.themeDTOList themeDTOList.value = res.data.themeDTOList;
nextTick(() => {
setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true)
}, 300)
});
}
}
onMounted(() => { nextTick(() => {
loadDiscoveryCradComponent() setTimeout(() => {
}) uni.$emit(SCROLL_TO_BOTTOM, true);
}, 300);
});
}
};
onMounted(() => {
loadDiscoveryCradComponent();
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 100%; width: 100%;
flex: 1; flex: 1;
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>

88
pages/module/discovery/DiscoveryCradContentList.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<view class="container"> <view class="container">
<ModuleTitle :title="recommendTheme.themeName" /> <ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll"> <view class="container-scroll">
<view <view
v-for="(item, index) in recommendTheme.recommendPostsList" v-for="(item, index) in recommendTheme.recommendPostsList"
:key="index" :key="index"
> >
<view class="mk-card-item" @click="sendReply(item)"> <view class="mk-card-item" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="widthFix"></image> <image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text> <text>{{ item.topic }}</text>
</view>
</view>
</view> </view>
</view>
</view> </view>
</view>
</template> </template>
<script setup> <script setup>
@ -20,48 +20,48 @@ import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant"; import { RECOMMEND_POSTS_TITLE } from "@/constant/constant";
import { defineProps } from "vue"; import { defineProps } from "vue";
const props = defineProps({ const props = defineProps({
recommendTheme: { recommendTheme: {
type: Object, type: Object,
default: {}, default: {},
}, },
}); });
const sendReply = (item) => { const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, ""); const topic = item.userInputContent || item.topic.replace(/^#/, "");
uni.$emit(RECOMMEND_POSTS_TITLE, topic); uni.$emit(RECOMMEND_POSTS_TITLE, topic);
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
.container-scroll { .container-scroll {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
margin-top: 4px; margin-top: 4px;
.mk-card-item { .mk-card-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
width: 188px; width: 188px;
height: 154px; height: 154px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
margin-right: 8px; margin-right: 8px;
image { image {
width: 188px; width: 188px;
height: 112px; height: 112px;
} }
text { text {
padding: 12px; padding: 12px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
color: #333333; color: #333333;
} }
}
} }
}
} }
</style> </style>

42
pages/module/recommend/RecommendPostsComponent.vue
View File

@ -1,29 +1,27 @@
<template> <template>
<view class="container"> <view class="container">
<view v-for="item in recommendThemeList" :key="item.themeName"> <view v-for="item in recommendThemeList" :key="item.themeName">
<RecommendPostsList :recommendTheme="item" /> <RecommendPostsList :recommendTheme="item" />
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import RecommendPostsList from './RecommendPostsList.vue'; import RecommendPostsList from "./RecommendPostsList.vue";
import { defineProps } from 'vue' import { defineProps } from "vue";
const props = defineProps({ const props = defineProps({
recommendThemeList: { recommendThemeList: {
type: Array, type: Array,
default: [] default: [],
} },
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 100%; width: 100%;
flex: 1; flex: 1;
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>