index32.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <view id='app'>
  3. <view class="placeholder"></view>
  4. <view class="head">
  5. <text>睿宝AI</text>
  6. </view>
  7. <view class="pageView">
  8. <view class="sidebar-left"></view>
  9. <view class="body">
  10. <view class="list-wrap">
  11. <scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
  12. <!-- 聊天主体 -->
  13. <view id="content-overflow">
  14. <view class="scrollview-item" v-for="(item,index) in msgList.chatList" :key='index'>
  15. <!-- user方-聊天内容 -->
  16. <view class="item self" v-if="item.userContent != ''">
  17. <image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
  18. <view class="content right" disabled>{{ item.userContent }}</view>
  19. </view>
  20. <!-- ai方-聊天内容 -->
  21. <view class="item other">
  22. <view class="">
  23. <view class="loadingPoint" v-if='msgList.isloading[index]'>
  24. <loadingPointsVue></loadingPointsVue>
  25. </view>
  26. <view class="content left" v-if='!msgList.isloading[index]'>
  27. {{ msgList.otherChatList[index] }}
  28. </view>
  29. </view>
  30. <image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
  31. </view>
  32. </view>
  33. </view>
  34. </scroll-view>
  35. </view>
  36. <view class="chat-bottom">
  37. <view class="send-msg">
  38. <view class="uni-textarea">
  39. <textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
  40. confirm-type="send" @confirm="handleSend" maxlength="300" />
  41. </view>
  42. <view class="uni-button">
  43. <button class="send-btn" @click="handleSend" type="primary">发送</button>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="sidebar-right">
  49. <image src="../../static/logo.png" mode="aspectFit"></image>
  50. </view>
  51. </view>
  52. </view>
  53. </template>
  54. <script setup>
  55. import {
  56. nextTick,
  57. reactive,
  58. watch
  59. } from 'vue';
  60. import {
  61. getDataList
  62. } from '../../api/ChatApp.js'
  63. import axios from 'axios';
  64. import loadingPointsVue from '../../components/loadingPoints.vue';
  65. const msgList = reactive({
  66. // 输入框
  67. chatMsg: '',
  68. // 聊天数据列表
  69. chatList: [],
  70. // 滚动距离
  71. scrollTop: 0,
  72. //
  73. timer: null,
  74. textCount: 0,
  75. otherContent: '',
  76. otherChatList: [],
  77. len: 0,
  78. isloading: [],
  79. isClick: false
  80. })
  81. // 发送消息
  82. const handleSend = async () => {
  83. msgList.isClick = !msgList.isClick
  84. const data = {
  85. AppId: '0c8ff06b-91d9-43f7-b61e-ca5da1db15d4',
  86. AId: 'TK1234',
  87. content: ''
  88. }
  89. if (msgList.chatMsg != '') {
  90. msgList.isloading[msgList.len] = true
  91. msgList.len++
  92. let obj = {
  93. otherContent: '',
  94. userContent: '',
  95. image: ""
  96. }
  97. data.content = msgList.chatMsg
  98. obj.userContent = msgList.chatMsg
  99. msgList.chatList.push(obj)
  100. obj.otherContent = await GetNewsList(data)
  101. // await sleep(16000);
  102. getChatContent(obj.otherContent, msgList.len)
  103. }
  104. msgList.otherContent = ''
  105. }
  106. // 滚动条回到最底部
  107. const scrollToBottom = (() => {
  108. nextTick(() => {
  109. const query = uni.createSelectorQuery();
  110. query.select("#content-box").boundingClientRect()
  111. query.select("#content-overflow").boundingClientRect()
  112. query.exec(res => {
  113. const scrollViewHeight = res[0].height
  114. const scrollContentHeight = res[1].height
  115. if (scrollViewHeight < scrollContentHeight) {
  116. const scrollTop = scrollContentHeight - scrollViewHeight
  117. msgList.scrollTop = scrollTop
  118. }
  119. })
  120. })
  121. })
  122. //滚动至聊天底部
  123. watch([msgList.otherChatList, msgList.chatList], (newVal) => {
  124. scrollToBottom()
  125. })
  126. // 调用数据接口
  127. const GetNewsList = async (data) => {
  128. msgList.chatMsg = ''
  129. var res = await getDataList(data)
  130. console.log(res)
  131. return res
  132. }
  133. // ------- 聊天逐字输出 -----------
  134. // 延时函数
  135. const sleep = ((delaytime = 10000) => {
  136. return new Promise(resolve => setTimeout(resolve, delaytime));
  137. })
  138. // 逐字显示内容
  139. const getChatContent = ((text, index) => {
  140. console.log(index)
  141. msgList.timer = setInterval(() => {
  142. msgList.textCount++;
  143. if (msgList.textCount == text.length + 1) {
  144. msgList.otherChatList[index - 1] = text;
  145. clearInterval(msgList.timer);
  146. } else {
  147. // 取字符串子串
  148. let nowStr = text.substring(0, msgList.textCount);
  149. msgList.otherChatList[index - 1] = nowStr;
  150. }
  151. }, 50);
  152. console.log(msgList.timer)
  153. msgList.textCount = 0
  154. msgList.isloading[index - 1] = false
  155. msgList.isClick = !msgList.isClick
  156. })
  157. </script>
  158. <style>
  159. @import url("../../theme/chat32.css");
  160. </style>