You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
10 KiB
292 lines
10 KiB
<style>
|
|
.chat-container { padding: 20px 40px; height: calc(100vh - 160px) }
|
|
.msg-chat {
|
|
position: relative; background-color: white; padding: 40px 20px 90px 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; padding-right: 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: 90px; }
|
|
.msg-send .input-group-addon { width: 40px; border: none; line-height: 5.4; background-color: #dbe3e6; cursor: pointer; }
|
|
.msg-send .input-group-addon.msg-text { background-color: #586cb1; color: white; padding: 5px 10px; width: 60px; line-height: 5.5; }
|
|
.msg-time { padding: 0 5px; color: gray; font-size: 12px; margin: 5px 0; }
|
|
.msg-image { line-height: 90px; }
|
|
|
|
.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">
|
|
<textarea name="msg-input" id="msg-input" type="text" class="form-control" rows="3" style="height: 90px; border-radius: 0; border-color: #dbe3e6; text-align: left; padding-left: 5px;"></textarea>
|
|
{{-- <input name="msg-input" type="text" class="form-control" style="border-radius: 0; border-color: #dbe3e6; text-align: left; padding-left: 5px;">--}}
|
|
<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" data-action="preview-img" 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" data-action="preview-img" 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" data-action="preview-img" 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)
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#msg-input').on('keyup', function (event) {
|
|
// 只按下ctrl情况，等待enter键的按下
|
|
let stat = false;
|
|
if (event.keyCode === 17) {
|
|
stat = true;
|
|
//取消等待
|
|
setTimeout(function(){
|
|
stat = false;
|
|
},300);
|
|
}
|
|
if (event.keyCode === 13 && (stat || event.ctrlKey)) {
|
|
$('.msg-text').click()
|
|
}
|
|
});
|
|
|
|
$('.msg-text').on('click', function (e) {
|
|
let msgText = $('#msg-input').val()
|
|
let workorderId = $('input[name=workorder-id]').val()
|
|
|
|
if (msgText == '') {
|
|
$('#msg-input').css('border-color', 'red').focus();
|
|
setTimeout(function () {
|
|
$('#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)
|
|
$('#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>
|
|
|