Leadfyy.co
/
hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

其他的工单列表页

develop
shuixiang 4 years ago
parent
eeea25eeab
commit
66ae1fe06b
3 changed files with 423 additions and 369 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 395
      resources/views/admin/pages/guide-index.blade.php
  2. 2
      resources/views/admin/pages/index.blade.php
  3. 395
      resources/views/admin/pages/supplier-index.blade.php

395
resources/views/admin/pages/guide-index.blade.php
View File

@ -1,241 +1,268 @@
<style> <style>
.chat-container { padding: 20px 40px; }
.chat-container { padding: 20px 40px; height: calc(100vh - 160px) }
.msg-chat { .msg-chat {
position: relative; background-color: white; padding: 40px 20px;
border-top-right-radius: 8px; border-bottom-right-radius: 8px;
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 { min-height: 800px; max-height: 800px; overflow-y: auto; overflow-x: hidden; }
.msg-chat-list { height: 100%; overflow-y: auto; overflow-x: hidden; padding-bottom: 20px; }
.msg-user { margin: 5px 0px; line-height: 30px; } .msg-user { margin: 5px 0px; line-height: 30px; }
.msg-name { display: inline-block; font-size: 14px; font-weight: bold; padding: 0px 5px; } .msg-name { display: inline-block; font-size: 14px; font-weight: bold; padding: 0px 5px; }
.msg-avatar { display: inline-block; } .msg-avatar { display: inline-block; }
.msg-avatar img { width: 30px; height: 30px; border-radius: 50%; } .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 { display: inline-block; background-color: #f4f4f4; padding: 20px; border-radius: 10px; }
.msg-content-image { max-width: 120px; max-height: 120px; } .msg-content-image { max-width: 120px; max-height: 120px; }
.msg-send { position: absolute; bottom: 0; left: 0; z-index: 999; }
.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 { 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-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-time { padding: 0 5px; color: gray; font-size: 12px; margin: 5px 0; }
.msg-list { .msg-list {
position: relative; background-color: white; 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;
border-top-left-radius: 5px; border-bottom-left-radius: 5px;
height: 100%; border-right: 1px solid #dbe3e6; overflow-y: auto;
padding: 20px 10px; 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 { 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: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-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-content { color: gray; background-color: #f4f4f4; border-radius: 5px; padding: 2px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-list-badge { .msg-list-badge {
position: absolute; right: 5px; top: 5px; position: absolute; right: 5px; top: 5px;
width: 10px; height: 10px; border-radius: 10px; width: 10px; height: 10px; border-radius: 10px;
} }
/*.background-red { background-color: red; }*/
.background-red { background-color: red; }
.background-gray { background-color: gray; } .background-gray { background-color: gray; }
</style> </style>
<div class="row chat-container"> <div class="row chat-container">
<div class="col-lg-3 col-md-4 msg-list"> <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']}}
@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['unread'] == true)--}}
{{--<div class="msg-list-badge background-red"></div>--}}
{{--@else--}}
{{--<div class="msg-list-badge background-gray"></div>--}}
{{--@endif--}}
</div>
@endforeach
@endif
</div> </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 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>
<div class="msg-name">
<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']}}
{{$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']}}
</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> </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>
@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" src="{{$item['content']}}" alt="图片" title="图片" />
@endif
</div>
<div class="msg-time">
2021-01-01 12:02:03
</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> </div>
@endif
@endforeach
</div>
<div class="msg-content">#contents</div>
<div class="msg-time">#times</div>
</div>
</div>
</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 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>
<div class="msg-content text-left">#contents</div>
<div class="msg-time">#times</div>
</div> </div>
<div class="msg-content">#contents</div>
<div class="msg-time">#times</div>
</div> </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 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 class="msg-content text-left">#contents</div>
<div class="msg-time">#times</div>
</div> </div>
</div> </div>
</div>
<script src="js/helper.js" type="application/javascript"></script>
<script>
<script>
Dcat.ready(function() {
$('.msg-image').on('click', function (e) {
$('.image').click();
});
Dcat.ready(function() {
$('.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-guide/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)
}
// 获取元素距离父级元素顶部的距离
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();
}); });
});
$('input[name=msg-input]').on('keyup', function (e) {
if (e.keyCode == 13) {
$('.msg-text').click()
}
});
$('.image').on('change', function (e) {
$('.msg-text').on('click', function (e) {
let msgText = $('input[name=msg-input]').val()
let workorderId = $('input[name=workorder-id]').val()
$.ajax({
url: '/admin-guide/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)
let formData = new FormData()
formData.append("image", $(this)[0].files[0])
formData.append("workorder_id", $('input[name=workorder-id]').val())
$.ajax({
url: '/admin-guide/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()
$.ajax({
url: '/admin-guide/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>
</script>

2
resources/views/admin/pages/index.blade.php
View File

@ -217,7 +217,7 @@
contentType: false, contentType: false,
dataType: 'json', dataType: 'json',
success: function(res) { success: function(res) {
let imageUrl = 'https://hainan.lanzulive.com/'+res.data.content
let imageUrl = res.data.content
let msgTime = res.data.created_at let msgTime = res.data.created_at
let templateHtml = $('.template-my').html() let templateHtml = $('.template-my').html()
let imgDoc = '<img class="msg-content-image" onclick="viewImage(this)" src="'+imageUrl+'" alt="图片" title="图片" />' let imgDoc = '<img class="msg-content-image" onclick="viewImage(this)" src="'+imageUrl+'" alt="图片" title="图片" />'

395
resources/views/admin/pages/supplier-index.blade.php
View File

@ -1,241 +1,268 @@
<style> <style>
.chat-container { padding: 20px 40px; }
.chat-container { padding: 20px 40px; height: calc(100vh - 160px) }
.msg-chat { .msg-chat {
position: relative; background-color: white; padding: 40px 20px;
border-top-right-radius: 8px; border-bottom-right-radius: 8px;
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 { min-height: 800px; max-height: 800px; overflow-y: auto; overflow-x: hidden; }
.msg-chat-list { height: 100%; overflow-y: auto; overflow-x: hidden; padding-bottom: 20px; }
.msg-user { margin: 5px 0px; line-height: 30px; } .msg-user { margin: 5px 0px; line-height: 30px; }
.msg-name { display: inline-block; font-size: 14px; font-weight: bold; padding: 0px 5px; } .msg-name { display: inline-block; font-size: 14px; font-weight: bold; padding: 0px 5px; }
.msg-avatar { display: inline-block; } .msg-avatar { display: inline-block; }
.msg-avatar img { width: 30px; height: 30px; border-radius: 50%; } .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 { display: inline-block; background-color: #f4f4f4; padding: 20px; border-radius: 10px; }
.msg-content-image { max-width: 120px; max-height: 120px; } .msg-content-image { max-width: 120px; max-height: 120px; }
.msg-send { position: absolute; bottom: 0; left: 0; z-index: 999; }
.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 { 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-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-time { padding: 0 5px; color: gray; font-size: 12px; margin: 5px 0; }
.msg-list { .msg-list {
position: relative; background-color: white; 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;
border-top-left-radius: 5px; border-bottom-left-radius: 5px;
height: 100%; border-right: 1px solid #dbe3e6; overflow-y: auto;
padding: 20px 10px; 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 { 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: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-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-content { color: gray; background-color: #f4f4f4; border-radius: 5px; padding: 2px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-list-badge { .msg-list-badge {
position: absolute; right: 5px; top: 5px; position: absolute; right: 5px; top: 5px;
width: 10px; height: 10px; border-radius: 10px; width: 10px; height: 10px; border-radius: 10px;
} }
/*.background-red { background-color: red; }*/
.background-red { background-color: red; }
.background-gray { background-color: gray; } .background-gray { background-color: gray; }
</style> </style>
<div class="row chat-container"> <div class="row chat-container">
<div class="col-lg-3 col-md-4 msg-list"> <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']}}
@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['unread'] == true)--}}
{{--<div class="msg-list-badge background-red"></div>--}}
{{--@else--}}
{{--<div class="msg-list-badge background-gray"></div>--}}
{{--@endif--}}
</div>
@endforeach
@endif
</div> </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 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>
<div class="msg-name">
<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']}}
{{$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']}}
</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> </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>
@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" src="{{$item['content']}}" alt="图片" title="图片" />
@endif
</div>
<div class="msg-time">
2021-01-01 12:02:03
</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> </div>
@endif
@endforeach
</div>
<div class="msg-content">#contents</div>
<div class="msg-time">#times</div>
</div>
</div>
</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 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>
<div class="msg-content text-left">#contents</div>
<div class="msg-time">#times</div>
</div> </div>
<div class="msg-content">#contents</div>
<div class="msg-time">#times</div>
</div> </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 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 class="msg-content text-left">#contents</div>
<div class="msg-time">#times</div>
</div> </div>
</div> </div>
</div>
<script src="js/helper.js" type="application/javascript"></script>
<script>
<script>
Dcat.ready(function() {
$('.msg-image').on('click', function (e) {
$('.image').click();
});
Dcat.ready(function() {
$('.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-supplier/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)
}
// 获取元素距离父级元素顶部的距离
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();
}); });
});
$('input[name=msg-input]').on('keyup', function (e) {
if (e.keyCode == 13) {
$('.msg-text').click()
}
});
$('.image').on('change', function (e) {
$('.msg-text').on('click', function (e) {
let msgText = $('input[name=msg-input]').val()
let workorderId = $('input[name=workorder-id]').val()
$.ajax({
url: '/admin-supplier/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)
let formData = new FormData()
formData.append("image", $(this)[0].files[0])
formData.append("workorder_id", $('input[name=workorder-id]').val())
$.ajax({
url: '/admin-supplier/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()
$.ajax({
url: '/admin-supplier/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>
</script>
Write Preview
Loading…
Cancel
Save