LiuJiangYY_tj/柳江医院体检平台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 v-if="workOrderstatus.status==1 || workOrderstatus.status==2 " >
        <switch  :checked="switchchecked" color="#ff7c2e" @change="CloseWorkOrderChange" style="transform:scale(0.7); margin-bottom: 10rpx;"/><span style="color:#808080; font-size: 22rpx;">关闭此工单</span>
      </view>
      <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>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog   cancelText="取消" confirmText="确定" title="提示" content="确定关闭此工单吗？" @confirm="dialogConfirm"
                            @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted,nextTick
	} from "vue"
	import{onLoad} from '@dcloudio/uni-app'
	import {
		ChatInsertMsgAction,
		ChatGetSelfMsgListAction,
    ChatChangeWorkOrderAction,
    $response
	} from '@/api'
  let switchchecked=ref(true);
  let alertDialog=ref(null)
  const dialogClose=()=>{

    switchchecked.value=true
  }

  //关闭工单
  const CloseWorkOrderChange=(e)=>{
    if(e.detail.value==false){
      alertDialog.value.open()
      switchchecked.value=false
    }

  }

  let workOrderId=ref('')
	onLoad((option)=>{
		 workOrderId.value=option.workorder
	})
  //更改工单状态
  const dialogConfirm=async ()=>{
    let data={
      WorkOrder:workOrderId.value
    }
    const response = await ChatChangeWorkOrderAction(data)
    $response(response, () => {
      console.log(response)
      if(response.data.status){
        uni.showToast({
          title: "工单成功关闭",
          duration: 2000,
          icon:'none'
        });
        getList()
      }else{
        uni.showToast({
          title: response.data.msg,
          duration: 2000,
          icon:'none'
        });
      }
    })
  }

  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(()=>{
		uni.setNavigationBarTitle({
			title: "健康管理平台"
		})
		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>