index32.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view id='app' style="bottom: {{KeyBoardHeight}}px;">
  3. <view class="placeholder"></view>
  4. <view class="head" :style="{backgroundColor:styleData.color}">
  5. <text :style="{color:styleData.fontColor}">睿宝AI</text>
  6. <switch @change="styleChange(styleData)" />
  7. </view>
  8. <view class="pageView" :style="{backgroundColor:styleData.color}">
  9. <view class="sidebar-left"></view>
  10. <view class="body">
  11. <view class="list-wrap">
  12. <scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
  13. <!-- 聊天主体 -->
  14. <view id="content-overflow">
  15. <view class="scrollview-item" v-for="(item,index) in msgList.chatList" :key='index'>
  16. <!-- user方-聊天内容 -->
  17. <view class="item self" v-if="item.userContent != ''">
  18. <image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
  19. <view class="content right" disabled :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">{{ item.userContent }}</view>
  20. </view>
  21. <!-- ai方-聊天内容 -->
  22. <view class="item other">
  23. <view class="">
  24. <view class="loadingPoint" v-if='msgList.isloading[index]'>
  25. <loadingPointsVue></loadingPointsVue>
  26. </view>
  27. <view class="content left" v-if='!msgList.isloading[index]' :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
  28. {{ msgList.otherChatList[index] }}
  29. </view>
  30. </view>
  31. <image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
  32. </view>
  33. </view>
  34. </view>
  35. </scroll-view>
  36. </view>
  37. <view class="chat-bottom">
  38. <view class="uni-label">
  39. <label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor}">{{item}}</label>
  40. </view>
  41. <view class="send-msg">
  42. <view class="uni-textarea">
  43. <!-- bindkeyboardheightchange='getKeyBoardHeight' - 添加键盘弹起触发属性 -->
  44. <textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
  45. confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" />
  46. </view>
  47. <view class="uni-button">
  48. <button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
  49. </view>
  50. </view>
  51. </view>s
  52. </view>
  53. <view class="sidebar-right">
  54. <image src="../../static/logo.png" mode="aspectFit"></image>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script setup>
  60. import {
  61. nextTick,
  62. reactive,
  63. ref,
  64. watch
  65. } from 'vue';
  66. import {
  67. getDataList
  68. } from '../../api/ChatApp.js'
  69. import axios from 'axios';
  70. import loadingPointsVue from '../../components/loadingPoints.vue';
  71. import {styleChange,handleSend,scrollToBottom,shortcuts} from "../../until/fun.js"
  72. const msgList = reactive({
  73. // 输入框
  74. chatMsg: '',
  75. // 聊天数据列表
  76. chatList: [],
  77. // 滚动距离
  78. scrollTop: 0,
  79. //
  80. timer: null,
  81. textCount: 0,
  82. otherContent: '',
  83. otherChatList: [],
  84. len: 0,
  85. isloading: [],
  86. isClick: false,
  87. // 键盘弹起高度
  88. KeyBoardHeight:0
  89. })
  90. const styleData = reactive({
  91. value:false,
  92. color:'#f5f5f5',
  93. fontColor:"black",
  94. btnColor:"rgb(30,144,255)",
  95. contentColor:"#fff",
  96. labelColor:"#fff"
  97. })
  98. const labelList = ref([
  99. "我要加油",
  100. "92号",
  101. "95号",
  102. "98号",
  103. "加油卡",
  104. "易捷加油"
  105. ])
  106. //滚动至聊天底部
  107. watch([msgList.otherChatList, msgList.chatList], (newVal) => {
  108. scrollToBottom(msgList)
  109. })
  110. </script>
  111. <style>
  112. @import url("../../theme/chat32.css");
  113. @import url("../../theme/public.css");
  114. </style>