<template> <view id='app' :style="`bottom:${msgList.KeyBoardHeight}px;background-color:${styleData.color}`"> <view class="placeholder" :style="`height: ${styleData.screenWidth}vh`"></view> <view class="head" :style="{backgroundColor:styleData.color}"> <text :style="{color:styleData.fontColor}">睿宝AI</text> <view class="switch"> <switch @change="styleChange(styleData)" /> <switch class='second' @change="screenChange()" /> </view> </view> <view class="pageView" :style="{backgroundColor:styleData.color}"> <view class="sidebar-left"></view> <view class="body" :style="`height:${95-styleData.screenWidth}vh`"> <view class="list-wrap"> <scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop"> <!-- 聊天主体 --> <view id="content-overflow"> <view class="scrollview-item" v-for="(item,index) in msgList.chatList" :key='index'> <!-- user方-聊天内容 --> <view class="item self" v-if="item.userContent != ''"> <image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image> <view class="content right" disabled :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}"> {{ item.userContent }} </view> </view> <!-- ai方-聊天内容 --> <view class="item other"> <view class=""> <view class="loadingPoint" v-if='msgList.isloading[index]'> <loadingPointsVue></loadingPointsVue> </view> <view class="content left" v-if='!msgList.isloading[index]' :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}"> {{ msgList.otherChatList[index] }} </view> </view> <image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image> </view> </view> </view> </scroll-view> </view> <view class="chat-bottom"> <view class="uni-label"> <label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label> </view> <view class="send-msg"> <view class="uni-textarea"> <!-- bindkeyboardheightchange='getKeyBoardHeight' - 添加键盘弹起触发属性 --> <textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧" confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" @keyboardheightchange="getKeyBoardHeight" :adjust-position="false" :style="`background-color:${styleData.labelColor};`" /> </view> <view class="uni-button"> <button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button> </view> </view> </view> </view> <view class="sidebar-right" :style="`height:${95-styleData.screenWidth}vh`"> <image v-if="msgList.demoVideo1" src="../../static/aLogo.png" mode="aspectFit" style="height: 400px;position: absolute;bottom: 0;" ></image> <video v-else class="video" :class="{active:styleData.value}" id="demoVideo" :controls="false" :loop='true' object-fit="cover" :enable-progress-gesture="false" :show-center-play-btn="false" :src="styleData.videoSrc" :autoplay='true' > </video> </view> </view> </view> </template> <script setup> import { nextTick, reactive, ref, watch } from 'vue'; import { getDataList } from '../../api/ChatApp.js' import axios from 'axios'; import loadingPointsVue from '../../components/loadingPoints.vue'; import { styleChange, handleSend, scrollToBottom, shortcuts } from "../../until/fun.js" // const videlSrc = '../../static/video/whiteVideo.mp4' const msgList = reactive({ // 输入框 chatMsg: '', // 聊天数据列表 chatList: [], // 滚动距离 scrollTop: 0, // timer: '', textCount: '', otherContent: '', otherChatList: [], len: 0, isloading: [], isClick: false, // 键盘弹起高度 KeyBoardHeight: 0, demoVideo: uni.createVideoContext('demoVideo'), demoVideo1:true }) const styleData = reactive({ value: false, color: '#fff', fontColor: "black", btnColor: "rgb(30,144,255)", contentColor: "#f5f5f5", labelColor: "#f5f5f5", borderColor: "rgb(30,144,255)", screenWidth: 40, isScreen: false, videoSrc : '../../static/video/whiteVideo.mp4' }) const labelList = ref([ "我要加油", "92号", "95号", "98号", "加油卡", "易捷加油" ]) //滚动至聊天底部 watch([msgList.otherChatList, msgList.chatList], (newVal) => { scrollToBottom(msgList) }) // 屏幕 去除上屏 const screenChange = () => { styleData.isScreen = !styleData.isScreen if (styleData.isScreen == true) { styleData.screenWidth = 0 } else { styleData.screenWidth = 40 } } // 键盘弹起事件 const getKeyBoardHeight = ((event) => { // 获取键盘高度 msgList.KeyBoardHeight = event.detail.height }) </script> <style> @import url("../../theme/chat32.css"); @import url("../../theme/public.css"); .second { padding-left: 50rpx; } </style>