show.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="referrer" content="origin">
  6. <meta http-equiv="X-UA-Compatible"content="IE=edge">
  7. <meta content="telephone=no" name="format-detection" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  9. <title>{$liveinfo['title']|default=$site_info['site_name']}</title>
  10. <link rel="stylesheet" type="text/css" href="__STATIC__/wxshare/share/css/swiper.css">
  11. <link rel="stylesheet" type="text/css" href="__STATIC__/wxshare/share/css/iconfont.css">
  12. <link rel="stylesheet" type="text/css" href="__STATIC__/wxshare/share/css/style.css">
  13. <script type="text/javascript" src="__STATIC__/wxshare/share/js/jquery-1.10.1.min.js"></script>
  14. <script type="text/javascript" src="__STATIC__/js/layer/layer.js"></script>
  15. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  16. <script type="text/javascript" src="__STATIC__/wxshare/share/js/swiper.js"></script>
  17. <script type="text/javascript" src="__STATIC__/wxshare/share/js/txbb-pop.js"></script>
  18. <script type="text/javascript" src="__STATIC__/wxshare/share/js/template.js"></script>
  19. <script type="text/javascript" src="__STATIC__/wxshare/share/js/socket.io.js?t=1571883215"></script>
  20. <script type="text/javascript">
  21. var room_id = '{$liveinfo['stream']}';
  22. var to_uid = '{$liveinfo['uid']}';
  23. var User = {$userinfoj};
  24. var isiPad = /iPad/i.test(navigator.userAgent);
  25. var isiPhone = /iPhone|iPod/i.test(navigator.userAgent);
  26. var isAndroid = /Android/i.test(navigator.userAgent);
  27. var isWeixin = /MicroMessenger/i.test(navigator.userAgent);
  28. var isQQ = /QQ/i.test(navigator.userAgent);
  29. var isIOS = (isiPad || isiPhone);
  30. var isWeibo = /Weibo/i.test(navigator.userAgent);
  31. var isApp = (isAndroid || isIOS);
  32. if(isWeixin && !User){
  33. window.location.href='/wxshare/Share/wxLogin?roomnum='+to_uid;
  34. }
  35. var field='{$words_j}';
  36. var fly="";
  37. var videosrc='{$hls}';
  38. var islive="{$liveinfo['islive']}";
  39. var thumb='{$liveinfo['avatar']}';
  40. var h=window.screen.height;
  41. var videotimer='',request='';
  42. var socket = new io("{$configpri['chatserver']}");
  43. $(function(){
  44. if(islive==1){
  45. videotimer=setTimeout("connectChange()", 1000);
  46. }else{
  47. $("#state").show();
  48. }
  49. });
  50. /*西瓜播放器-安卓,苹果手机播放兼容性全屏展示控制*/
  51. var playsinline=false;
  52. if(isIOS){
  53. playsinline=true;
  54. }
  55. function connectChange(){
  56. if(videosrc){
  57. $("#videoPlay").show();
  58. var div='<button id="play"><img src="__STATIC__/wxshare/share/images/play.png" width="61"></button>';
  59. $("#top_box").append(div);
  60. $("#state").hide();
  61. $("#top_box").show();
  62. var data_play={
  63. "autoplay": false,
  64. "autoplayMuted": false,
  65. "playsinline":playsinline,
  66. "loop": true,
  67. "controls": false,
  68. 'x5-video-player-type': 'h5',
  69. 'x5-video-player-fullscreen': "true"
  70. };
  71. xgPlay('video_play',videosrc,data_play);
  72. }else{
  73. $("#videoPlay").hide();
  74. $("#play").remove();
  75. $("#state").show();
  76. $("#top_box").hide();
  77. $(".jw-preview").show();
  78. $(".section1_box .roomtitle").remove();
  79. clearInterval(videotimer);
  80. return !1;
  81. }
  82. }
  83. </script>
  84. <script type="text/javascript" src="__STATIC__/wxshare/share/js/eventListen.js?t=1584778809"></script>
  85. </head>
  86. <body>
  87. <!--视频-->
  88. <section class="section1">
  89. <article class="jwplayer jw-reset jw-stretch-fill">
  90. <div class="jw-media jw-reset">
  91. <div id="videoPlay" style="width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;">
  92. <div id="video_play"></div>
  93. </div>
  94. <div id="state" style="text-align:center;line-height:40px;position:absolute;top:35%;z-index:11;color:#fff;padding:20px;display:none;">
  95. <h2>
  96. <if condition="$liveinfo['islive'] neq 1">
  97. 抱歉,这个房间的主播已经退出房间啦...
  98. </if>
  99. </h2>
  100. </div>
  101. <div class="jw-preview jw-reset" style="background-image: url('{$liveinfo['avatar']}')"></div>
  102. </div>
  103. </article>
  104. <article class="section1_box" id="section1_box">
  105. <header class="header clearfix">
  106. <div class="clearfix">
  107. <div class="userinfo">
  108. <img src="{$liveinfo['avatar_thumb']}" userid="{$liveinfo['uid']}">
  109. <span class="ulive">{$liveinfo['user_nickname']}</span>
  110. <span class="unum">房间号:{$liveinfo['uid']}</span>
  111. </div>
  112. <div class="userimg" id="userimg">
  113. <ul class="userpic clearfix" id="userpic"></ul>
  114. </div>
  115. <if condition="$isattention eq 1">
  116. <div class="user_followed on" type="1">
  117. 已关注
  118. </div>
  119. <else/>
  120. <div class="user_followed" type="0">
  121. 关注
  122. </div>
  123. </if>
  124. </div>
  125. </header>
  126. <article class="msg-box" id="upchat_hall">
  127. <div class="msg-con" id="chat_hall"></div>
  128. </article>
  129. <article class="chat_input">
  130. <div class="chat_barrage">
  131. <span>弹幕</span>
  132. </div>
  133. <span class="text_input">
  134. <input id="message" name="textfield" type="text" class="input" placeholder="点击这输入文字" value="" maxlength="200">
  135. </span>
  136. <span class="send" id="chat">
  137. 发送
  138. </span>
  139. </article>
  140. <!--礼物列表-->
  141. <article class="chat_gift">
  142. <div class="swiper-container">
  143. <div class="swiper-wrapper" id="swiper-wrapper"></div>
  144. <div class="swiper-pagination"></div>
  145. </div>
  146. <div class="chat_gift_send">
  147. <div class="balance"><a href="/wxshare/Share/pay">充值</a>:<span class="bglance_money">{$userinfo['coin']|default=0}</span><span class="gift-coin"></span><span class="gift-bbar-text">></span> </div>
  148. <div class="send_button">发送</div>
  149. </div>
  150. <div class="gift-countdown-bg" id="gift_countdown_bg">
  151. <div class="gift-countdown-btn">
  152. <p class="gift-countdown-btn-text" onselectstart="return false">连发</p>
  153. <p class="gift-countdown-btn-time" onselectstart="return false">5</p>
  154. </div>
  155. </div>
  156. </article>
  157. <!--礼物列表-->
  158. <article id="heart"><canvas id="canvas"></canvas></article>
  159. <nav class="chat-tool">
  160. <ul>
  161. <!-- <li><img src="__STATIC__/wxshare/share/images/talk.png" id="talk-btn"></li>
  162. <li><img src="__STATIC__/wxshare/share/images/sentgift.png" id="gift-btn"></li> -->
  163. <li style="float:right;">
  164. <a href="/wxshare/Share/index">
  165. <img src="__STATIC__/wxshare/share/images/ic_room_btn_close_pressed.png">
  166. </a>
  167. </li>
  168. </ul>
  169. </nav>
  170. <article id="top_box" style="display: none;">
  171. <!-- <button id="play"><img src="__STATIC__/wxshare/share/images/play.png" width="61"></button> -->
  172. </article>
  173. <!--礼物显示效果-->
  174. <div class="hjPopGift hjPopGift_small first"><i class="icon-avatar"></i><div class="nickname"></div><div class="giftname"></div><i class="icon-gift"></i><div class="giftNum"></div></div>
  175. <div class="hjPopGift hjPopGift_small last"><i class="icon-avatar"></i><div class="nickname"></div><div class="giftname"></div><i class="icon-gift"></i><div class="giftNum"></div></div>
  176. <div class="hjPopGift hjPopGift_big"><div class="giftMsg"></div><img></div>
  177. <!--弹幕-->
  178. <div class="chat_barrage_box"></div>
  179. </article>
  180. <section class="touchbox" id="touchbox"></section>
  181. <!-- 下载 -->
  182. <div class="down-bottom" onclick="downurl()">
  183. <img src="__STATIC__/wxshare/share/images/down.png">
  184. </div>
  185. </section>
  186. <!--视频-->
  187. <!--QQ 微信分享提示-->
  188. <section id="share_alert">
  189. <article class="share_prompt">
  190. <p></p>
  191. </article>
  192. </section>
  193. <!--QQ 微信分享提示-->
  194. <!--手机号登录-->
  195. <div id="login-btn"></div>
  196. <div class="js-reg"></div>
  197. <section id="login">
  198. <article class="login_form">
  199. <div class="warring js_reg_warring">请输入手机号码</div>
  200. <div class="phoneArea">
  201. <input type="text" class="phone js_reg_phone_input" placeholder="输入手机号码" maxlength="11">
  202. </div>
  203. <div class="key_con">
  204. <div class="keyBorder">
  205. <input class="key js_reg_code_input" type="text" placeholder="输入验证码" maxlength="6">
  206. </div>
  207. <a class="get_none js_reg_getcode">获取验证码</a>
  208. </div>
  209. <a class="submit js_reg_submit get_none">确认</a>
  210. </article>
  211. </section>
  212. <!--礼物列表模板-->
  213. <script id="giftlist" type="text/html">
  214. (*each pagenum as v k*)
  215. <article class="swiper-slide">
  216. (*each giftlist as value key*)
  217. (*if key>=(k)*8&&key<=(k+1)*8-1 *)
  218. <div>
  219. <img src="(*value.gifticon*)">
  220. <p>(*value.needcoin*)<i></i></p>
  221. <div class="gift-select (*if value.type ==1 *)gift-hao(*/if*)" data-id="(*value.id*)" data-giftname="(*value.giftname*)" data-type="(*value.type*)" data-money="(*value.needcoin*)"></div>
  222. </div>
  223. (*/if*)
  224. (*/each*)
  225. </article>
  226. (*/each*)
  227. </script>
  228. <!--礼物列表模板-->
  229. <!-- 视频播放start -->
  230. <script src="__STATIC__/xigua/xgplayer.js?t=1574906138" type="text/javascript"></script>
  231. <script src="__STATIC__/xigua/backups/xgplayer-flv.js.js" type="text/javascript"></script>
  232. <script src="__STATIC__/xigua/backups/xgplayer-hls.js.js" type="text/javascript"></script>
  233. <script src="__STATIC__/xigua/backups/player.js?t=1587956583" type="text/javascript"></script>
  234. <script type="text/javascript" src="__STATIC__/wxshare/share/js/common.js?t=1587956582"></script>
  235. <script type="text/javascript" src="__STATIC__/wxshare/share/js/gift.js?t=1576922923"></script>
  236. <script type="text/javascript" src="__STATIC__/wxshare/share/js/jquery.md5.js"></script>
  237. <script type="text/javascript" src="__STATIC__/wxshare/share/js/login.js"></script>
  238. <script type="text/javascript">
  239. var mode = 1;//代表手机直播手机观看
  240. function downurl(){
  241. var href='';
  242. if(isIOS){
  243. href='{$site_info['app_ios']}';
  244. }else{
  245. href='{$site_info['app_android']}';
  246. }
  247. location.href=href;
  248. return !1;
  249. }
  250. //弹幕
  251. $(".chat_barrage span").click(function(){
  252. if($(this).parent().hasClass("animte")){
  253. $(this).parent().removeClass("animte");
  254. fly=""
  255. }else{
  256. $(this).parent().addClass("animte");
  257. $("#message").val("").focus();
  258. fly="FlyMsg"
  259. }
  260. })
  261. $("#chat").click(function(){
  262. var url='/wxshare/Share/sendBarrage';
  263. Ctrfn.onmessage(url);
  264. })
  265. var focusstatus = 0;
  266. $(document).on("click",".user_followed",function(){
  267. var isattention=$(this).attr('type');
  268. if(isattention==1 || !User){
  269. return !1;
  270. }
  271. var url = "/wxshare/Share/follow";
  272. var _this = $(this);
  273. $.ajax({
  274. type: 'POST',
  275. url: url,
  276. data:{'touid':to_uid},
  277. dataType:'json',
  278. success: function(data){
  279. if (data.code== 0){
  280. _this.addClass("on");
  281. _this.attr("type",1);
  282. _this.text('已关注');
  283. }
  284. }
  285. });
  286. })
  287. //点击聊天按钮,显示输入框
  288. $("#talk-btn").click(function(e){
  289. if(User){
  290. Ctrfn.talkBtn(e)
  291. }else{
  292. downurl();
  293. }
  294. })
  295. //点击礼物tool
  296. $("#gift-btn").click(function(){
  297. if(User){
  298. Ctrfn.giftTool()
  299. }else{
  300. downurl();
  301. }
  302. })
  303. $(".send_button,.gift-countdown-bg").click(function(){
  304. Ctrfn.sendBtn()
  305. })
  306. //阻止事件冒泡
  307. $(".chat_input").click(function (e){
  308. e.stopPropagation();
  309. });
  310. //点击播放按钮
  311. $(document).on("click","#play",function(){
  312. var objbtn=$(this);
  313. Ctrfn.play(objbtn);
  314. })
  315. //聊天提示时关闭提示框
  316. function closechatdialog(){
  317. $('#message').focus();
  318. }
  319. //点击礼物
  320. $(document).on("click",".swiper-slide > div",function(e){
  321. var objbtn=$(this);
  322. Ctrfn.giftBtn(objbtn);
  323. })
  324. //加载礼物tool
  325. $(function(){
  326. if(User){
  327. $.ajax({
  328. url:'/wxshare/Share/getGift',
  329. type: 'post',
  330. data:{},
  331. dataType: 'json',
  332. success: function(data) {
  333. var pagenum=Math.ceil(data.info.length/8);
  334. var num=[];
  335. for(var i=1;i<pagenum;i++){
  336. num[i]=i;
  337. }
  338. var gift = {
  339. giftlist: data.info,
  340. pagenum:num,
  341. };
  342. var html = template('giftlist', gift);
  343. document.getElementById('swiper-wrapper').innerHTML = html;
  344. //礼物列表切换
  345. var swiper = new Swiper('.swiper-container', {
  346. pagination: '.swiper-pagination',
  347. paginationClickable: true,
  348. observer: true,
  349. observeParents: true
  350. });
  351. }
  352. });
  353. }
  354. })
  355. </script>
  356. </body>
  357. </html>