index32.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <view id='app'>
  3. <view class="zhanwei"></view>
  4. <view class="pageView">
  5. <view class="sidebar-left"></view>
  6. <view class="body">
  7. <view class="head">
  8. <text>uniapp聊天框</text>
  9. </view>
  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.myList" :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" v-if="item.otherContent != ''">
  22. <view class="content left">{{ item.otherContent }}</view>
  23. <image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
  24. </view>
  25. </view>
  26. </view>
  27. </scroll-view>
  28. </view>
  29. <view class="chat-bottom">
  30. <view class="send-msg">
  31. <view class="uni-textarea">
  32. <textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
  33. confirm-type="send" @confirm="handleSend" maxlength="300" />
  34. </view>
  35. <view class="uni-button">
  36. <button class="send-btn" @click="handleSend" type="primary">发送</button>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="sidebar-right">
  42. <image src="../../static/logo.png" mode="aspectFit"></image>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script setup>
  48. import {
  49. nextTick,
  50. reactive,
  51. watch
  52. } from 'vue';
  53. import {
  54. onShow
  55. } from '@dcloudio/uni-app'
  56. const msgList = reactive({
  57. chatMsg: '',
  58. myList: [{
  59. userContent: '',
  60. otherContent: '',
  61. image: ''
  62. }, ],
  63. // 滚动距离
  64. scrollTop: 0,
  65. boxWord: '选择无处不在,面朝大海春暖花开是海子的选择,人不是生来被打败的是海明威的选择,人固有一死,或重于泰山,或轻于鸿毛,是司马迁的选择,选择是一次又一次自我重塑的过程,让我们不断地成长,不断地完善,如果说人生是一次不断选择的旅程,那么当千帆阅尽最终留下的就是一片属于自己的独一无二的风景 ——董卿《朗读者》'
  66. })
  67. // 发送消息
  68. const handleSend = (() => {
  69. if (msgList.chatMsg != '') {
  70. let obj = {
  71. otherContent: msgList.boxWord,
  72. userContent: msgList.chatMsg,
  73. image: ""
  74. }
  75. msgList.myList.push(obj)
  76. }
  77. msgList.chatMsg = ''
  78. })
  79. // 滚动条回到最底部
  80. const scrollToBottom = (() => {
  81. nextTick(() => {
  82. const query = uni.createSelectorQuery();
  83. query.select("#content-box").boundingClientRect()
  84. query.select("#content-overflow").boundingClientRect()
  85. query.exec(res => {
  86. const scrollViewHeight = res[0].height
  87. const scrollContentHeight = res[1].height
  88. if (scrollViewHeight < scrollContentHeight) {
  89. const scrollTop = scrollContentHeight - scrollViewHeight
  90. msgList.scrollTop = scrollTop
  91. }
  92. })
  93. })
  94. })
  95. //滚动至聊天底部
  96. watch(msgList.myList, (newVal) => {
  97. scrollToBottom()
  98. })
  99. </script>
  100. <style>
  101. @import url("../../theme/chat32.css");
  102. </style>