95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<script setup>
|
||
import { onMounted, ref } from 'vue'
|
||
|
||
const userMessage = ref('')
|
||
const messages = ref([
|
||
{ sender: 'ai', text: '欢迎！请问有什么可以帮助您的吗？' },
|
||
])
|
||
|
||
function sendMessage() {
|
||
if (userMessage.value.trim() === '')
|
||
return
|
||
|
||
messages.value.push({ sender: 'user', text: userMessage.value })
|
||
|
||
// AI 统一回复（中文套话）
|
||
setTimeout(() => {
|
||
messages.value.push({
|
||
sender: 'ai',
|
||
text: '感谢您的提问！我们会尽力为您提供帮助。',
|
||
})
|
||
}, 1000)
|
||
|
||
userMessage.value = ''
|
||
}
|
||
const safeAreaTop = ref(44)
|
||
onShow(() => {
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
if (res.safeArea && res.safeArea.top) {
|
||
safeAreaTop.value = res.safeArea.top // 设置安全区顶部距离
|
||
}
|
||
},
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b" style="paddingTop:44px">
|
||
<view class="chat-page mx-4 flex flex-col rounded-xl shadow-lg">
|
||
<view class="chat-window flex-1 overflow-auto border p-4">
|
||
<view v-for="(message, index) in messages" :key="index" class="mb-2">
|
||
<view
|
||
v-if="message.sender === 'ai'"
|
||
class="inline-block max-w-max rounded-xl bg-white p-2 text-left text-green-600 font-medium shadow-md"
|
||
>
|
||
{{ message.text }}
|
||
</view>
|
||
<view
|
||
v-else
|
||
class="ml-auto inline-block max-w-max rounded-xl from-sky-300 via-sky-300 to-sky-300 bg-gradient-to-r p-2 text-right text-white font-medium shadow-md"
|
||
>
|
||
{{ message.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="input-area mx-2 flex items-center gap-2 p-4">
|
||
<wd-input v-model="userMessage" placeholder="请输入您的问题..." class="flex-1" size="large" />
|
||
<wd-button custom-class="shadow" type="primary" @click="sendMessage">
|
||
发送
|
||
</wd-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="disclaimer">
|
||
<a href="https://beian.miit.gov.cn">
|
||
备案号：琼ICP备2024038584号-2
|
||
</a>
|
||
<div>
|
||
海南省学宇思网络科技有限公司版权所有
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.chat-page {
|
||
// #ifdef H5
|
||
height: calc(100vh - 144px);
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
height: calc(100vh - 188px);
|
||
// #endif
|
||
|
||
}
|
||
</style>
|
||
|
||
<route lang="json">
|
||
{
|
||
"layout": "home",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|