hainan/resources/views/admin/pages/index.blade.php

<style>
	.chat-container { padding:  20px 40px; }
	.msg-chat {
		position: relative; background-color: white; padding: 40px 20px;
		border-top-right-radius: 8px; border-bottom-right-radius: 8px;
	}
	.msg-chat-list {  min-height: 800px; max-height: 800px; overflow-y: auto; overflow-x: hidden; }
	.msg-user { margin: 5px 0px; line-height: 30px; }
	.msg-name { display: inline-block; font-size: 14px; font-weight: bold; padding: 0px 5px; }
	.msg-avatar { display: inline-block; }
	.msg-avatar img { width: 30px; height: 30px; border-radius: 50%; }
	.msg-content { display: inline-block; background-color: #f4f4f4; padding: 20px; border-radius: 10px; }
	.msg-content-image { max-width: 120px; max-height: 120px; }
	.msg-send { position: absolute; bottom: 0; left: 0; z-index: 999; }
	.msg-send .input-group-addon { width: 40px; border: none; line-height: 2.7; background-color: #dbe3e6; cursor: pointer; }
	.msg-send .input-group-addon.msg-text { background-color: #586cb1; color: white; padding: 5px 10px; width: 60px; line-height: 2.8; }
	.msg-time { padding: 0 5px; color: gray; font-size: 12px; margin: 5px 0; }

	.msg-list {
		position: relative; background-color: white;
		border-top-left-radius: 5px; border-bottom-left-radius: 5px; min-height: 900px;
		max-height: 1000px; border-right: 1px solid #dbe3e6; overflow-y: auto;
		padding: 20px 10px;
	}
	.msg-list-item { position: relative; border: 1px solid #dbe3e6; padding: 10px; border-radius: 5px; margin-bottom: 1px; cursor: pointer; }
	.msg-list-item:hover { border-color: green; }
	.msg-list-title { font-weight: bold; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; border-radius: 5px; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
	.msg-list-content { color: gray; background-color: #f4f4f4; border-radius: 5px; padding: 2px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.msg-list-badge {
		position: absolute; right: 5px; top: 5px;
		width: 10px; height: 10px; border-radius: 10px;
	}
	.background-red { background-color: red; }
	.background-gray { background-color: gray; }
</style>

<div class="row chat-container">
	<div class="col-lg-3 col-md-4 msg-list">
		@foreach($user_list as $key => $item)
			<div class="msg-list-item" onclick="window.location.href = '?workorder_id={{$item['workorder_id']}}'">
				<div class="msg-user">
					<div class="msg-avatar">
						<img src="{{$item['avatar']}}" alt="头像" title="头像" />
					</div>
					<div class="msg-name">
						{{$item['name']}}
					</div>
				</div>
				<div class="msg-list-title">
					{{$item['content']}}
				</div>
				<div class="msg-list-content">
					{{$item['last_message']}}
				</div>
				<div class="msg-time">
					{{$item['last_message_time']}}
				</div>
				@if($item['unread'] == true)
					<div class="msg-list-badge background-red"></div>
				@else
					<div class="msg-list-badge background-gray"></div>
				@endif
			</div>
		@endforeach
	</div>

	<div class="col-lg-9 col-md-8 msg-chat">

		<div class="input-group input-group-lg msg-send">
			<input name="msg-input" type="text" class="form-control" style="border-radius: 0; border-color: #dbe3e6; text-align: center;">
			<div class="input-group-addon msg-image"><span class="fa fa-picture-o"></span></div>
			<div class="input-group-addon msg-text">发送</div>
			<input type="file" class="hidden image" name="image">
		</div>
		<div class="msg-chat-list">
		@foreach($msg_list as $key => $item)

			@if($item['type'] == 'op')
				<div class="row">
					<div class="col-lg-11 text-left">
						<div class="msg-user">
							<div class="msg-avatar">
								<img src="{{$item['avatar']}}" alt="头像" title="头像" />
							</div>
							<div class="msg-name">

								{{$item['name']}}
							</div>
						</div>
						<div class="msg-content">
							@if($item['it_type'] == 1)
								{{$item['content']}}
							@elseif($item['it_type'] == 2)
								<img class="msg-content-image" src="{{$item['content']}}" alt="图片" title="图片" />
							@endif
						</div>

						<div class="msg-time">
							2021-01-01 12:02:03
						</div>
					</div>
				</div>
			@elseif($item['type'] == 'my')
				<div class="row">
					<div class="col-lg-11 offset-1 text-right">
						<div class="msg-user">
							<div class="msg-name">
								{{$item['name']}}
							</div>
							<div class="msg-avatar">
								<img src="{{$item['avatar']}}" alt="头像" title="头像" />
							</div>
						</div>

						<div class="msg-content text-left">
							@if($item['it_type'] == 1)
								{{$item['content']}}
							@elseif($item['it_type'] == 2)
								<img class="msg-content-image" src="{{$item['content']}}" alt="图片" title="图片" />
							@endif
						</div>

						<div class="msg-time">
							2021-01-01 12:02:03
						</div>
					</div>
				</div>
			@endif
		@endforeach
		</div>

	</div>

	<div class="hidden-forms">
		<input type="hidden" name="workorder-id" value="{{$workorder['workorder_id']??1}}">
	</div>
</div>

<div class="template-op hidden">
	<div class="row">
		<div class="col-lg-11 text-left">
			<div class="msg-user">
				<div class="msg-avatar">
					<img src="http://local.base_pro.com/vendor/dcat-admin/images/default-avatar.jpg" alt="头像" title="头像" />
				</div>
				<div class="msg-name">
					代理商AbcD
				</div>
			</div>

			<div class="msg-content">#contents</div>
			<div class="msg-time">#times</div>
		</div>
	</div>
</div>

<div class="template-my hidden">
	<div class="row">
		<div class="col-lg-11 offset-1 text-right">
			<div class="msg-user">
				<div class="msg-name">
					{{$user->name}}
				</div>
				<div class="msg-avatar">
					<img src="{{$user->avatar}}" alt="头像" title="头像" />
				</div>
			</div>
			<div class="msg-content text-left">#contents</div>
			<div class="msg-time">#times</div>
		</div>
	</div>
</div>

<script>
	Dcat.ready(function() {
		$('.msg-image').on('click', function (e) {
			$('.image').click();
		});

		$('.image').on('change', function (e) {

			let formData = new FormData()
			formData.append("image", $(this)[0].files[0])
			formData.append("workorder_id", $('input[name=workorder-id]').val())
			$.ajax({
				url: '/admin-agent/send_image',
				type: 'POST',
				data: formData,
				processData: false,
				contentType: false,
				dataType: 'json',
				success: function(res) {
					let imageUrl = 'https://hainan.lanzulive.com/'+res.data.content
					let msgTime = res.data.created_at
					let templateHtml = $('.template-my').html()
					let imgDoc = '<img class="msg-content-image" src="'+imageUrl+'" alt="图片" title="图片" />'
					templateHtml = templateHtml.replace('#contents', imgDoc)
					templateHtml = templateHtml.replace('#times', msgTime)
					$(".msg-chat-list").append(templateHtml)
					$(".msg-chat-list").animate({ scrollTop: $(".msg-chat-list")[0].scrollHeight - $('.msg-chat-list').height() }, 1)
				},
				error: function (error) {
					console.log(error)
				}
			});
		});

		$('input[name=msg-input]').on('keyup', function (e) {
			if (e.keyCode == 13) {
				$('.msg-text').click()
			}
		});

		$('.msg-text').on('click', function (e) {

			let msgText = $('input[name=msg-input]').val()
			let workorderId = $('input[name=workorder-id]').val()

			$.ajax({
				url: '/admin-agent/send_text',
				type: 'POST',
				data: {content: msgText, workorder_id: workorderId},
				dataType: 'json',
				success: function(res) {
					let msgText = res.data.content
					let msgTime = res.data.created_at
					let templateHtml = $('.template-my').html()
					templateHtml = templateHtml.replace('#contents', msgText)
					templateHtml = templateHtml.replace('#times', msgTime)
					$(".msg-chat-list").append(templateHtml)
					$('input[name=msg-input]').val('')
					$(".msg-chat-list").animate({ scrollTop: $(".msg-chat-list")[0].scrollHeight - $('.msg-chat-list').height() }, 1)
				},
				error: function (error) {
					console.log(error)
				}
			});
		});
	});
</script>