kefu_seller.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659
  1. <extend name="Public:pinduoduobase" />
  2. <block name="content">
  3. <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
  4. <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
  5. <script src="__PUBLIC__/js/jquery/jquery-2.0.3.min.js"></script>
  6. <script type="text/javascript" src="__PUBLIC__/js/swfobject.js"></script>
  7. <script type="text/javascript" src="__PUBLIC__/js/web_socket.js"></script>
  8. <script type="text/javascript" src="__PUBLIC__/js/webuploader.js"></script>
  9. <script type="text/javascript" src="__PUBLIC__/js/blt.js"></script>
  10. <link rel="stylesheet" href="__PUBLIC__/pinduoduo/assets/css/boot_be1c95e75fda0728d17ebdb8dbbab6c1.css">
  11. <link rel="stylesheet" href="__PUBLIC__/pinduoduo/assets/css/chat_detail_v3_9381d0465e9ba3bf3d51f7eb4f3cc0a5.css">
  12. <style>
  13. #chat-detail-container{height:auto;}
  14. #list-container{position:relative;}
  15. #send-box{position:relative;}
  16. #send-box {
  17. position: fixed;
  18. bottom: 0px;
  19. }
  20. .load_more_msg {
  21. line-height: 40px;
  22. text-align: center;
  23. font-size: 12px;
  24. cursor: pointer;
  25. }
  26. .webuploader-pick{width:60px;height:60px;}
  27. </style>
  28. <script type="text/javascript">
  29. var user_name = "<?php echo $member_info['name']; ?>";
  30. var avatar = "<?php echo $member_info['avatar']; ?>";
  31. var s_logo = "<?php echo $seller_info['s_logo']; ?>";
  32. if (typeof console == "undefined") { this.console = { log: function (msg) { } };}
  33. // 如果浏览器不支持websocket,会使用这个flash自动模拟websocket协议,此过程对开发者透明
  34. WEB_SOCKET_SWF_LOCATION = "__PUBLIC__/swf/WebSocketMain.swf";
  35. // 开启flash的websocket debug
  36. WEB_SOCKET_DEBUG = true;
  37. var ws, name, client_list={};
  38. var domain = document.domain;
  39. var cur_page = 0;
  40. // 连接服务端
  41. function connect() {
  42. // 创建websocket
  43. ws = new WebSocket("wss://mall.shiziyu888.com/wss");
  44. // 当socket连接打开时,输入用户名
  45. ws.onopen = onopen;
  46. // 当有消息时根据消息类型显示不同信息
  47. ws.onmessage = onmessage;
  48. ws.onclose = function() {
  49. console.log("连接关闭,定时重连");
  50. connect();
  51. };
  52. ws.onerror = function() {
  53. console.log("出现错误");
  54. };
  55. }
  56. // 连接建立时发送登录信息
  57. function onopen()
  58. {
  59. //document.domain
  60. // 登录
  61. var login_data = '{ "type":"login","domain":"'+domain+'","avatar":"'+avatar+'","user_name":"'+user_name+'","uid":"<?php echo $member_id; ?>","room_id":<?php echo $seller_info['s_id']; ?>} ';
  62. console.log("websocket握手成功,发送登录数据:"+login_data);
  63. //$user_name = $message_data['user_name'];
  64. // $avatar = $message_data['avatar'];
  65. ws.send(login_data);
  66. //login
  67. }
  68. function onsaytosellergoods(link)
  69. {
  70. if(link.is_goods == undefined)
  71. {
  72. link.is_goods = 0;
  73. } else {
  74. link.is_goods = 1;
  75. }
  76. var login_data = '{ "type":"say","content_type":"goods","goods_name":"'+link.goods_name+'","goods_image":"'+link.goods_image+'","goods_price":"'+link.goods_price+'","avatar":"'+link.avatar+'","is_goods":"'+link.is_goods+'","user_name":"'+user_name+'","content":"'+encodeURIComponent(link.Text)+'","room_id":"<?php echo $seller_info['s_id']; ?>"} ';
  77. ws.send(login_data);
  78. }
  79. function onsaytosellerimage(link)
  80. {
  81. //{ Text: text,avatar:avatar}; image,thumb_image
  82. // 登录
  83. //var c={b:1}; console.log(c.d == undefined)
  84. if(link.is_goods == undefined)
  85. {
  86. link.is_goods = 0;
  87. } else {
  88. link.is_goods = 1;
  89. }
  90. var login_data = '{ "type":"say","image":"'+link.thumb_image+'","orign_image":"'+link.image+'","content_type":"image","avatar":"'+link.avatar+'","is_goods":"'+link.is_goods+'","user_name":"'+user_name+'","content":"'+encodeURIComponent(link.Text)+'","room_id":"<?php echo $seller_info['s_id']; ?>"} ';
  91. ws.send(login_data);
  92. //login
  93. }
  94. function onsaytoseller(link)
  95. {
  96. //{ Text: text,avatar:avatar};
  97. // 登录
  98. //var c={b:1}; console.log(c.d == undefined)
  99. if(link.is_goods == undefined)
  100. {
  101. link.is_goods = 0;
  102. } else {
  103. link.is_goods = 1;
  104. }
  105. var login_data = '{ "type":"say","content_type":"text","avatar":"'+link.avatar+'","is_goods":"'+link.is_goods+'","user_name":"'+user_name+'","content":"'+encodeURIComponent(link.Text)+'","room_id":"<?php echo $seller_info['s_id']; ?>"} ';
  106. ws.send(login_data);
  107. //login
  108. }
  109. // 服务端发来消息时
  110. function onmessage(e)
  111. {
  112. var data = eval("("+e.data+")");
  113. switch(data['type']){
  114. // 服务端ping客户端
  115. case 'ping':
  116. ws.send('{"type":"pong"}');
  117. break;
  118. //array('type'=>'resv_blog','blog_id'=>$blog_id);
  119. case 'seller_sayto_client':
  120. on_seller_mes(data);
  121. break;
  122. case 'clientmsg_page':
  123. on_clientpage(data);
  124. break;
  125. }
  126. }
  127. /**
  128. 接收聊天记录
  129. **/
  130. function on_clientpage(data)
  131. {
  132. //'page' =>1
  133. console.log(data.page);
  134. cur_page = data.page;
  135. var msg_data = data.data;
  136. if(msg_data.length == 0)
  137. {
  138. $('.load_more_msg').html('没有更多了');
  139. }
  140. for(var i in msg_data)
  141. {
  142. var msg_tmp = JSON.parse(msg_data[i]);
  143. //$('#template1').tmpl(link).appendTo('#chat-detail-list');
  144. msg_tmp.message = decodeURIComponent(msg_tmp.message);
  145. if(msg_tmp.type == 'client_sayto_seller')
  146. {
  147. if(msg_tmp.content_type =='image')
  148. {
  149. var new_content = '';
  150. new_content += '<a href="'+msg_tmp.image+'" target="_blank">';
  151. new_content += '<img src="'+msg_tmp.image+'" style="width: 152px;"></a>';
  152. msg_tmp.message = new_content;
  153. }else if(msg_tmp.content_type =='goods')
  154. {
  155. var new_content = '';
  156. new_content += '<div class="chat-goods-bubble" style="">';
  157. new_content += ' <div class="goods-box"> ';
  158. new_content += ' <img src="'+msg_tmp.goods_image+'">';
  159. new_content += ' <div class="goods-detail">';
  160. new_content += ' <p class="bubble-goods-name">'+msg_tmp.goods_name+'</p>';
  161. new_content += ' <div class="group-info">';
  162. new_content += ' <a class="price">¥'+msg_tmp.goods_price+'</a>';
  163. new_content += ' <i class="customer-num"></i>';
  164. new_content += ' </div>';
  165. new_content += ' </div>';
  166. new_content += ' </div>';
  167. new_content += '</div>';
  168. msg_tmp.message = new_content;
  169. }
  170. if(msg_tmp.is_goods != undefined && msg_tmp.is_goods ==1)
  171. {
  172. var link = { content: msg_tmp.message,avatar:avatar};
  173. $("#chat-detail-list").prepend($('#template3').tmpl(link));
  174. }else{
  175. var link = { Text: msg_tmp.message,avatar:msg_tmp.avatar,sent:msg_tmp.sent};
  176. $("#chat-detail-list").prepend($('#template0').tmpl(link));
  177. }
  178. } else{
  179. var link = { Text: msg_tmp.message,avatar:msg_tmp.avatar,sent:msg_tmp.sent};
  180. if(msg_tmp.content_type =='image')
  181. {
  182. var new_content = '';
  183. new_content += '<a href="'+msg_tmp.image+'" target="_blank">';
  184. new_content += '<img src="'+msg_tmp.image+'" style="width: 152px;"></a>';
  185. link.Text = new_content;
  186. }else if(msg_tmp.content_type =='goods')
  187. {
  188. var new_content = '';
  189. new_content += '<div class="chat-goods-bubble" style="">';
  190. new_content += ' <div class="goods-box"> ';
  191. new_content += ' <img src="'+msg_tmp.goods_image+'">';
  192. new_content += ' <div class="goods-detail">';
  193. new_content += ' <p class="bubble-goods-name">'+msg_tmp.goods_name+'</p>';
  194. new_content += ' <div class="group-info">';
  195. new_content += ' <a class="price">¥'+msg_tmp.goods_price+'</a>';
  196. new_content += ' <i class="customer-num"></i>';
  197. new_content += ' </div>';
  198. new_content += ' </div>';
  199. new_content += ' </div>';
  200. new_content += '</div>';
  201. link.Text = new_content;
  202. }
  203. $("#chat-detail-list").prepend($('#template1').tmpl(link));
  204. }
  205. }
  206. if(data.page == 1)
  207. {
  208. rela_wind();
  209. }
  210. }
  211. function on_seller_mes(data)
  212. {
  213. /**
  214. $data = array('room_id' => $room_id,'logo'=>$logo,'user_name' => $user_name, 'message' => $content, 'sent' => time(), 'type' =>'seller_sayto_client');
  215. **/
  216. data['message'] = decodeURIComponent(data['message']);
  217. var link = { Text: data['message'],avatar:data['avatar'],sent:data['sent']};
  218. $('#template1').tmpl(link).appendTo('#chat-detail-list');
  219. rela_wind();
  220. }
  221. $(function(){
  222. connect();
  223. })
  224. </script>
  225. <body>
  226. <div id="chat-detail-container" >
  227. <div id="list-container" >
  228. <div rel="more_panel_user_1" rel_page="0" class="load_more_msg">查看更多消息</div>
  229. <ul id="chat-detail-list">
  230. <?php if(!empty($goods_info)){ ?>
  231. <li class="chat-goods-card">
  232. <p class="chat-time-label"><?php echo date('H:i'); ?></p>
  233. <div class="chat-goods-box">
  234. <img class="card-goods-image" src="<?php echo $goods_info['image']; ?>">
  235. <div class="detail">
  236. <p class="card-goods-name"><?php echo $goods_info['name']; ?></p>
  237. <div class="group-info">
  238. <a class="price">¥<?php echo $goods_info['pinprice']; ?></a>
  239. <?php if(!empty($goods_info['pin_count'])){ ?>
  240. <i class="customer-num">/<?php echo $goods_info['pin_count']; ?>人团</i>
  241. <?php } ?>
  242. </div>
  243. <p class="card-button">发送商品链接</p>
  244. </div>
  245. </div>
  246. </li>
  247. <?php } ?>
  248. <li class="chat-detail-item" id="msg-1496282825243" style="display:none;">
  249. <div class="chat-item-box role-mall">
  250. <img class="chat-avatar" src="<?php echo $seller_info['s_logo']; ?>">
  251. <div class="chat-msg">
  252. <text-content>
  253. <pre>亲亲 我们的客服早上九点上班晚上24点下班哦 </pre>
  254. </text-content>
  255. </div>
  256. </div>
  257. </li>
  258. <li class="chat-detail-item" id="msg-1496286838024" style="display:none;">
  259. <div class="chat-time-label">11:13</div>
  260. <div class="chat-item-box role-customer">
  261. <img class="chat-avatar" src="http://pinduoduoimg.yangkeduo.com/base/mobile_user_avatar.png">
  262. <div class="chat-msg">
  263. <text-content>
  264. <pre>d</pre>
  265. </text-content>
  266. </div>
  267. </div>
  268. </li>
  269. </ul>
  270. </div>
  271. </div>
  272. <div style="height:51px;"></div>
  273. <div id="send-box" ms-visible="!showingOrderList" ms-css-height="sendBoxHeight">
  274. <div id="chat-order-list-text-container">
  275. <div id="extra-panel" style="">
  276. <!--ms-if-->
  277. <div class="panel-btn" style="">
  278. <div class="panel-btn-image" id="send-pic"></div>
  279. <div class="send-icon xo-weixin-blt-upload" id="xo-weixin-blt-upload-btn-0" data-url="{:U('Image/upload_binaryFile')}">
  280. </div>
  281. <input type="hidden" name="images" id="images" value="" />
  282. </div>
  283. </div>
  284. <textarea rows="1" id="message-input" class="input-content typing" type="text" style="margin-left:60px;height: 38px;padding-left:20px;"></textarea>
  285. <div id="extra-button" style="display: none;"> </div>
  286. <div id="extra-button-fold" style="display: none;"> </div>
  287. <div id="send-button" >发送</div>
  288. </div>
  289. </div>
  290. <div id="order-list-positioner" style="display:none"></div>
  291. <style>
  292. #send-box #extra-panel {
  293. border-top:none;
  294. padding:0px;
  295. position: absolute;
  296. width: 50px;
  297. height: 50px;
  298. overflow: hidden;
  299. top: 5px;
  300. left: 5px;
  301. }
  302. #send-box .panel-btn {
  303. background-color: #fff;
  304. height: 40px;
  305. width: 40px;
  306. height: 40px;
  307. margin-bottom: 0px;
  308. margin-right: 0px;
  309. display: inline-block;
  310. padding: 0px;
  311. border: 1px solid #dcdcdc;
  312. border-radius: 8px;
  313. text-align: center;
  314. margin: 0px auto;
  315. }
  316. #send-box #send-pic {
  317. position: relative;
  318. margin: 0px auto;
  319. margin-top: 6px;
  320. }
  321. .chat-goods-bubble{
  322. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnkAAADUCAMAAADXysWKAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAHOUExURUxpcUvARES7RErARUzARUrAREu/RFWqVUm/RjPMM0+/P0y/RUrAREu/RFLBS0vARQD/AEu/RUrARUvAREq/RUu/REq/RF/GWUvAREq/RUrAREjISErAREq/REu/RErARUu/RkrAREzBRn//f0u/RF/GWlHBTE3CQkrAREvARUu/RUq/REu/RUvARUy/RkbGRmLHXErARErAREnARE/CSkvDS0vAREq+Q0vARUvARUu/RUrARGHHXEu/RUvBRl7GWU29R0q/RVXDT1HCS07BSUu/RUu/REvARUvARUnCQ0u/RUvARkvARkq+RErAREu/RUu/RE28QlbDUEq/REq/Rf///0vARfv++3XPcY7XivD68KviqHfPcu/57nrRdvX89dfx1v3+/djx1/r9+uP149Pw0uT243zRd2XJYLvnufT79NXw1O357aziqe757ez4687uzWTJX2rLZd7z3XrQddry2cLqwJfak57dm93z3JnblbvnuPH68MDpvpzcmWHIXNry2O/6713GWJvcmHvRd2DHW9zz22fKYd/03rDjreD0377ovJPZj7nnt3jQdJrcl/7//tny2HHNbMTqwo/Yi9bx1dLv0Oj354jVhLPksHPJSqUAAABVdFJOUwD4D5PnfukDTAUQ6quU9VUBWOjExpH5/oMw2w5/ibrA6VZXApX+8S6CUYC52bcoEv7XKS3wEbNPkrDdhv5UW/4rXPjz8Cy2y6wm1ujrS1L6vhf9Wdo6Gr6DAAADjElEQVR42u3c15YUVQCG0eqZjpMjM0QTIiBmRckimDAgCB0mM4ksguRoRAEDKqK+rVde1ASups5Zi7X3I/zruzinurqS5H+Vcn9fT64KSyfX09dfriSP0lJoHRk+OVo7DEunNnry9MjHhZbFw+vON2btRCZmG/nuRbortf84aSAyM3msvbRgeG1j49YhQ+NjbQul91bd8Y6MD3zn184Pr/OHIcuQsRNnn5ob3sr8hF3I3ER+7g230LAKATQK6fAqrdNGIYDpJ9OPlD+p24Qg6uVUec3DJiGI4eZUeb0zJiGImd5UecVTJiGIL4qp8nJTJiGIqWWp8qoWIZCq8lAeygPloTxQHsoD5aE8UB7KA+WhPJRnEJTHY+3c08ojhq86nlMeMVzc+pLyiOHm8yXlEcGR71crjxiuv9ypPGK40vGa8ojhxoo3lEcM371QUh4xbhlj25RHDEPbdyiPGG7veVd5xHBvRZPyiOG390rKI8Yt49dB5RHDzx8ojwh+2bdSeYQ3ufdDNwzCGx0oe6pCeLX6Kk+SieDSli7lEd61V5r8bkt4X7/+orekCO+bgTe9GUqE28XIRm/DE8HVzV3KI7zjm5r894zwLqx71T+9CW/o2Q2+bkEER9f7og8xVJ9RHlHK8/08lIfyQHkoD5SH8kB5KA+Uh/JAeSgP5RkE5aE8UB7KA+WhPFAeygPloTyUpzyUh/JAeSgPlIfyQHkoD5SH8kB5KA/lgfJQHigP5YHyUB4oD+WB8lAeylMeykN5oDyUB8pDeaA8lAfKQ3koT3koD+WB8lAeKA/lgfJQHigP5YHyUB7KA+WhPFAeygPloTxQHsoD5aE8lKc8lIfyQHkoD5SH8kB5KA+Uh/JQnvJQHsoD5aE8UB7KA+WhPFAeygPloTyUB8pDeaA8lAfKQ3mgPJQHykN5KE95KA/lgfJQHigP5YHyUB4oD+WhPOWhPJQHykN5oDweq/JyUxYhRnnFUxYhRnm9MxYhRnnNwxYhiNqyVHnlukkI4kxPqrxK67RNCOHLJ1LlJYWGTQjh8mC6vKb8hFEIcMz7dnm6vKTz1pBZyNydNclczfWaXcjYTx1vzyuv1HZ03DJk6u6uncl8pfZjv9uG7Nw//s7uZEHdHz2YtQ8Z3S3+/OP95ckiWla1jpz+a9SBjyV14u+H//5z8LNPu5LFVcr9fcX9VVg6ueKhNas/P7BQb/8BiarQ/vjF/yMAAAAASUVORK5CYII=);
  323. }
  324. </style>
  325. <div id="div_template1"></div><br />
  326. <script id="template0" type="text/x-jquery-tmpl">
  327. <li class="chat-detail-item" >
  328. {{if sent!=''}}
  329. <div class="chat-time-label">${sent}</div>
  330. {{/if}}
  331. <div class="chat-item-box role-customer">
  332. <img class="chat-avatar" src="${avatar}">
  333. <div class="chat-msg">
  334. <text-content>
  335. <pre>{{html Text}}</pre>
  336. </text-content>
  337. </div>
  338. </div>
  339. </li>
  340. </script>
  341. <script id="template1" type="text/x-jquery-tmpl">
  342. <li class="chat-detail-item">
  343. {{if sent!=''}}
  344. <div class="chat-time-label">${sent}</div>
  345. {{/if}}
  346. <div class="chat-item-box role-mall">
  347. <img class="chat-avatar" src="${avatar}">
  348. <div class="chat-msg">
  349. <text-content>
  350. <pre>{{html Text}} </pre>
  351. </text-content>
  352. </div>
  353. </div>
  354. </li>
  355. </script>
  356. <script id="template2" type="text/x-jquery-tmpl">
  357. <li class="chat-detail-item">
  358. <div class="chat-item-box role-customer">
  359. <img class="chat-avatar" src="${avatar}">
  360. <div class="chat-goods-bubble" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnkAAADUCAMAAADXysWKAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAHOUExURUxpcUvARES7RErARUzARUrAREu/RFWqVUm/RjPMM0+/P0y/RUrAREu/RFLBS0vARQD/AEu/RUrARUvAREq/RUu/REq/RF/GWUvAREq/RUrAREjISErAREq/REu/RErARUu/RkrAREzBRn//f0u/RF/GWlHBTE3CQkrAREvARUu/RUq/REu/RUvARUy/RkbGRmLHXErARErAREnARE/CSkvDS0vAREq+Q0vARUvARUu/RUrARGHHXEu/RUvBRl7GWU29R0q/RVXDT1HCS07BSUu/RUu/REvARUvARUnCQ0u/RUvARkvARkq+RErAREu/RUu/RE28QlbDUEq/REq/Rf///0vARfv++3XPcY7XivD68KviqHfPcu/57nrRdvX89dfx1v3+/djx1/r9+uP149Pw0uT243zRd2XJYLvnufT79NXw1O357aziqe757ez4687uzWTJX2rLZd7z3XrQddry2cLqwJfak57dm93z3JnblbvnuPH68MDpvpzcmWHIXNry2O/6713GWJvcmHvRd2DHW9zz22fKYd/03rDjreD0377ovJPZj7nnt3jQdJrcl/7//tny2HHNbMTqwo/Yi9bx1dLv0Oj354jVhLPksHPJSqUAAABVdFJOUwD4D5PnfukDTAUQ6quU9VUBWOjExpH5/oMw2w5/ibrA6VZXApX+8S6CUYC52bcoEv7XKS3wEbNPkrDdhv5UW/4rXPjz8Cy2y6wm1ujrS1L6vhf9Wdo6Gr6DAAADjElEQVR42u3c15YUVQCG0eqZjpMjM0QTIiBmRckimDAgCB0mM4ksguRoRAEDKqK+rVde1ASups5Zi7X3I/zruzinurqS5H+Vcn9fT64KSyfX09dfriSP0lJoHRk+OVo7DEunNnry9MjHhZbFw+vON2btRCZmG/nuRbortf84aSAyM3msvbRgeG1j49YhQ+NjbQul91bd8Y6MD3zn184Pr/OHIcuQsRNnn5ob3sr8hF3I3ER+7g230LAKATQK6fAqrdNGIYDpJ9OPlD+p24Qg6uVUec3DJiGI4eZUeb0zJiGImd5UecVTJiGIL4qp8nJTJiGIqWWp8qoWIZCq8lAeygPloTxQHsoD5aE8UB7KA+WhPJRnEJTHY+3c08ojhq86nlMeMVzc+pLyiOHm8yXlEcGR71crjxiuv9ypPGK40vGa8ojhxoo3lEcM371QUh4xbhlj25RHDEPbdyiPGG7veVd5xHBvRZPyiOG390rKI8Yt49dB5RHDzx8ojwh+2bdSeYQ3ufdDNwzCGx0oe6pCeLX6Kk+SieDSli7lEd61V5r8bkt4X7/+orekCO+bgTe9GUqE28XIRm/DE8HVzV3KI7zjm5r894zwLqx71T+9CW/o2Q2+bkEER9f7og8xVJ9RHlHK8/08lIfyQHkoD5SH8kB5KA+Uh/JAeSgP5RkE5aE8UB7KA+WhPFAeygPloTyUpzyUh/JAeSgPlIfyQHkoD5SH8kB5KA/lgfJQHigP5YHyUB4oD+WB8lAeylMeykN5oDyUB8pDeaA8lAfKQ3koT3koD+WB8lAeKA/lgfJQHigP5YHyUB7KA+WhPFAeygPloTxQHsoD5aE8lKc8lIfyQHkoD5SH8kB5KA+Uh/JQnvJQHsoD5aE8UB7KA+WhPFAeygPloTyUB8pDeaA8lAfKQ3mgPJQHykN5KE95KA/lgfJQHigP5YHyUB4oD+WhPOWhPJQHykN5oDweq/JyUxYhRnnFUxYhRnm9MxYhRnnNwxYhiNqyVHnlukkI4kxPqrxK67RNCOHLJ1LlJYWGTQjh8mC6vKb8hFEIcMz7dnm6vKTz1pBZyNydNclczfWaXcjYTx1vzyuv1HZ03DJk6u6uncl8pfZjv9uG7Nw//s7uZEHdHz2YtQ8Z3S3+/OP95ckiWla1jpz+a9SBjyV14u+H//5z8LNPu5LFVcr9fcX9VVg6ueKhNas/P7BQb/8BiarQ/vjF/yMAAAAASUVORK5CYII=&quot;);">
  361. <div class="goods-box">
  362. <img src="${image}">
  363. <div class="goods-detail">
  364. <p class="bubble-goods-name">${goods_name}</p>
  365. <div class="group-info">
  366. <a class="price">${price}</a>
  367. <i class="customer-num">${pin_count}</i>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. </li>
  374. </script>
  375. <script id="template3" type="text/x-jquery-tmpl">
  376. <li class="chat-detail-item">
  377. <div class="chat-item-box role-customer">
  378. <img class="chat-avatar" src="${avatar}">
  379. {{html content}}
  380. </div>
  381. </li>
  382. </script>
  383. <script src="__PUBLIC__/js/jquery.tmpl.min.js"></script>
  384. <script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
  385. <script>
  386. $(function () {
  387. var uploder_url = $('.xo-weixin-blt-upload').data('url');
  388. //创建上传
  389. var uploader_0 = WebUploader.create({
  390. // 选完文件后,是否自动上传
  391. auto: true,
  392. // 文件接收服务端
  393. server: uploder_url,
  394. // 选择文件的按钮
  395. pick: {
  396. id : '#xo-weixin-blt-upload-btn-0',
  397. multiple : false
  398. },
  399. sendAsBinary: true,
  400. // 不压缩图片
  401. resize: false,
  402. // 只允许选择的文件
  403. accept: {
  404. title: '添加附件',
  405. extensions: 'jpg,jpeg,png',
  406. mimeTypes: 'image/jpg,image/jpeg,image/png'
  407. },
  408. fileNumLimit: 1,
  409. fileSingleSizeLimit: 10240000 //文件大小10M
  410. });
  411. // 文件上传中
  412. uploader_0.on('uploadProgress', function (file, percentage) {
  413. $('#xo-weixin-blt-upload-btn-0').removeClass('upload-success');
  414. $('#xo-weixin-blt-upload-btn-0').removeClass('upload-error');
  415. $('#xo-weixin-blt-upload-btn-0').addClass('upload-progress');
  416. $('#xo-weixin-blt-upload-btn-0 .webuploader-pick').html(parseInt(percentage * 100) + '%');
  417. });
  418. // 文件上传成功
  419. uploader_0.on('uploadSuccess', function (file, response) {
  420. $('#xo-weixin-blt-upload-btn-0').removeClass('upload-progress');
  421. $('#xo-weixin-blt-upload-btn-0').removeClass('upload-error');
  422. $('#xo-weixin-blt-upload-btn-0').addClass('upload-success');
  423. uploader_0.makeThumb(file, function (error, src) {
  424. if (error) {
  425. //$('#xo-weixin-blt-upload-btn-0 .webuploader-pick').html('成功');
  426. console.log('成功');
  427. return;
  428. }
  429. var text = '<a href="'+response.filePath+ '/'+response.fileName +'" target="_blank"><img src="'+response.filePath+ '/'+response.fileName +'" style="width: 152px;" /></a>';
  430. var myDate = new Date();
  431. var year = myDate.getFullYear();
  432. var month = myDate.getMonth();
  433. var day = myDate.getDate();
  434. var hour = myDate.getHours();
  435. var minute = myDate.getMinutes();
  436. var second = myDate.getSeconds();
  437. var cur_time = year+'-'+month+"-"+day+" "+hour+':'+minute+':'+second;
  438. var link = { Text: text,avatar:avatar,sent:cur_time};
  439. $('#template0').tmpl(link).appendTo('#chat-detail-list');
  440. $('#message-input').val('');
  441. //$('#send-button').hide();
  442. //$('#extra-button').show();
  443. link.thumb_image = response.filePath+ '/'+response.fileName;
  444. link.orign_image = response.filePath+ '/'+response.fileName;
  445. //k.thumb_image+'","orign_image":"'+link.image+
  446. //onsaytosellerimage();
  447. onsaytosellerimage(link);
  448. rela_wind();
  449. //$('#add_imglist').append('<li rel="'+response.filePath + '/' + response.fileName+'"><span class="xo-weixin-blt-upload-btn"><img src="'+src+'" style="width:53px; height:53px; vertical-align:top;"></span></li>');
  450. }, 180, 180);
  451. uploader_0.reset();
  452. $('input#attachment-0').val(response.filePath + '/' + response.fileName);
  453. });
  454. // 文件上传失败
  455. uploader_0.on('uploadError', function (file) {
  456. //$('#xo-weixin-blt-upload-btn-0 .webuploader-pick').html('失败');
  457. });
  458. });
  459. </script>
  460. <script>
  461. $(function(){
  462. $('#chat-detail-container').click(function(){
  463. })
  464. $("#message-input").keyup(function(){
  465. var in_val = $(this).val();
  466. in_val = $.trim(in_val);
  467. if(in_val.length >0)
  468. {
  469. //$('#extra-button').hide();
  470. //$('#send-button').show();
  471. } else{
  472. //$('#send-button').hide();
  473. //$('#extra-button').show();
  474. }
  475. });
  476. $('#message-input').click(function(){
  477. })
  478. $(function () {
  479. $('#extra-button').click(function(){
  480. $('#extra-panel').show();
  481. });
  482. $('#send-box .typing').css('width', ($('#chat-order-list-text-container').width() -140) +'px')
  483. var users = [{ ID: '1', Name: 'xishuai1' }, { ID: '2', Name: 'xishuai2' }];
  484. //$('#template1').tmpl(link).appendTo('#div_template1');
  485. //$('#template2').tmpl(users).appendTo('#div_template2');
  486. });
  487. $('.card-button').click(function(){
  488. var goods_name = $(this).siblings('.card-goods-name').html();
  489. var price = $(this).siblings('.group-info').children('.price').html();
  490. var pin_count = $(this).siblings('.group-info').children('.customer-num').html();
  491. var image = $(this).parent().siblings('.card-goods-image').attr('src');
  492. var link = { goods_name: goods_name,image:image,avatar:avatar,price:price,pin_count:pin_count};
  493. $('#template2').tmpl(link).appendTo('#chat-detail-list');
  494. // 登录
  495. //var login_data = '{ "type":"say","avatar":"'+link.avatar+'","user_name":"'+user_name+'",
  496. //"content":"'+link.Text+'","room_id":"<?php echo $seller_info['s_id']; ?>"} ';
  497. var content = '';
  498. content+= ' <div class="chat-goods-bubble" style="">';
  499. content+= ' <div class="goods-box">';
  500. content+= ' <img src="'+image+'">';
  501. content+= ' <div class="goods-detail">';
  502. content+= ' <p class="bubble-goods-name">'+goods_name+'</p>';
  503. content+= ' <div class="group-info">';
  504. content+= ' <a class="price">'+price+'</a>';
  505. content+= ' <i class="customer-num">'+pin_count+'</i>';
  506. content+= ' </div>';
  507. content+= ' </div>';
  508. content+= ' </div>';
  509. content+= ' </div>';
  510. rela_wind();
  511. var link_data = {avatar:avatar,goods_price:price,goods_name:goods_name,goods_image:image,is_goods:1,Text:(content)};
  512. onsaytosellergoods(link_data);
  513. })
  514. $('#send-button').click(function(){
  515. var text = $('#message-input').val();
  516. if(text == '')
  517. {
  518. $.toast("不能发送空消息", "text");
  519. return false;
  520. }
  521. var myDate = new Date();
  522. var year = myDate.getFullYear();
  523. var month = myDate.getMonth();
  524. var day = myDate.getDate();
  525. var hour = myDate.getHours();
  526. var minute = myDate.getMinutes();
  527. var second = myDate.getSeconds();
  528. var cur_time = year+'-'+month+"-"+day+" "+hour+':'+minute+':'+second;
  529. var link = { Text: text,avatar:avatar,sent:cur_time};
  530. $('#template0').tmpl(link).appendTo('#chat-detail-list');
  531. $('#message-input').val('');
  532. //$('#send-button').hide();
  533. //$('#extra-button').show();
  534. onsaytoseller(link);
  535. rela_wind();
  536. })
  537. })
  538. function rela_wind()
  539. {
  540. scrollToEnd();
  541. }
  542. $(function(){
  543. /**
  544. $('#chat-detail-container').pullToRefresh();
  545. $('#chat-detail-container').on("pull-to-refresh", function() {
  546. //开始发送包
  547. var login_data = '{ "type":"get_client_page","page":'+cur_page+',"room_id":"<?php echo $seller_info['s_id']; ?>"} ';
  548. ws.send(login_data);
  549. $('#chat-detail-container').pullToRefreshDone();
  550. });
  551. **/
  552. $('.load_more_msg').click(function(){
  553. var login_data = '{ "type":"get_client_page","page":'+cur_page+',"room_id":"<?php echo $seller_info['s_id']; ?>"} ';
  554. ws.send(login_data);
  555. })
  556. })
  557. function scrollToEnd()
  558. {
  559. var h = $(document).height()-$(window).height();
  560. $(document).scrollTop(h);
  561. }
  562. </script>
  563. </block>