zh_order_food_xcx/pages/chat/index.vue

<template>
	<view class="box">
		<view class="flex-common-css iPhone-bottom box-border-box">
			<Nav title="AI助手" titleColor="#333" bgckgroundBox='#fff'></Nav>
			<scroll-view :scroll-y="true" id="scroll-view-css" class="scroll-view-css" :scroll-top="scrollTop"
				:scroll-with-animation="true" @scroll="scrolll" @scrolltoupper='scrolltoupper'>
				<view class="chat-box" id="chat-box">
					<msgItem v-for="(item,index) in chatData" :key="index" :item="item" :showType="item.showType"
						:msgText="item.content" @selectStyle="selectStyle" @refresh="refresh"></msgItem>
				</view>
			</scroll-view>
			<view class="bottom-box">
				<view class="input-box">
					<input type="text" v-model="chatText" placeholder="有问题尽管问我" class="input" cursor-spacing="20"
						@confirm="confirm" :disabled='!sendControl'>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import tools from "@/service/tools.js";
	import msgItem from "./msg-item.vue";
	// import {
	// 	qianfanSend,
	// 	qianfanMsg_list,
	// } from "@/api/qianfan.js"
	import {
		aiSend,
		aiMsgList
	} from "@/api/ai.js"
	export default {
		components: {
			msgItem
		},
		data() {
			return {
				total: 0,
				page: 1,
				chatText: '',
				chatType: 1,
				scrollTop: 0,
				chatData: [],
				initialData: [],
				// loadingStyle: false,
				Ajax: false,
				timer: null, //settimeout
				showText: "",
				typeName: '',
				isScrolll: false,
				scrolllTimeServe: null,
				imgUrl: '',
				fileUrl: '',
				voiceUrl: '',
				inputHeadShow: true,
				sendControl: true
			};
		},
		onShow() {
			this.page = 1
			this.chatData = []
			this.aiMsgList()
		},
		onLoad() {},
		mounted() {},
		methods: {
			selectStyle(e) {
				this.chatType = e
				this.initialData.forEach((item) => {
					if (this.chatType === item.type) {
						this.typeName = item.name
						let data = {
							msg_type: 2,
							content: '您好,我是' + this.typeName + 'AI小助手，有什么能帮助您吗？',
							created_at: tools.getDate(),
						}
						this.chatData.push(data)
					}
				})
				// console.log(e);
			},
			aiSend() {
				let that = this
				let data = {
					msg_type: 2,
					content: '',
					created_at: tools.getDate(),
					showType: true,
				}
				this.chatData.push(data)
				let key = this.chatData.length - 1
				aiSend({
					content: this.chatText,
				}).then((res) => {
					if (res.code == 1) {
						this.imgUrl = ''
						this.fileUrl = ''
						this.voice_url = ''
						this.chatText = ''
						this.sendControl = true
						// this.chatData[key].voice_url = res.data.voice_url
						this.chatData[key].content = res.data.content
						this.$nextTick(() => {
							this.scrollToBottom()
						})
					} else {
						this.chatData[key].content = msg
					}
				})
			},
			refresh(num) {
				// this.$nextTick(() => {
				if (num) {
					// console.log("高度");
					// this.scrollTop = 99999
					console.log('最终')
					setTimeout(() => {
						this.scrollToBottom(50)
					}, 50)
				} else {
					console.log('回调执行')
					this.scrollToBottom(0)
					// setTimeout(()=>{
					//   this.scrollToBottom()
					// },10)
				}
				// })
			},
			scrolltoupper() {
				if(this.total>this.chatData.length) {
					++this.page
					this.aiMsgList()
				}
			},
			aiMsgList() {
				aiMsgList({
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						this.total = res.data.total
						let data = res.data.items.reverse()
						data.forEach((itm) => {
							itm.showType = false
						})
						this.chatData.unshift(...data)
						let that = this
						setTimeout(() => {
							that.scrollToBottom()
						}, 50)
					}
				})
			},
			onTabItemTap() {
				uni.hideTabBar()
			},
			leftClick() {
				uni.switchTab({
					url: 'pages/index/index'
				})
				uni.showTabBar()
			},
			confirm(event) {
				if (this.sendControl) {
					if (event.target.value) {
						let timeData = tools.getDate()
						let text = {
							created_at: timeData,
							msg_type: 1,
							content: event.target.value,
							img_url: this.imgUrl,
							file_url: this.fileUrl
						}
						this.chatData.push(text)
						this.inputHeadShow = false
						this.sendControl = false
						this.$nextTick(() => {
							this.scrollToBottom()
						})
						this.aiSend()
						// this.lading()
						this.chatText = ''
					} else {
						uni.showToast({
							title: '请输入问题',
							icon: 'none',
							duration: 1000
						});
					}
				}
			},
			scrolll(e) {
				// console.log(e, 'eeee');
			},
			scrollToBottom(num) {
				let query = uni.createSelectorQuery().in(this)
				query.select('#scroll-view-css').boundingClientRect()
				query.select('#chat-box').boundingClientRect()
				query.exec((res) => {
					//如果子元素高度大于父元素高度(显示高度)
					if (res[1].height > res[0].height) {
						//计算出二者差值就是需要滚动的距离
						let scrollTop = res[1].height - res[0].height
						let differenceNum = scrollTop - this.scrollTop
						console.log(differenceNum, 'differenceNum');
						console.log(scrollTop, 'scrollTop');
						if (differenceNum > 50) {
							this.scrollTop = scrollTop + 50
							console.log('differenceNum > 50');
						} else if (num > 0) {
							this.scrollTop = scrollTop + num
							console.log('num > 0');
						}
					} else {
						this.scrollTop = 9999999999999
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #fff;
		position: relative;

		.popup-block {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			overflow: hidden;
			background-color: #f5f5f5;

			.popup-row {
				height: 100rpx;
				background-color: #fff;
				text-align: center;
				line-height: 100rpx;
				border-bottom: 2rpx solid #f5f5f5;

				&:nth-child(4) {
					margin-bottom: 20rpx;
				}

				&:last-child {
					height: 112rpx;
					border: none;
					line-height: 112rpx;
				}

				&:active {
					background-color: rgb(244, 244, 244);
				}
			}
		}

		.chat-box {
			padding: 22rpx 32rpx 1rpx;
			box-sizing: border-box;

			.dialogue-box {
				// width: 100%;
				height: auto;
				margin: 0 0 40rpx 0;
				display: flex;
				flex-direction: column;

				.time {
					font-size: 24rpx;
					color: #999999;
					margin: 0 0 8rpx 0;
				}

				.dialogue {
					padding: 24rpx;
					box-sizing: border-box;
					word-break: break-all;
					font-size: 30rpx;

					.dialogue-text {}

					.dialogue-text-one {
						color: #333333;
					}

					.dialogue-text-two {
						color: #FFFFFF;
					}

					.initial-box {

						.initial-title {
							font-size: 30rpx;
							font-weight: 600;
							color: #333333;
							margin: 0 0 12rpx 0;
						}

						.initial-style {
							font-size: 30rpx;
							color: #2F80ED;
							margin: 0 0 12rpx 0;
						}

						.initial-style:last-child {
							margin: 0;
						}
					}
				}

				.dialogue-one {
					background: #F7F8FC;
					border-radius: 10rpx 10rpx 10rpx 0;
				}

				.dialogue-two {
					background: #FDAB26;
					border-radius: 10rpx 10rpx 0 10rpx;
				}
			}

			.dialogue-box-one {
				align-items: flex-start;
			}

		}

		.bottom-box {
			position: relative;

			.input-box {
				width: 100%;
				height: 100rpx;
				height: auto;
				background: #fff;
				padding: 10rpx 32rpx;
				box-sizing: border-box;
				border-top: 1rpx solid #EEEEEE;
				transition: all .1s linear;
			}
		}
	}

	.input {
		background: #F2F2F2;
		border-radius: 200rpx;
		width: 100%;
		height: 100%;
		padding: 20rpx 170rpx 20rpx 24rpx;
		box-sizing: border-box;
	}
</style>