|
|
<style> .chat-container { padding: 20px 40px; height: calc(100vh - 160px) } .msg-chat { position: relative; background-color: white; padding: 40px 20px 50px 20px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; height: 100%; } .msg-chat-list { height: 100%; overflow-y: auto; overflow-x: hidden; padding-bottom: 20px; } .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; height: 50px; } .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; height: 100%; 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-item.active { border: 2px solid green; box-shadow: 0px 0px 4px 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: 20px; height: 20px; border-radius: 20px; line-height: 20px; text-align: center; font-size: 12px; } .background-red { color: white; background-color: red; } .background-gray { color: white; background-color: gray; }</style>
<div class="row chat-container"> <div class="col-lg-3 col-md-4 msg-list"> @if(empty($user_list)) <div class="text-center">暂无工单数据</div> @else @foreach($user_list as $key => $item) @if($workorder['workorder_id']==$item['workorder_id']) <div class="msg-list-item active" onclick="window.location.href = '?workorder_id={{$item['workorder_id']}}'"> @else <div class="msg-list-item" onclick="window.location.href = '?workorder_id={{$item['workorder_id']}}'"> @endif <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['items_count'] > 0) <div class="msg-list-badge background-red">{{$item['items_count']}}</div> @endif </div> @endforeach @endif </div>
<div class="col-lg-9 col-md-8 msg-chat"> @if(empty($msg_list)) <div class="text-center">暂无工单数据</div> @else <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" onclick="viewImage(this)" src="{{$item['content']}}" alt="图片" title="图片" /> @endif </div>
<div class="msg-time"> {{$item['created_at_text']}} @if($item['is_read'] == 0) <span class="unread">[ 新消息 ]</span> @endif </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" onclick="viewImage(this)" src="{{$item['content']}}" alt="图片" title="图片" /> @endif </div>
<div class="msg-time"> {{$item['created_at_text']}} </div> </div> </div> @endif @endforeach </div> @endif </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="/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="{{\Illuminate\Support\Facades\Storage::url($user->avatar)}}" alt="头像" title="头像" /> </div> </div> <div class="msg-content text-left">#contents</div>
<div class="msg-time">#times</div>
</div> </div></div>
<div class="modal fade" tabindex="-1" role="dialog" id="viewImage"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <img src="" style="width: 100%; height: 100%;" /> </div> </div></div> <script src="js/helper.js" type="application/javascript"></script> <script>
$(document).ready(function() {
// 获取元素距离父级元素顶部的距离
let offsetTop = $('.msg-list-item.active').position().top $(".msg-list").animate({ scrollTop: offsetTop - 20}, 1)
$(".msg-chat-list").animate({ scrollTop: $(".msg-chat-list")[0].scrollHeight - $('.msg-chat-list').height() + 600 }, 1)
$('.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: '/{{$route}}/send_image', type: 'POST', data: formData, processData: false, contentType: false, dataType: 'json', success: function(res) { let imageUrl = res.data.content let msgTime = res.data.created_at let templateHtml = $('.template-my').html() let imgDoc = '<img class="msg-content-image" onclick="viewImage(this)" 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() + 600 }, 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()
if (msgText == '') { $('input[name=msg-input]').css('border-color', 'red').focus(); setTimeout(function () { $('input[name=msg-input]').css('border-color', '#dbe3e6'); }, 3000) }
$.ajax({ url: '/{{$route}}/send_text', type: 'POST', data: {content: msgText, workorder_id: workorderId}, dataType: 'json', success: function(res) {
if (res.code != 0) { return false; }
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>
|
