ChatScreen/pages/index15/index15.vue

<template>
	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px;background-color:${styleData.color}`">
		<view class="head" :style="{backgroundColor:styleData.color}">
			<text :style="{color:styleData.fontColor}">睿宝AI</text>
			<view class="switch">
				<switch @change="styleChange(styleData)" />
			</view>
		</view>
		<view class="pageView" :style="{backgroundColor:styleData.color}">
			<view class="sidebar-left"></view>
			<view class="body">
				<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" :style="`background-color:${styleData.labelColor};font-color:${styleData.fontColor};`">
							<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};font-color:${styleData.fontColor};`" />
						</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">
				<!-- <image  src="../../static/logo.png" mode="aspectFit"></image> -->
				<video 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">
				</video>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		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'
	// let demoVideo = uni.createVideoContext('demoVideo')
	// // 
	// let a = 0
	// const aaa = () => {
	// 	if (a++ % 2 == 0) {
	// 		// 停止
	// 		demoVideo.seek(0)
	// 		demoVideo.pause()
	// 	} else {
	// 		// 播放
	// 		demoVideo.play()
	// 	}

	// }
	// --------------------------------------
	const msgList = reactive({
		// 输入框
		chatMsg: '',
		// 聊天数据列表
		chatList: [],
		// 滚动距离
		scrollTop: 0,
		// setTimeout的返回值，唯一确定结束对应的setTimeout
		timer: 0,
		// 
		textCount: 0,
		otherContent: '',
		// 处理后的ai数据返回值
		otherChatList: [],
		// 发送/返回的次数
		len: 0,
		// 加载符号是否显示
		isloading: [],
		isClick: false,
		KeyBoardHeight: 0,
		demoVideo: uni.createVideoContext('demoVideo'),
	})

	const styleData = reactive({
		value: false,
		color: '#fff',
		fontColor: "black",
		btnColor: "rgb(30,144,255)",
		contentColor: "#f5f5f5",
		labelColor: '#f5f5f5',
		borderColor: "rgb(30,144,255)",
		
		videoSrc : '../../static/video/whiteVideo.mp4'
	})

	const labelList = ref([
		"我要加油",
		"92号",
		"95号",
		"98号",
		"加油卡",
		"易捷加油"
	])

	//滚动至聊天底部
	watch([msgList.otherChatList, msgList.chatList], (newVal) => {
		scrollToBottom(msgList)
	})

	// 键盘弹起事件
	const getKeyBoardHeight = ((event) => {
		// 获取键盘高度
		msgList.KeyBoardHeight = event.detail.height
	})
</script>

<style>
	@import url("../../theme/chat15.css");
	@import url("../../theme/public.css");
</style>