replyTicket.blade.php 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. @extends('admin.layouts')
  2. @section('css')
  3. <link href="/assets/examples/css/structure/chat.css" type="text/css" rel="stylesheet">
  4. @endsection
  5. @section('content')
  6. <div class="page-content">
  7. <div class="panel panel-bordered">
  8. <div class="panel-heading">
  9. <h1 class="panel-title cyan-600"><i class="icon wb-help-circle"></i> {{$ticket->title}} </h1>
  10. @if($ticket->status != 2)
  11. <div class="panel-actions">
  12. <a href="/ticket/ticketList" class="btn btn-default">返 回</a>
  13. <button class="btn btn-danger" onclick="closeTicket()"> {{trans('home.ticket_close')}} </button>
  14. </div>
  15. @endif
  16. </div>
  17. <div class="panel-body">
  18. <div class="chat-box">
  19. <div class="chats">
  20. <div class="chat chat-left">
  21. <div class="chat-avatar">
  22. <p class="avatar">
  23. @if($ticket->user->qq)
  24. <img src="http://q1.qlogo.cn/g?b=qq&nk={{$ticket->user->qq}}&s=640" alt="客户">
  25. @elseif(strpos(strtolower($ticket->user->email),"@qq.com") !== FALSE)
  26. <img src="http://q1.qlogo.cn/g?b=qq&nk={{$ticket->user->email}}&s=640" alt="客户">
  27. @else
  28. <img src="/assets/images/avatar.svg" alt="客户">
  29. @endif
  30. </p>
  31. </div>
  32. <div class="chat-body">
  33. <div class="chat-content">
  34. <p>
  35. {!! $ticket->content !!}
  36. </p>
  37. <time class="chat-time">{{$ticket->created_at}}</time>
  38. </div>
  39. </div>
  40. </div>
  41. @foreach ($replyList as $reply)
  42. <div class="chat @if (!$reply->user->is_admin) chat-left @endif">
  43. <div class="chat-avatar">
  44. @if ($reply->user->is_admin)
  45. <p class="avatar">
  46. <img src="/assets/images/logo64.png"
  47. alt="{{trans('home.ticket_reply_master')}}"/>
  48. </p>
  49. @else
  50. <p class="avatar">
  51. @if($ticket->user->qq)
  52. <img src="http://q1.qlogo.cn/g?b=qq&nk={{$ticket->user->qq}}&s=640"
  53. alt="客户">
  54. @elseif(strpos(strtolower($ticket->user->email),"@qq.com") !== FALSE)
  55. <img src="http://q1.qlogo.cn/g?b=qq&nk={{$ticket->user->email}}&s=640"
  56. alt="客户">
  57. @else
  58. <img src="/assets/images/avatar.svg" alt="客户">
  59. @endif
  60. </p>
  61. @endif
  62. </div>
  63. <div class="chat-body">
  64. <div class="chat-content">
  65. <p>
  66. {!! $reply->content!!}
  67. </p>
  68. <time class="chat-time">{{$reply->created_at}}</time>
  69. </div>
  70. </div>
  71. </div>
  72. @endforeach
  73. </div>
  74. </div>
  75. </div>
  76. @if($ticket->status != 2)
  77. <div class="panel-footer pb-30">
  78. <form>
  79. <div class="input-group">
  80. <input type="text" class="form-control" id="editor"
  81. placeholder="{{trans('home.ticket_reply_placeholder')}}"/>
  82. <span class="input-group-btn">
  83. <button type="button" class="btn btn-primary"
  84. onclick="replyTicket()"> {{trans('home.ticket_reply')}}</button>
  85. </span>
  86. </div>
  87. </form>
  88. </div>
  89. @endif
  90. </div>
  91. </div>
  92. @endsection
  93. @section('script')
  94. <script type="text/javascript">
  95. //回车检测
  96. $(document).on("keypress", "input", function (e) {
  97. if (e.which === 13) {
  98. replyTicket();
  99. return false;
  100. }
  101. });
  102. // 关闭工单
  103. function closeTicket() {
  104. swal.fire({
  105. title: '确定关闭工单?',
  106. type: 'question',
  107. allowEnterKey: false,
  108. showCancelButton: true,
  109. cancelButtonText: '{{trans('home.ticket_close')}}',
  110. confirmButtonText: '{{trans('home.ticket_confirm')}}',
  111. }).then((result) => {
  112. if (result.value) {
  113. $.ajax({
  114. type: "POST",
  115. url: "/ticket/closeTicket",
  116. async: true,
  117. data: {_token: '{{csrf_token()}}', id: '{{$ticket->id}}'},
  118. dataType: 'json',
  119. success: function (ret) {
  120. swal.fire({
  121. title: ret.message,
  122. type: 'success',
  123. timer: 1000,
  124. showConfirmButton: false
  125. }).then(() => window.location.href = '/ticket/ticketList')
  126. },
  127. error: function () {
  128. swal.fire("未知错误!请通知客服!")
  129. }
  130. })
  131. }
  132. })
  133. }
  134. // 回复工单
  135. function replyTicket() {
  136. const content = document.getElementById('editor').value;
  137. if (content.trim() === '') {
  138. swal.fire({title: '您未填写工单内容!', type: 'warning', timer: 1500});
  139. return false;
  140. }
  141. swal.fire({
  142. title: '确定回复工单?',
  143. type: 'question',
  144. allowEnterKey: false,
  145. showCancelButton: true,
  146. cancelButtonText: '{{trans('home.ticket_close')}}',
  147. confirmButtonText: '{{trans('home.ticket_confirm')}}',
  148. }).then((result) => {
  149. if (result.value) {
  150. $.post("/ticket/replyTicket", {
  151. _token: '{{csrf_token()}}',
  152. id: '{{$ticket->id}}',
  153. content: content
  154. }, function (ret) {
  155. if (ret.status === 'success') {
  156. swal.fire({
  157. title: ret.message,
  158. type: 'success',
  159. timer: 1000,
  160. showConfirmButton: false
  161. }).then(() => window.location.reload())
  162. } else {
  163. swal.fire({title: ret.message, type: "error"}).then(() => window.location.reload())
  164. }
  165. });
  166. }
  167. })
  168. }
  169. </script>
  170. @endsection