3 changed files with 325 additions and 11 deletions
-
87app/AdminAgent/Controllers/WorkorderController.php
-
8app/AdminAgent/routes.php
-
241resources/views/admin/pages/index.blade.php
@ -0,0 +1,241 @@ |
|||||
|
<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"> |
||||
|
供应商5566 |
||||
|
</div> |
||||
|
<div class="msg-avatar"> |
||||
|
<img src="http://local.base_pro.com/vendor/dcat-admin/images/default-avatar.jpg" 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 = {{env('APP_URL')}} + '/' + res.data.url |
||||
|
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> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue