ChatScreen/pages/index32/index32.vue

<template>
	<view id='app' style="bottom: {{KeyBoardHeight}}px;">
		<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"  />
						</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>s
			</view>
			<view class="sidebar-right" :style="`height:${95-styleData.screenWidth}vh`">
				<image src="../../static/logo.png" mode="aspectFit" :style="`top:${70-styleData.screenWidth}vh`"></image>
			</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 msgList = reactive({
		// 输入框
		chatMsg: '',
		// 聊天数据列表
		chatList: [],
		// 滚动距离
		scrollTop: 0,
		// 
		timer: '',
		textCount: '',
		otherContent: '',
		otherChatList: [],
		len: 0,
		isloading: [],
		isClick: false,
		// 键盘弹起高度
		KeyBoardHeight: 0
	})

	const styleData = reactive({
		value: false,
		color: '#f5f5f5',
		fontColor: "black",
		btnColor: "rgb(30,144,255)",
		contentColor: "#fff",
		labelColor: "#fff",
		borderColor: "rgb(30,144,255)",
		
		screenWidth:40,
		isScreen:false,
	})

	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
	// 	console.log(msgList.KeyBoardHeight)
	// })
	 
</script>

<style>
	@import url("../../theme/chat32.css");
	@import url("../../theme/public.css");
	.second {
		padding-left: 50rpx;
	}
</style>