detail.vue 96 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404
  1. <template>
  2. <view class="polyv_detail">
  3. <uni-nav-bar
  4. left-icon="back"
  5. :statusBar="true"
  6. fixed='true'
  7. :title="detail.courseName || '课程详情'"
  8. @clickLeft="clickLeft"
  9. ></uni-nav-bar>
  10. <!-- <nav-bar
  11. :title="detail.courseName || '课程详情'"
  12. v-show="navShow"
  13. ></nav-bar> -->
  14. <view id="top">
  15. <view class="video_box" v-if="!startStatus">
  16. <image
  17. :src="$method.splitImgHost(detail.coverUrl)"
  18. mode="widthFix"
  19. style="width: 100%; height: 421rpx"
  20. ></image>
  21. <image
  22. v-if="false"
  23. class="video_play"
  24. src="/static/play.png"
  25. @click="startVideo"
  26. ></image>
  27. </view>
  28. <view v-else>
  29. <!-- v-if="playVID" -->
  30. <view
  31. class="video_box"
  32. style="width: 100%; height: 421rpx"
  33. >
  34. <polyv-player
  35. v-if="playVID"
  36. id="playerVideo"
  37. playerId="playerVideo"
  38. height="421rpx"
  39. :vid="vid"
  40. :showSettingBtn="true"
  41. :enablePlayGesture="true"
  42. :custom-cache="false"
  43. :object-fit="'contain'"
  44. @statechange="onStateChange"
  45. @fullscreenchange="fullscreenchange"
  46. @error="playError"
  47. :autoplay="true"
  48. :page-gesture="true"
  49. :vslide-gesture="true"
  50. :vslide-gesture-in-fullscreen="true"
  51. :isAllowSeek="isAllowSeek"
  52. :playbackRate="playbackRate"
  53. :startTime="startTime"
  54. :enableAutoRotation="enableAutoRotation"
  55. @loadedmetadata="loadedmetadata"
  56. ></polyv-player>
  57. <cover-view
  58. class="video-toast__close"
  59. v-if="videoToastShow"
  60. @click="closeToast()"
  61. >X</cover-view
  62. >
  63. <cover-view class="video-toast" v-if="videoToastShow">
  64. <cover-view class="video-toast__text"
  65. >您上次看到 {{ seekTime }},正在自动续播</cover-view
  66. >
  67. <cover-view class="video-toast__btn" @click="restart()"
  68. >从头播放</cover-view
  69. >
  70. </cover-view>
  71. </view>
  72. <view
  73. class="video_box"
  74. style="width: 100%; height: 421rpx"
  75. v-if="playChannelId > 0"
  76. >
  77. <player
  78. class="plv-mp-demo-player"
  79. :videoOption="videoOption"
  80. :page-gesture="true"
  81. :vslide-gesture="true"
  82. :vslide-gesture-in-fullscreen="true"
  83. @onLiveStatusChange="playerLiveStatusChange"
  84. />
  85. </view>
  86. </view>
  87. <view class="course_name">
  88. <view class="course_titles">
  89. <view class="video_t1" :class="{'one': !goodsData.buyNote}">{{ detail.courseName }}</view>
  90. <view class="notice_wrap" v-if="goodsData.buyNote">
  91. <view class="video_t1_t" @click="studyNotice"> 学员须知 </view>
  92. </view>
  93. <view v-if="courseTotal > 1" class="toggle_course" @click="changeCourses()">
  94. <image class="img" src="/pages3/static/imgs/toggle.png"></image>
  95. <view class="toggle_name">切换课程</view>
  96. <view class="numbers">共{{ courseTotal }}门</view>
  97. </view>
  98. </view>
  99. <!-- <u-row>
  100. <u-col span="10">
  101. <view class="video_t1">{{ detail.courseName }}</view>
  102. </u-col>
  103. <u-col span="2">
  104. <div class="notice_wrap" v-if="goodsData.buyNote">
  105. <view class="video_t1_t" @click="studyNotice"> 学员须知 </view>
  106. </div>
  107. </u-col>
  108. </u-row> -->
  109. </view>
  110. <u-line color="#D6D6DB" />
  111. <view>
  112. <view
  113. ><u-tabs
  114. gutter="0"
  115. :item-width="itemWidth()"
  116. :list="list"
  117. font-size="32"
  118. bar-width="24"
  119. :current="current"
  120. @change="change"
  121. active-color="#007AFF"
  122. ></u-tabs
  123. ></view>
  124. </view>
  125. <u-line color="#D6D6DB" />
  126. </view>
  127. <view class="box" :class="{'first_ml': current == 0}">
  128. <scroll-view class="box_in" scroll-y="true">
  129. <!--目录 -->
  130. <view v-show="current == 0">
  131. <view class="top__header" v-if="livingItem" @click="goLive(livingItem)">
  132. <image class="img" src="/pages3/static/imgs/live.png" mode="widthFix"></image>
  133. <view class="note">正在直播中</view>
  134. <view class="title">{{livingItem.sectionName}}</view>
  135. </view>
  136. <view class="menuBox" v-for="(item, index) in menuList" :key="index">
  137. <!--模块 -->
  138. <view v-if="item.type == 1"
  139. ><courseModule
  140. v-if="reStart"
  141. :isLive="true"
  142. :orderGoodsId="orderGoodsId"
  143. :sectionMaxNum="goodsData.sectionMaxNum"
  144. :needOpen="menuIndex[0] === index ? true : false"
  145. :courseId="courseId"
  146. :preItem="menuList[index - 1]"
  147. :learningOrder="businessData.goodsLearningOrder"
  148. :goodsId="goodsId"
  149. :gradeId="gradeId"
  150. :isBuy="true"
  151. :menuItem="item"
  152. :levelId="item.menuId"
  153. :sectionItem="sectionItem"
  154. ></courseModule
  155. ></view>
  156. <!--章 -->
  157. <view v-if="item.type == 2"
  158. ><courseChapter
  159. v-if="reStart"
  160. :isLive="true"
  161. :orderGoodsId="orderGoodsId"
  162. :sectionMaxNum="goodsData.sectionMaxNum"
  163. :needOpen="menuIndex[0] === index ? true : false"
  164. :courseId="courseId"
  165. :preItem="menuList[index - 1]"
  166. @playEnd="sectionPlayEnd($event, index)"
  167. :learningOrder="businessData.goodsLearningOrder"
  168. :goodsId="goodsId"
  169. :gradeId="gradeId"
  170. :isBuy="true"
  171. :menuItem="item"
  172. :levelId="'0-' + item.menuId"
  173. :goodsType='6'
  174. ></courseChapter
  175. ></view>
  176. <!--节 -->
  177. <view v-if="item.type == 3"
  178. ><courseSection
  179. v-if="reStart"
  180. :isLive="true"
  181. :orderGoodsId="orderGoodsId"
  182. :sectionMaxNum="goodsData.sectionMaxNum"
  183. @playEnd="sectionPlayEnd($event, index)"
  184. :courseId="courseId"
  185. :preItem="menuList[index - 1]"
  186. :learningOrder="businessData.goodsLearningOrder"
  187. :goodsId="goodsId"
  188. :gradeId="gradeId"
  189. :isBuy="true"
  190. :menuItem="item"
  191. :levelId="'0-0-' + item.menuId"
  192. ></courseSection
  193. ></view>
  194. </view>
  195. </view>
  196. <!--笔记 -->
  197. <view v-show="current == 1">
  198. <view v-if="noteList.length == 0" style="text-align: center"
  199. >暂无笔记</view
  200. >
  201. <!-- <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0">
  202. <view style="width: 10%"
  203. ><image
  204. src="/static/icon/note3.png"
  205. style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
  206. ></image
  207. ></view>
  208. <view style="width: 73%; height: 100%; padding: 10rpx 0">
  209. <u-input
  210. class="input"
  211. height="60"
  212. fixed="true"
  213. placeholder="您可以在这里输入笔记内容"
  214. type="input"
  215. :custom-style="inputStyle"
  216. v-model="noteValue"
  217. />
  218. </view>
  219. <view
  220. style="
  221. color: #007aff;
  222. font-size: 30rpx;
  223. font-weight: bold;
  224. width: 15%;
  225. text-align: center;
  226. "
  227. @click="postNote"
  228. >提交</view
  229. >
  230. </view> -->
  231. <view v-for="(item, index) in noteList" :key="index">
  232. <view class="dateBox">{{
  233. $method.timestampToTime(item.dateNote)
  234. }}</view>
  235. <view class="noteBox">
  236. <view
  237. v-for="(item1, index1) in item.userNotes"
  238. :key="index1"
  239. style="margin-top: 30rpx"
  240. @click="jumpNote(item1)"
  241. >
  242. <view style="display: flex">
  243. <view class="left_ti">
  244. <view>
  245. <image
  246. src="/static/icon/note2.png"
  247. v-if="noteId != item1.noteId"
  248. style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
  249. ></image>
  250. <image
  251. src="/static/icon/note1.png"
  252. v-if="noteId == item1.noteId"
  253. style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
  254. ></image>
  255. </view>
  256. <view
  257. class="title"
  258. style="width: 39rpx; height: 39rpx;"
  259. >{{ $method.secondToDate(item1.noteSecond) }}</view
  260. >
  261. </view>
  262. <view style="margin-left: 10rpx">
  263. <view class="t2Content leftPadding">{{
  264. item1.sectionName
  265. }}</view>
  266. <view class="tBox2">{{ item1.noteText }}</view>
  267. </view>
  268. </view>
  269. </view>
  270. </view>
  271. </view>
  272. </view>
  273. <!--答疑 -->
  274. <view v-show="current == 2" class="Answering">
  275. <!-- <view class="inputBottom">
  276. <view class="flex_auto">
  277. <u-input
  278. height="60"
  279. fixed="true"
  280. :focus="isFocus"
  281. :placeholder="placeholder"
  282. type="input"
  283. @blur="blur"
  284. :custom-style="inputStyle"
  285. v-model="ctxValue"
  286. />
  287. </view>
  288. <view class="btn" @click="postContent">提交</view>
  289. </view> -->
  290. <view
  291. v-for="(item, index) in answerList"
  292. :key="index"
  293. style="background-color: #ffffff;"
  294. class="answer_item"
  295. >
  296. <view class="chat_box" @click.stop="clearCtx">
  297. <view style="display: flex; flex: 1">
  298. <view
  299. ><image
  300. :src="
  301. item.assignUserId > 0 && !item.realname
  302. ? '/static/logo_xcx.png'
  303. : $method.splitImgHost(item.avatar)
  304. "
  305. style="width: 64rpx; height: 64rpx"
  306. ></image
  307. ></view>
  308. <view style="margin-left: 15rpx">
  309. <view class="chat1">{{
  310. item.assignUserId > 0 && !item.realname
  311. ? "祥粤老师"
  312. : item.realname
  313. }}</view>
  314. <view class="chat2">{{
  315. $method.timestampToTime(item.createTime, false)
  316. }}</view>
  317. <view class="chat3">
  318. <text v-if="item.assignUserId > 0">回复</text>
  319. <text v-if="item.assignUserId > 0" style="color: #007aff"
  320. >@{{ item.assignRealname }}</text
  321. >
  322. <view style="word-break: break-all">{{
  323. item.answerText
  324. }}</view>
  325. </view>
  326. </view>
  327. </view>
  328. <view
  329. class="btnReply"
  330. @click.stop="replyContent(item)"
  331. v-if="item.userId != userInfo.userId"
  332. >回复</view
  333. >
  334. <view v-else class="btnDel" @click.stop="delContent(item)"
  335. >删除</view
  336. >
  337. </view>
  338. <u-line color="#D6D6DB" />
  339. </view>
  340. <view v-if="answerList.length == 0" style="text-align: center"
  341. >暂无记录</view
  342. >
  343. </view>
  344. <!--答疑 -->
  345. <view v-show="current == 3">
  346. <view
  347. v-for="(item, index) in historyChatMsgList"
  348. :key="index"
  349. style="background-color: #ffffff; margin-bottom: 20rpx"
  350. >
  351. <view class="chat_box" @click.stop="clearCtx">
  352. <view style="display: flex; flex: 1">
  353. <view
  354. ><image
  355. :src="
  356. item.user.pic
  357. "
  358. style="width: 64rpx; height: 64rpx"
  359. ></image
  360. ></view>
  361. <view style="margin-left: 15rpx">
  362. <view class="chat1">{{
  363. item.user.nickname
  364. }}</view>
  365. <view class="chat2">{{
  366. item.time | formatDate
  367. }}</view>
  368. <view class="chat3">
  369. <!-- <text v-if="item.assignUserId > 0">回复</text>
  370. <text v-if="item.assignUserId > 0" style="color: #007aff"
  371. >@{{ item.assignRealname }}</text
  372. > -->
  373. <view style="word-break: break-all">{{
  374. item.content
  375. }}</view>
  376. </view>
  377. </view>
  378. </view>
  379. </view>
  380. <u-line color="#D6D6DB" />
  381. </view>
  382. <view v-if="historyChatMsgList.length == 0" style="text-align: center"
  383. >暂无记录</view
  384. >
  385. </view>
  386. </scroll-view>
  387. <!-- 底部固定按钮 -->
  388. <!-- 笔记的输入框 -->
  389. <template v-if="current == 1">
  390. <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0" :style="{ bottom: bottomHeight + 'px' }">
  391. <view style="width: 10%"
  392. ><image
  393. src="/static/icon/note3.png"
  394. style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
  395. ></image
  396. ></view>
  397. <view style="width: 73%; height: 100%; padding: 10rpx 0">
  398. <input
  399. v-model="noteValue"
  400. class="input"
  401. height="60"
  402. fixed="true"
  403. placeholder="您可以在这里输入笔记内容"
  404. type="text"
  405. :custom-style="inputStyle"
  406. :adjust-position="false"
  407. @focus="focusNote"
  408. @blur="blurNote"
  409. />
  410. </view>
  411. <view
  412. style="
  413. color: #007aff;
  414. font-size: 30rpx;
  415. font-weight: bold;
  416. width: 15%;
  417. text-align: center;
  418. "
  419. @click="postNote"
  420. >提交</view
  421. >
  422. </view>
  423. </template>
  424. <!-- 答疑 -->
  425. <view v-if="current == 2" class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
  426. <view class="flex_auto">
  427. <input
  428. v-model="ctxValue"
  429. height="60"
  430. fixed="true"
  431. :focus="isFocus"
  432. :placeholder="placeholder"
  433. type="text"
  434. :custom-style="inputStyle"
  435. :adjust-position="false"
  436. class="input"
  437. @focus="focusNote"
  438. @blur="blur"
  439. />
  440. </view>
  441. <view class="btn" @click="postContent">提交</view>
  442. </view>
  443. </view>
  444. <!-- 播放前拍照end -->
  445. <u-popup
  446. v-model="showSet"
  447. :mask-close-able="false"
  448. mode="center"
  449. border-radius="24"
  450. >
  451. <view
  452. style="
  453. align-items: center;
  454. padding: 0 40rpx;
  455. display: flex;
  456. flex-direction: column;
  457. justify-content: center;
  458. "
  459. >
  460. <view
  461. style="
  462. font-weight: bold;
  463. color: #333333;
  464. font-size: 30rpx;
  465. margin-top: 30rpx;
  466. "
  467. >温馨提示</view
  468. >
  469. <view
  470. style="
  471. width: 457rpx;
  472. color: #666666;
  473. font-size: 30rpx;
  474. margin-top: 30rpx;
  475. "
  476. >学习过程中需要拍照验证学员身份, 拍照功能需要使用您的相机。
  477. 是否授权使用?</view
  478. >
  479. <view style="margin: 40rpx 0">
  480. <button
  481. open-type="openSetting"
  482. @bindopensetting="openSetting"
  483. class="btnSet"
  484. >
  485. 去授权
  486. </button>
  487. </view>
  488. </view>
  489. </u-popup>
  490. <u-popup v-model="photoPopup" mode="bottom" border-radius="40" :mask-close-able="false">
  491. <!-- 播放前拍照start -->
  492. <!-- :mask-close-able="false" -->
  493. <!-- style="bottom: 0; position: fixed; width: 100%; z-index: 999" -->
  494. <view
  495. v-if="photoPopup"
  496. >
  497. <view class="photoBox">
  498. <view class="photoTop">
  499. <view class="sqzz" v-if="false"
  500. ><u-icon
  501. name="close"
  502. color="#333333"
  503. size="30"
  504. @click="closePhoto"
  505. ></u-icon
  506. ></view>
  507. <view class="centersq">请正视手机屏幕</view>
  508. <view class="sqzz"></view>
  509. </view>
  510. <view class="photoCenter">
  511. <view
  512. class="center_camera"
  513. v-if="photoPopup && isTaking"
  514. >
  515. <!-- #ifdef MP-WEIXIN -->
  516. <camera
  517. device-position="front"
  518. flash="off"
  519. @error="error"
  520. style="width: 100%; height: 100%"
  521. >
  522. <!-- 加人脸框 -->
  523. <cover-view class="head_take">
  524. <cover-view class="headTake_up color"></cover-view>
  525. <cover-view class="headTake_minddle">
  526. <cover-view class="min_left color"></cover-view>
  527. <cover-view class="min_img"></cover-view>
  528. <cover-view class="min_right color"></cover-view>
  529. </cover-view>
  530. <cover-view class="headTake_down color"></cover-view>
  531. </cover-view>
  532. </camera>
  533. <!-- #endif -->
  534. <!-- #ifdef H5 -->
  535. <video
  536. :controls='false'
  537. id="video"
  538. width="400"
  539. height="300"
  540. class="photo_v"
  541. ></video>
  542. <view class="mask"></view>
  543. <!-- #endif -->
  544. </view>
  545. <view class="custom" v-if="!isTaking">
  546. <!-- #ifdef MP-WEIXIN -->
  547. <image :src="avatarUrl" mode=""></image>
  548. <!-- #endif -->
  549. <!-- #ifdef H5 -->
  550. <image :src="faceUrl" mode=""></image>
  551. <!-- #endif -->
  552. </view>
  553. </view>
  554. <view class="btns">
  555. <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
  556. >拍照</view
  557. > -->
  558. <view v-if="isTaking" class="takePhoto_btn">
  559. <view style='width: 100rpx;height: 2rpx;'></view>
  560. <view class="middle_btn" @click="takePhoto">
  561. <view class="square"></view>
  562. </view>
  563. <view class="rights" @click="takePhTips()">
  564. <text>拍照提示</text>
  565. <u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
  566. </view>
  567. </view>
  568. <view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
  569. <view class="btnResult" v-if="!isTaking" @click="submit">确认</view>
  570. </view>
  571. </view>
  572. </view>
  573. </u-popup>
  574. <u-popup
  575. v-model="noticeShow"
  576. class="notice_modal"
  577. mode="center"
  578. border-radius="28"
  579. width="650rpx"
  580. height="622rpx"
  581. :mask-close-able="false"
  582. @close="closeNotice"
  583. >
  584. <view class="content">
  585. <view class="title">学员须知</view>
  586. <scroll-view scroll-y="true">
  587. <view class="text" v-html="goodsData.buyNote && goodsData.buyNote.replace(/\n|\r\n/g, '<br>')">
  588. </view>
  589. </scroll-view>
  590. <view class="had_read" :class="{'gray': CountTo >= 0}" @click="noticeConfirm()">
  591. <text v-if="CountTo >= 0">请阅读学员须知,30s后可关闭</text>
  592. <text v-else>我已阅读学员须知</text>
  593. <text v-if="CountTo >= 0">{{ ' ' + CountTo + 's' }}</text>
  594. </view>
  595. </view>
  596. </u-popup>
  597. <!-- 切换课程弹窗 -->
  598. <u-popup v-model="toggleCourseShow" mode="bottom" border-radius="40" :mask-close-able='false'>
  599. <view class="popup_box">
  600. <view class="check_head">
  601. <view class="headers">
  602. <view class="grade">切换课程</view>
  603. <u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
  604. </view>
  605. <view class="coruse_num">共{{ courseTotal }}门</view>
  606. <view class="menuSel">
  607. <scroll-view class="sub_sliper" scroll-x="true" >
  608. <view v-for="(item,index) in subList" :key="index" style="margin-right: 50rpx;display:inline-block">
  609. <view class="r_t1" :class="{'nactive': subIndex == index}" @click="cMenu(item, index)">
  610. {{item.subjectName}}
  611. </view>
  612. </view>
  613. </scroll-view>
  614. </view>
  615. </view>
  616. <view class="check_con">
  617. <scroll-view scroll-y="true" style="height: 700rpx;">
  618. <view class="course_items" v-for="(item, index) in s_courseList" :key="index">
  619. <view class="course_lefts">
  620. <view class="course_title">{{ item.courseName }}</view>
  621. <!-- <view class="course_pros">
  622. 学习进度
  623. <text> {{ item.stuAllNum + item.recordNum }}/{{ item.secAllNum + item.examNum}}</text>
  624. </view> -->
  625. </view>
  626. <view class="course_rights" @click="jump(item, index)">
  627. <view class="cicles">
  628. <u-icon name="arrow-right" color="#498AFE" size="20"></u-icon>
  629. </view>
  630. <view class="intoStudy">进入学习</view>
  631. </view>
  632. </view>
  633. </scroll-view>
  634. </view>
  635. </view>
  636. </u-popup>
  637. <!-- 拍照提示 -->
  638. <popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto='toTakePhoto()'></popup-photo>
  639. </view>
  640. </template>
  641. <script>
  642. import plv from "@/pages3/static/polyv-sdk/index";
  643. import courseModule from "@/components/course/courseModule.vue";
  644. import courseChapter from "@/components/course/courseChapter.vue";
  645. import courseSection from "@/components/course/courseSection.vue";
  646. import PopupPhoto from '@/components/popup/index.vue'
  647. import { mapGetters, mapMutations } from "vuex";
  648. export default {
  649. components: {
  650. courseModule,
  651. courseChapter,
  652. courseSection,
  653. PopupPhoto,
  654. },
  655. filters: {
  656. formatDate(date) {
  657. const nDate = new Date(date)
  658. const nyear = nDate.getFullYear()
  659. const nmonth = (nDate.getMonth()+1).toString().padStart(2,0)
  660. const nday = nDate.getDate().toString().padStart(2,0)
  661. const hour = nDate.getHours()
  662. const mins = nDate.getMinutes()
  663. const seconds = nDate.getSeconds()
  664. return nyear+'-'+nmonth+'-'+nday+' '+hour+':'+(mins>=10 ? mins : '0'+mins)+':'+(seconds>=10 ? seconds : '0'+seconds)
  665. }
  666. },
  667. data() {
  668. return {
  669. hasStart:false,
  670. channelItem:null,
  671. lockTimer: null,
  672. orderGoodsId: 0,
  673. noticeShow: false,
  674. navShow: true,
  675. enableAutoRotation: true,
  676. seekTime: "",
  677. toastTimer: null,
  678. videoToastShow: false,
  679. initLiveOk: false,
  680. livePlay: false, //是否正在播放直播,不含暂停
  681. liveDuration: 0, //直播观看时长
  682. videoOption: {
  683. mode: "live",
  684. uid: "",
  685. cid: "",
  686. openId: "",
  687. isAutoChange: false,
  688. forceVideo: false,
  689. },
  690. courseHandoutsData: "",
  691. liveDetail: {},
  692. showSet: false,
  693. startStatus: false,
  694. detail: {},
  695. courseId: 0,
  696. placeholder:
  697. "您可以在这里输入笔记内容\n还可以点击左侧图标为笔记加上时间标记",
  698. inputStyle: {
  699. background: "rgba(244, 244, 244, 0.98)",
  700. borderRadius: "24rpx",
  701. padding: "8rpx",
  702. marginBottom: "10rpx",
  703. },
  704. list: [{
  705. name: "目录",
  706. },
  707. {
  708. name: "笔记",
  709. },
  710. {
  711. name: "答疑",
  712. },
  713. {
  714. name: "聊天",
  715. }],
  716. menuList: [],
  717. current: 0,
  718. vid: "",
  719. goodsId: 0,
  720. goodsData: {},
  721. photoPopup: false,
  722. goodsPlayConfig: null,
  723. autoplay: false,
  724. isAllowSeek: "no",
  725. playbackRate: [1.0],
  726. timer: null,
  727. // answerTimer: null,
  728. goodsPhotographConfig: null,
  729. intervalTimeList: [], // 间隔拍照时长
  730. intervalTimeIndex: 0, //当前处于哪个时间段拍照
  731. playTime: 0, //页面播放时长,不含暂停
  732. currentTime: 0,
  733. avatarUrl: "",
  734. ossAvatarUrl: "",
  735. studyDuration: 0, // 当前视频时长
  736. gradeId: 0,
  737. chapterId: 0,
  738. moduleId: 0,
  739. reMenuList: [],
  740. answerList: [],
  741. assignUserId: 0,
  742. placeholder: "您可以在这里输入答疑内容",
  743. ctxValue: "",
  744. noteList: [],
  745. noteValue: "",
  746. noteId: 0,
  747. recordObj: 0,
  748. gradeDetail: {},
  749. isTaking: true, //是否正在拍照
  750. needSeek: false, //第一次播放是否需要跳转
  751. needProfileModal: false, //是否需要资料审核弹框
  752. liveObj: {},
  753. photoNum: 0,
  754. photoList: [], //拍照的时间点
  755. photoConfig: false, //是否配置好拍照次数
  756. photoIndex: 0, //当前位于拍照的区间下标 从0开始
  757. photoHistoryList: [], //已拍照历史的下标点
  758. sectionItem: {},
  759. businessData: {},
  760. showNotes: true,
  761. menuIndex: [],
  762. uploadLock: false, //上传图片
  763. isPlayRebuild: false, //是否正在播放重修视频
  764. isRebuild: false, //视频是否从重修目录点击
  765. isFocus:false,
  766. clearTimer:null,
  767. historyChatMsgList:[],
  768. livingItem:'',
  769. bottomHeight: 0,
  770. toggleCourseShow: false, // 切换课程弹窗
  771. informId: '', //消息id,从公众号消息模板进来的才有
  772. courseList: [], // 课程列表
  773. courseTotal: 0,
  774. options: {},
  775. reStart: false, // 是否显示模块/章/节
  776. s_courseList: [], // 筛选后的
  777. subList: [],
  778. subIndex: 0,
  779. compareFaceData: 0, // 拍照匹配相似度
  780. CountTo: 30, // 倒计时
  781. popupPhotoShow: false,
  782. // h5
  783. faceUrl: "",
  784. };
  785. },
  786. computed: {
  787. ...mapGetters(["userInfo", "playSectionId", "playChannelId", "playVID",'config']),
  788. },
  789. onLoad(option) {
  790. console.log('--option--', option);
  791. this.options = option
  792. this.courseId = option.courseId || ''
  793. this.goodsId = Number(option.goodsId);
  794. // this.gradeId = option.gradeId || 0
  795. this.orderGoodsId = Number(option.orderGoodsId) || '';
  796. // 公众号模板消息的数据埋点
  797. if (option.informId) {
  798. this.informId = option.informId
  799. // this.clickOfficial()
  800. }
  801. },
  802. async onShow() {
  803. // this.photoPopup = true;
  804. // this.isTaking = true;
  805. console.log('this.options:', this.options);
  806. if (this.options.skipPort) {
  807. await this.$method.skipLogin(this.options.skipPort)
  808. }
  809. if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页,登录后返回
  810. return;
  811. }
  812. this.courseCourseList();
  813. this.informId && this.clickOfficial() // 从公众号消息点击进来上报一次
  814. this.$store.getters.dictObj;
  815. //相机授权
  816. // this.userConfirmInfoDetail().then(res => {
  817. // })
  818. // this.getbaseprofiletplists();
  819. },
  820. onUnload() {
  821. this.originUnload()
  822. },
  823. onHide() {
  824. this.originUnload()
  825. },
  826. mounted() {
  827. },
  828. methods: {
  829. ...mapMutations(["updateChapterOpen","updateLiveLast"]),
  830. // 新增微信公众号模板消息点击数据
  831. clickOfficial() {
  832. this.$http({
  833. url: '/data/click',
  834. method: 'post',
  835. data: { informId: this.informId }
  836. }).then((res) => {
  837. if (res.data.code == 200) {
  838. console.log('埋点')
  839. }
  840. })
  841. },
  842. // 点击课程目录
  843. cMenu(item, index) {
  844. this.subIndex = index
  845. if (item.subjectId != 0) {
  846. this.s_courseList = this.courseList.filter((e) => e.subjectId == item.subjectId)
  847. } else {
  848. this.s_courseList = this.courseList
  849. }
  850. },
  851. courseCourseList() {
  852. this.courseList = []
  853. this.$api.courseCourseList({
  854. pageNum: 1,
  855. pageSize: 100,
  856. goodsId: this.goodsId,
  857. gradeId: this.gradeId,
  858. orderGoodsId: this.orderGoodsId,
  859. }).then((res) => {
  860. if (res.data.code == 200) {
  861. this.courseList.push.apply(this.courseList, res.data.rows)
  862. this.courseTotal = res.data.total || 0
  863. this.s_courseList = this.courseList
  864. let allItem = [{ subjectId: 0, subjectName: '所有'}]
  865. let ids = []
  866. const newArr = []
  867. this.courseList.forEach(item => {
  868. if (ids.indexOf(item.subjectId) == -1) {
  869. ids.push(item.subjectId)
  870. newArr.push(item)
  871. }
  872. })
  873. this.subList = [...allItem, ...newArr]
  874. if(res.data.total > 1) {
  875. this.getUserWatchLast()
  876. } else if(res.data.total == 1) {
  877. this.originOnShow()
  878. this.originOnMount()
  879. }
  880. }
  881. });
  882. },
  883. // 查询用户最后一次看的录播的信息
  884. getUserWatchLast() {
  885. this.$http({
  886. // url: '/study/record/getUserWatchLast',
  887. url: '/study/record/queryLiveLast',
  888. method: 'get',
  889. data: {
  890. goodsId: this.goodsId
  891. }
  892. }).then((res) => {
  893. if (res.data.code == 200) {
  894. this.sectionItem = res.data.data || {}
  895. if (res.data.data && Object.keys(res.data.data).length) { //有最后一次看的录播的信息
  896. this.courseId = res.data.data.courseId
  897. } else {
  898. this.courseId = this.courseList[0].courseId // 没有观看记录默认一个课程
  899. // this.toggleCourseShow = true
  900. }
  901. } else {
  902. this.courseId = this.courseList[0].courseId // 没有观看记录默认一个课程
  903. }
  904. this.originOnShow()
  905. this.originOnMount()
  906. })
  907. },
  908. // 原来onshow里面的内容
  909. originOnShow() {
  910. this.updateLiveLast(null)
  911. this.courseDetail();
  912. this.getGoodsDetail();
  913. this.getAnswerList();
  914. this.studyRecordMenuAllList();
  915. // this.answerTimer = setInterval(() => {
  916. // this.getAnswerList();
  917. // }, 5000);
  918. let option = this.options
  919. let noteSecond = Number(option.noteSecond);
  920. if (noteSecond > 0) {
  921. //我的消息跳过来,播放节
  922. let item = {
  923. sectionId: Number(option.sectionId),
  924. recordingUrl: option.recordingUrl,
  925. noteSecond: noteSecond,
  926. studyDuration: noteSecond,
  927. };
  928. let playNextId = `moduleId${option.moduleId}chapterId${
  929. option.chapterId
  930. }sectionId${option.sectionId}${option.isRebuild ? "isRebuild" : ""}`;
  931. this.$store.commit("setPlaySectionId", { playSectionId: item.sectionId || item.menuId });
  932. this.$store.commit("setPlayVID", { playVID: item.recordingUrl });
  933. this.$store.commit("updatePlayNextId", playNextId);
  934. this.playNoteVideo(item)
  935. } else {
  936. this.studyRecordQueryLiveLast();
  937. }
  938. },
  939. // 原来的mouted内容
  940. originOnMount() {
  941. uni.$on("changeSection", (oldSectionId) => {
  942. this.hasStart = false;
  943. this.photoConfig = false;
  944. this.photoIndex = 0;
  945. var polyvPlayerContext = this.selectComponent("#playerVideo");
  946. if (polyvPlayerContext) {
  947. //解决同个节视频切换问题
  948. polyvPlayerContext.seek(0);
  949. polyvPlayerContext.pause();
  950. }
  951. //清除直播
  952. this.$store.commit("setPlayChannelId", { playChannelId: 0 });
  953. this.postStudyRecord(0, oldSectionId);
  954. });
  955. uni.$on("getSection", (item) => {
  956. //清除直播
  957. this.hasStart = false;
  958. this.isPlayRebuild = item.rebuild;
  959. this.photoConfig = false;
  960. this.photoIndex = 0;
  961. this.sectionItem = item;
  962. this.moduleId = item.moduleId || null
  963. this.chapterId = item.chapterId || null
  964. this.$store.commit("setPlayChannelId", { playChannelId: 0 });
  965. this.$store.commit("setPlaySectionId", { playSectionId: item.sectionId || item.menuId });
  966. console.log('清除直播节点胡:', this.moduleId,this.chapterId, this.playSectionId )
  967. //获取拍照历史
  968. this.getPhotoLastRecord();
  969. this.polyvLiveHistoryChatMsgList();
  970. this.playVideo(item);
  971. });
  972. uni.$on("levelId", (item) => {
  973. let arr = item.split("-");
  974. //点击节获取的各层级ID
  975. this.moduleId = arr[0];
  976. this.chapterId = arr[1];
  977. });
  978. uni.$on("getChannel", (item) => {
  979. //清除录播
  980. this.hasStart = false;
  981. this.$store.commit("setPlayVID", { playVID: null });
  982. this.moduleId = item.moduleId
  983. this.chapterId = item.chapterId
  984. this.$store.commit("setPlaySectionId", { playSectionId: item.sectionId || item.menuId });
  985. this.getPhotoLastRecord();
  986. this.playChannel(item);
  987. this.channelItem = item;
  988. });
  989. uni.$on("isRebuild", (item) => {
  990. this.isRebuild = item;
  991. });
  992. this.updateChapterOpen(true);
  993. },
  994. // 原来onUnload里面的内容
  995. originUnload() {
  996. if (this.playSectionId > 0 && this.hasStart) {
  997. //退出提交记录
  998. this.postStudyRecord();
  999. }
  1000. //清除正在播放的节ID
  1001. // this.$store.commit('setPlayObj',null)
  1002. this.$store.commit("setPlaySectionId", { playSectionId: 0 });
  1003. this.$store.commit("setPlayChannelId", { playChannelId: 0 });
  1004. this.$store.commit("setPlayVID", { playVID: null });
  1005. this.closePlv();
  1006. //移除所有的事件监听器
  1007. uni.$off();
  1008. this.clearTimer && clearTimeout(this.clearTimer)
  1009. this.toastTimer && clearTimeout(this.toastTimer)
  1010. this.timer && clearInterval(this.timer);
  1011. if (this.lockTimer) {
  1012. clearInterval(this.lockTimer);
  1013. this.$api
  1014. .lockDelLock({
  1015. uuid: this.$method.getUuid(),
  1016. action: "jxjy",
  1017. })
  1018. .then((res) => {
  1019. uni.hideLoading()
  1020. });
  1021. }
  1022. },
  1023. changeCourses() {
  1024. this.toggleCourseShow = true
  1025. },
  1026. closePop() {
  1027. this.toggleCourseShow = false
  1028. },
  1029. // 进入学习
  1030. async jump(item, index) {
  1031. this.vid = ''
  1032. this.hasStart = true
  1033. await this.originUnload()
  1034. this.courseId = item.courseId
  1035. this.reStart = false
  1036. this.toggleCourseShow = false
  1037. this.originOnShow()
  1038. this.originOnMount()
  1039. },
  1040. clickLeft() {
  1041. // uni.navigateBack()
  1042. uni.switchTab({
  1043. url:'/pages/learn/index'
  1044. })
  1045. },
  1046. /**
  1047. * 获取上次观看的直播
  1048. */
  1049. studyRecordGetLastLive() {
  1050. this.$api.studyRecordGetLastLive({
  1051. orderGoodsId:this.orderGoodsId,
  1052. courseId:this.courseId
  1053. }).then(res => {
  1054. this.updateLiveLast(res.data.data)
  1055. })
  1056. },
  1057. /**
  1058. * 获取最后一次看的节
  1059. */
  1060. studyRecordQueryLiveLast() {
  1061. // /study/record/queryLiveLast
  1062. this.$api.studyRecordQueryLiveLast({
  1063. orderGoodsId:this.orderGoodsId,
  1064. courseId:this.courseId
  1065. }).then(async res => {
  1066. if(res.data.data) {
  1067. this.moduleId = res.data.data.moduleId
  1068. this.chapterId = res.data.data.chapterId
  1069. if(res.data.data.sectionType == 1) { //录播
  1070. this.$store.commit("setPlaySectionId", { playSectionId: res.data.data.sectionId });
  1071. this.$store.commit("setPlayVID", { playVID: res.data.data.recordingUrl });
  1072. this.sectionItem = res.data.data;
  1073. await this.getPhotoLastRecord() // 获取拍照历史
  1074. this.playVideo(res.data.data)
  1075. } else if(res.data.data.sectionType == 2) { //直播
  1076. this.studyRecordGetLastLive();
  1077. } else if(res.data.data.sectionType == 3) { //回放
  1078. this.$store.commit("setPlaySectionId", { playSectionId: res.data.data.sectionId });
  1079. this.$store.commit("setPlayVID", { playVID: res.data.data.recordingUrl });
  1080. this.sectionItem = res.data.data;
  1081. this.polyvLiveHistoryChatMsgList();
  1082. if(!res.data.data.recordingUrl) {
  1083. return;
  1084. }
  1085. await this.getPhotoLastRecord() // 获取拍照历史
  1086. this.playVideo(res.data.data)
  1087. }
  1088. }
  1089. })
  1090. },
  1091. async goLive(item) {
  1092. let data = await this.studyRecordGetChannelBasicInfo(item.liveUrl);
  1093. let nowTime = +this.$method.timest();
  1094. if (item.liveStartTime > nowTime) {
  1095. if (data.watchStatus == "end" || data.watchStatus == "playback") {
  1096. uni.showToast({
  1097. title: '直播未开始',
  1098. icon: 'none'
  1099. });
  1100. return;
  1101. }
  1102. } else if (
  1103. item.liveStartTime < nowTime &&
  1104. item.liveEndTime > nowTime
  1105. ) {
  1106. if (data.watchStatus == "end" || data.watchStatus == "playback") {
  1107. uni.showToast({
  1108. title: '暂无直播',
  1109. icon: 'none'
  1110. });
  1111. return;
  1112. }
  1113. } else if (item.liveEndTime < nowTime) {
  1114. if (data.watchStatus == "end" || data.watchStatus == "playback") {
  1115. uni.showToast({
  1116. title: '直播已结束',
  1117. icon: 'none'
  1118. });
  1119. return;
  1120. }
  1121. }
  1122. let moduleId = item.moduleId || 0;
  1123. let chapterId = item.chapterId || 0;
  1124. let sectionId = item.sectionId || item.menuId;
  1125. let uuid = new Date().valueOf() + ""
  1126. // buyCourse 是否购买课程:1是 0否
  1127. let encode = encodeURIComponent(this.config.hostLive+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+'&channelId='+
  1128. item.liveUrl+'&gradeId='+this.gradeId+'&courseId='+this.courseId+'&goodsId='+this.goodsId+'&orderGoodsId='+this.orderGoodsId+'&sectionId='+sectionId+
  1129. '&chapterId='+chapterId+'&moduleId='+moduleId+'&buyCourse=1'+'&ident='+uuid)
  1130. uni.navigateTo({
  1131. url:`../../pages/webview/index?url=`+encode
  1132. })
  1133. },
  1134. studyRecordMenuAllList() {
  1135. this.$api.studyRecordMenuAllList({
  1136. courseId:this.courseId,
  1137. gradeId:this.gradeId,
  1138. goodsId:this.goodsId
  1139. }).then(res => {
  1140. let nowTime = Number(new Date().getTime()/1000).toFixed(0)
  1141. // this.livingItem = res.data.data[0]
  1142. if (res.data.data) {
  1143. this.livingItem = res.data.data.find(item => item.liveStartTime<=nowTime&&item.liveEndTime>nowTime);
  1144. let isShowNotice = res.data.data.every(e => e.studyStatus == -1)
  1145. if (this.CountTo == 30 && isShowNotice) { // studyStatus 全部等于-1的时候就是没有看过
  1146. this.noticeShow = true
  1147. var timer = setInterval(() => {
  1148. this.CountTo--
  1149. if( this.CountTo < 0 ) {
  1150. clearInterval(timer)
  1151. }
  1152. }, 1000)
  1153. } else {
  1154. this.CountTo = -1
  1155. }
  1156. } else {
  1157. this.CountTo = -1
  1158. }
  1159. })
  1160. },
  1161. noticeConfirm() {
  1162. console.log('CountTo:', this.CountTo);
  1163. if (this.CountTo < 0) {
  1164. this.noticeShow = false
  1165. }
  1166. },
  1167. studyRecordGetChannelBasicInfo(channelId) {
  1168. return new Promise((resolve) => {
  1169. this.$api
  1170. .studyRecordGetChannelBasicInfo({
  1171. channelId,
  1172. })
  1173. .then((res) => {
  1174. resolve(res.data.data);
  1175. });
  1176. });
  1177. },
  1178. polyvLiveHistoryChatMsgList() {
  1179. this.$api.polyvLiveHistoryChatMsgList({
  1180. sectionId:this.playSectionId,
  1181. channelId:this.sectionItem.liveUrl
  1182. }).then(res => {
  1183. this.historyChatMsgList = res.data.data
  1184. })
  1185. },
  1186. /**
  1187. * 获取业务层次详情
  1188. */
  1189. // courseBusiness() {
  1190. // this.$api.courseBusiness(this.goodsData.businessId).then((res) => {
  1191. // this.businessData = res.data.data;
  1192. // });
  1193. // },
  1194. /**
  1195. * 计算tabs宽度
  1196. */
  1197. itemWidth() {
  1198. return 100 / this.list.length + "%";
  1199. },
  1200. /**
  1201. * 获取讲义权限
  1202. */
  1203. // courseHandouts() {
  1204. // this.$api.courseHandouts(this.goodsData.handoutsId).then((res) => {
  1205. // this.courseHandoutsData = res.data.data;
  1206. // });
  1207. // },
  1208. findMenuNextSection(index) {
  1209. for (let i = index + 1; i < this.reMenuList.length; i++) {
  1210. let item = this.reMenuList[i];
  1211. if (item.type == 3) {
  1212. return item;
  1213. }
  1214. }
  1215. return {};
  1216. },
  1217. loadedmetadata(e) {
  1218. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1219. this.hasStart = true;
  1220. uni.$off('playPause')
  1221. uni.$on('playPause',() => {
  1222. polyvPlayerContext.pause()
  1223. })
  1224. if(!this.recordObj.videoCurrentTime) { //新视频直接提交一条观看记录
  1225. this.postStudyRecord(0)
  1226. }
  1227. },
  1228. getPhotoLastRecord() {
  1229. let self = this;
  1230. let data = {
  1231. sectionId: parseInt(self.playSectionId),
  1232. goodsId: parseInt(self.goodsId),
  1233. courseId: parseInt(self.courseId),
  1234. gradeId: parseInt(self.gradeId),
  1235. chapterId: parseInt(self.chapterId),
  1236. moduleId: parseInt(self.moduleId),
  1237. orderGoodsId: this.orderGoodsId,
  1238. };
  1239. this.$api.getPhotoLastRecord(data).then((res) => {
  1240. if (res.data.code == 200) {
  1241. //清空历史数据
  1242. self.photoHistoryList = [];
  1243. this.photoIndex = 0;
  1244. self.photoList = [];
  1245. for (let i = 0; i < res.data.data.length; i++) {
  1246. //-2存储随机拍照数组
  1247. if (res.data.data[i].photoIndex == -2) {
  1248. self.photoList = res.data.data[i].timeInterval.split(",");
  1249. } else {
  1250. self.photoHistoryList.push(res.data.data[i].photoIndex);
  1251. }
  1252. }
  1253. }
  1254. });
  1255. },
  1256. //postTime 只提交随机时间
  1257. postCoursePhotoRecord(postTime = false) {
  1258. return new Promise((resolve, reject) => {
  1259. let currentTime = 0;
  1260. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1261. if (polyvPlayerContext) {
  1262. currentTime = polyvPlayerContext.getCurrentTime();
  1263. }
  1264. let self = this;
  1265. let photoIndex = self.photoIndex;
  1266. let data = {
  1267. photo: self.ossAvatarUrl,
  1268. sectionId: parseInt(self.playSectionId),
  1269. goodsId: parseInt(self.goodsId),
  1270. courseId: parseInt(self.courseId),
  1271. photoTime: parseInt(currentTime > 0 ? currentTime : 0),
  1272. gradeId: parseInt(self.gradeId),
  1273. photoIndex: postTime ? -2 : parseInt(photoIndex), //从0算起,-2只提交随机时间
  1274. photoNum: parseInt(self.photoNum),
  1275. chapterId: parseInt(self.chapterId),
  1276. moduleId: parseInt(self.moduleId),
  1277. timeInterval: postTime ? self.photoList.join(",") : "",
  1278. orderGoodsId: this.orderGoodsId,
  1279. };
  1280. // console.log("提交接口", data);
  1281. this.$api
  1282. .coursePhotoRecord(data)
  1283. .then((res) => {
  1284. // console.log(res,'postCoursePhotoRecord')
  1285. if (res.data.code == 200) {
  1286. resolve();
  1287. } else {
  1288. reject();
  1289. }
  1290. })
  1291. .catch((err) => {
  1292. reject();
  1293. });
  1294. });
  1295. },
  1296. randomNum(minNum, maxNum) {
  1297. switch (arguments.length) {
  1298. case 1:
  1299. return parseInt(Math.random() * minNum + 1, 10);
  1300. break;
  1301. case 2:
  1302. return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  1303. break;
  1304. default:
  1305. return 0;
  1306. break;
  1307. }
  1308. },
  1309. //配置随机拍照时间
  1310. configPhoto() {
  1311. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1312. let totalVideoTime = polyvPlayerContext.getDuration();
  1313. let duration = polyvPlayerContext.getCurrentTime();
  1314. let photoNum = this.photoNum;
  1315. if (!this.photoConfig) {
  1316. this.photoConfig = true;
  1317. // let spaceTime = Math.floor(totalVideoTime/photoNum) //拍照时间区间
  1318. // if(spaceTime<5){//区间小于5秒
  1319. // photoNum = Math.floor(totalVideoTime/5)
  1320. // spaceTime = 5
  1321. // }
  1322. // if(photoNum<1){
  1323. // photoNum = 1 //只要设置,至少拍一次
  1324. // spaceTime = totalVideoTime
  1325. // }
  1326. // let initSpace = 0
  1327. //没有历史拍照间隔数据
  1328. if (this.photoList.length == 0) {
  1329. if (totalVideoTime >= 900) {
  1330. //大于15分钟
  1331. if (photoNum == 1) {
  1332. //开头拍1张
  1333. this.photoList.push(0);
  1334. } else if (photoNum == 3) {
  1335. //拍3张
  1336. this.photoList.push(0); //开头拍一张
  1337. let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
  1338. let centerMinTime = centerTime - 300; //前后5分钟
  1339. let centerMaxTime = centerTime + 300;
  1340. let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
  1341. this.photoList.push(centerTakeTime); //中间拍一张
  1342. let endMaxTime = totalVideoTime - 60;
  1343. let endMinTime = totalVideoTime - 300;
  1344. let endTakeTime = this.randomNum(endMinTime, endMaxTime);
  1345. this.photoList.push(endTakeTime); //最后拍一张
  1346. }
  1347. } else {
  1348. //小于15分钟,只拍前后各一张
  1349. if (photoNum == 1) {
  1350. //开头拍1张
  1351. this.photoList.push(0);
  1352. } else if (photoNum == 3) {
  1353. this.photoList.push(1);
  1354. let centerTime = this.randomNum(1/3*totalVideoTime, 2/3*totalVideoTime);;
  1355. this.photoList.push(centerTime);
  1356. let endTakeTime = this.randomNum(2/3*totalVideoTime, totalVideoTime);
  1357. this.photoList.push(endTakeTime);
  1358. }
  1359. }
  1360. // for(let i=0;i<photoNum;i++){
  1361. // let s = this.randomNum(initSpace,initSpace+spaceTime)
  1362. // if(s>totalVideoTime){
  1363. // s = totalVideoTime-1
  1364. // }
  1365. // if(s<=5){
  1366. // s =5 //避免出现5秒内拍照时间
  1367. // }
  1368. // this.photoList.push(s)
  1369. // initSpace+=spaceTime
  1370. // }
  1371. // console.log(this.photoList, "随机拍照时间数组11", photoNum);
  1372. this.postCoursePhotoRecord(true); //提交随机拍照时间数组
  1373. }
  1374. // console.log(this.photoList, "随机拍照时间数组");
  1375. //兼容已有观看历史
  1376. for (let i = 0; i < this.photoList.length - 1; i++) {
  1377. if (
  1378. this.photoList[i] < duration &&
  1379. this.photoList[i + 1] > duration
  1380. ) {
  1381. this.photoIndex = i + 1;
  1382. break;
  1383. }
  1384. if (duration > this.photoList[this.photoList.length - 1]) {
  1385. this.photoIndex = this.photoList.length - 1; //取最后一个下标
  1386. break;
  1387. }
  1388. }
  1389. }
  1390. },
  1391. getLiveUid(channelId) {
  1392. let self = this;
  1393. return new Promise((resolve) => {
  1394. let data = {
  1395. channelId: channelId,
  1396. orderGoodsId: this.orderGoodsId,
  1397. };
  1398. self.$api.polyvSign(data).then((res) => {
  1399. resolve(res.data.data);
  1400. });
  1401. });
  1402. },
  1403. timeEventLiving() {
  1404. if (plv != null) {
  1405. if (this.livePlay) {
  1406. this.liveDuration = this.liveDuration + 1; //每隔1秒
  1407. if (this.liveDuration == 2) {
  1408. //直播第2秒拍照
  1409. // console.log(this.channelItem)
  1410. // console.log(this.photoHistoryList,'this.photoHistoryList')
  1411. if (
  1412. this.goodsPhotographConfig && this.goodsPhotographConfig.livephotograph == 1 &&
  1413. this.channelItem.learning != 1 && this.photoHistoryList.length == 0
  1414. ) {
  1415. //开启直播拍照
  1416. this.openPhoto();
  1417. } else {
  1418. this.postStudyRecord(0);
  1419. }
  1420. }
  1421. }
  1422. }
  1423. },
  1424. playerLiveStatusChange(e) {
  1425. const status = e.detail.status;
  1426. // console.log("直播状态", status);
  1427. if (status === "live") {
  1428. // console.log("开始直播");
  1429. //开始播放
  1430. if (this.timer) {
  1431. clearInterval(this.timer);
  1432. }
  1433. this.livePlay = true;
  1434. this.timer = setInterval(this.timeEventLiving, 1000); //定时器
  1435. }
  1436. if (status === "end") {
  1437. this.hasStart = false;
  1438. if (this.livePlay) {
  1439. //只有播放过的结束才提交,避免未开播触发结束
  1440. this.postStudyRecord(1);
  1441. }
  1442. // console.log("结束直播");
  1443. this.livePlay = false;
  1444. // 未开始
  1445. }
  1446. },
  1447. closePlv() {
  1448. if (plv) {
  1449. plv.destroy();
  1450. }
  1451. },
  1452. playChannel(item) {
  1453. if (this.timer) {
  1454. clearInterval(this.timer);
  1455. }
  1456. this.startStatus = true;
  1457. this.initLive();
  1458. },
  1459. setLiveOption(status) {
  1460. const { userId, channelId, recordFileSimpleModel, playbackEnabled } =
  1461. this.detail;
  1462. const playRecordFile =
  1463. playbackEnabled && recordFileSimpleModel && status === "end";
  1464. // if(this.channelItem.sectionType == 3) { //回放
  1465. // // this.videoOption = {
  1466. // // mode: "live",
  1467. // // uid: this.liveObj.uid, //this.playChannelId egsxlptzdq
  1468. // // cid: this.playChannelId,
  1469. // // openId: this.userInfo.userAccount,
  1470. // // isAutoChange: false,
  1471. // // forceVideo: false,
  1472. // // };
  1473. // } else { //直播
  1474. this.videoOption = {
  1475. mode: "live",
  1476. uid: this.liveObj.uid, //this.playChannelId egsxlptzdq
  1477. cid: this.playChannelId,
  1478. openId: this.userInfo.userAccount,
  1479. isAutoChange: false,
  1480. forceVideo: false,
  1481. };
  1482. // }
  1483. },
  1484. async initLive() {
  1485. this.liveObj = await this.getLiveUid(this.playChannelId);
  1486. this.initLiveOk = true;
  1487. let optionsData = {};
  1488. optionsData.mode = "live";
  1489. optionsData.forceVideo = false;
  1490. optionsData.channelId = this.playChannelId; // 频道ID '2553128'
  1491. optionsData.openId = this.userInfo.userAccount; // 用户openId this.userInfo.userAccount 'oQ5eX5BCtSjkE1ct8CzvxGWgh0hQ'
  1492. optionsData.userId = this.liveObj.uid; // 2.0.0及以上版本的demo需要使用 userId 设置学员唯一id 'egsxlptzdq'
  1493. let self = this;
  1494. this.closePlv();
  1495. plv.init(optionsData).then(({ detail, chat }) => {
  1496. self.liveDetail = detail;
  1497. // 设置mode为live的videoOption
  1498. this.setLiveOption();
  1499. if (detail.isPPT) {
  1500. chat.on(chat.events.SLICESTART, () => {
  1501. // 开始直播
  1502. });
  1503. } else {
  1504. plv.api.getOrdinaryLiveStatus(detail.stream);
  1505. }
  1506. });
  1507. },
  1508. openSetting(res) {
  1509. // console.log(res, 98);
  1510. },
  1511. getCameraSetting() {
  1512. const self = this;
  1513. wx.getSetting({
  1514. success: (res) => {
  1515. if (res.authSetting["scope.camera"]) {
  1516. // 用户已经授权
  1517. self.showSet = false;
  1518. } else {
  1519. // 用户还没有授权,向用户发起授权请求
  1520. wx.authorize({
  1521. scope: "scope.camera",
  1522. success() {
  1523. // 用户同意授权
  1524. self.showSet = false;
  1525. },
  1526. fail() {
  1527. // 用户不同意授权
  1528. self.showSet = true;
  1529. /* wx.showToast({
  1530. title: '摄像头授权失败',
  1531. icon: 'none',
  1532. duration: 3000
  1533. }) */
  1534. },
  1535. });
  1536. }
  1537. },
  1538. fail: (res) => {},
  1539. });
  1540. },
  1541. studyNotice() {
  1542. this.noticeShow = true;
  1543. },
  1544. //播放笔记视频
  1545. async playNoteVideo(item) {
  1546. if (this.timer) {
  1547. clearInterval(this.timer);
  1548. }
  1549. if (this.vid) {
  1550. //切换视频
  1551. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1552. polyvPlayerContext.changeVid(item.recordingUrl);
  1553. } else {
  1554. this.vid = item.recordingUrl;
  1555. }
  1556. this.recordObj = { videoCurrentTime: item.noteSecond };
  1557. if (this.recordObj.videoCurrentTime) {
  1558. this.needSeek = true; //需要跳转到播放记录
  1559. }
  1560. this.startStatus = true;
  1561. //获取节笔记
  1562. this.getNoteList();
  1563. },
  1564. //正常播放视频
  1565. async playVideo(item) {
  1566. console.log(item, '2222222222');
  1567. if (item.sectionType == 3) { // 回放的不播放
  1568. return
  1569. }
  1570. if (this.timer) {
  1571. clearInterval(this.timer);
  1572. }
  1573. if (this.vid) {
  1574. //切换视频
  1575. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1576. polyvPlayerContext.changeVid(item.recordingUrl);
  1577. } else {
  1578. this.vid = item.recordingUrl;
  1579. }
  1580. this.recordObj = null;
  1581. this.recordObj = await this.getRecordLast();
  1582. // console.log('this.recordObj:', this.recordObj)
  1583. this.needSeek = true; //跳转到播放记录
  1584. this.startStatus = true;
  1585. // 提交学习记录
  1586. this.postStudyRecord(0)
  1587. //获取节笔记
  1588. this.getNoteList();
  1589. },
  1590. getRecordLast() {
  1591. let self = this;
  1592. return new Promise((resolve) => {
  1593. let data = {
  1594. gradeId: Number(self.gradeId),
  1595. goodsId: Number(self.goodsId),
  1596. sectionId: Number(self.playSectionId),
  1597. courseId: Number(self.courseId),
  1598. chapterId: parseInt(self.chapterId),
  1599. moduleId: parseInt(self.moduleId),
  1600. orderGoodsId: this.orderGoodsId,
  1601. };
  1602. // 获取用户节的最后一次学习记录/study/record/last
  1603. self.$api.recordLast(data).then((res) => {
  1604. resolve(res.data.data);
  1605. });
  1606. });
  1607. },
  1608. jumpNote(item) {
  1609. this.noteId = item.noteId;
  1610. //没视频播放
  1611. if (this.playSectionId == 0) {
  1612. this.$u.toast("即将跳到笔记位置");
  1613. this.$store.commit("setPlaySectionId", {
  1614. playSectionId: item.sectionId || item.menuId,
  1615. });
  1616. this.$store.commit("setPlayVID", { playVID: item.recordingUrl });
  1617. this.playNoteVideo(item);
  1618. } else {
  1619. //正在看当前笔记视频
  1620. this.$u.toast("即将跳到笔记位置");
  1621. //跳到笔记时刻
  1622. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1623. polyvPlayerContext.seek(item.noteSecond);
  1624. polyvPlayerContext.play();
  1625. }
  1626. },
  1627. postNote() {
  1628. let self = this;
  1629. if (!(this.playSectionId > 0)) {
  1630. this.$u.toast("目前无播放视频");
  1631. return;
  1632. }
  1633. if (!this.noteValue) {
  1634. this.$u.toast("请输入内容");
  1635. return;
  1636. }
  1637. // if (!this.gradeId) { // 直播课程没有班级,去掉判断,默认为0
  1638. // this.$u.toast("暂无班级数据");
  1639. // return;
  1640. // }
  1641. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1642. let noteDate = this.$method.getZeroTime();
  1643. let noteSecond = polyvPlayerContext.getCurrentTime();
  1644. if (!noteSecond) {
  1645. if (noteSecond == 0) {
  1646. //播放结束
  1647. noteSecond = polyvPlayerContext.getDuration();
  1648. }
  1649. if (!noteSecond) {
  1650. this.$u.toast("视频暂未开始");
  1651. return;
  1652. }
  1653. }
  1654. let data = {
  1655. gradeId: this.gradeId,
  1656. goodsId: this.goodsId,
  1657. sectionId: this.playSectionId,
  1658. courseId: this.courseId,
  1659. noteText: this.noteValue,
  1660. noteDate: noteDate,
  1661. noteSecond: noteSecond,
  1662. orderGoodsId: this.orderGoodsId,
  1663. };
  1664. // /user/note 新增用户笔记
  1665. this.$api.postNote(data).then((res) => {
  1666. if (res.data.code == 200) {
  1667. this.$u.toast("发布成功");
  1668. self.getNoteList();
  1669. this.noteValue = "";
  1670. }
  1671. });
  1672. },
  1673. getNoteList() {
  1674. let self = this;
  1675. self.noteList = [];
  1676. let data = {
  1677. courseId: this.courseId,
  1678. gradeId: this.gradeId,
  1679. goodsId: this.goodsId,
  1680. orderGoodsId: this.orderGoodsId,
  1681. };
  1682. if (this.playSectionId > 0) {
  1683. data.sectionId = this.playSectionId;
  1684. }
  1685. this.$api.noteList(data).then((res) => {
  1686. if (res.data.code == 200) {
  1687. self.noteList = res.data.rows;
  1688. }
  1689. });
  1690. },
  1691. delAnswer(answerId) {
  1692. let self = this;
  1693. let data = { answerId: answerId, status: -1 ,orderGoodsId: this.orderGoodsId,};
  1694. this.$api.delAnswer(data).then((res) => {
  1695. if (res.data.code == 200) {
  1696. self.getAnswerList();
  1697. }
  1698. });
  1699. },
  1700. clearCtx() {
  1701. this.placeholder = "您可以在这里输入答疑内容";
  1702. this.ctxValue = "";
  1703. this.assignUserId = 0;
  1704. },
  1705. focusNote(event) {
  1706. this.bottomHeight = event.detail.height
  1707. },
  1708. blurNote() {
  1709. this.bottomHeight = 0
  1710. },
  1711. blur() {
  1712. this.bottomHeight = 0
  1713. this.clearTimer = setTimeout(() => {
  1714. this.ctxValue = ""
  1715. this.isFocus = false;
  1716. this.assignUserId = 0;
  1717. this.placeholder = '您可以在这里输入答疑内容';
  1718. },2000)
  1719. },
  1720. replyContent(item) {
  1721. this.isFocus = true;
  1722. this.assignUserId = item.userId;
  1723. this.placeholder = "@" + item.realname;
  1724. },
  1725. delContent(item) {
  1726. this.delAnswer(item.answerId);
  1727. },
  1728. postAnswer() {
  1729. let self = this;
  1730. let data = {
  1731. courseId: this.courseId,
  1732. answerText: this.ctxValue,
  1733. goodsId: this.goodsId,
  1734. orderGoodsId: this.orderGoodsId,
  1735. };
  1736. if (this.assignUserId > 0) {
  1737. data.assignUserId = this.assignUserId;
  1738. }
  1739. this.$api.postAnswer(data).then((res) => {
  1740. if (res.data.code == 200) {
  1741. this.$u.toast("发布成功");
  1742. self.getAnswerList();
  1743. this.isFocus = false;
  1744. this.placeholder = "您可以在这里输入答疑内容";
  1745. this.ctxValue = "";
  1746. this.assignUserId = 0;
  1747. }
  1748. });
  1749. },
  1750. postContent() {
  1751. if (!this.ctxValue || this.ctxValue == "") {
  1752. this.$u.toast("请输入内容");
  1753. return;
  1754. }
  1755. this.postAnswer();
  1756. },
  1757. postStudyRecord(status = 0, sectionId = this.playSectionId) {
  1758. let currentTime = 0;
  1759. let PlayDuration = 0;
  1760. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1761. if (polyvPlayerContext) {
  1762. currentTime = polyvPlayerContext.getCurrentTime(); //总的视频播放时刻
  1763. PlayDuration = polyvPlayerContext.getVideoPlayDuration(); //本次看的时长
  1764. }
  1765. if (this.playChannelId > 0) {
  1766. currentTime = 2; //直播无法获取,无论开始结束都传2秒
  1767. }
  1768. let self = this;
  1769. let data = {
  1770. fromPlat: 1, //来源平台 1小程序 2网站
  1771. photo: self.ossAvatarUrl,
  1772. sectionId: sectionId || 0,
  1773. goodsId: parseInt(self.goodsId),
  1774. courseId: parseInt(self.courseId),
  1775. orderGoodsId: this.orderGoodsId,
  1776. studyDuration: parseInt(
  1777. PlayDuration > 0 ? PlayDuration : self.studyDuration
  1778. ),
  1779. gradeId: parseInt(self.gradeId),
  1780. chapterId: this.chapterId || 0,
  1781. moduleId: this.moduleId || 0,
  1782. videoCurrentTime: parseInt(
  1783. currentTime > 0 ? currentTime : self.studyDuration
  1784. ),
  1785. };
  1786. if (this.ossAvatarUrl) {
  1787. data.similarity = this.compareFaceData // 相似度
  1788. }
  1789. if (status > 0) {
  1790. data.status = status;
  1791. }
  1792. // console.log("提交接口", data);
  1793. this.$api.studyRecord(data).then((res) => {
  1794. if (res.data.code == 200) {
  1795. if (status > 0) {
  1796. let moduleId = this.moduleId || 0;
  1797. let chapterId = this.chapterId || 0;
  1798. let playNextIdisRebuild = `moduleId${moduleId}chapterId${chapterId}sectionId${sectionId}isRebuild`;
  1799. let playNextId = `moduleId${moduleId}chapterId${chapterId}sectionId${sectionId}`; //拼接对应章节唯一id
  1800. uni.$emit("playNext" + playNextIdisRebuild, {
  1801. fromRebuild: this.isRebuild,
  1802. }); //通知播放结束,不来自重修目录的点击不用弹窗学习下一节
  1803. uni.$emit("playNext" + playNextId); //通知播放结束
  1804. }
  1805. self.ossAvatarUrl = "";
  1806. } else {
  1807. this.uploadLock = false;
  1808. uni.showToast({
  1809. icon: "none",
  1810. title: res.data.msg,
  1811. });
  1812. }
  1813. });
  1814. },
  1815. uploadFile(options, int) {
  1816. var self = this;
  1817. return new Promise((resolve, reject) => {
  1818. var data = {
  1819. imageStatus: int,
  1820. gradeId: this.gradeId,
  1821. orderGoodsId: this.orderGoodsId,
  1822. };
  1823. self.$api.aliyunpolicy(data).then((res) => {
  1824. if (res.data.code != 200) {
  1825. self.$method.showToast("签名错误" + JSON.stringify(res.data));
  1826. return;
  1827. }
  1828. var ossToken = res.data.data.resultContent;
  1829. if (ossToken.host == null || ossToken.host == undefined) {
  1830. self.$method.showToast("上传路径报错" + JSON.stringify(res.data));
  1831. return;
  1832. }
  1833. let filePath = "";
  1834. // #ifdef H5
  1835. var localData = options; //dataUrl为base64位
  1836. let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码,去掉data:image/png;base64部分
  1837. let length = base.length;
  1838. let url = new Uint8Array(length);
  1839. while (length--) {
  1840. url[length] = base.charCodeAt(length);
  1841. }
  1842. filePath = new File([url], "a.jpg", {
  1843. type: "image/jpg",
  1844. });
  1845. console.log("filePath:", filePath);
  1846. uni.uploadFile({
  1847. url: ossToken.host,
  1848. name: "file",
  1849. file: filePath,
  1850. fileType: "image",
  1851. header: {
  1852. AuthorizationToken: "WX " + uni.getStorageSync("token"),
  1853. },
  1854. formData: {
  1855. key: ossToken.dir,
  1856. OSSAccessKeyId: ossToken.accessid,
  1857. policy: ossToken.policy,
  1858. Signature: ossToken.signature,
  1859. callback: ossToken.callback,
  1860. success_action_status: 200,
  1861. },
  1862. success: (result) => {
  1863. this.$u.toast("上传成功");
  1864. this.ossAvatarUrl = ossToken.dir;
  1865. console.log("h5上传成功--:", this.ossAvatarUrl);
  1866. resolve();
  1867. },
  1868. fail: (error) => {
  1869. console.log("h5上传失败:", error)
  1870. uni.showToast({
  1871. title: "上传接口报错,请重新拍照上传" + error,
  1872. icon: "none",
  1873. });
  1874. this.openPhoto();
  1875. return;
  1876. },
  1877. });
  1878. // #endif
  1879. // #ifdef MP-WEIXIN
  1880. uni.uploadFile({
  1881. url: ossToken.host,
  1882. name: "file",
  1883. filePath: options,
  1884. fileType: "image",
  1885. header: {
  1886. AuthorizationToken: "WX " + uni.getStorageSync("token"),
  1887. },
  1888. formData: {
  1889. key: ossToken.dir,
  1890. OSSAccessKeyId: ossToken.accessid,
  1891. policy: ossToken.policy,
  1892. Signature: ossToken.signature,
  1893. callback: ossToken.callback,
  1894. success_action_status: 200,
  1895. },
  1896. success: (result) => {
  1897. // if (result.statusCode === 200) {
  1898. this.$u.toast('上传成功')
  1899. this.ossAvatarUrl = ossToken.dir;
  1900. resolve();
  1901. // } else {
  1902. // uni.showToast({
  1903. // title: "上传失败",
  1904. // icon: "none",
  1905. // });
  1906. // this.openPhoto();
  1907. // return;
  1908. // }
  1909. },
  1910. fail: (error) => {
  1911. uni.showToast({
  1912. title: "上传接口报错,请重新拍照上传" + error,
  1913. icon: "none",
  1914. });
  1915. this.openPhoto();
  1916. return;
  1917. },
  1918. });
  1919. // #endif
  1920. });
  1921. });
  1922. },
  1923. imageInfos() {
  1924. var self = this;
  1925. return new Promise(async (resolve, reject) => {
  1926. // #ifdef MP-WEIXIN
  1927. uni.getImageInfo({
  1928. src: self.avatarUrl,
  1929. success: async (res) => {
  1930. let canvasWidth = res.width; //图片原始长宽
  1931. let canvasHeight = res.height;
  1932. if (canvasWidth > 2000 || canvasHeight > 2000) {
  1933. uni.compressImage({
  1934. src: self.avatarUrl,
  1935. quality: 75,
  1936. width: "35%",
  1937. height: "35%",
  1938. success: async (rest) => {
  1939. const waitUpload = await self.uploadFile(
  1940. rest.tempFilePath,
  1941. 0
  1942. );
  1943. resolve(waitUpload);
  1944. },
  1945. });
  1946. } else if (canvasWidth > 1000 || canvasHeight > 1000) {
  1947. uni.compressImage({
  1948. src: self.avatarUrl,
  1949. quality: 75,
  1950. width: "50%",
  1951. height: "50%",
  1952. success: async (rest) => {
  1953. const waitUpload = await self.uploadFile(
  1954. rest.tempFilePath,
  1955. 0
  1956. );
  1957. resolve(waitUpload);
  1958. },
  1959. });
  1960. } else {
  1961. // console.log("无需压缩");
  1962. const waitUpload = await self.uploadFile(self.avatarUrl, 0);
  1963. resolve(waitUpload);
  1964. }
  1965. },
  1966. fail: (err) => {
  1967. this.$u.toast('图片上传失败')
  1968. }
  1969. });
  1970. // #endif
  1971. // #ifdef H5
  1972. const waitUpload = await this.uploadFile(this.faceUrl, 0);
  1973. resolve(waitUpload);
  1974. // #endif
  1975. });
  1976. },
  1977. timeEvent() {
  1978. let self = this;
  1979. var polyvPlayerContext = this.selectComponent("#playerVideo");
  1980. if (polyvPlayerContext != null) {
  1981. this.playTime = polyvPlayerContext.getCurrentTime(); //播放时刻
  1982. // console.log(this.playTime,789,this.photoHistoryList)
  1983. //判断是否需要拍照
  1984. if (this.photoNum > 0) {
  1985. this.configPhoto();
  1986. let photoTime = 0; //获取拍照秒数
  1987. for (let i = 0; i < this.photoList.length; i++) {
  1988. photoTime = Number(this.photoList[i]); //获取拍照秒数
  1989. if (photoTime < this.playTime && photoTime > this.playTime - 8) {
  1990. //3秒区间内才触发拍照,避免拉动滚动条
  1991. if (
  1992. this.photoHistoryList.indexOf(i) < 0 &&
  1993. this.sectionItem.learning != 1
  1994. ) {
  1995. //不存在拍照历史,没有重修过,没有学过,则拍照
  1996. //启动拍照
  1997. //暂停
  1998. polyvPlayerContext.exitFullScreen();
  1999. polyvPlayerContext.pause();
  2000. if (uni.getStorageSync('tabkePhotoShow')) {
  2001. this.photoIndex = i;
  2002. this.openPhoto();
  2003. } else {
  2004. this.popupPhotoShow = true
  2005. uni.setStorageSync('tabkePhotoShow', 1) // 本地缓存用来判断是否已经弹出过弹窗
  2006. }
  2007. }
  2008. }
  2009. }
  2010. }
  2011. }
  2012. },
  2013. closeToast() {
  2014. clearTimeout(this.toastTimer);
  2015. this.videoToastShow = false;
  2016. },
  2017. restart() {
  2018. var polyvPlayerContext = this.selectComponent("#playerVideo");
  2019. polyvPlayerContext.seek(0);
  2020. clearTimeout(this.toastTimer);
  2021. this.videoToastShow = false;
  2022. },
  2023. // 新增用户视频学习日志
  2024. studyLog() {
  2025. this.$http({
  2026. url: '/user/study/log',
  2027. method: 'post',
  2028. data: {
  2029. goodsId: this.goodsId,
  2030. courseId: this.courseId,
  2031. moduleId: this.moduleId || 0,
  2032. chapterId: this.chapterId || 0,
  2033. sectionId: this.playSectionId || 0,
  2034. fromPlat: 1, //来源平台 1小程序 2PC网站
  2035. goodsType: 6, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
  2036. orderGoodsId: this.orderGoodsId,
  2037. }
  2038. }).then((res) => {
  2039. // console.log('直播的用户学习日志:', res)
  2040. })
  2041. },
  2042. onStateChange(newstate, oldstate) {
  2043. if (newstate.detail.newstate == "playing") {
  2044. if (this.needSeek) {
  2045. var polyvPlayerContext = this.selectComponent("#playerVideo");
  2046. if (this.recordObj.videoCurrentTime) {
  2047. polyvPlayerContext.seek(this.recordObj.videoCurrentTime);
  2048. this.seekTime = this.$method.secondToDate(
  2049. this.recordObj.videoCurrentTime
  2050. );
  2051. this.videoToastShow = true;
  2052. this.toastTimer = setTimeout(() => {
  2053. this.videoToastShow = false;
  2054. }, 3000);
  2055. } else {
  2056. polyvPlayerContext.seek(1); //避免相同节继续播放
  2057. }
  2058. polyvPlayerContext.play();
  2059. this.needSeek = false;
  2060. // 新增用户视频学习日志
  2061. this.studyLog()
  2062. }
  2063. //开始播放
  2064. if (this.timer) {
  2065. clearInterval(this.timer);
  2066. }
  2067. this.timer = setInterval(this.timeEvent, 1000); //定时器
  2068. }
  2069. if (newstate.detail.newstate == "pause") {
  2070. clearInterval(this.timer);
  2071. //暂停提交记录
  2072. /* this.ossAvatarUrl = ""
  2073. this.postStudyRecord() */
  2074. }
  2075. if (newstate.detail.newstate == "ended") {
  2076. clearInterval(this.timer);
  2077. uni.showToast({
  2078. icon: "none",
  2079. title: "播放完毕",
  2080. });
  2081. this.hasStart = false;
  2082. this.postStudyRecord(1);
  2083. // uni.$emit('playNext') //播放重修下一节
  2084. }
  2085. },
  2086. //拍照
  2087. openPhoto() {
  2088. var polyvPlayerContext = this.selectComponent("#playerVideo");
  2089. if (polyvPlayerContext) {
  2090. polyvPlayerContext.exitFullScreen();
  2091. }
  2092. // #ifdef MP-WEIXIN
  2093. this.enableAutoRotation = false;
  2094. this.photoPopup = true;
  2095. this.isTaking = true;
  2096. uni.setKeepScreenOn({
  2097. keepScreenOn: true,
  2098. });
  2099. uni.authorize({
  2100. scope: "scope.camera",
  2101. success() {},
  2102. });
  2103. // #endif
  2104. // #ifdef H5
  2105. if (
  2106. (window.navigator.mediaDevices &&
  2107. window.navigator.mediaDevices.getUserMedia) ||
  2108. window.navigator.getUserMedia ||
  2109. window.navigator.webkitGetUserMedia ||
  2110. window.navigator.mozGetUserMedia
  2111. ) {
  2112. console.log("getUserMedia----");
  2113. // 调用用户媒体设备, 访问摄像头
  2114. this.getUserMedia(
  2115. {
  2116. video: {
  2117. width: 400,
  2118. height: 300,
  2119. },
  2120. },
  2121. this.photographSuccess,
  2122. this.photographError
  2123. );
  2124. } else {
  2125. console.log("1111没有摄像");
  2126. this.photographError();
  2127. }
  2128. // #endif
  2129. },
  2130. /**
  2131. * 人脸匹配
  2132. */
  2133. faceRecognition() {
  2134. return new Promise((resolve) => {
  2135. // #ifdef MP-WEIXIN
  2136. let fileSystem = uni.getFileSystemManager();
  2137. fileSystem.readFile({
  2138. filePath: `${this.avatarUrl}`,
  2139. encoding: "base64",
  2140. position: 0,
  2141. success: (res) => {
  2142. let base64 = "data:image/jpg;base64," + res.data;
  2143. console.log('直播课-base64Data人脸识别参数:', {
  2144. imageA: base64,
  2145. orderGoodsId: this.orderGoodsId,
  2146. gradeId: this.gradeId,
  2147. })
  2148. this.CompareFace(base64, resolve);
  2149. },
  2150. fail(err) {
  2151. console.error(err, "err");
  2152. },
  2153. });
  2154. // #endif
  2155. // #ifdef H5
  2156. this.CompareFace(this.faceUrl, resolve);
  2157. // #endif
  2158. });
  2159. },
  2160. CompareFace(url, resolve) {
  2161. let timer = setTimeout(() => {
  2162. uni.showToast({
  2163. icon: "none",
  2164. title: "拍照超时,请重新拍照",
  2165. duration: 2000,
  2166. success: () => {
  2167. setTimeout(() => {
  2168. uni.navigateBack();
  2169. }, 1000);
  2170. },
  2171. });
  2172. }, 10 * 1000);
  2173. this.$api
  2174. .faceCertificationCompareFace({
  2175. imageA: url,
  2176. orderGoodsId: this.orderGoodsId,
  2177. gradeId: this.gradeId,
  2178. })
  2179. .then((res) => {
  2180. clearTimeout(timer);
  2181. console.log(res, "人脸识别成功res");
  2182. resolve(res.data.data);
  2183. })
  2184. .catch((err) => {
  2185. clearTimeout(timer);
  2186. // 当前网络延迟,
  2187. console.log("人脸识别错误:", err);
  2188. uni.showModal({
  2189. content: "当前网络延迟",
  2190. showCancel: false,
  2191. success: (resultst) => {
  2192. if (resultst.confirm) {
  2193. uni.navigateBack();
  2194. }
  2195. },
  2196. });
  2197. });
  2198. },
  2199. async submit() {
  2200. if (this.uploadLock) {
  2201. return;
  2202. }
  2203. this.uploadLock = true;
  2204. let compareFaceData = await this.faceRecognition();
  2205. this.compareFaceData = compareFaceData
  2206. if (compareFaceData >= 80) {
  2207. const waitYS = await this.imageInfos();
  2208. this.postCoursePhotoRecord()
  2209. .then((res) => {
  2210. this.photoHistoryList.push(this.photoIndex);
  2211. this.postStudyRecord(); //提交记录
  2212. //恢复播放
  2213. uni.setKeepScreenOn({
  2214. keepScreenOn: false,
  2215. });
  2216. this.photoPopup = false;
  2217. this.uploadLock = false;
  2218. this.enableAutoRotation = true;
  2219. var polyvPlayerContext = this.selectComponent("#playerVideo");
  2220. if (polyvPlayerContext != null) {
  2221. polyvPlayerContext.play();
  2222. }
  2223. })
  2224. .catch((err) => {
  2225. uni.showToast({
  2226. title: "上传接口报错,请重新拍照上传" + err,
  2227. icon: "none",
  2228. });
  2229. this.uploadLock = false;
  2230. this.openPhoto();
  2231. });
  2232. } else {
  2233. uni.showToast({
  2234. title: "人脸匹配不通过,请重新拍照上传",
  2235. icon: "none",
  2236. duration: 2000,
  2237. });
  2238. setTimeout(() => {
  2239. this.uploadLock = false;
  2240. this.openPhoto();
  2241. }, 2000);
  2242. return;
  2243. }
  2244. },
  2245. reTake() {
  2246. this.isTaking = true;
  2247. // #ifdef H5
  2248. this.faceUrl = "";
  2249. this.getUserMedia({
  2250. video: {
  2251. width: 400,
  2252. height: 300,
  2253. },
  2254. });
  2255. // #endif
  2256. },
  2257. toTakePhoto() {
  2258. this.popupPhotoShow = false
  2259. this.openPhoto()
  2260. },
  2261. takePhTips() {
  2262. this.popupPhotoShow = true
  2263. this.isTaking = false
  2264. this.photoPopup = false
  2265. this.enableAutoRotation = false
  2266. },
  2267. //确认拍照
  2268. takePhoto() {
  2269. // #ifdef MP-WEIXIN
  2270. const ctx = uni.createCameraContext();
  2271. ctx.takePhoto({
  2272. quality: "high",
  2273. success: (res) => {
  2274. this.avatarUrl = res.tempImagePath;
  2275. this.isTaking = false;
  2276. },
  2277. fail: (err) => {
  2278. console.log(err);
  2279. },
  2280. });
  2281. // #endif
  2282. // #ifdef H5
  2283. const canvas = document.createElement("canvas");
  2284. canvas.width = 400;
  2285. canvas.height = 400;
  2286. const context = canvas.getContext("2d");
  2287. const video = document.querySelector("video");
  2288. context.drawImage(video, 0, 0, 400, 400);
  2289. this.faceUrl = canvas.toDataURL("image/png");
  2290. this.isTaking = false;
  2291. // #endif
  2292. },
  2293. playError(e) {
  2294. console.log(e);
  2295. },
  2296. //拍照报错
  2297. error(e) {
  2298. console.log(e.detail);
  2299. },
  2300. //关闭相机
  2301. closePhoto() {
  2302. this.photoPopup = false;
  2303. self.enableAutoRotation = true;
  2304. },
  2305. /**
  2306. * 进入全屏
  2307. */
  2308. fullscreenchange(event) {
  2309. if (event.detail.direction == "vertical") {
  2310. this.navShow = true;
  2311. } else if (event.detail.direction == "horizontal") {
  2312. this.navShow = false;
  2313. }
  2314. },
  2315. getGoodsDetail() {
  2316. let self = this;
  2317. // goods/'+ data
  2318. this.$api.goodsDetail(this.goodsId).then((res) => {
  2319. self.goodsData = res.data.data;
  2320. // this.courseBusiness();
  2321. // this.courseHandouts();
  2322. self.getMenuList();
  2323. //获取节笔记
  2324. this.getNoteList();
  2325. if (self.goodsData.goodsPlayConfig) {
  2326. self.goodsPlayConfig = JSON.parse(self.goodsData.goodsPlayConfig);
  2327. if (self.goodsPlayConfig.autoPlay > 0) {
  2328. self.autoplay = true;
  2329. }
  2330. if (self.goodsPlayConfig.drag > 0) {
  2331. self.isAllowSeek = "yes";
  2332. }
  2333. if (self.goodsPlayConfig.speed > 0) {
  2334. self.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
  2335. }
  2336. }
  2337. if (self.goodsData.goodsPhotographConfig) {
  2338. self.goodsPhotographConfig = JSON.parse(
  2339. self.goodsData.goodsPhotographConfig
  2340. );
  2341. if (self.goodsPhotographConfig.photoNum > 0) {
  2342. self.photoNum = self.goodsPhotographConfig.photoNum;
  2343. }
  2344. }
  2345. });
  2346. },
  2347. startVideo() {
  2348. this.startStatus = true;
  2349. },
  2350. getAnswerList() {
  2351. let self = this;
  2352. this.$api
  2353. .answerList({ courseId: this.courseId, goodsId: this.goodsId,orderGoodsId: this.orderGoodsId, })
  2354. .then((res) => {
  2355. if (res.data.code == 200) {
  2356. self.answerList = res.data.rows;
  2357. }
  2358. });
  2359. },
  2360. getMenuList() {
  2361. // let self = this;
  2362. // /course/menuList
  2363. this.$api
  2364. .reMenuList({ courseId: this.courseId, gradeId: this.gradeId,orderGoodsId: this.orderGoodsId, })
  2365. .then((res) => {
  2366. if (res.data.code == 200) {
  2367. for (let i = 0; i < res.data.rows.length; i++) {
  2368. let item = res.data.rows[i];
  2369. item.down = true;
  2370. item.id = item.menuId;
  2371. item.name = item.menuName;
  2372. item.menuType = item.type;
  2373. }
  2374. this.menuList = res.data.rows;
  2375. this.reStart = true
  2376. for (let i = 0; i < res.data.rows.length; i++) {
  2377. if (res.data.rows[i].type == 1) {
  2378. if (Object.keys(this.sectionItem).length) {
  2379. let playNextId = `moduleId${this.sectionItem.moduleId}chapterId${this.sectionItem.chapterId}sectionId${this.sectionItem.sectionId}`;
  2380. this.$store.commit("updatePlayNextId", playNextId)
  2381. if (res.data.rows[i].menuId == this.sectionItem.moduleId) {
  2382. this.menuIndex = [i];
  2383. break;
  2384. }
  2385. } else {
  2386. this.menuIndex = [i];
  2387. break;
  2388. }
  2389. } else if (res.data.rows[i].type == 2) {
  2390. // 章
  2391. if (Object.keys(this.sectionItem).length) {
  2392. let playNextId = `moduleId${this.sectionItem.moduleId}chapterId${this.sectionItem.chapterId}sectionId${this.sectionItem.sectionId}`;
  2393. this.$store.commit("updatePlayNextId", playNextId)
  2394. if (res.data.rows[i].menuId == this.sectionItem.chapterId && (!this.sectionItem.moduleId || this.sectionItem.moduleId == 0)) {
  2395. this.menuIndex = [i];
  2396. break;
  2397. }
  2398. } else {
  2399. this.menuIndex = [i];
  2400. break;
  2401. }
  2402. }
  2403. }
  2404. }
  2405. });
  2406. },
  2407. courseDetail() {
  2408. let self = this;
  2409. // /course/'+data 获取课程详细信息
  2410. this.$api.courseDetail(this.courseId).then((res) => {
  2411. if (res.data.code == 200) {
  2412. // if (res.data.data.educationName == "继续教育") {
  2413. this.$api
  2414. .lockLockAction({
  2415. action: "jxjy",
  2416. uuid:this.$method.getUuid()
  2417. })
  2418. .then((res) => {});
  2419. this.lockTimer = setInterval(() => {
  2420. this.$api
  2421. .lockLockAction({
  2422. action: "jxjy",
  2423. uuid:this.$method.getUuid()
  2424. })
  2425. .then((res) => {});
  2426. }, 10000);
  2427. // websocket.sendMsg("doCourse");
  2428. // }
  2429. self.detail = res.data.data;
  2430. }
  2431. });
  2432. },
  2433. open(item) {
  2434. item.showChildren = !item.showChildren;
  2435. },
  2436. change(index) {
  2437. this.current = index;
  2438. },
  2439. openDocument() {
  2440. let self = this;
  2441. let url = this.$method.splitImgHost(this.courseHandoutsData.handoutsUrl);
  2442. uni.downloadFile({
  2443. url: url,
  2444. success: function (res) {
  2445. var filePath = res.tempFilePath;
  2446. uni.openDocument({
  2447. filePath: filePath,
  2448. showMenu: self.courseHandoutsData.canDownload == 1 ? true : false,
  2449. success: function (res) {
  2450. // console.log(res, "打开文档成功");
  2451. },
  2452. fail: function (err) {
  2453. uni.showToast({
  2454. icon: "none",
  2455. title: "文档地址错误",
  2456. });
  2457. },
  2458. });
  2459. },
  2460. fail: (err) => {
  2461. uni.showModal({
  2462. title: "提示",
  2463. content: "文档错误," + err.errMsg,
  2464. showCancel: false,
  2465. });
  2466. },
  2467. });
  2468. },
  2469. /**
  2470. * 退出全屏
  2471. */
  2472. exitFullscreen() {
  2473. try {
  2474. var de = document;
  2475. // console.log(de);
  2476. if (de.exitFullscreen) {
  2477. de.exitFullscreen();
  2478. } else if (de.mozCancelFullScreen) {
  2479. de.mozCancelFullScreen();
  2480. } else if (de.webkitCancelFullScreen) {
  2481. de.webkitCancelFullScreen();
  2482. }
  2483. } catch (err) {}
  2484. },
  2485. fullele() {
  2486. return (
  2487. document.fullscreenElement ||
  2488. document.webkitFullscreenElement ||
  2489. document.msFullscreenElement ||
  2490. document.mozFullScreenElement ||
  2491. null
  2492. );
  2493. },
  2494. //判断是否全屏
  2495. isFullScreen() {
  2496. return !!(document.webkitIsFullScreen || this.fullele());
  2497. },
  2498. getUserMedia(constraints, success, error) {
  2499. console.log("getUserMedia===", constraints, "success:", success);
  2500. if (window.navigator.mediaDevices.getUserMedia) {
  2501. // 最新的标准API
  2502. window.navigator.mediaDevices
  2503. .getUserMedia(constraints)
  2504. .then(success)
  2505. .catch(error);
  2506. } else if (window.navigator.webkitGetUserMedia) {
  2507. // webkit核心浏览器
  2508. window.navigator.webkitGetUserMedia(constraints, success, error);
  2509. } else if (window.navigator.mozGetUserMedia) {
  2510. // firfox浏览器
  2511. window.navigator.mozGetUserMedia(constraints, success, error);
  2512. } else if (window.navigator.getUserMedia) {
  2513. // 旧版API
  2514. window.navigator.getUserMedia(constraints, success, error);
  2515. }
  2516. },
  2517. photographSuccess(stream) {
  2518. console.log("有摄像头---", stream);
  2519. this.photoPopup = true;
  2520. this.isTaking = true;
  2521. this.enableAutoRotation = false;
  2522. this.$nextTick(() => {
  2523. const video = document.querySelector("video");
  2524. console.log('video:', video);
  2525. video.srcObject = stream;
  2526. video.play();
  2527. })
  2528. },
  2529. photographError(err) {
  2530. console.log("没有摄像头:", err);
  2531. uni.showModal({
  2532. title: "提示",
  2533. content:
  2534. "课程学习需要开启摄像头进行拍照,经检测您的设备无摄像头可使用,请检测环境是否支持。",
  2535. cancelText: "取消",
  2536. confirmText: "确定",
  2537. success: (res) => {
  2538. if (res.confirm) {
  2539. uni.navigateBack();
  2540. } else if (res.cancel) {
  2541. }
  2542. },
  2543. });
  2544. },
  2545. },
  2546. };
  2547. </script>
  2548. <style lang="scss" scope>
  2549. @import '../polyv/css/detail.scss';
  2550. .top {
  2551. &__header {
  2552. position:relative;
  2553. width:100%;
  2554. height:150rpx;
  2555. padding:24rpx 150rpx 24rpx 24rpx;
  2556. .img {
  2557. position:absolute;
  2558. left:0;
  2559. top:0;
  2560. width:100%;
  2561. }
  2562. .note {
  2563. position:relative;
  2564. z-index: 10;
  2565. font-size: 24rpx;
  2566. font-family: PingFang SC;
  2567. font-weight: bold;
  2568. color: #EFDBFF;
  2569. }
  2570. .title {
  2571. position:relative;
  2572. z-index: 10;
  2573. font-size: 26rpx;
  2574. font-family: PingFang SC;
  2575. font-weight: bold;
  2576. color: #FFFFFF;
  2577. }
  2578. .desc {
  2579. }
  2580. }
  2581. }
  2582. .polyv_detail {
  2583. display: flex;
  2584. flex-direction: column;
  2585. height: 100vh;
  2586. .box {
  2587. flex: 1;
  2588. overflow: hidden;
  2589. margin: 16rpx 16rpx 100rpx 16rpx;
  2590. .box_in {
  2591. height: 100%;
  2592. }
  2593. }
  2594. .first_ml {
  2595. margin: 16rpx 16rpx 16rpx 16rpx;
  2596. }
  2597. }
  2598. .btnSet {
  2599. width: 440rpx;
  2600. height: 80rpx;
  2601. background: #007aff;
  2602. border-radius: 40rpx;
  2603. color: #ffffff;
  2604. font-size: 28rpx;
  2605. line-height: 80rpx;
  2606. }
  2607. .btnReply {
  2608. width: 80rpx;
  2609. height: 40rpx;
  2610. background: #e3f0ff;
  2611. border-radius: 16rpx;
  2612. text-align: center;
  2613. color: #007aff;
  2614. }
  2615. .btnDel {
  2616. width: 80rpx;
  2617. height: 40rpx;
  2618. background: #ffedf0;
  2619. border-radius: 16rpx;
  2620. text-align: center;
  2621. color: #ff2d55;
  2622. }
  2623. .btnReply {
  2624. width: 80rpx;
  2625. height: 40rpx;
  2626. background: #e3f0ff;
  2627. border-radius: 16rpx;
  2628. font-size: 24rpx;
  2629. }
  2630. .lecture-box {
  2631. display: flex;
  2632. align-items: center;
  2633. height: 80rpx;
  2634. background: #ffffff;
  2635. border-radius: 16rpx 16rpx 16rpx 16rpx;
  2636. .title {
  2637. padding: 10rpx;
  2638. flex: 1;
  2639. overflow: hidden;
  2640. text-overflow: ellipsis;
  2641. white-space: nowrap;
  2642. color: #333;
  2643. font-weight: bold;
  2644. font-size: 32rpx;
  2645. }
  2646. .btn {
  2647. display: flex;
  2648. align-items: center;
  2649. justify-content: center;
  2650. width: 80rpx;
  2651. height: 80rpx;
  2652. background: #ffffff;
  2653. box-shadow: -4rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
  2654. border-radius: 16rpx 16rpx 16rpx 16rpx;
  2655. }
  2656. }
  2657. .lecture-content {
  2658. background: #fff;
  2659. margin-top: 10rpx;
  2660. padding: 10rpx;
  2661. border-radius: 16rpx;
  2662. }
  2663. .photoBox {
  2664. width: 100%;
  2665. // background-color: #ffffff;
  2666. // border-radius: 24px 24px 0px 0px;
  2667. .photoTop {
  2668. width: 100%;
  2669. height: 74rpx;
  2670. border-radius: 20px 20px 0px 0px;
  2671. background-color: #ffffff;
  2672. display: flex;
  2673. align-items: center;
  2674. justify-content: center;
  2675. padding: 0rpx 38rpx;
  2676. .sqzz {
  2677. width: 28rpx;
  2678. height: 28rpx;
  2679. display: flex;
  2680. align-items: center;
  2681. justify-content: center;
  2682. }
  2683. .centersq {
  2684. color: #333;
  2685. font-size: 30rpx;
  2686. font-weight: 500;
  2687. }
  2688. }
  2689. .photoCenter {
  2690. width: 750rpx;
  2691. height: 75vh;
  2692. position: relative;
  2693. .center_camera {
  2694. width: 100%;
  2695. height: 75vh;
  2696. position: fixed;
  2697. .head_take {
  2698. width: 100%;
  2699. height: 75vh;
  2700. display: flex;
  2701. flex-direction: column;
  2702. }
  2703. .headTake_up {
  2704. width: 100%;
  2705. height: 100rpx;
  2706. }
  2707. .headTake_minddle {
  2708. display: flex;
  2709. .min_img {
  2710. width: 500rpx;
  2711. height: 550rpx;
  2712. }
  2713. .min_left, .min_right {
  2714. flex: 1;
  2715. height: 550rpx;
  2716. }
  2717. }
  2718. .headTake_down {
  2719. width: 100%;
  2720. flex: 1;
  2721. }
  2722. .color {
  2723. background-color: #333;
  2724. opacity: 0.5;
  2725. }
  2726. .photo_v {
  2727. width: 100%;
  2728. height: 100%;
  2729. }
  2730. .mask {
  2731. width: 500rpx;
  2732. height: 550rpx;
  2733. position: absolute;
  2734. top: 100rpx;
  2735. left: 0;
  2736. right: 0;
  2737. bottom: 0;
  2738. margin: 0 auto;
  2739. box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
  2740. }
  2741. }
  2742. .custom {
  2743. width: 750rpx;
  2744. height: 75vh;
  2745. position: absolute;
  2746. z-index: 1000;
  2747. top: 0;
  2748. left: 0;
  2749. image {
  2750. width: 100%;
  2751. height: 100%;
  2752. }
  2753. }
  2754. }
  2755. .btns {
  2756. display: flex;
  2757. .takePhoto_btn {
  2758. width: 100%;
  2759. display: flex;
  2760. align-items: center;
  2761. justify-content: space-between;
  2762. background: #A9A7A9;
  2763. padding: 40rpx 26rpx;
  2764. .middle_btn {
  2765. width: 120rpx;
  2766. height: 120rpx;
  2767. border-radius: 40rpx;
  2768. border: 4rpx solid #FFFFFF;
  2769. display: flex;
  2770. align-items: center;
  2771. justify-content: center;
  2772. }
  2773. .square {
  2774. width: 96rpx;
  2775. height: 96rpx;
  2776. background: #FFFFFF;
  2777. border-radius: 28rpx;
  2778. }
  2779. .rights {
  2780. font-size: 32rpx;
  2781. font-weight: 500;
  2782. color: #FFFFFF;
  2783. }
  2784. }
  2785. .btnResult {
  2786. height: 100rpx;
  2787. flex: 1;
  2788. background-color: #07c160;
  2789. text-align: center;
  2790. line-height: 100rpx;
  2791. color: #fff;
  2792. font-size: 32rpx;
  2793. font-weight: bold;
  2794. }
  2795. }
  2796. }
  2797. .chat_box {
  2798. display: flex;
  2799. padding: 20rpx;
  2800. justify-content: space-between;
  2801. }
  2802. .chat3 {
  2803. font-size: 30rpx;
  2804. font-family: PingFang SC;
  2805. font-weight: 500;
  2806. color: #666666;
  2807. margin-top: 10rpx;
  2808. }
  2809. .chat2 {
  2810. font-size: 20rpx;
  2811. font-family: PingFang SC;
  2812. font-weight: 500;
  2813. color: #999999;
  2814. margin-top: 10rpx;
  2815. }
  2816. .chat1 {
  2817. font-size: 24rpx;
  2818. font-family: PingFang SC;
  2819. font-weight: 500;
  2820. color: #333333;
  2821. }
  2822. .leftPadding {
  2823. margin-left: 8rpx;
  2824. }
  2825. .t2Content {
  2826. font-size: 24rpx;
  2827. font-family: PingFang SC;
  2828. font-weight: bold;
  2829. color: #999999;
  2830. line-height: 48rpx;
  2831. }
  2832. .tBox2 {
  2833. display: flex;
  2834. padding-top: 10rpx;
  2835. color: #333333;
  2836. font-size: 30rpx;
  2837. font-weight: 400;
  2838. }
  2839. .tBox {
  2840. display: flex;
  2841. align-items: center;
  2842. padding-top: 10rpx;
  2843. }
  2844. .title {
  2845. font-size: 24rpx;
  2846. color: #999999;
  2847. }
  2848. page {
  2849. // padding-top: 10px;
  2850. // padding-top: constant(safe-area-inset-top);
  2851. // padding-top: env(safe-area-inset-top);
  2852. }
  2853. .Answering {
  2854. .answer_item {
  2855. &:nth-child(2) {
  2856. border-radius: 16rpx 16rpx 0rpx 0rpx;
  2857. }
  2858. &:nth-last-child(1) {
  2859. border-radius: 0rpx 0rpx 16rpx 16rpx;
  2860. }
  2861. }
  2862. }
  2863. .inputBottom {
  2864. position: fixed;
  2865. left: 0;
  2866. bottom: 0;
  2867. background: #ffffff;
  2868. height: 98rpx;
  2869. display: flex;
  2870. align-items: center;
  2871. width: 100%;
  2872. z-index: 99;
  2873. .flex_auto {
  2874. flex: 1;
  2875. margin-left: 10%;
  2876. }
  2877. .btn {
  2878. color: #007aff;
  2879. font-size: 30rpx;
  2880. font-weight: bold;
  2881. width: 15%;
  2882. text-align: center;
  2883. }
  2884. .input {
  2885. background: rgba(244, 244, 244, 0.98);
  2886. height: 60rpx;
  2887. border-radius: 24rpx;
  2888. margin-top: 12rpx;
  2889. }
  2890. }
  2891. .noteBox {
  2892. width: 100%;
  2893. background: #ffffff;
  2894. padding: 0rpx 10rpx 20rpx;
  2895. border-radius: 16rpx;
  2896. overflow: hidden;
  2897. .left_ti {
  2898. padding-top: 14rpx;
  2899. }
  2900. }
  2901. .dateBox {
  2902. width: 216rpx;
  2903. height: 48rpx;
  2904. background: #ffffff;
  2905. border-radius: 24rpx;
  2906. font-size: 24rpx;
  2907. color: #666666;
  2908. text-align: center;
  2909. line-height: 48rpx;
  2910. margin: 16rpx 0rpx 8rpx;
  2911. }
  2912. .t_content1 {
  2913. color: #007aff;
  2914. margin-left: 10rpx;
  2915. }
  2916. .tag1 {
  2917. border: 2rpx solid #007aff;
  2918. border-radius: 8rpx;
  2919. font-size: 20rpx;
  2920. color: #007aff;
  2921. padding: 5rpx;
  2922. }
  2923. .b_title {
  2924. color: #333333;
  2925. font-size: 30rpx;
  2926. font-weight: bold;
  2927. }
  2928. page {
  2929. background: #eaeef1;
  2930. }
  2931. .menuBox {
  2932. width: 100%;
  2933. background: #ffffff;
  2934. border-radius: 16rpx;
  2935. padding: 20rpx;
  2936. margin-bottom: 20rpx;
  2937. }
  2938. .btnspric {
  2939. border-top: 1rpx solid #eee;
  2940. display: flex;
  2941. align-items: center;
  2942. justify-content: space-between;
  2943. height: 108rpx;
  2944. padding-left: 43rpx;
  2945. padding-right: 32rpx;
  2946. }
  2947. .btnspric > .lefprL {
  2948. font-size: 36rpx;
  2949. color: #0c141f;
  2950. font-weight: bold;
  2951. }
  2952. .btnspric > .lefprR {
  2953. padding: 0rpx 24rpx;
  2954. height: 60rpx;
  2955. line-height: 60rpx;
  2956. text-align: center;
  2957. color: #fff;
  2958. background: #32467b;
  2959. border-radius: 24rpx;
  2960. box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  2961. }
  2962. .yhj,
  2963. .hdyhj {
  2964. padding: 24rpx 29rpx 24rpx 34rpx;
  2965. }
  2966. .yhj {
  2967. border-bottom: 16rpx solid #f9f9f9;
  2968. }
  2969. .yhjtit {
  2970. font-size: 30rpx;
  2971. color: #0c141f;
  2972. font-weight: 500;
  2973. margin-bottom: 14rpx;
  2974. }
  2975. .yhjList {
  2976. display: flex;
  2977. align-items: center;
  2978. justify-content: space-between;
  2979. margin-bottom: 14rpx;
  2980. }
  2981. .yhjList > .yhjLefts {
  2982. display: flex;
  2983. align-items: center;
  2984. }
  2985. .yhjLefts > .yhl {
  2986. color: #32467b;
  2987. font-size: 30rpx;
  2988. margin-right: 31rpx;
  2989. }
  2990. .yhjLefts > .yhbq {
  2991. font-size: 24rpx;
  2992. color: #ff9500;
  2993. border-radius: 18rpx;
  2994. background-color: rgba(255, 149, 0, 0.2);
  2995. border: 2rpx solid #ff9500;
  2996. height: 38rpx;
  2997. line-height: 38rpx;
  2998. padding: 0rpx 16rpx;
  2999. }
  3000. .ts {
  3001. font-size: 24rpx;
  3002. color: #999;
  3003. margin: 14rpx 0rpx;
  3004. padding-right: 29rpx;
  3005. padding-left: 34rpx;
  3006. }
  3007. .yh {
  3008. padding-top: 20rpx;
  3009. }
  3010. .yh > .yhtitle {
  3011. display: flex;
  3012. align-items: center;
  3013. justify-content: space-between;
  3014. padding-right: 29rpx;
  3015. padding-left: 34rpx;
  3016. }
  3017. .priceBxs {
  3018. display: flex;
  3019. align-items: center;
  3020. }
  3021. .priceBxs > .pricleft {
  3022. border-radius: 24rpx;
  3023. border: 1rpx solid #e91313;
  3024. background-color: rgba(233, 19, 19, 0.1);
  3025. padding: 0rpx 18rpx;
  3026. height: 49rpx;
  3027. line-height: 49rpx;
  3028. text-align: center;
  3029. font-size: 30rpx;
  3030. font-weight: 500;
  3031. color: #e91313;
  3032. margin-right: 13rpx;
  3033. }
  3034. .topBox {
  3035. padding: 32rpx 32rpx 24rpx;
  3036. border-bottom: 1rpx solid #eeeeee;
  3037. }
  3038. .topBox > .boldFonstType {
  3039. font-weight: 500;
  3040. font-size: 30rpx;
  3041. margin: 16rpx 0rpx 23rpx;
  3042. }
  3043. .topBox > .firstTopL {
  3044. display: flex;
  3045. align-items: center;
  3046. }
  3047. .topBox > .firstTopL > .imageBs {
  3048. width: 331rpx;
  3049. height: 160rpx;
  3050. border-radius: 6rpx;
  3051. overflow: hidden;
  3052. margin-right: 8rpx;
  3053. box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
  3054. }
  3055. .topBox > .firstTopL > .imageBs > image {
  3056. width: 100%;
  3057. height: 100%;
  3058. }
  3059. .topBox > .firstTopL > .textBs {
  3060. font-size: 30rpx;
  3061. font-weight: bold;
  3062. color: #0c141f;
  3063. }
  3064. .content {
  3065. padding: 24rpx;
  3066. text-align: left;
  3067. }
  3068. .catalogBox {
  3069. display: flex;
  3070. align-items: center;
  3071. flex-wrap: nowrap;
  3072. overflow-x: auto;
  3073. padding-left: 38rpx;
  3074. max-height: 305rpx;
  3075. overflow-y: auto;
  3076. transition: all 0.4s;
  3077. }
  3078. .catalogBox > .catalogA {
  3079. min-width: 200rpx;
  3080. height: 48rpx;
  3081. line-height: 48rpx;
  3082. // text-align: center;
  3083. border: 2rpx solid transparent;
  3084. white-space: nowrap;
  3085. text-overflow: ellipsis;
  3086. overflow: hidden;
  3087. word-break: break-all;
  3088. border-radius: 10rpx;
  3089. background: rgba(22, 119, 255, 0.05);
  3090. padding-left: 19rpx;
  3091. box-sizing: border-box;
  3092. padding-right: 15rpx;
  3093. margin-right: 16rpx;
  3094. margin-bottom: 20rpx;
  3095. margin-top: 15rpx;
  3096. font-size: 24rpx;
  3097. color: #666;
  3098. }
  3099. .catalogBox > .activesq {
  3100. border-color: #1677ff;
  3101. }
  3102. .changeCatalogBox {
  3103. display: block;
  3104. }
  3105. .catalogBox::-webkit-scrollbar {
  3106. display: none; /* Chrome Safari */
  3107. }
  3108. .price_t2 {
  3109. font-size: 18rpx;
  3110. font-family: PingFang SC;
  3111. font-weight: 500;
  3112. text-decoration: line-through;
  3113. color: #999999;
  3114. }
  3115. .price_t1 {
  3116. font-size: 33rpx;
  3117. font-family: PingFang SC;
  3118. font-weight: bold;
  3119. color: #e91313;
  3120. }
  3121. .sc_t {
  3122. font-size: 22rpx;
  3123. color: #000000;
  3124. }
  3125. .sc {
  3126. width: 29rpx;
  3127. height: 29rpx;
  3128. }
  3129. .buy {
  3130. width: 138rpx;
  3131. height: 48rpx;
  3132. line-height: 48rpx;
  3133. background: #32467b;
  3134. border-radius: 10rpx;
  3135. color: #ffffff;
  3136. font-size: 28rpx;
  3137. text-align: center;
  3138. vertical-align: middle;
  3139. position: absolute;
  3140. right: 30rpx;
  3141. }
  3142. .video_body {
  3143. padding-bottom: 96rpx;
  3144. }
  3145. .footer_tab {
  3146. position: fixed;
  3147. bottom: 0;
  3148. height: 96rpx;
  3149. width: 100%;
  3150. background-color: #ffffff;
  3151. }
  3152. .tj_box {
  3153. width: 50%;
  3154. display: inline-block;
  3155. text-align: center;
  3156. margin: 10rpx 0;
  3157. }
  3158. .teacher_t {
  3159. font-size: 24rpx;
  3160. font-family: PingFang SC;
  3161. font-weight: 400;
  3162. color: #666666;
  3163. line-height: 36rpx;
  3164. margin-left: 15rpx;
  3165. }
  3166. .teacher_img {
  3167. width: 87rpx;
  3168. height: 129rpx;
  3169. }
  3170. .t2 {
  3171. font-size: 24rpx;
  3172. font-family: PingFang SC;
  3173. color: #666666;
  3174. line-height: 36rpx;
  3175. margin: 15rpx;
  3176. }
  3177. .r_t2 {
  3178. width: 201rpx;
  3179. height: 49rpx;
  3180. background: rgba(22, 119, 255, 0.05);
  3181. border: 1rpx solid #32467b;
  3182. border-radius: 16rpx;
  3183. color: #666666;
  3184. font-size: 23rpx;
  3185. text-align: center;
  3186. display: flex;
  3187. align-items: center;
  3188. padding: 5rpx;
  3189. }
  3190. .scroll_box {
  3191. width: 100%;
  3192. height: 60rpx;
  3193. background: #ffffff;
  3194. box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  3195. white-space: nowrap;
  3196. overflow: hidden;
  3197. margin: 15rpx 0;
  3198. }
  3199. .r_sliper {
  3200. padding: 0 20rpx;
  3201. }
  3202. .top_line {
  3203. width: 6rpx;
  3204. height: 22rpx;
  3205. background: #32467b;
  3206. margin-right: 10rpx;
  3207. }
  3208. .video_t2 {
  3209. font-size: 24rpx;
  3210. font-family: PingFang SC;
  3211. font-weight: 500;
  3212. color: #666666;
  3213. }
  3214. .course_name {
  3215. height: 80rpx;
  3216. background-color: #fff;
  3217. }
  3218. .video_t1 {
  3219. height: 80rpx;
  3220. color: #333333;
  3221. line-height: 80rpx;
  3222. font-size: 30rpx;
  3223. font-family: PingFang SC;
  3224. font-weight: bold;
  3225. color: #333333;
  3226. margin-left: 15rpx;
  3227. overflow: hidden;
  3228. text-overflow: ellipsis;
  3229. white-space: nowrap;
  3230. }
  3231. .notice_wrap {
  3232. height: 80rpx;
  3233. display: flex;
  3234. align-items: center;
  3235. justify-content: flex-end;
  3236. .video_t1_t {
  3237. width: 100%;
  3238. height: 40rpx;
  3239. line-height: 40rpx;
  3240. text-align: center;
  3241. background: rgba(245, 154, 35, 1);
  3242. color: #333;
  3243. border-radius: 10rpx;
  3244. font-size: 24rpx;
  3245. }
  3246. }
  3247. .video_play {
  3248. position: absolute;
  3249. width: 95rpx;
  3250. height: 95rpx;
  3251. top: 0;
  3252. left: 0;
  3253. right: 0;
  3254. bottom: 0;
  3255. margin: auto;
  3256. }
  3257. .video_box {
  3258. position: relative;
  3259. .video-toast {
  3260. position: absolute;
  3261. width: 686rpx;
  3262. height: 80rpx;
  3263. background: rgba(0, 0, 0, 0.6);
  3264. border-radius: 24rpx;
  3265. bottom: 100rpx;
  3266. left: 50%;
  3267. transform: translateX(-50%);
  3268. color: #fff;
  3269. display: flex;
  3270. font-size: 26rpx;
  3271. align-items: center;
  3272. overflow: visible;
  3273. &__text {
  3274. flex: 1;
  3275. margin-left: 40rpx;
  3276. }
  3277. &__btn {
  3278. width: 180rpx;
  3279. text-align: center;
  3280. border-left: 1rpx solid #fff;
  3281. }
  3282. }
  3283. .video-toast__close {
  3284. position: absolute;
  3285. right: 32rpx;
  3286. bottom: 184rpx;
  3287. width: 40rpx;
  3288. height: 40rpx;
  3289. line-height: 40rpx;
  3290. text-align: center;
  3291. background: rgba(0, 0, 0, 0.6);
  3292. border-radius: 50%;
  3293. color: rgba(255, 255, 255, 0.3);
  3294. }
  3295. }
  3296. .rotoct {
  3297. transform: rotate(90deg);
  3298. }
  3299. .notice_modal {
  3300. .content {
  3301. width: 100%;
  3302. height: 100%;
  3303. padding: 56rpx 56rpx 56rpx 64rpx;
  3304. .title {
  3305. color: #222;
  3306. line-height: 40rpx;
  3307. font-size: 36rpx;
  3308. text-align: center;
  3309. font-weight: bold;
  3310. margin-bottom: 24rpx;
  3311. }
  3312. .text {
  3313. height: 340rpx;
  3314. line-height: 40rpx;
  3315. text-indent: 2em;
  3316. font-size: 32rpx;
  3317. color: #222;
  3318. }
  3319. .had_read {
  3320. width: 100%;
  3321. height: 88rpx;
  3322. line-height: 88rpx;
  3323. text-align: center;
  3324. background: #3577E8;
  3325. border-radius: 240rpx;
  3326. font-size: 32rpx;
  3327. font-weight: 500;
  3328. color: #fff;
  3329. margin-top: 20rpx;
  3330. &.gray {
  3331. background: #BBBEC5;
  3332. }
  3333. }
  3334. }
  3335. }
  3336. </style>