index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" type="text/css" href="{$Think.ADMIN_SITE_ROOT}/css/index.css"/>
  6. <link rel="stylesheet" type="text/css" href="{$Think.ADMIN_SITE_ROOT}/css/jquery.sinaEmotion.css"/>
  7. <script src="{$Think.ADMIN_SITE_ROOT}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  8. </head>
  9. <script type="text/javascript">
  10. var client_id;
  11. var site = {
  12. 'code' : "{$data.site.code}",
  13. };
  14. var node = {
  15. 'address' : "{$data.node.address}"
  16. };
  17. var default_v_avatar = "{$Think.ADMIN_SITE_ROOT}/images/default_v_avatar.jpg";
  18. var default_s_avatar = "{$Think.ADMIN_SITE_ROOT}/images/default_s_avatar.jpg";
  19. var v_ids = [
  20. {volist name='data.chat_list' id='item'}
  21. "{$item.vid}",
  22. {/volist}
  23. ];
  24. var path = "{$Think.ADMIN_SITE_ROOT}";
  25. </script>
  26. <body>
  27. <div class="main">
  28. <div class="content">
  29. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  30. <tr>
  31. <td width="20%">
  32. <div class="guest-list-title">
  33. <p>访客列表:</p>
  34. </div>
  35. <div id="showusername">
  36. {volist name='data.chat_list' id='item'}
  37. <div class="visit_content {if condition='$item.is_online eq 0'}offline{/if}" id="g{$item.vid}" data-isonline='{$item.is_online}' onclick='openWin("{$item.vid}")' title="{$item.visitor.name}">
  38. <img class="guest-headerImg" {if condition="$item.visitor.avatar neq ''"}src="{$item.visitor.avatar}"{else/}src="{$Think.ADMIN_SITE_ROOT}/images/default_v_avatar.jpg"{/if} width="50px">
  39. <span class="guest_name">{$item.visitor.name}</span>
  40. <button class="delBtn" title="删除" onclick='delGuest("{$item.vid}")'>✕</button>
  41. <div id="messCount" class="messCount">0</div>
  42. </div>
  43. {/volist}
  44. </div>
  45. </td>
  46. <td width="50%" id="chat-content">
  47. <!-- 聊天记录 -->
  48. <form class="publish">
  49. <div class="history">
  50. <div class="scb_scrollbar scb_radius"><div class="scb_tracker"><div class="scb_mover scb_radius"></div></div></div>
  51. <div class="viewport loading3">
  52. <div class="overview">
  53. <div class="msgs">
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. <!-- 发送消息区域 -->
  59. <div class="send-area">
  60. <!-- 选择图片 -->
  61. <input type="file" id="inp-file" >
  62. <!-- 选择录音文件 -->
  63. <input type="file" id="inp-record"/>
  64. <!-- 选择视频 -->
  65. <input type="file" id="inp-video"/>
  66. <!-- 选择文件 -->
  67. <input type="file" id="inp-ohter"/>
  68. <div class="send-tools">
  69. <ul class="tools-nav">
  70. <li id="chooseImg" title="发送图片">
  71. <svg title="发送图片" class="icon" style="width: 1.3em; height: 1.3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5298"><path d="M956.67712 843.67872c-2.69312 50.048-68.03456 38.34368-102.16448 38.34368H127.86688c-13.4912 0-26.38848 1.21344-38.8352-5.23264-20.09088-10.41408-18.99008-31.89248-18.99008-50.77504v-68.4032V292.8128 180.48512c0-49.51552 67.21024-38.39488 99.28704-38.39488h663.45984c30.8736 0 68.70016-5.96992 98.94912 2.34496 38.00064 10.44992 24.9344 90.77248 24.9344 118.53312v226.16576l0.00512 354.54464c0 33.01376 51.2 33.01376 51.2 0V499.32288 270.09536c0-37.52448 7.49056-86.95296-6.6048-122.88-22.44608-57.21088-77.39904-56.32512-127.80032-56.32512H109.07136c-50.88256 0-87.5776 40.45312-90.21952 89.54368-0.53248 9.9072 0 19.9936 0 29.91104v613.8368c0 18.16064-0.23552 35.2768 6.6048 52.71552 13.97248 35.61984 48.81408 56.33024 86.3232 56.33024h794.75712c54.46656 0 98.24256-32.0256 101.34528-89.54368 1.77152-33.01376-49.43872-32.83968-51.20512-0.00512zM664.8576 335.2576c-1.4848 45.8752-36.16256 80.54784-82.03264 82.03264-45.85984 1.4848-80.62464-38.38976-82.03264-82.03264-1.4848-45.86496 38.38976-80.62464 82.03264-82.03264 45.85984-1.4848 80.62464 38.38976 82.03264 82.03264 1.06496 32.93184 52.27008 33.03424 51.2 0-2.40128-74.2144-59.02336-130.83648-133.23264-133.23264-74.17344-2.40128-130.94912 62.63296-133.23264 133.23264-2.40128 74.17344 62.63296 130.94912 133.23264 133.23264 74.17344 2.40128 130.94912-62.63296 133.23264-133.23264 1.07008-33.03424-50.13504-32.92672-51.2 0zM62.55616 700.80512l229.46304-186.02496h-36.20352l445.44512 389.93408c24.7296 21.65248 61.09184-14.4128 36.1984-36.1984l-445.44-389.9392c-11.34592-9.9328-24.79616-9.24672-36.20352 0L26.35264 664.60672c-25.66144 20.79744 10.79808 56.79104 36.20352 36.1984zM600.92416 751.11424l164.69504-185.1392h-36.1984c78.24384 75.37152 156.4928 150.7328 234.74688 226.0992 23.77728 22.90176 60.02176-13.2608 36.1984-36.1984-78.24384-75.37152-156.4928-150.7328-234.74688-226.0992-9.59488-9.24672-26.79808-10.5728-36.1984 0a2831453.4144 2831453.4144 0 0 0-164.69504 185.1392c-21.86752 24.576 14.21312 60.91776 36.1984 36.1984z" p-id="5299"></path></svg>
  72. </li>
  73. <li title="发送表情">
  74. <svg title="发送表情" class="icon face" style="width: 1.3m; height: 1.3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1862"><path d="M512.016 1024C229.232 1024 0.016 794.784 0.016 512 0.016 229.216 229.232 0 512.016 0 794.784 0 1024 229.216 1024 512 1024 794.784 794.784 1024 512.016 1024ZM512.016 64C264.976 64 64.016 264.96 64.016 512 64.016 759.024 264.976 960 512.016 960 759.04 960 960 759.024 960 512 960 264.96 759.04 64 512.016 64ZM510.336 833.456C509.056 833.456 507.744 833.488 506.448 833.488 310.992 833.488 229.024 657.12 225.616 649.552 218.336 633.424 225.488 614.496 241.584 607.216 257.712 599.968 276.576 607.088 283.888 623.088 286.64 629.12 352.928 769.488 506.576 769.488 507.584 769.488 508.576 769.456 509.584 769.456 672.896 767.552 738.368 624.768 739.024 623.344 746.176 607.216 765.024 599.872 781.264 607.152 797.392 614.336 804.672 633.248 797.456 649.408 794.176 656.8 714.208 831.056 510.336 833.456ZM671.504 479.84C636.224 479.84 607.664 451.232 607.664 415.984 607.664 380.768 636.224 352.176 671.504 352.176 706.768 352.176 735.344 380.768 735.344 415.984 735.344 451.232 706.768 479.84 671.504 479.84ZM351.504 479.84C316.224 479.84 287.664 451.232 287.664 415.984 287.664 380.768 316.224 352.176 351.504 352.176 386.768 352.176 415.344 380.768 415.344 415.984 415.344 451.232 386.768 479.84 351.504 479.84Z" p-id="1863"></path></svg>
  75. </li>
  76. <li id="record" onclick="startRecording(this)" title="发送录音">
  77. <svg title="发送录音" class="icon" style="width: 1.3em; height: 1.3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3853"><path d="M512 672c105.87 0 192-86.13 192-192V256c0-105.87-86.13-192-192-192s-192 86.13-192 192v224c0 105.87 86.13 192 192 192zM384 256a128 128 0 0 1 256 0v224a128 128 0 0 1-256 0z m416 640H544v-97.57A320.06 320.06 0 0 0 832 480a32 32 0 0 0-64 0 256 256 0 1 1-512 0 32 32 0 0 0-64 0 320.07 320.07 0 0 0 288 318.43V896H224a32 32 0 0 0-32 32 32 32 0 0 0 32 32h576a32 32 0 0 0 32-32 32 32 0 0 0-32-32z" p-id="3854"></path></svg>
  78. </li>
  79. <li id="chooseVideo" title="发送视频">
  80. <svg title="发送视频" class="icon" style="width: 1.3em; height: 1.3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2547"><path d="M960 192h-28.384c-16.8 0-32.928 6.624-44.928 18.432L800 295.936V256a96 96 0 0 0-96-96H96C43.072 160 0 203.04 0 256v512a96 96 0 0 0 96 96h608c52.992 0 96-43.008 96-96v-39.072l86.688 85.504c12 11.808 28.128 18.432 44.928 18.432H960a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64zM96 800c-17.664 0-32-14.368-32-32V256a32 32 0 0 1 32-32h608c17.632 0 32 14.336 32 32v512c0 17.632-14.368 32-32 32H96z m864-31.136h-32l-128-128V640l-32-32v-192l160-160h32v512.864z" fill="#333333" p-id="2548"></path></svg>
  81. </li>
  82. <li id="chooseFile" title="发送文件">
  83. <svg title="发送录音" class="icon" style="width: 1.3em; height: 1.3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1329 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4773"><path d="M1036.572 951.784h-780.721c-62.416 0-113.411-47.899-115.072-107.38l-78.125-495.818v-2.735c0-60.873 51.662-110.396 115.164-110.396h14.961v-63.036c0-60.873 51.651-110.396 115.13-110.396h234.199c42.067 0 105.428 34.714 140.178 74.338h302.237c48.717 0 161.228 35.661 166.943 104.891 45.468 14.762 78.311 56.069 78.311 104.599v2.747l-78.137 495.807c-1.659 59.493-52.643 107.38-115.072 107.38zM136.887 343.559l78.008 495.070v2.747c0 21.109 18.374 38.279 40.957 38.279h780.721c22.582 0 40.957-17.17 40.957-38.279v-2.747l78.008-495.070c-1.274-20.046-19.146-35.989-40.932-35.989h-37.075v-59.903c-1.823-3.846-12.027-14.026-34.48-24.113-23.096-10.357-46.52-15.078-58.536-15.078h-341.532l-10.87-17.147c-17.953-28.368-70.714-57.191-90-57.191h-234.199c-22.593 0-40.968 17.182-40.968 38.279v135.152h-89.135c-21.775 0-39.647 15.942-40.921 36z" p-id="4774"></path><path d="M100.875 306.542h1086.428v69.779h-1086.428z" p-id="4775"></path></svg>
  84. </li>
  85. </ul>
  86. </div>
  87. <div class="send-txt">
  88. <textarea id="sendTxt content" class="msger content" name="msger" type="text"></textarea>
  89. </div>
  90. <div class="send-btns">
  91. <button id="sendBtn" class="sender submit" onclick="guest_send();return false">发送</button>
  92. </div>
  93. </div>
  94. </form>
  95. </td>
  96. <td width="30%">
  97. <div class="others">
  98. <div class="other-content">
  99. <ul class="right-menunav">
  100. <li class="active" for="getPerson-Form">访客信息</li>
  101. <!-- <li for="getBlack-List">黑名单</li> -->
  102. <li for="getReply-List">快捷回复</li>
  103. </ul>
  104. <div class="tab-content">
  105. <div id="getPerson-Form" class="show tab">
  106. <h3>访问信息:</h3>
  107. <div id="account-form">
  108. <p>用户id: <span id="guest_id"></span></p>
  109. <p>归属地:<span id="from">中国</span></p>
  110. <p>访客状态:<span id="guest_status">在线</span></p>
  111. </div>
  112. </div>
  113. <div id="getReply-List" class="tab">
  114. <ul id="reply-List">
  115. {volist name='data.replys' id='item'}
  116. <li>{$item.reply_content}</li>
  117. {/volist}
  118. </ul>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </td>
  124. </tr>
  125. </table>
  126. <!-- 播放声音 -->
  127. <div id="wl_sounder" style="width:0;height:0;display:block;overflow:hidden;"></div>
  128. <div class="phrases_div" style="display:none"><div class="phrases_wrap">' . $phrases . '</div></div>
  129. <div class="phrasesen_div" style="display:none"><div class="phrases_wrap">' . $phrases_en . '</div></div>
  130. </div>
  131. </div>
  132. <script src="{$Think.ADMIN_SITE_ROOT}/js/jquery.tipTip.js" type="text/javascript" charset="utf-8"></script>
  133. <script src="{$Think.ADMIN_SITE_ROOT}/js/jquery.scrollbar.js" type="text/javascript" charset="utf-8"></script>
  134. <script src="{$Think.ADMIN_SITE_ROOT}/js/utils.js" type="text/javascript" charset="utf-8"></script>
  135. <script src="{$Think.ADMIN_SITE_ROOT}/layer/layer.js" type="text/javascript" charset="utf-8"></script>
  136. <script src="{$Think.ADMIN_SITE_ROOT}/js/support.js" type="text/javascript" charset="utf-8"></script>
  137. <script src="{$Think.ADMIN_SITE_ROOT}/js/jquery-sinaEmotion-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
  138. <script type="text/javascript">
  139. $('.face').bind({
  140. click: function(event){
  141. if(! $('#sinaEmotion').is(':visible')){
  142. $(this).sinaEmotion();
  143. event.stopPropagation();
  144. }
  145. }
  146. });
  147. </script>
  148. </body>
  149. </html>