104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="chat-list">
|
||
|
|
<div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
|
||
|
|
<NoticeItem :value="message" @send-message="handleSendMessage" />
|
||
|
|
</div>
|
||
|
|
<!-- Loading效果 -->
|
||
|
|
<div v-if="isLoading" class="chat-message-item">
|
||
|
|
<ChatLoading />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import NoticeItem from './NoticeItem.vue'
|
||
|
|
import ChatLoading from './ChatLoading.vue'
|
||
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
// 定义消息类型
|
||
|
|
interface ChatMessage {
|
||
|
|
id: string
|
||
|
|
content: string
|
||
|
|
userId: string
|
||
|
|
time: string
|
||
|
|
thumb: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// 定义组件暴露的方法类型
|
||
|
|
interface NoticeListExpose {
|
||
|
|
simulateSendMessage: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const isLoading = ref<boolean>(false)
|
||
|
|
let loadingTimer: any = null
|
||
|
|
|
||
|
|
const chatMessages = ref<ChatMessage[]>([
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
content: 'I want a chic outfit for dinner.',
|
||
|
|
userId: '1',
|
||
|
|
time: '14:30',
|
||
|
|
thumb: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
content:
|
||
|
|
"Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
|
||
|
|
userId: '2',
|
||
|
|
time: '14:31',
|
||
|
|
thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
content: "It's a romantic date, and I prefer classic elegance.",
|
||
|
|
userId: '1',
|
||
|
|
time: '14:32',
|
||
|
|
thumb: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '4',
|
||
|
|
content:
|
||
|
|
"Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
|
||
|
|
userId: '2',
|
||
|
|
time: '14:33',
|
||
|
|
thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
const handleSendMessage = (message: string): void => {
|
||
|
|
console.log('list发送消息:', message)
|
||
|
|
}
|
||
|
|
|
||
|
|
const simulateSendMessage = (): void => {
|
||
|
|
isLoading.value = true
|
||
|
|
|
||
|
|
loadingTimer = setTimeout(() => {
|
||
|
|
const newMessage: ChatMessage = {
|
||
|
|
id: Date.now().toString(),
|
||
|
|
content:
|
||
|
|
"Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
|
||
|
|
userId: '2',
|
||
|
|
time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
|
||
|
|
thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
|
||
|
|
}
|
||
|
|
|
||
|
|
chatMessages.value.push(newMessage)
|
||
|
|
isLoading.value = false
|
||
|
|
}, 3000)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.chat-list {
|
||
|
|
padding: 16px;
|
||
|
|
background-color: #fff;
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message-item {
|
||
|
|
margin-bottom: 4.84rem;
|
||
|
|
}
|
||
|
|
</style>
|