ChatScreen/pages/index15/index15.vue

<template>
	<view id='app'>
		<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">
							<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>
			</view>
			<view class="sidebar-right">
				<image src="../../static/logo.png" mode="aspectFit"></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,
		// setTimeout的返回值，唯一确定结束对应的setTimeout
		timer: 0,
		// 
		textCount: 0,
		otherContent: '',
		// 处理后的ai数据返回值
		otherChatList: [],
		// 发送/返回的次数
		len: 0,
		// 加载符号是否显示
		isloading: [],
		isClick:false
	})
	
	const styleData = reactive({
		value:false,
		color:'#f5f5f5',
		fontColor:"black",
		btnColor:"blue",
		contentColor:"#fff",
		borderColor:"rgb(30,144,255)"
		
	})

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

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

</script>

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