xiangshan
/
yxdth5
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

加载效果

This commit is contained in:
liuyalei 2024-03-06 16:41:53 +08:00
parent 1f3619e5be
commit 6b1385b4b0
1 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/IndexChat.vue
View File

@ -240,11 +240,18 @@
</div>
</div>
</div>
<div class="Right" v-else>
<div class="Right" v-if="message.isMe">
<div class="Right_mesg">
<div v-if="message.type == 'txt'" class="txt txt_r"> {{ message.text }}</div>
</div>
</div>
<div class="Left" v-if="message.type=='loading'">
<div class="txt_l middle " >
<!-- <van-loading type="spinner" color="#1989fa">{{ message.text }} </van-loading> -->
<van-loading type="spinner" color="#000">{{ message.text }} </van-loading>
</div>
</div>
</div>
</div>
@ -254,8 +261,9 @@
<div class="c_bottom">
<img src="../assets/3.png" >
<input v-model="inputText" type="text" placeholder="有问题尽管问我~" @keydown.enter="sendMessage" class="sendinput" />
<img src="../assets/3.png">
<input v-model="inputText" type="text" placeholder="有问题尽管问我~" @keydown.enter="sendMessage"
class="sendinput" />
<div class="w_icon">
<img src="../assets/4.png" alt="">
</div>
@ -264,15 +272,20 @@
</div>
</template>
<script setup>
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import http from '@/api/http.js'
// import http from '@/utils/request.js'
let recomanTags = ref(['公积金查询', '2024放假安排', '附近推荐的锻炼场所'])
let inputText = ref('')
let messages = reactive([
// let messages = reactive([
// ]);
let messages = ref([
]);
let kearr = reactive([{ name: '神经内科', path: '' }, { name: '儿科', path: '' }, { name: '外科', path: '' }])
let messagesCopy = reactive([
{ id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },/* */
@ -299,12 +312,17 @@ const sendMessage = () => {
console.log("信息发送成功", inputText.value);
let messageValue = inputText.value.trim()
if (inputText.value.trim()) {
messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' });
messages.value.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt', });
messages.value.push({ id: Date.now(), text: '思考中。。。', isMe: true, type: 'loading', });
http.post('/generate', { "text": messageValue }).then((res) => {
console.log("res", res);
// var msg = JSON.parse(res.name)
var msg = res.response
messages.push({ id: Date.now() + 1, text: msg, isMe: false, type: 'txt' });
messages.value.push({ id: Date.now() + 1, text: msg, isMe: false, type: 'txt' });
messages.value.splice(messages.value.length - 2, 1);
// console.log("messages.value",messages.value,dd);
scollToButtom()
}).catch(error => {
console.log(error)
@ -339,7 +357,8 @@ const goke = () => {
const insertWord = '您想看普通还是专家门诊？如有其他需求，也请告诉我'
messagesCopy[11].id = Date.now();
messagesCopy[11].text = insertWord
messages.push(messagesCopy[11]);
messages.value.push(messagesCopy[11]);
scollToButtom();
};
// 预约医生
@ -362,18 +381,21 @@ onMounted(() => {
scollToButtom()
// messages
setTimeout(() => {
messages.push({ id: Date.now(), type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false });
messages.value.push({ id: Date.now(), type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false });
}, 500);
})
</script>
<style lang="scss" scoped>
::-webkit-input-placeholder {
color: #999999;
font-size: 14px;
}
.middle{
display: flex;justify-content: center;align-items: center; height: 64px;width: 300px;
}
.sendinput {
height: 36px;
width: calc(100vw - 154px);
@ -774,6 +796,7 @@ onMounted(() => {
justify-content: center;
flex-direction: column;
cursor: default;
.heng {
width: 21px;
height: 1px;
@ -1190,4 +1213,3 @@ onMounted(() => {
}
}
</style>