ChatScreen/pages/index32/index32.vue

<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>