JM-MiniApp/pages/index/aikefu.vue

<script setup>
	// 引入依赖
	import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
	// import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue' 
	import { onLoad,onShow  } from "@dcloudio/uni-app"
	import mySwiper from "@/components/mySwiper.vue"
	import aikefu from "@/components/aikefu.vue"
	import {ref,onMounted,nextTick,watch,getCurrentInstance} from "vue"
	import api from '@/api/index.js'
	import {useStore} from '@/store/index.js'
	// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue' 
	const store = useStore()
	onLoad((e) => {
		uni.createSelectorQuery().in(instance).select('.show-part').boundingClientRect((res)=>{
			w_h.value = res.height
			// console.log(res)
		}).exec()
	})
	// 变量
	const w_h = ref(0)
	const records = ref([
		{
			content:'您好，很高兴为您服务！',
			type:1,//1-客服；2-我
		}
	])
	const scrollContainer = ref()
	const in_content = ref('')
	const scrollTop = ref(0.01) //注意：不要设置成0，不然无效
	const instance = getCurrentInstance(); // 获取组件实例
	const is_loading = ref(false)
	// 函数
	async function sendFunc() {
		if(is_loading.value) {
			return
		}
		is_loading.value = true
		if(!in_content.value) {
			uni.showToast({
				title:"请填写内容",
				icon:'error',
				duration:2000,
				mask:true
			})
			is_loading.value = false
			return
		}
		
		records.value.push({
			content:in_content.value,
			type:2
		})
		const res = await api.getReply({msg:in_content.value})
		is_loading.value = false
		if(res.code === 0) {
			in_content.value = ''
			// 判断用户输入的关键字是否有效
			if(res.data.content) {
				records.value.push({
					content:res.data.content,
					type:1
				})
			}
			else{
				records.value.push({
					content:'请输入正确的关键词',
					type:-1
				})
			}
		}
		else{
			uni.showToast({
				title:res.msg,
				icon:"error",
				duration:2000
			})
		}
		// 滚动条设置
		uni.createSelectorQuery().in(instance).select('#scroll-view-content').boundingClientRect((res)=>{
			let top = res.height-w_h.value+100;
			if(top>0){
				scrollTop.value = top;
			}
			// console.log(res.height,w_h.value)
		}).exec()
	}
</script>
<template>
	<view class="aikefuBox page-box page-bg-gray" style="height: 100%;">
		<!-- 信息展示区域 -->
		<!-- <view class="ac-part show-part" id="show-part" ref="scrollContainer" :style="{scrollTop:scrollTop}"> -->
				<scroll-view :scroll-with-animation="true" :scroll-y="true" class="ac-part show-part" scroll-y="true" :scroll-top="scrollTop">
					<view class="ac-listt-box" id="scroll-view-content">
						<view class="r_list-card" v-for="(item,i) in records">
							<view v-if="item.type!=-1" class="r-row" :class="item.type === 1?'row-left':'row-right'">
								<view class="r-avatar" v-if="item.type === 1">
									<image src="../../static/kefu.png" mode="widthFix"></image>
								</view>
								<view class="r-content" :class="{'r-content-right':item.type==2}">{{item.content}}</view>
							</view>
							<!-- 错误提示 -->
							<view class="r-row wrong-text" v-if="item.type==-1" style="color: #bfbfbf;text-align: center">
								{{item.content}}
							</view>
						</view>
					</view>
				</scroll-view>
		<!-- </view> -->
		<!-- 输入区域 -->
		<view class="as-part input-part">
			<view class="input-box">
				<view class="ib-left">
					<input v-model="in_content" type="text" placeholder="输入您想咨询的内容">
				</view>
				<view class="ib-right">
					<view class="send_btn" @tap="sendFunc">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.aikefuBox{
		height: 100%;
		.show-part{
			height: 88%;
			// overflow-y: auto;
			.ac-listt-box{
				padding: 20rpx;
				.r_list-card{
					margin: 40rpx 0;
					.r-row{
						overflow: hidden;
						.r-avatar{
							float: left;
							width: 80rpx;
							height: 80rpx;
							image{
								width: 100%;
							}
							margin-right: 10rpx;
						}
						.r-content{
							background-color: white;
							display: inline-block;
							padding: 20rpx;
							border-radius:0 20rpx 20rpx 20rpx;
							box-shadow: 10rpx 10rpx 10rpx #efefef;
						}
						.r-content-right{
							float: right;
							border-radius: 20rpx 0 20rpx 20rpx;
							background-color: #26758d;
							color: white;
						}
					}
				}
			}
		}
		.input-part{
			height: 12%;
			background: white;
			position: fixed;
			bottom: 0px;
			width: 100%;
			box-shadow: 0px -10px 20px 1px #eaeaea;
			.input-box{
				padding: 20rpx;
				display: flex;
				align-content: center;
				.ib-left{
					width: 88%;
					margin-right: 20rpx;
					input{
						width: 100%;
						border: 2rpx solid #c3c3c3;
						padding: 10rpx 8rpx;
						border-radius: 20rpx;
						box-sizing: border-box;
						display: block;
						height: 100%;
					}
				}
				.ib-right{
					width: 12%;
					display: flex;
					align-items: center;
					.send_btn{
						padding: 10rpx;
						background: #26758d;
						color: white;
						border-radius: 10rpx;
						width: 100%;
						text-align: center;
					}
				}
			}
		}
		.ac-part{
			
		}
	}
</style>