index32.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <view id='app' :style="`bottom:${msgList.KeyBoardHeight}px;background-color:${styleData.color}`">
  3. <view class="placeholder" :style="`height: ${styleData.screenWidth}vh`"></view>
  4. <view class="head" :style="{backgroundColor:styleData.color}">
  5. <text :style="{color:styleData.fontColor}">睿宝AI</text>
  6. <view class="switch">
  7. <switch @change="styleChange(styleData)" />
  8. <switch class='second' @change="screenChange()" />
  9. </view>
  10. </view>
  11. <view class="pageView" :style="{backgroundColor:styleData.color}">
  12. <view class="sidebar-left"></view>
  13. <view class="body" :style="`height:${95-styleData.screenWidth}vh`">
  14. <view class="list-wrap">
  15. <scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
  16. <!-- 聊天主体 -->
  17. <view id="content-overflow">
  18. <view class="scrollview-item" v-for="(item,index) in msgList.chatList" :key='index'>
  19. <!-- user方-聊天内容 -->
  20. <view class="item self" v-if="item.userContent != ''">
  21. <image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
  22. <view class="content right" disabled
  23. :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
  24. {{ item.userContent }}
  25. </view>
  26. </view>
  27. <!-- ai方-聊天内容 -->
  28. <view class="item other">
  29. <view class="">
  30. <view class="loadingPoint" v-if='msgList.isloading[index]'>
  31. <loadingPointsVue></loadingPointsVue>
  32. </view>
  33. <view class="content left" v-if='!msgList.isloading[index]'
  34. :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
  35. {{ msgList.otherChatList[index] }}
  36. </view>
  37. </view>
  38. <image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
  39. </view>
  40. </view>
  41. </view>
  42. </scroll-view>
  43. </view>
  44. <view class="chat-bottom">
  45. <view class="uni-label">
  46. <label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)"
  47. :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
  48. </view>
  49. <view class="send-msg">
  50. <view class="uni-textarea">
  51. <!-- bindkeyboardheightchange='getKeyBoardHeight' - 添加键盘弹起触发属性 -->
  52. <textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
  53. confirm-type="send" @confirm="handleSend(msgList)" maxlength="300"
  54. @keyboardheightchange="getKeyBoardHeight" :adjust-position="false"
  55. :style="`background-color:${styleData.labelColor};`" />
  56. </view>
  57. <view class="uni-button">
  58. <button class="send-btn" @click="handleSend(msgList)" type="primary"
  59. :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. <view class="sidebar-right" :style="`height:${95-styleData.screenWidth}vh`">
  65. <image v-if="msgList.demoVideo1" src="../../static/aLogo.png" mode="aspectFit" style="height: 400px;position: absolute;bottom: 0;" ></image>
  66. <video v-else class="video" :class="{active:styleData.value}" id="demoVideo" :controls="false" :loop='true' object-fit="cover"
  67. :enable-progress-gesture="false" :show-center-play-btn="false" :src="styleData.videoSrc" :autoplay='true' >
  68. </video>
  69. </view>
  70. </view>
  71. </view>
  72. </template>
  73. <script setup>
  74. import {
  75. nextTick,
  76. reactive,
  77. ref,
  78. watch
  79. } from 'vue';
  80. import {
  81. getDataList
  82. } from '../../api/ChatApp.js'
  83. import axios from 'axios';
  84. import loadingPointsVue from '../../components/loadingPoints.vue';
  85. import {
  86. styleChange,
  87. handleSend,
  88. scrollToBottom,
  89. shortcuts
  90. } from "../../until/fun.js"
  91. // const videlSrc = '../../static/video/whiteVideo.mp4'
  92. const msgList = reactive({
  93. // 输入框
  94. chatMsg: '',
  95. // 聊天数据列表
  96. chatList: [],
  97. // 滚动距离
  98. scrollTop: 0,
  99. //
  100. timer: '',
  101. textCount: '',
  102. otherContent: '',
  103. otherChatList: [],
  104. len: 0,
  105. isloading: [],
  106. isClick: false,
  107. // 键盘弹起高度
  108. KeyBoardHeight: 0,
  109. demoVideo: uni.createVideoContext('demoVideo'),
  110. demoVideo1:true
  111. })
  112. const styleData = reactive({
  113. value: false,
  114. color: '#fff',
  115. fontColor: "black",
  116. btnColor: "rgb(30,144,255)",
  117. contentColor: "#f5f5f5",
  118. labelColor: "#f5f5f5",
  119. borderColor: "rgb(30,144,255)",
  120. screenWidth: 40,
  121. isScreen: false,
  122. videoSrc : '../../static/video/whiteVideo.mp4'
  123. })
  124. const labelList = ref([
  125. "我要加油",
  126. "92号",
  127. "95号",
  128. "98号",
  129. "加油卡",
  130. "易捷加油"
  131. ])
  132. //滚动至聊天底部
  133. watch([msgList.otherChatList, msgList.chatList], (newVal) => {
  134. scrollToBottom(msgList)
  135. })
  136. // 屏幕 去除上屏
  137. const screenChange = () => {
  138. styleData.isScreen = !styleData.isScreen
  139. if (styleData.isScreen == true) {
  140. styleData.screenWidth = 0
  141. } else {
  142. styleData.screenWidth = 40
  143. }
  144. }
  145. // 键盘弹起事件
  146. const getKeyBoardHeight = ((event) => {
  147. // 获取键盘高度
  148. msgList.KeyBoardHeight = event.detail.height
  149. })
  150. </script>
  151. <style>
  152. @import url("../../theme/chat32.css");
  153. @import url("../../theme/public.css");
  154. .second {
  155. padding-left: 50rpx;
  156. }
  157. </style>