share-test.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=0,minimum-scale=0.5">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <title>{if $data.page_title neq ''}{$data.page_title}{else}{if $data.share}{$data.share.share_title}{/if}{/if}</title>
  10. <link rel="shortcut icon" href="/favicon.ico">
  11. {if $data.share}
  12. <meta name="description" itemprop="description" content="{$data.share.share_desc}" />
  13. {/if}
  14. <?php
  15. $this->_var['dpagecss'][] = $this->_var['TMPL_REAL']."/css/share-test.css";
  16. $this->_var['dcpagecss'][] = $this->_var['TMPL_REAL']."/css/share-test.css";
  17. $this->_var['dpagejs'][] = $this->_var['TMPL_REAL']."/js/lib_min.js";
  18. $this->_var['dcpagejs'][] = $this->_var['TMPL_REAL']."/js/lib_min.js";
  19. ?>
  20. <link rel="stylesheet" type="text/css" href="{function name="parse_css" v="$dpagecss" c="$dcpagecss"}" />
  21. <script type="text/javascript" src="{function name="parse_script" v="$dpagejs" c="$dcpagejs"}"></script>
  22. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  23. <script type="text/javascript">
  24. var device, isAndroid, isIos;
  25. var ua = navigator.userAgent.toLowerCase();
  26. if (/iphone|ipad|ipod/.test(ua)) {
  27. device = "iphone";
  28. isAndroid = false;
  29. isIos = false;
  30. } else if (/android/.test(ua)) {
  31. device = "android";
  32. isAndroid = true;
  33. isIos = false;
  34. }
  35. </script>
  36. <script type="text/javascript">
  37. if('{$data.wx_url}'){
  38. location.href = '{$data.wx_url}';
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <script type="text/javascript">
  44. var video = JSON.parse('<?php echo json_encode($this->_var['data']['video']); ?>');
  45. console.log(video);
  46. </script>
  47. <script type="text/javascript">
  48. // 微信分享
  49. var wx_title = '{$data.share.share_title}';
  50. var wx_desc = '{$data.share.share_desc}'; // 分享描述
  51. var wx_link = '{$data.share.share_wx_url}';
  52. var wx_img = '{$data.share.share_img_url}'; // 分享图标
  53. var signature = '{$data.signPackage.signature}';
  54. var nonceStr = '{$data.signPackage.nonceStr}';
  55. var timestamp = '{$data.signPackage.timestamp}';
  56. var url = '{$data.signPackage.url}';
  57. var appid = '{$data.signPackage.appId}';
  58. wx.config({
  59. //debug: true,
  60. appId:appid,
  61. timestamp:timestamp,
  62. nonceStr:nonceStr,
  63. signature:signature,
  64. url:url,
  65. jsApiList:[
  66. //'checkJsApi',
  67. 'onMenuShareTimeline',
  68. 'onMenuShareAppMessage',
  69. 'onMenuShareQQ',
  70. 'onMenuShareWeibo',
  71. 'onMenuShareQZone',
  72. 'hideMenuItems',
  73. 'showMenuItems',
  74. 'hideAllNonBaseMenuItem',
  75. 'showAllNonBaseMenuItem',
  76. 'translateVoice',
  77. 'startRecord',
  78. 'stopRecord',
  79. //'onRecordEnd',
  80. 'playVoice',
  81. 'pauseVoice',
  82. 'stopVoice',
  83. 'uploadVoice',
  84. 'downloadVoice',
  85. 'chooseImage',
  86. 'previewImage',
  87. 'uploadImage',
  88. 'downloadImage',
  89. 'getNetworkType',
  90. 'openLocation',
  91. 'getLocation',
  92. 'hideOptionMenu',
  93. 'showOptionMenu',
  94. 'closeWindow',
  95. 'scanQRCode',
  96. //'chooseWXPay',
  97. //'openProductSpecificView',
  98. //'addCard',
  99. //'chooseCard',
  100. //'openCard'
  101. ]
  102. });
  103. </script>
  104. <div class="mask-loading" id="js-mask-loading" style="display: none;">
  105. <img src="http://img.meelive.cn/NzczMTExNDY0MjQ1MTU3.jpg" width="40px">
  106. </div>
  107. <div class="all-wrap" id="js-all-wrap">
  108. <div class="tishi top-tips" id="js-top-tips">你已经关注主播</div>
  109. <div id="top">
  110. <div id="bestTop">
  111. <span class="top-logo">
  112. <img src="{if $data.app_logo}{$data.app_logo}{else}{$TMPL}/images/app_logo.jpg{/if}" alt="logo">
  113. </span>
  114. <div class="logo-text fl">
  115. <div class="l-title">{$data.share.short_name}直播</div> <div class="l-des">{$data.share.share_title}</div>
  116. </div>
  117. <a class="download-btn js-btn-open-app" data-id="logo_open">立即下载</a>
  118. </div>
  119. <div id="shadow" class="" style="display: none;"></div>
  120. <div class="no-player-text">
  121. <div class="finish-text" style="">直播已结束</div>
  122. <div id="user_num" class="finish-num" style="display: block;">18160人看过</div>
  123. <div class="finish-follow-tip">关注后不会错过下一次直播 </div>
  124. </div>
  125. <div class="user looked-num is-live" id="js-looked-num" style="display: none">
  126. <span class="record-text-start"> {if $data.video.live_in eq 3}精彩回放&nbsp;&nbsp;</span>{else}<span class="live-text-start"> 直播LIVE&nbsp;&nbsp;</span>{/if}
  127. <span id="user_num2">18160</span>人 <span class="record-text-end"> 看过 </span>
  128. </div>
  129. <div class="player">
  130. <div class="jwplayer playlist-none" id="container"></div>
  131. </div>
  132. <div id="live-bg">
  133. <div class="big-bg" style="background-image: url({$data.video.head_image});"></div>
  134. <img src="{$data.video.head_image}" class="live-bg">
  135. <span class="play-btn"></span>
  136. </div>
  137. <div id="hf-text"> 精彩回放</div>
  138. <div id="topBom">
  139. <a class="topBom js-btn-open-app show_pop_wp" data-id="bottom_open" href="">在{$data.share.short_name}中打开,互动更精彩 ></a>
  140. </div>
  141. <div class="btn-box">
  142. <span class="talk talk-click show_pop_wp" id="js-start-talk"></span>
  143. <span class="gift-btn gift-btn-click show_pop_wp" id="gift_btn"></span>
  144. </div>
  145. <div class="player-loading" id="js-player-loading" style="">
  146. <img src="{$TMPL}/images/video-loading.jpg" width="40px">
  147. </div>
  148. </div>
  149. <div id="top2" class="user-info-con top js-user-info-con">
  150. <img src="{$data.video.head_image}" class="fl icon user_pic">
  151. <div class="fl ziliao">
  152. <div class="fl nick user_nick">{$data.video.nick_name}</div>
  153. <br>
  154. <div class="info-left" style="display: none">关注人数:<span id="js-follow-num" class="bo-id">{$data.video.podcast.user.fans_count}</span></div>
  155. <div class="info-left ID" style="">映客号:<span id="js-user-bo-id" class="bo-id">{$data.video.user_id}</span></div>
  156. </div>
  157. <div class="fr guanzhu js-follow-btn show_pop_wp">关注</div>
  158. </div>
  159. <div class="talk-box" id="js-talk-ipt-wrap">
  160. <a href="javascript:;" class="talk-btn js-talk-btn" id="js-send-talk-btn">发送</a>
  161. <input id="js-talk-ipt" class="talk-input" placeholder="点击这输入文字" value="" maxlength="200">
  162. </div>
  163. <!-- 消息区 -->
  164. <div class="msg-box pa" id="msg_box" style="display:none"></div>
  165. <!-- 发送礼物 -->
  166. <div class="gift-box">
  167. <div class="gift-box-close"><div>X</div></div>
  168. <div class="gift-lists swiper-container">
  169. <div class="swiper-wrapper" id="js-swiper-wrapper">
  170. </div>
  171. <div class="swiper-pagination"></div>
  172. </div>
  173. <div class="gift-bbar">
  174. <a href="###" class="goto-pay-btn" id="js-goto-pay-btn">
  175. <span class="gift-bbar-text">充值:</span>
  176. <span class="gift-bbar-money">0</span>
  177. <img src="http://img.meelive.cn/NDA2ODAxNDQ3ODM1Nzc3.jpg">
  178. <span class="gift-bbar-text">&gt;</span>
  179. </a>
  180. <button class="gift-bbar-send-hide" id="gift_send">发送</button>
  181. <div class="gift-countdown-bg none" id="gift_countdown_bg">
  182. <div class="gift-countdown-btn">
  183. <p class="gift-countdown-btn-text" onselectstart="return false">连发</p>
  184. <p class="gift-countdown-btn-time" onselectstart="return false">30</p>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. <!--礼物动画层 -->
  190. <ul id="js-gift-show-container" class="gift-show-container">
  191. <li data-playing="false" data-fromid="">
  192. <div class="pride">
  193. <div class="headImg"><img src="" alt="头像"></div>
  194. <div class="name"></div>
  195. <div class="giftType"></div>
  196. <div class="giftImg"><img src="" alt="图片"></div>
  197. <span class="star">×<span class="num"> </span>
  198. </span></div>
  199. </li>
  200. <li data-playing="false" data-fromid="">
  201. <div class="pride">
  202. <div class="headImg"><img src="{$TMPL}/images/app_logo.jpg" alt="头像"></div>
  203. <div class="name"></div>
  204. <div class="giftType"></div>
  205. <div class="giftImg"><img src="" alt="图片"></div>
  206. <span class="star">×<span class="num"> </span>
  207. </span></div>
  208. </li>
  209. </ul>
  210. <div id="tab" class="js-list-tab">
  211. <div class="t-one fl hot active">热门{$data.share.short_name}</div>
  212. <div class="t-one fr back" id="js-tab-back">他的精彩回放</div>
  213. </div>
  214. <div class="tab-con-list slide-page-list" style="width: 100%">
  215. <div class="one-page hots active" id="host-list">
  216. {foreach from=$data.video_hot item=item key=key name=item_name}
  217. <div class="lists">
  218. <a href="{$item.url}">
  219. <div class="l-top" style="height: 171px;">
  220. <img src="{if $item.live_image neq ''}{$item.live_image}{else}{$item.head_image}{/if}" class="icon-big" style="height: 171px;">
  221. <div class="h-info">
  222. <span class="fans">{$item.watch_number}</span>
  223. </div>
  224. </div>
  225. <div class="box-btm">{$item.nick_name}</div>
  226. </a>
  227. </div>
  228. {/foreach}
  229. </div>
  230. <div class="one-page record">
  231. {if !($data.history)}
  232. <div class="no-data-con"></div>
  233. <div class="no-record-list-text">TA还没有精彩回放哦</div>
  234. {else}
  235. <ul class="jchf" id="record-list-ul">
  236. {foreach from=$data.history item=item key=key name=item_name}
  237. <div class="lists">
  238. <a href="{$item.url}">
  239. <div class="l-top" style="height: 171px;">
  240. <img src="{if $item.live_image neq ''}{$item.live_image}{else}{$item.head_image}{/if}" class="icon-big" style="height: 171px;">
  241. <div class="h-info">
  242. <span class="fans">{$item.watch_number}</span>
  243. </div>
  244. </div>
  245. <div class="box-btm">{$item.nick_name}</div>
  246. </a>
  247. </div>
  248. {/foreach}
  249. </ul>
  250. {/if}
  251. </div>
  252. </div>
  253. </div>
  254. <!-- 弹窗提示下载 -->
  255. <div class="pop_wp" id="opt-down" style="display: none;">
  256. <div class="pop_box pop_toapp_box ">
  257. <div class="pop_panel">
  258. <div class="logo"><img src="{if $data.app_logo}{$data.app_logo}{else}{$TMPL}/images/app_logo.jpg{/if}" alt="logo"></div>
  259. <p class="name">{$data.share.short_name}直播</p>
  260. <p class="des">{$data.share.share_title}</p>
  261. <a href="{$data.app_down}" class="btn_app down-app" clickid="0.4.1.0">下载{$data.share.short_name}直播</a>
  262. </div>
  263. <div class="pop_close" id="opt-down-close">×</div>
  264. </div>
  265. </div>
  266. <!-- 弹窗提示下载 end -->
  267. <script type="text/javascript">
  268. var device = device || '';
  269. device ? (device == 'iphone' ? $("#preVedio").show() : $("#liveing").show()) : $("#preVedio").show();
  270. var head_image_url = '{$data.video.head_image}';
  271. {if $data.video.group_id}
  272. var loginInfo = {
  273. 'sdkAppID': '{$data.tim_sdkappid}',
  274. 'appIDAt3rd': '{$data.tim_sdkappid}',
  275. 'accountType': '{$data.tim_account_type}',
  276. 'identifier': '{$data.tim_account_id}',
  277. 'userSig': '{$data.usersig}',
  278. };
  279. var avChatRoomId = '{$data.video.group_id}';
  280. {/if}
  281. </script>
  282. <?php
  283. $this->_var['dpagejs'][] = $this->_var['TMPL_REAL']."/sdk/json2.js";
  284. $this->_var['dcpagejs'][] = $this->_var['TMPL_REAL']."/sdk/json2.js";
  285. $this->_var['dpagejs'][] = $this->_var['TMPL_REAL']."/sdk/webim.js";
  286. $this->_var['dcpagejs'][] = $this->_var['TMPL_REAL']."/sdk/webim.js";
  287. $this->_var['dpagejs'][] = $this->_var['TMPL_REAL']."/js/im-message.js";
  288. $this->_var['dcpagejs'][] = $this->_var['TMPL_REAL']."/js/im-message.js";
  289. ?>
  290. <script type="text/javascript" src="{function name="parse_script" v="$dpagejs" c="$dcpagejs"}"></script>
  291. <script src="{$TMPL}/dist/jwplayer/jwplayer.js"></script>
  292. <script>jwplayer.key = "lsUqQ+PB1edH+bYoMb85Yr5CuPlXyhK/ngcyNQ==";</script>
  293. <script type="text/javascript" src="{$TMPL}/js/share-test.js"></script>
  294. </body>
  295. </html>