index.html 68 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}{$live_title}{/block}
  12. {block name="head_top"}
  13. <script>
  14. window.room = {$room};
  15. window.workermanConfig = {$workerman};
  16. window.uids = "{$userInfo['uid']}";
  17. window.socketDebug = true;
  18. </script>
  19. <style>
  20. html,
  21. body,
  22. #app {
  23. height: 100%;
  24. }
  25. .live .chat .item .text .info img.cont {
  26. width: 50%;
  27. }
  28. .preview .layui-m-layercont {
  29. padding: 0;
  30. }
  31. .preview .layui-m-layercont img {
  32. display: block;
  33. max-width: 90%;
  34. max-height: 90%;
  35. margin: 0 auto;
  36. object-fit: scale-down;
  37. }
  38. .loading {
  39. padding-top: .1rem;
  40. padding-bottom: .1rem;
  41. font-size: .28rem;
  42. text-align: center;
  43. color: #999;
  44. }
  45. .loading .fa {
  46. font-size: .4rem;
  47. }
  48. .loaded {
  49. font-size: .28rem;
  50. line-height: .72rem;
  51. text-align: center;
  52. color: #999;
  53. }
  54. .nothing {
  55. position: absolute;
  56. top: 30%;
  57. left: 50%;
  58. width: 4rem;
  59. height: 4rem;
  60. background: url("{__WAP_PATH}zsff/images/nothing.png") center/contain no-repeat;
  61. -webkit-transform: translate(-50%, -50%);
  62. transform: translate(-50%, -50%);
  63. }
  64. .footer {
  65. z-index: 10;
  66. background-color: #fff;
  67. }
  68. .prism-player .prism-info-display {
  69. box-sizing: border-box;
  70. }
  71. </style>
  72. {/block}
  73. {block name="content"}
  74. <div v-cloak id="app">
  75. <div class="live">
  76. <div :style="{ height: playerHeight + 'px' }" class="header">
  77. <div v-show="liveInfo.is_play || PullUrl" class="prism-player" id="J_prismPlayer"></div>
  78. <div v-show="!liveInfo.is_play && !PullUrl" class="text">
  79. <div>{{ liveText }}</div>
  80. <count-down v-show="!live_status" :sec-show="false" :time="datatime"></count-down>
  81. </div>
  82. </div>
  83. <div class="nav">
  84. <div :class="{ active: navActive === 4 }" class="item" @click="navActive = 4">介绍</div>
  85. <div v-if="liveInfo.is_chat" :class="{ active: navActive === 0 }" class="item" @click="navActive = 0">聊天</div>
  86. <div v-if="liveInfo.is_class_chat" :class="{ active: navActive === 1 }" class="item" @click="navActive = 1">课堂</div>
  87. <div v-if="liveInfo.is_live_recommend" :class="{ active: navActive === 2 }" class="item" @click="navActive = 2">推荐</div>
  88. <div v-if="liveInfo.is_ranking" :class="{ active: navActive === 3 }" class="item" @click="navActive = 3">排行</div>
  89. </div>
  90. <div ref="main" class="main">
  91. <div v-show="navActive === 4" v-html="liveInfo.content"></div>
  92. <!-- 聊天 -->
  93. <div v-show="navActive === 0" ref="chat" class="section" @click="emojiKeyboardHide" @scroll="chatScroll">
  94. <div class="chat">
  95. <div class="loading">
  96. <span v-show="Oloading" class="fa fa-spinner"></span>
  97. <div v-if="Oloadend && Opage > 2">已全部加载</div>
  98. </div>
  99. <div v-if="OpenCommentList.length" class="list">
  100. <div v-for="(item, index) in OpenCommentList" :key="index" class="item">
  101. <div class="avatar">
  102. <img :src="item.avatar" class="img">
  103. </div>
  104. <div class="text">
  105. <div class="name" v-text="item.nickname" v-if="item.user_type==2 && user_type == 2">加载中</div>
  106. <div class="name" v-else>
  107. <span v-if="item.user_type==1">[讲师]</span>
  108. <span v-else-if="item.user_type==0">[助教]</span>
  109. <span>{{item.nickname}}</span>
  110. <span class="return" v-if="user_type != 2 && item.uid != 0 " @click="recall(item.id,index)">撤回</span>
  111. </div>
  112. <div class="info" v-if="item.type==1">
  113. <div class="cont" v-html="item.content"></div>
  114. </div>
  115. <div class="info" v-else-if="item.type==2 && item.content">
  116. <img :src="item.content" class="cont" @click="preview(item.content)">
  117. </div>
  118. <div class="info" v-else-if="item.type==3">
  119. <div class="cont" v-if="userInfo.uid == item.uid " @click="play_audio(item,index,'OpenCommentList')">
  120. {{item.duration || 0}}’’
  121. <img :src="item.is_play ? '/wap/first/zsff/images/signal2.gif':'/wap/first/zsff/images/signal.png'" class="signal signalR"
  122. style="margin-left:0.27rem;cursor: pointer">
  123. </div>
  124. <div class="conter acea-row row-middle" v-else @click="play_audio(item,index,'OpenCommentList')">
  125. <img :src="item.is_play ? '/wap/first/zsff/images/signal2.gif':'/wap/first/zsff/images/signal.png'" class="signal"
  126. style="margin-left:0.27rem;cursor: pointer;">{{item.duration || 0}}’’
  127. </div>
  128. <div class="spot" v-if="item.is_play"></div>
  129. </div>
  130. <div v-else-if="item.type === 4" class="info">
  131. <div class="cont">{{ item.content }}{{ item.gift_name }}<img :src="item.gift_image">×{{ item.gift_num }}</div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <!-- 课堂 -->
  139. <div v-show="navActive === 1" ref="lesson" class="section class" @click="emojiKeyboardHide">
  140. <div class="chat">
  141. <div class="load">
  142. <span v-show="loading==true" class="fa fa-spinner"></span>
  143. <span v-text="loadTitle" @click="getCommentList">点击加载更多</span>
  144. </div>
  145. <div class="list">
  146. <div v-for="(item, index) in CommentList" :key="index" class="item">
  147. <div class="avatar">
  148. <img :src="item.avatar" class="img">
  149. </div>
  150. <div class="text">
  151. <div class="name" v-text="item.nickname" v-if="item.user_type==2 && user_type == 2">加载中</div>
  152. <div class="name" v-else>
  153. <span v-if="item.user_type==1">[讲师]</span>
  154. <span v-else-if="item.user_type==0">[助教]</span>
  155. <span>{{item.nickname}}</span>
  156. <span class="return" v-if="user_type != 2 && item.uid != 0" @click="recall(item.id,index)">撤回</span>
  157. </div>
  158. <div class="info" v-if="item.type==1">
  159. <div class="cont" v-html="item.content"></div>
  160. </div>
  161. <div class="info" v-else-if="item.type==2 && item.content">
  162. <img :src="item.content" class="cont" @click="preview(item.content)">
  163. </div>
  164. <div class="info" v-else-if="item.type==3">
  165. <div class="cont" v-if="userInfo.uid == item.uid " @click="play_audio(item,index,'CommentList')">
  166. {{item.duration || 0}}’’
  167. <img :src="item.is_play ? '/wap/first/zsff/images/signal2.gif':'/wap/first/zsff/images/signal.png'" class="signal signalR"
  168. style="margin-left:0.27rem;cursor: pointer;">
  169. </div>
  170. <div class="cont" v-else @click="play_audio(item,index,'CommentList')">
  171. <img :src="item.is_play ? '/wap/first/zsff/images/signal2.gif':'/wap/first/zsff/images/signal.png'" class="signal"
  172. style="margin-left:0.27rem;cursor: pointer;">{{item.duration || 0}}’’
  173. </div>
  174. <div class="spot" v-if="item.is_play"></div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. <!-- 推荐 -->
  182. <div v-show="navActive === 2" class="section recom">
  183. <div class="list">
  184. <div v-for="(item, index) in updateRecomList" :key="item.id" class="item">
  185. <div class="image">
  186. <div class="tag">{{ item.gfake_type ? '商品' : '专题' }}</div>
  187. <img :src="item.image" class="img">
  188. </div>
  189. <div class="text">
  190. <div class="name">{{ item.title }}</div>
  191. <div class="label">
  192. <div v-for="(itm, idx) in item.label" :key="idx" class="cell">{{ itm }}</div>
  193. </div>
  194. <div class="money">
  195. <div class="sell">¥<span class="num">{{ item.money }}</span></div>
  196. </div>
  197. <a :href="(item.is_light ? '{:url('special/single_details')}' : '{:url('special/details')}') + '?id=' +item.id" v-if="item.gfake_type==0"
  198. class="link">去订购</a>
  199. <a :href="$h.U({c: 'store', a: 'detail', q: {id: item.id}})" v-else class="link">去订购</a>
  200. </div>
  201. </div>
  202. </div>
  203. <div v-show="loadings" class="loading">
  204. <span class="fa fa-spinner"></span>
  205. </div>
  206. <div v-if="!loadings && !recomList.length" class="nothing"></div>
  207. </div>
  208. <!-- 排行 -->
  209. <div v-show="navActive === 3" class="section rank">
  210. <div v-if="rankList.length" class="list">
  211. <template v-for="(item, index) in rankList">
  212. <div v-if="item.uid === userInfo.uid" :key="index" class="item">
  213. <div class="type">
  214. <img v-if="index === 0" src="{__WAP_PATH}zsff/images/medal01.png" class="img">
  215. <img v-else-if="index === 1" src="{__WAP_PATH}zsff/images/medal02.png" class="img">
  216. <img v-else-if="index === 2" src="{__WAP_PATH}zsff/images/medal03.png" class="img">
  217. <template v-else>{{ index + 1 }}</template>
  218. </div>
  219. <div class="image">
  220. <img :src="item.avatar ? item.avatar : '{__WAP_PATH}zsff/images/avatar_default.jpg'" class="img">
  221. </div>
  222. <div class="name">{{ item.nickname }}</div>
  223. <div :style="{ backgroundImage: 'url(' + goldInfo.gold_image + ')' }" class="num">{{ item.total_price }}</div>
  224. </div>
  225. </template>
  226. </div>
  227. <div v-if="rankList.length" class="list">
  228. <div v-for="(item, index) in rankList" :key="index" class="item">
  229. <div class="type">
  230. <img v-if="index === 0" src="{__WAP_PATH}zsff/images/medal01.png" class="img">
  231. <img v-else-if="index === 1" src="{__WAP_PATH}zsff/images/medal02.png" class="img">
  232. <img v-else-if="index === 2" src="{__WAP_PATH}zsff/images/medal03.png" class="img">
  233. <template v-else>{{ index + 1 }}</template>
  234. </div>
  235. <div class="image">
  236. <img :src="item.avatar ? item.avatar : '{__WAP_PATH}zsff/images/avatar_default.jpg'" class="img">
  237. </div>
  238. <div class="name">{{ item.nickname }}</div>
  239. <div :style="{ backgroundImage: 'url(' + goldInfo.gold_image + ')' }" class="num">{{ item.total_price }}</div>
  240. </div>
  241. </div>
  242. <div v-show="loadings" class="loading">
  243. <span class="fa fa-spinner"></span>
  244. </div>
  245. <div v-if="!loadings && !rankList.length" class="nothing"></div>
  246. </div>
  247. <!-- 欢迎语 -->
  248. <div :class="{ on: notice }" class="welcome"><span class="name">{{ notice }}</span> 直播间</div>
  249. <!-- 在线人数 -->
  250. <div v-show="2 > navActive" ref="online" class="online">{{ UserSum }} 人</div>
  251. <!-- 右侧按钮 -->
  252. <div v-show="2 > navActive" ref="menu" class="side-menu">
  253. <button v-show="navActive === 1" class="btn barrage-btn" type="button" @click="barrage = !barrage">
  254. <img :src="barrage ? '{__WAP_PATH}zsff/images/barrage1.png' : '{__WAP_PATH}zsff/images/barrage2.png'">
  255. </button>
  256. <button v-show="giftList.length" class="btn" type="button" @click="giftShow = true">
  257. <img class="img" src="{__WAP_PATH}zsff/images/gift1.png">
  258. </button>
  259. </div>
  260. <!-- 礼物特效 -->
  261. <div v-if="giftFloat" :class="{ on: giftFloat }" class="gift-float">
  262. <div class="cont">
  263. <div :style="{ backgroundImage: 'url(' + giftFloat.user_avatar + ')' }" class="avatar"></div>
  264. <div class="text">
  265. <div class="name">{{ giftFloat.username }}</div>
  266. 送出 {{ giftFloat.gift.live_gift_name }}
  267. </div>
  268. <div :style="{ backgroundImage: 'url(' + giftFloat.gift.live_gift_show_img + ')' }" class="image"></div>
  269. </div>
  270. <div class="num">×{{ giftFloat.live_gift_num }}</div>
  271. </div>
  272. <!-- 弹幕 -->
  273. <div v-show="navActive === 1" ref="barrage" :class="{ on: barrage }" :style="{ top: barrageTop + 'px', bottom: barrageTottom + 10 + 'px' }" class="barrage">
  274. <div class="item acea-row row-middle row-right" v-for="item in BarrageList">
  275. <div class="text" v-html="item.content" v-if="item.type!=2"></div>
  276. <div class="text" v-else>
  277. <img :src="item.content" alt="" style="width: 1.5rem;height: auto;">
  278. </div>
  279. <div class="pictrue">
  280. <img :src="item.avatar">
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <div v-show="2 > navActive" class="footer">
  286. <!-- 输入 -->
  287. <div class="control">
  288. <button class="button" type="button" @click="emoticon">
  289. <img class="img" :src="emojiShow ? '{__WAP_PATH}zsff/images/keyboard.png' : '{__WAP_PATH}zsff/images/face.png'">
  290. </button>
  291. <button v-if="user_type == 0 || user_type == 1" class="button" type="button" @click="push">
  292. <img class="img" src="{__WAP_PATH}zsff/images/plus.png">
  293. </button>
  294. <form class="form" @submit.prevent="push">
  295. <input ref="input" v-model="content" class="text" type="text">
  296. <input v-show="content" class="submit" type="submit" value="">
  297. </form>
  298. </div>
  299. <!-- 表情包 -->
  300. <div v-show="emojiShow" id="emoji" class="swiper-container">
  301. <div class="swiper-wrapper">
  302. <div v-for="(item, index) in emojiList" :key="index" class="swiper-slide">
  303. <button v-for="(itm, idx) in item" :key="idx" class="button" type="button">
  304. <img :src="itm.url" class="img" @click="mine(itm)">
  305. </button>
  306. <button class="button" type="button" @click="delEmoji">
  307. <img class="img" src="{__WAP_PATH}zsff/images/del.png">
  308. </button>
  309. </div>
  310. </div>
  311. <div id="emoji-pagination" class="swiper-pagination"></div>
  312. </div>
  313. </div>
  314. <!-- 打赏 -->
  315. <div :class="{ mask: giftShow }" @click="giftShow = false"></div>
  316. <div v-show="giftShow" class="gift-wrapper">
  317. <div id="gift" class="swiper-container gift">
  318. <div class="swiper-wrapper">
  319. <div v-for="(item, index) in updateGiftList" :key="index" class="swiper-slide">
  320. <div v-for="(itm, idx) in item" :key="itm.id" :class="{ on: idx === giftIndexOn }" class="item" @click="giftIndexOn = idx; giftOn = itm">
  321. <div class="image">
  322. <img :src="itm.live_gift_show_img" class="img">
  323. </div>
  324. <div class="name">{{ itm.live_gift_name }}</div>
  325. <div :style="{ backgroundImage: 'url(' + goldInfo.gold_image + ')' }" class="num">{{ itm.live_gift_price }}</div>
  326. </div>
  327. </div>
  328. </div>
  329. <div v-show="updateGiftList.length > 1" id="gift-pagination" class="swiper-pagination"></div>
  330. </div>
  331. <div class="foot">
  332. <div class="text-group">
  333. <a :href="$h.U({c: 'special', a: 'recharge_index'}) + '?from=live&stream_name=' + liveInfo.stream_name + '&record_id=' + recordId">
  334. <span v-if="userInfo.gold_num" :style="{ backgroundImage: 'url(' + goldInfo.gold_image + ')' }" class="number">{{ userInfo.gold_num }}</span>
  335. <span v-else>充值</span>
  336. <span class="iconfont iconxiangyou"></span>
  337. </a>
  338. </div>
  339. <div class="button-group">
  340. <button class="button select" type="button" @click="giftSelectShow = !giftSelectShow">
  341. {{ giftNumSelected }}<span :class="['iconfont', giftSelectShow ? 'iconxiangxia' : 'iconxiangshang']"></span>
  342. <ul v-show="giftSelectShow" class="list">
  343. <li v-for="(item, index) in giftOn.live_gift_num" :key="item" @click.prevent="giftNumSelected = item">{{ item }}</li>
  344. </ul>
  345. </button>
  346. <button class="button post" type="button" @click="sendGift">赠送</button>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  351. </div>
  352. <script charset="utf-8" type="text/javascript" src="{__WAP_PATH}zsff/js/WebSocket.js"></script>
  353. <script>
  354. var liveInfo = {$liveInfo},
  355. PullUrl = '{$PullUrl? $PullUrl: ""}',
  356. datatime = {$datatime},
  357. phone_type = {$phone_type},
  358. isWechat = {$isWechat? 'true': 'false'},
  359. userInfo = {:json_encode($userInfo)},
  360. live_status = {$live_status},
  361. user_type = {$user_type},
  362. OpenCommentCount = {$OpenCommentCount},
  363. CommentCount = {$CommentCount},
  364. OpenCommentTime = {$OpenCommentTime? $OpenCommentTime: 0},
  365. CommentTime = {$CommentTime? $CommentTime: 0},
  366. is_ban = {$is_ban},
  367. UserSum = {$UserSum},
  368. goldInfo = {$goldInfo};
  369. </script>
  370. <script>
  371. require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/face/emoji.js', 'swiper', '{__WAP_PATH}zsff/js/countdown.js', 'layer', 'aliplayer'], function (Vue, $h, store, emoji, Swiper) {
  372. var vm = new Vue({
  373. el: '#app',
  374. data: {
  375. windowWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  376. bottom: '',
  377. phone_type: phone_type,
  378. UserSum: UserSum,
  379. isWechat: isWechat,
  380. OpenCommentCount: OpenCommentCount,
  381. user_type: user_type,
  382. userInfo: userInfo,
  383. barrage: true,
  384. discuss: false,
  385. datatime: datatime,
  386. voice: false,
  387. speak: '按住 说话',
  388. recording: false,
  389. is_ban: is_ban,
  390. live_error: '',
  391. liveInfo: liveInfo,
  392. PullUrl: PullUrl,
  393. player: null,
  394. //讲师助教区域
  395. CommentList: [],
  396. //弹幕列表
  397. BarrageList: [],
  398. //展开的评论区域列表
  399. OpenCommentList: [],
  400. loading: false,
  401. loadend: false,
  402. loadTitle: '点击加载更多',
  403. Oloading: false,
  404. Oloadend: false,
  405. // OloadTitle: '点击加载更多',
  406. content: '',
  407. live_status: live_status,
  408. layerIndex: null,
  409. page: 1,
  410. limit: 16,
  411. Olimit: 7,
  412. Opage: 1,
  413. cd: 3,
  414. is_SendOut: true,
  415. isAnimate: false,//是否回到底部
  416. starttime: 0,
  417. endtime: 0,
  418. timeEnd: 60,
  419. autoCloseRecord: null,
  420. notice: '',
  421. emojiList: emoji,
  422. emojiShow: false,
  423. giftList: [],
  424. giftIndexOn: 0,
  425. giftOn: {},
  426. giftSelectShow: false,
  427. giftShow: false,
  428. giftNumSelected: 1,
  429. giftFloat: null,
  430. goldInfo: goldInfo,
  431. recomList: [],
  432. rankList: [],
  433. navActive: 4,
  434. loadings: false,
  435. barrageTop: 0,
  436. barrageTottom: 0
  437. },
  438. computed: {
  439. playerHeight: function () {
  440. return Math.floor(this.windowWidth * 9 / 16);
  441. },
  442. liveText: function () {
  443. switch (this.live_status) {
  444. case 0:
  445. return '直播即将开始';
  446. break;
  447. case -1:
  448. case 1:
  449. return '讲师离开一会~马上回来';
  450. break;
  451. case 2:
  452. return '直播已结束';
  453. break;
  454. }
  455. },
  456. updateGiftList: function () {
  457. var that = this,
  458. list = that.giftList,
  459. listLen = list.length,
  460. slideLen = listLen % 8 ? Math.floor(listLen / 8 + 1) : listLen / 8,
  461. index = 0,
  462. temp = [],
  463. arr = [];
  464. for (index = 0; index < slideLen; index++) {
  465. temp = list.slice(index * 8, index * 8 + 8);
  466. arr.push(temp);
  467. }
  468. return arr;
  469. },
  470. updateRecomList: function () {
  471. var that = this;
  472. return that.recomList.map(function (value) {
  473. if (typeof value.label === 'string') {
  474. value.label = JSON.parse(value.label);
  475. }
  476. if (that.userInfo.level && value.member_pay_type) {
  477. value.money = value.member_money;
  478. }
  479. return value;
  480. });
  481. }
  482. },
  483. watch: {
  484. giftIndexOn: function () {
  485. this.giftSelectShow = false;
  486. },
  487. notice: function (value) {
  488. var that = this;
  489. if (!value) {
  490. return;
  491. }
  492. setTimeout(function () {
  493. that.notice = '';
  494. }, 1500);
  495. },
  496. giftFloat: function (value) {
  497. var that = this;
  498. if (!value) {
  499. return;
  500. }
  501. setTimeout(function () {
  502. that.giftFloat = null;
  503. }, 2000);
  504. },
  505. CommentList: function () {
  506. if (this.navActive !== 1) {
  507. return;
  508. }
  509. },
  510. OpenCommentList: function () {
  511. if (this.navActive !== 0) {
  512. return;
  513. }
  514. this.contentScroll(this.$refs.chat);
  515. },
  516. emojiShow: function () {
  517. var dom = this.$refs.lesson;
  518. if (this.navActive === 1) {
  519. dom = this.$refs.chat;
  520. }
  521. this.contentScroll(dom);
  522. },
  523. BarrageList: function () {
  524. this.$nextTick(function () {
  525. this.$refs.barrage.scrollTop = this.$refs.barrage.scrollHeight;
  526. });
  527. },
  528. navActive: function (value) {
  529. switch (value) {
  530. case 1:
  531. this.$nextTick(function () {
  532. this.barrageTottom = this.$refs.main.offsetHeight - this.$refs.menu.offsetTop;
  533. if (this.page == 2 && !this.$refs.lesson.scrollTop) {
  534. this.$refs.lesson.scrollTop = this.$refs.lesson.scrollHeight - this.scrollHeight;
  535. }
  536. });
  537. break;
  538. case 2:
  539. this.getRecomList();
  540. break;
  541. case 3:
  542. this.getRankList();
  543. break;
  544. }
  545. },
  546. giftList: function () {
  547. this.$nextTick(function () {
  548. this.barrageTottom = this.$refs.main.offsetHeight - this.$refs.menu.offsetTop;
  549. });
  550. }
  551. },
  552. created: function () {
  553. this.recordId = this.getUrlStr('record_id');
  554. },
  555. mounted: function () {
  556. this.$nextTick(function () {
  557. this.barrageTop = this.$refs.online.offsetTop + this.$refs.online.offsetHeight;
  558. this.barrageTottom = this.$refs.main.offsetHeight - this.$refs.menu.offsetTop;
  559. var that = this;
  560. window.addEventListener('resize', function () {
  561. that.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  562. });
  563. var skinLayoutchildren = [
  564. {name: "progress", align: "blabs", x: 0, y: 44},
  565. {name: "playButton", align: "tl", x: 15, y: 12},
  566. {name: "timeDisplay", align: "tl", x: 10, y: 7},
  567. {name: "setting", align: "tr", x: 15, y: 12},
  568. {name: "fullScreenButton", align: "tr", x: 10, y: 10},
  569. {name: "subtitle", align: "tr", x: 15, y: 12},
  570. {name: "volume", align: "tr", x: 5, y: 10}
  571. ];
  572. if (this.liveInfo.is_play) {
  573. skinLayoutchildren = [
  574. {name: "liveDisplay", align: "tlabs", x: 15, y: 6},
  575. {name: "fullScreenButton", align: "tr", x: 10, y: 10},
  576. {name: "volume", align: "tr", x: 5, y: 10}
  577. ];
  578. }
  579. if (this.PullUrl || this.liveInfo.is_play) {
  580. this.player = new Aliplayer({
  581. id: 'J_prismPlayer',
  582. width: '100%',
  583. height: '100%',
  584. autoplay: true,
  585. isLive: this.liveInfo.is_play ? true : false,
  586. source: this.PullUrl,
  587. cover: this.liveInfo.live_image,
  588. skinLayout: [
  589. {name: "bigPlayButton", align: "cc"},
  590. {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
  591. {name: "infoDisplay", align: "cc"},
  592. {
  593. name: "controlBar", align: "blabs", x: 0, y: 0,
  594. children: skinLayoutchildren
  595. }
  596. ]
  597. }, function (player) {
  598. if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) && that.liveInfo.is_play) {
  599. player.on('pause', function () {
  600. player.play()
  601. })
  602. }
  603. });
  604. this.bindEvevt();
  605. }
  606. window.overallShare = false;
  607. mapleWx($jssdk(), function () {
  608. this.onMenuShareAll({
  609. title: that.liveInfo.live_title,
  610. desc: that.liveInfo.abstract,
  611. imgUrl: that.liveInfo.live_image,
  612. link: location.href.indexOf('?') == -1 ?
  613. location.href + '?spread_uid=' + that.userInfo.uid :
  614. location.href + '&spread_uid=' + that.userInfo.uid,
  615. });
  616. });
  617. document.addEventListener('touchstart', function (event) {
  618. var target = event.target;
  619. if (target.classList.contains('preview-img')) {
  620. layer.closeAll();
  621. }
  622. });
  623. $(document).on("change", ".images", function () {
  624. if (this.files.length > 1) return that.msg('您上传的图片不能大与1张');
  625. var file = this.files[0];
  626. if (file) {
  627. var formData = new FormData();
  628. formData.append('file', file);
  629. $.ajax({
  630. url: '{:Url("auth_api/upload")}',
  631. type: 'POST',
  632. data: formData,
  633. contentType: false,
  634. processData: false,
  635. dataType: 'json',
  636. success: function (res) {
  637. if (res.code == 200) {
  638. that.isAnimate = true;
  639. socket.ws.send('{"room":' + that.liveInfo.id + ',"uid":' + window.uids + ',"content":"' + res.data.url + '","ms_type":"2","type":"send"}');
  640. } else {
  641. that.msg(res.msg);
  642. }
  643. }
  644. })
  645. }
  646. });
  647. window.vm = vm;
  648. this.KeyboardStatus();
  649. this.getCommentList();
  650. this.getOpenCommtList();
  651. this.createEmojiSwiper();
  652. this.createGiftSwiper();
  653. this.getGiftList();
  654. // this.getRecomList();
  655. this.getRankList();
  656. this.countRoomUser();
  657. });
  658. },
  659. methods: {
  660. // 向下滚动加载
  661. chatScroll: function (event) {
  662. var target = event.target;
  663. if (target.scrollTop) {
  664. return;
  665. }
  666. switch (this.navActive) {
  667. case 0:
  668. this.isDown = false;
  669. this.scrollHeight = target.scrollHeight;
  670. this.getOpenCommtList();
  671. break;
  672. case 1:
  673. this.getCommentList();
  674. break;
  675. }
  676. },
  677. // 预览图片
  678. preview: function (img) {
  679. layer.open({
  680. style: 'background:none',
  681. className: 'preview',
  682. content: '<img class="preview-img" src="' + img + '">'
  683. });
  684. },
  685. getUrlStr: function (name) {
  686. var pattern = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'),
  687. array = document.location.search.slice(1).match(pattern);
  688. if (array) {
  689. return decodeURI(array[2]);
  690. }
  691. return null;
  692. },
  693. emojiKeyboardHide: function () {
  694. if (this.emojiShow) {
  695. this.emojiShow = false;
  696. }
  697. },
  698. // 滚动条滚到底部
  699. contentScroll: function (params) {
  700. this.$nextTick(function () {
  701. params.parentNode.scrollTop = this.isDown ? params.scrollHeight : params.scrollHeight - this.scrollHeight;
  702. });
  703. },
  704. // 设置赠送礼物后的功功能
  705. setGiftFloat: function (res) {
  706. var cont = '赠送给主播',
  707. gift = null,
  708. type = 1;
  709. if (!res.recharge_status) {
  710. return this.msg('您的' + this.goldInfo.gold_name + '不足,请先去充值');
  711. }
  712. gift = this.giftList.find(function (value) {
  713. return value.id === res.live_gift_id;
  714. });
  715. if (!gift) {
  716. return this.msg('gift异常');
  717. }
  718. res.gift = gift
  719. this.giftFloat = res;
  720. cont += gift.live_gift_name + '<img src="' + res.gift.live_gift_show_img + '"> ×' + res.live_gift_num;
  721. this.BarrageList.push({
  722. avatar: res.user_avatar,
  723. content: cont,
  724. type: type
  725. });
  726. this.OpenCommentList.push({
  727. nickname: res.username,
  728. uid: res.uid,
  729. content: cont,
  730. type: type,
  731. avatar: res.user_avatar,
  732. user_type: res.user_type
  733. });
  734. if (res.uid === this.userInfo.uid) {
  735. this.isDown = true;
  736. this.userInfo.gold_num = this.userInfo.gold_num - gift.live_gift_price * res.live_gift_num;
  737. }
  738. },
  739. // 送礼物
  740. sendGift: function () {
  741. if (socket.ws.readyState !== 1) {
  742. return layer.msg('WebSocket 未连接');
  743. }
  744. var data = {
  745. type: 'live_reward',
  746. uid: this.userInfo.uid,
  747. live_gift_id: this.giftOn.id,
  748. live_gift_num: this.giftNumSelected,
  749. live_id: window.room,
  750. special_id: this.liveInfo.special_id
  751. };
  752. if (!this.userInfo.gold_num) {
  753. return this.msg('您的' + this.goldInfo.gold_name + '不足,请先去充值');
  754. }
  755. if (this.giftNumSelected * this.giftOn.live_gift_price > this.userInfo.gold_num) {
  756. return this.msg('您的' + this.goldInfo.gold_name + '不足,请先去充值');
  757. }
  758. this.giftShow = false;
  759. socket.ws.send(JSON.stringify(data));
  760. },
  761. // 获取榜单
  762. getRankList: function () {
  763. var that = this;
  764. that.loadings = true;
  765. store.basePost($h.U({c: 'live', a: 'get_live_reward'}), {uid: that.userInfo.uid, live_id: that.liveInfo.id}, function (res) {
  766. var list = res.data.data.list;
  767. that.loadings = false;
  768. if (!list.length) {
  769. return;
  770. }
  771. that.rankList = list;
  772. }, function (res) {
  773. that.loadings = false;
  774. that.msg(res.data.data.msg);
  775. });
  776. },
  777. // 获取主播推荐
  778. getRecomList: function () {
  779. var that = this;
  780. that.loadings = true;
  781. store.baseGet($h.U({c: 'live', a: 'live_goods_list', q: {live_id: that.liveInfo.id}}), function (res) {
  782. var list = res.data.data.list;
  783. that.loadings = false;
  784. if (!list.length) {
  785. return;
  786. }
  787. that.recomList = list;
  788. }, function (res) {
  789. that.loadings = false;
  790. that.msg(res.data.data.msg);
  791. });
  792. },
  793. // 获取打赏礼物
  794. getGiftList: function () {
  795. var that = this;
  796. store.baseGet($h.U({c: 'live', a: 'live_gift_list'}), function (res) {
  797. var list = res.data.data;
  798. if (!list.length) {
  799. return;
  800. }
  801. list.forEach(function (value) {
  802. value.live_gift_num.reverse();
  803. });
  804. that.giftList = list;
  805. that.giftOn = list[0];
  806. }, function (res) {
  807. that.msg(res.msg);
  808. });
  809. },
  810. // 创建表情包面板
  811. createEmojiSwiper: function () {
  812. new Swiper('#emoji', {
  813. observer: true,
  814. observeParents: true,
  815. pagination: {
  816. el: '#emoji-pagination'
  817. }
  818. });
  819. },
  820. // 创建打赏礼物面板
  821. createGiftSwiper: function () {
  822. new Swiper('#gift', {
  823. observer: true,
  824. observeParents: true,
  825. pagination: {
  826. el: '#gift-pagination'
  827. }
  828. });
  829. },
  830. play_audio: function (item, index, name) {
  831. var that = this;
  832. var is_play = item.is_play === undefined ? true : !item.is_play;
  833. $.each(that[name], function (key, item) {
  834. if (index != key) {
  835. item.is_play = false;
  836. if (item.audio && !item.audio.paused) item.audio.pause();
  837. item.audio = null;
  838. };
  839. });
  840. this.$set(that, name, this[name]);
  841. mapleWx($jssdk(), function () {
  842. })
  843. if (is_play) {
  844. audio = new Audio(item.content);
  845. audio.load();
  846. audio.preload = 'none';
  847. var plalyPromis = audio.play();
  848. if (plalyPromis !== null)
  849. plalyPromis.catch(function () {
  850. audio.play();
  851. })
  852. document.addEventListener('DOMContentLoaded', function () {
  853. function audioAutoPlay() {
  854. audio.play();
  855. document.addEventListener("WeixinJSBridgeReady", function () {
  856. audio.play();
  857. }, false);
  858. }
  859. audioAutoPlay();
  860. });
  861. audio.addEventListener('ended', function () {
  862. that.$set(that[name][index], 'is_play', false);
  863. });
  864. }
  865. this.$set(this[name][index], 'is_play', is_play);
  866. this.$set(this[name][index], 'audio', audio);
  867. },
  868. msg: function (err, success) {
  869. layer.open({content: err, skin: 'msg', time: 2, success: success});
  870. },
  871. layerLoading: function (type, content) {
  872. type = type == undefined ? 2 : type;
  873. this.layerIndex = layer.open({type: type, content: content});
  874. },
  875. layerLoadClose: function () {
  876. layer.close(this.layerIndex);
  877. },
  878. // 获取聊天内容
  879. getOpenCommtList: function () {
  880. var vm = this;
  881. if (vm.Oloadend) {
  882. return;
  883. }
  884. store.baseGet($h.U({
  885. c: 'live',
  886. a: 'get_open_comment_list',
  887. q: {
  888. page: vm.Opage,
  889. limit: vm.Olimit,
  890. live_id: vm.liveInfo.id,
  891. add_time: OpenCommentTime
  892. }
  893. }), function (res) {
  894. var list = res.data.data.list;
  895. vm.OscrollHeight = vm.$refs.chat.scrollHeight;
  896. list.forEach(function (item) {
  897. if (item.type == 1) {
  898. item.content = vm.replace_em(item.content);
  899. }
  900. vm.OpenCommentList.unshift(item);
  901. });
  902. vm.$nextTick(function () {
  903. for (var i = vm.$refs.chat.getElementsByTagName('img').length; i--;) {
  904. vm.$refs.chat.getElementsByTagName('img')[i].addEventListener('load', function () {
  905. vm.$refs.chat.scrollTop = vm.$refs.chat.scrollHeight - vm.OscrollHeight;
  906. });
  907. }
  908. });
  909. if (vm.Opage == 1) {
  910. vm.countRoomUser();
  911. }
  912. vm.Oloadend = vm.Olimit > list.length;
  913. if (!vm.Oloadend) {
  914. vm.Opage++;
  915. }
  916. }, function (err) {
  917. console.log(err);
  918. });
  919. },
  920. // 获取课堂内容
  921. getCommentList: function () {
  922. var vm = this;
  923. if (vm.loadend) {
  924. return;
  925. }
  926. store.baseGet($h.U({
  927. c: 'live',
  928. a: 'get_comment_list',
  929. q: {
  930. page: vm.page++,
  931. limit: vm.limit,
  932. live_id: vm.liveInfo.id,
  933. add_time: CommentTime
  934. }
  935. }), function (res) {
  936. var list = res.data.data.list;
  937. vm.loadend = vm.limit > list.length;
  938. vm.scrollHeight = vm.$refs.lesson.scrollHeight;
  939. list.forEach(function (item) {
  940. if (item.type == 1) {
  941. item.content = vm.replace_em(item.content);
  942. }
  943. vm.CommentList.unshift(item);
  944. });
  945. vm.$nextTick(function () {
  946. for (var i = vm.$refs.lesson.getElementsByTagName('img').length; i--;) {
  947. vm.$refs.lesson.getElementsByTagName('img')[i].addEventListener('load', function () {
  948. vm.$refs.lesson.scrollTop = vm.$refs.lesson.scrollHeight - vm.scrollHeight;
  949. });
  950. }
  951. });
  952. }, function (err) {
  953. console.log(err);
  954. });
  955. },
  956. //滑动底部加载
  957. bScrollInit: function (Fnname) {
  958. var that = this;
  959. $h.EventUtil.listenTouchDirection(document, false, false, false, function () {
  960. that[Fnname] && that[Fnname]();
  961. }, false);
  962. },
  963. wechatUploadImg: function (wxApi, count, successCallback, errorCallback) {
  964. var that = this;
  965. wxApi.chooseImage({count: count, sizeType: ['compressed']}, function (localIds) {
  966. that.layerLoading(2, '图片上传中...');
  967. wxApi.uploadImage(localIds, function (serverIds) {
  968. store.baseGet($h.U({c: 'public_api', a: 'wechat_media_id_by_image', p: {mediaIds: serverIds}}), function (res) {
  969. that.layerLoadClose();
  970. if (!res.data.data) {
  971. that.msg('请选择上传图片!');
  972. errorCallback && errorCallback(err);
  973. return;
  974. }
  975. successCallback && successCallback(res.data.data);
  976. }, function (res) {
  977. that.layerLoadClose();
  978. that.msg('上传失败!');
  979. errorCallback && errorCallback(err);
  980. });
  981. })
  982. });
  983. },
  984. //发送图文消息处理
  985. push: function () {
  986. var that = this;
  987. if (that.is_ban) return that.msg('您已被禁言!');
  988. if (this.content) {
  989. that.sendMessage(this.content, 1);
  990. } else {
  991. //发送图片微信端
  992. if (isWechat) {
  993. mapleWx($jssdk(), function () {
  994. that.wechatUploadImg(this, 1, function (res) {
  995. that.sendMessage(res[0], 2);
  996. that.isAnimate = true;
  997. });
  998. });
  999. } else {
  1000. //其他端
  1001. if (!$('.images').length) $('body').append('<input type="file" name="images" style="display: none" class="images">');
  1002. $('.images').click();
  1003. }
  1004. }
  1005. },
  1006. /*
  1007. *获取直播间人数
  1008. * */
  1009. countRoomUser: function () {
  1010. var joint = '{"type":"room_user_count","uid":' + window.uids + ',"room":' + window.room + '}';
  1011. if (socket && socket.ws && socket.ws.readyState == 1) {
  1012. socket.ws.send(joint);
  1013. }
  1014. },
  1015. /*
  1016. * 本人撤回消息
  1017. * */
  1018. recall: function (id, indexList) {
  1019. var that = this;
  1020. layer.open({
  1021. content: '是否要撤回此消息?'
  1022. , btn: ['是的', '不要']
  1023. , yes: function (index) {
  1024. socket.ws.send('{"room":' + that.liveInfo.id + ',"type":"recall","id":' + id + '}');
  1025. that.CommentList.splice(indexList, 1);
  1026. $.each(that.OpenCommentList, function (indexs, item) {
  1027. if (item != undefined && item.id == id) that.OpenCommentList.splice(indexs, 1);
  1028. });
  1029. layer.close(index);
  1030. that.$set(that, 'CommentList', that.CommentList);
  1031. that.$set(that, 'OpenCommentList', that.OpenCommentList);
  1032. }
  1033. });
  1034. },
  1035. /*
  1036. * socket回撤直播间消息回调
  1037. * */
  1038. CommentRecall: function (id) {
  1039. var that = this;
  1040. $.each(this.CommentList, function (index, item) {
  1041. if (item.id == id) that.CommentList.splice(index, 1);
  1042. });
  1043. $.each(this.OpenCommentList, function (index, item) {
  1044. if (item.id == id) that.OpenCommentList.splice(index, 1);
  1045. });
  1046. this.OpenCommentCount--;
  1047. that.$set(that, 'CommentList', that.CommentList);
  1048. that.$set(that, 'OpenCommentList', that.OpenCommentList);
  1049. },
  1050. // 更新直播间在线人数和欢迎回调
  1051. setUserCount: function (onLine_user_count, notice_content, user_type) {
  1052. var anchor = this.anchor,
  1053. obj = null;
  1054. this.UserSum = onLine_user_count;
  1055. this.notice = notice_content;
  1056. if (anchor && typeof anchor === 'object') {
  1057. obj = {};
  1058. for (const key in anchor) {
  1059. if (anchor.hasOwnProperty(key)) {
  1060. obj[key] = anchor[key];
  1061. }
  1062. }
  1063. obj.content = notice_content;
  1064. this.OpenCommentList.push(obj);
  1065. }
  1066. },
  1067. // 用户禁言回调
  1068. setBanUser: function (value) {
  1069. this.is_ban = value;
  1070. },
  1071. // 设置聊天和课堂内容
  1072. setCommentArea: function (content, type, toUserInfo, user_type, id) {
  1073. var vm = this;
  1074. switch (user_type) {
  1075. case 0: case 1:
  1076. this.CommentList.push({
  1077. nickname: toUserInfo.nickname,
  1078. uid: toUserInfo.uid,
  1079. content: type == 1 ? this.replace_em(content) : content,
  1080. type: type,
  1081. avatar: toUserInfo.avatar,
  1082. user_type: user_type,
  1083. id: id
  1084. });
  1085. this.$nextTick(function () {
  1086. for (var i = this.$refs.lesson.getElementsByTagName('img').length; i--;) {
  1087. this.$refs.lesson.getElementsByTagName('img')[i].addEventListener('load', function () {
  1088. vm.$refs.lesson.scrollTop = vm.$refs.lesson.scrollHeight - vm.$refs.lesson.offsetHeight;
  1089. });
  1090. }
  1091. });
  1092. break;
  1093. default:
  1094. this.BarrageList.push({
  1095. avatar: toUserInfo.avatar,
  1096. content: type == 1 ? this.replace_em(content) : content,
  1097. type: type
  1098. });
  1099. this.$set(this, 'BarrageList', this.BarrageList);
  1100. break;
  1101. }
  1102. this.OpenCommentList.push({
  1103. nickname: toUserInfo.nickname,
  1104. uid: toUserInfo.uid,
  1105. content: type == 1 ? this.replace_em(content) : content,
  1106. type: type,
  1107. avatar: toUserInfo.avatar,
  1108. user_type: user_type,
  1109. id: id
  1110. });
  1111. this.$nextTick(function () {
  1112. for (var j = this.$refs.chat.getElementsByTagName('img').length; j--;) {
  1113. this.$refs.chat.getElementsByTagName('img')[j].addEventListener('load', function () {
  1114. vm.$refs.chat.scrollTop = vm.$refs.chat.scrollHeight - vm.$refs.chat.offsetHeight;
  1115. });
  1116. }
  1117. });
  1118. this.isDown = true;
  1119. this.OpenCommentCount++;
  1120. },
  1121. /*
  1122. * 发送消息
  1123. * */
  1124. sendMessage: function (content, type) {
  1125. var that = this;
  1126. if (that.is_SendOut === false) return that.msg('您发送消息过于频繁!');
  1127. that.isAnimate = true;
  1128. var cd = that.cd;
  1129. var index = setInterval(function () {
  1130. cd--;
  1131. if (cd <= 0) {
  1132. clearInterval(index);
  1133. that.is_SendOut = true;
  1134. }
  1135. }, 1000);
  1136. that.content = '';
  1137. socket.sendOut();
  1138. socket.ws.send('{"room":' + this.liveInfo.id + ',"uid":' + window.uids + ',"content":"' + content + '","ms_type":"' + type + '","type":"send"}');
  1139. },
  1140. KeyboardStatus: function () {
  1141. var winHeight = $(window).height(), that = this, interval = null, bfscrolltop = document.body.scrollTop;; //获取当前页面高度
  1142. if (phone_type == 2) {
  1143. $(window).resize(function () {
  1144. var thisHeight = $(this).height();
  1145. if (winHeight - thisHeight > 50) {
  1146. //当软键盘弹出,在这里面操作
  1147. that.emojiShow = false;
  1148. } else {
  1149. //当软键盘收起,在此处操作
  1150. }
  1151. });
  1152. $(that.$refs.input).keydown(function (event) {
  1153. if (event.keyCode == 13 && that.content) {
  1154. that.sendMessage($(that.$refs.input).val(), 1);
  1155. that.$refs.input.blur();
  1156. }
  1157. }).focus(function (e) {
  1158. that.isAnimate = true;
  1159. document.body.scrollTop = document.body.scrollHeight;
  1160. that.focusInput(e);
  1161. })
  1162. } else if (phone_type == 1) {
  1163. $(that.$refs.input).focus(function (e) {
  1164. that.isAnimate = true;
  1165. that.$nextTick(function () {
  1166. that.emojiShow = false;
  1167. })
  1168. interval = setInterval(function () {
  1169. document.documentElement.scrollTop = $("#app").height();
  1170. }, 100)
  1171. }).blur(function () {
  1172. clearInterval(interval);
  1173. document.documentElement.scrollTop = $("#app").height();
  1174. })
  1175. }
  1176. $(that.$refs.input).keydown(function (event) {
  1177. if (event.keyCode == 13 && that.content) {
  1178. that.sendMessage($(that.$refs.input).val(), 1);
  1179. that.$refs.input.blur();
  1180. }
  1181. });
  1182. $(that.$refs.chatList).click(function (event) {
  1183. event.stopPropagation();
  1184. if (that.emojiShow) that.emojiShow = false;
  1185. })
  1186. $(that.$refs.chat).click(function (event) {
  1187. event.stopPropagation();
  1188. if (that.emojiShow) that.emojiShow = false;
  1189. })
  1190. },
  1191. changeContent: function (e) {
  1192. // this.msg(e.value);
  1193. },
  1194. focusInput: function (obj) {
  1195. var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
  1196. var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  1197. if (isAndroid) {
  1198. window.addEventListener('resize', () => {
  1199. if (document.activeElement.tagName == 'INPUT') {
  1200. window.setTimeout(() => {
  1201. document.activeElement.scrollIntoViewIfNeeded()
  1202. }, 0)
  1203. }
  1204. })
  1205. } else if (isIos) {
  1206. // 使用定时器是为了让输入框上滑时更加自然
  1207. var input_demo = document.getElementsByTagName('input')[0];
  1208. setTimeout(function () {
  1209. input_demo.scrollIntoViewIfNeeded();
  1210. document.activeElement.scrollIntoViewIfNeeded()
  1211. }, 100);
  1212. // $('.footer').css('position','relative');
  1213. window.addEventListener('focusin', () => {
  1214. scrollTops = document.body.scrollHeight;
  1215. })
  1216. window.addEventListener('focusout', () => {
  1217. window.scrollTo(0, 0);
  1218. })
  1219. $(this.$refs.chat).animate({scrollTop: $(this.$refs.chat).scrollTop() + 300}, 300);
  1220. }
  1221. },
  1222. changeText: function (e) {
  1223. var input = this.$refs.input;
  1224. input.focus();
  1225. //input.scrollTop = input.scrollHeigHt;
  1226. },
  1227. mine: function (item) {
  1228. this.$refs.input.value += item.type;
  1229. this.content = this.$refs.input.value;
  1230. },
  1231. /*
  1232. * 替换表情
  1233. * */
  1234. replace_em: function (str) {
  1235. str = str.replace(/\</g, '&lt;');
  1236. str = str.replace(/\>/g, '&gt;');
  1237. str = str.replace(/\n/g, '<br/>');
  1238. str = str.replace(/\[qq_([0-9]*)\]/g, "<img class='img' src='/wap/first/zsff/face/emoji1/$1.gif' />");
  1239. str = str.replace(/\[em_([0-9]*)\]/g, "<img class='img' src='/wap/first/zsff/face/emoji2/$1.png' />");
  1240. str = str.replace(/\[other_([0-9]*)\]/g, "<img class='img' src='/wap/first/zsff/face/emoji3/$1.png' />");
  1241. return str;
  1242. },
  1243. delEmoji: function () {
  1244. this.content = this.content.substring(0, this.content.length - 1);
  1245. },
  1246. /*
  1247. * 播放器错误事件处理
  1248. *
  1249. * */
  1250. bindEvevt: function () {
  1251. var that = this;
  1252. this.player.on('onM3u8Retry', function () {
  1253. if (that.player) that.player.dispose();
  1254. that.live_error = '主播暂时离开,请稍后.';
  1255. that.live_status = -1;
  1256. });
  1257. this.player.on('liveStreamStop', function () {
  1258. that.live_error = '直播失败或直播已结束';
  1259. that.live_status = -1;
  1260. if (that.player) that.player.dispose();
  1261. });
  1262. this.player.on('error', function (e) {
  1263. //隐藏
  1264. $('.prism-ErrorMessage').hide();
  1265. //解析
  1266. var errorData = e.paramData;
  1267. that.live_error = '直播失败或直播已结束';
  1268. that.live_status = -1;
  1269. if (that.player) that.player.dispose();
  1270. });
  1271. },
  1272. touchmoveDefault: function (e) {
  1273. e.preventDefault();
  1274. },
  1275. start(e) {
  1276. var that = this;
  1277. if (this.timeOutEvent) clearTimeout(this.timeOutEvent);
  1278. if (this.autoCloseRecord) clearInterval(this.autoCloseRecord);
  1279. this.longClick = 0;
  1280. this.starttime = new Date().getTime();
  1281. this.autoCloseRecord = setInterval(function () {
  1282. that.timeEnd--;
  1283. if (that.timeEnd === 10) that.showTimer = true;
  1284. if (that.timeEnd === 0) that.end(e);
  1285. })
  1286. this.timeOutEvent = setTimeout(function () {
  1287. e.preventDefault();
  1288. that.longClick = 1;
  1289. if (isWechat) {
  1290. mapleWx($jssdk(), function () {
  1291. this.startRecord();
  1292. });
  1293. }
  1294. }, 500);
  1295. that.speak = '松开 结束';
  1296. that.recording = true;
  1297. return false;
  1298. },
  1299. move(e) {
  1300. this.timeOutEvent = 0;
  1301. e.preventDefault();
  1302. },
  1303. end(e) {
  1304. var that = this;
  1305. this.msg('333');
  1306. clearInterval(that.autoCloseRecord);
  1307. this.endtime = new Date().getTime();
  1308. if ((this.endtime - this.starttime) < 2) {
  1309. this.endtime = 0;
  1310. this.starttime = 0;
  1311. clearTimeout(this.timeOutEvent);
  1312. that.msg('说话时间太短');
  1313. mapleWx($jssdk(), function () {
  1314. this.stopRecord();
  1315. })
  1316. } else {
  1317. mapleWx($jssdk(), function () {
  1318. var wx = this;
  1319. this.stopRecord(function (localId, res) {
  1320. wx.uploadVoice(localId, function (serverId) {
  1321. store.basePost($h.U({c: 'live', a: 'upload_voice'}), {server_id: serverId}, function (res) {
  1322. socket.ws.send('{"room":' + that.liveInfo.id + ',"content":"' + Ks3Host + '/' + res.data.data.url + '","ms_type":3,"type":"send"}');
  1323. });
  1324. }, 0)
  1325. });
  1326. })
  1327. }
  1328. e.preventDefault();
  1329. this.speak = '按住 结束';
  1330. this.recording = false;
  1331. return false;
  1332. },
  1333. voiceBnt: function () {
  1334. this.emojiShow = false;
  1335. if (this.voice == true) {
  1336. this.voice = false;
  1337. this.$nextTick(function () {
  1338. this.$refs.input.focus();
  1339. });
  1340. } else {
  1341. this.voice = true;
  1342. }
  1343. },
  1344. emoticon: function () {
  1345. var that = this;
  1346. this.voice = false;
  1347. if (this.emojiShow == true) {
  1348. this.emojiShow = false;
  1349. this.$nextTick(function () {
  1350. that.$refs.input.focus();
  1351. })
  1352. } else {
  1353. this.emojiShow = true;
  1354. this.$nextTick(function () {
  1355. that.$refs.input.blur();
  1356. });
  1357. }
  1358. },
  1359. openBarrage: function () {
  1360. this.barrage = !this.barrage
  1361. },
  1362. openDiscuss: function () {
  1363. this.discuss = true;
  1364. $(this.$refs.chatlist).css({overflow: 'hidden'});
  1365. },
  1366. closeDiscuss: function () {
  1367. this.discuss = false;
  1368. $(this.$refs.chatlist).css({overflow: 'auto'});
  1369. },
  1370. changLive: function (type, pullUrl) {
  1371. //销毁播放器
  1372. var that = this;
  1373. if (this.player) this.player.dispose();
  1374. if (type) {
  1375. this.liveInfo.is_play = 1;
  1376. this.PullUrl = pullUrl;
  1377. this.$nextTick(function () {
  1378. that.player = new Aliplayer({
  1379. id: 'J_prismPlayer',
  1380. width: '100%',
  1381. height: '100%',
  1382. autoplay: false,
  1383. isLive: true,
  1384. source: pullUrl,
  1385. cover: that.liveInfo.live_image,
  1386. }, function (player) {
  1387. console.log('播放器创建好了。')
  1388. });
  1389. this.$nextTick(function () {
  1390. $('#J_prismPlayer').css({height: '4.22rem'});
  1391. });
  1392. that.bindEvevt();
  1393. })
  1394. } else {
  1395. this.PullUrl = false;
  1396. this.live_status = 1;
  1397. this.$set(this.liveInfo, 'is_play', 0);
  1398. this.$nextTick(function () {
  1399. $(that.$refs.column).css({height: 'auto'});
  1400. });
  1401. }
  1402. }
  1403. }
  1404. });
  1405. });
  1406. </script>
  1407. {/block}