detail.vue 95 KB

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