DaQingPuJi/大庆普济医院H5/pages/chat/chat.vue

<template>
	<view class="chatk" >
		<view class="msg_list" ref="scrollContainer" id="container">
			<view v-for="(item,index) in chatList">
				<view v-if="item.msg_type==0" class="sendMsg" >
					<view class="sendMsg_left">
						<view class="sendMsg_left_time">{{item.created_at.substring(5,19)}}</view>
						<view class="sendMsg_left_msg">{{item.content}}</view>
					</view>
					<view class="sendMsg_right">
						 <image class="user_img"   src="../../static/image/user.png"></image>
					</view>
				</view>
				<view v-if="item.msg_type==1" class="receiveMsg">
					<view class="receiveMsg_left">
						<image class="user_img"   src="../../static/image/kefu.png"></image>
						<view class="username">客服</view>
					</view>
					<view class="receiveMsg_right">
						<view class="receiveMsg_right_time">{{item.created_at.substring(5,19)}}</view>
						<view class="receiveMsg_right_msg">{{item.content}}</view>
					</view>
				</view>
			</view>
			<view v-if="chatList.length==0" class="tishi"  >暂未留言</view>
			<view v-if="workOrderstatus.status==3" class="tishi"  >工单已关闭，如遇到问题请重新提交工单</view>
			<view class="ding"></view>
		</view>
		<view class="end">
			<view class="msg_k">
				<view class="msg_k_left">
					<uni-easyinput :disabled="workOrderstatus.status!=3?false:true" type="textarea" v-model="msgContent" placeholder="请输入留言信息" />
				</view>
				<view class="msg_k_right"><button type="primary" size="mini" plain="true" @click="send">发送</button></view>
			</view>
		</view>
		

	</view>
</template>

<script setup>
	import {
		ref,onMounted,nextTick
	} from "vue"
	import{onLoad} from '@dcloudio/uni-app'
	import {
		ChatInsertMsgAction,
		ChatGetSelfMsgListAction,
		$response
	} from '@/api'
	let workOrderId=ref('')
	onLoad((option)=>{
		 workOrderId.value=option.workorder
	}) 
	let msgContent = ref("")
	let chatList=ref([]) //聊天记录
	let workOrderstatus=ref('')//工单状态
	const send= async ()=>{
		if(msgContent.value=='') return
		let data={
			MsgInfo:{
				 WorkOrder:workOrderId.value,
				 Content:msgContent.value
			}
		}
		msgContent.value=''
		const response = await ChatInsertMsgAction(data)
		$response(response, () => {
			console.log(response)
			if(response.data.status){
				getList()
			}else{
				uni.showToast({
					title: response.data.msg,
					duration: 2000,
					icon:'none'
				});
			}
		})
	}
	let page=ref(1)
	const getList = async ()=>{
		let data={
			Page:page.value,
			WorkOrder:workOrderId.value
		}
		uni.showLoading({
			title: '加载中'
		});
		const response = await ChatGetSelfMsgListAction(data)
		uni.hideLoading();
		$response(response, () => {
			console.log(response)
			chatList.value=response.data.list.reverse() 
			workOrderstatus.value=response.data.workorder_status
			toBottom()
		})
	}
	const scrollContainer = ref(null);
	//滚动到聊天底部
	const toBottom=()=>{
		 nextTick(() => {
			const container = document.getElementById('container'); // 替换为你的容器元素ID
			
			container.scrollIntoView(false);
		})
		
	}
	onMounted(()=>{
		getList()
	})
</script>

<style scoped>
	.chatk{
		height: 100vh;
		background-color: #f4f4f4; 
	}
	.msg_list{
		padding: 20rpx;
	 
	 
	}
	.end{
		background-color: #fff;
		padding: 20rpx;
		position: fixed;
		bottom: 0px;
		width: calc(100% - 40rpx);
	}
	.msg_k {
		display: flex;
		 
	}

	.msg_k_left {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.msg_k_right {
	 
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.sendMsg{
		display: flex;
		justify-content: flex-end;
		margin: 20rpx auto;
	}
	.sendMsg_left_time{
		text-align: right;
		color: #9c9c9c;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}
	.sendMsg_left_msg{
		background-color: #6ecda9;
		color: #444444;
		padding: 20rpx 30rpx;
		border-radius: 20rpx 0rpx 20rpx 20rpx;
	}
	.receiveMsg{
		display: flex;
		justify-content: flex-start;
		margin: 20rpx auto;
	}
	.receiveMsg_right_time{
		text-align: left;
		color: #9c9c9c;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}
	.receiveMsg_right_msg{
		background-color: #ffffff;
		color: #565656;
		padding: 20rpx 30rpx;
		border-radius: 0rpx 20rpx 20rpx 20rpx;
	}
	.ding{
		height: 200rpx;
	}
	.receiveMsg_left{
		 margin-right: 8rpx;
	}
	.tishi{
		text-align: center;
		font-size: 20rpx; 
		color: #ccc;
		margin-bottom: 10rpx;
	}
	.user_img{
		width: 80rpx; 
		height: 80rpx; 
		background-color: #eeeeee; 
		border-radius: 50%;
	}
	.username{
		font-size: 20rpx;
		color: #ccc;
		text-align: center;
	}
</style>