detail.vue 53 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048
  1. <template>
  2. <view class="polyv_detail">
  3. <uni-nav-bar v-if="isShowBar" left-icon="back" :statusBar="true" fixed="true"
  4. :title="detail.courseName || '课程详情'" @clickLeft="clickLeft"></uni-nav-bar>
  5. <view id="top">
  6. <view class="video_box" v-if="!playVid">
  7. <image :src="$method.splitImgHost(goodsData.coverUrl)" mode="widthFix"
  8. style="width: 100%; height: 421rpx">
  9. </image>
  10. </view>
  11. <view v-else-if="playSource == 1">
  12. <my-player ref="player" :playVid="playVid" :autoplay="autoplay" :allowSeek="isAllowSeek"
  13. :playbackRate="playbackRate" :videoCurrentTime="videoCurrentTime || 0" @playing="playing"
  14. @pause="pause" @ended="ended" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate"
  15. @playerError="playerError" @studyLog="studyLog"></my-player>
  16. </view>
  17. <view v-else>
  18. <my-player2 ref="player2" :playFileId="playVid" :autoplay="autoplay" :progressControl="isAllowSeek"
  19. :playbackRate="playbackRate" :currentTime="videoCurrentTime || 0" @playing="playing" @pause="pause"
  20. @ended="ended" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate" @playerError="playerError"
  21. @studyLog="studyLog"></my-player2>
  22. </view>
  23. <view class="course_name">
  24. <view class="course_titles">
  25. <view class="video_t1" :class="{ one: !goodsData.buyNote }">{{
  26. detail.courseName
  27. }}</view>
  28. <view class="notice_wrap" v-if="goodsData.buyNote">
  29. <view class="video_t1_t" @click="studyNotice"> 学员须知 </view>
  30. </view>
  31. <view class="toggle_course" v-if="goodsTeacher.length > 1" @click="changeCourses()">
  32. <image class="img" src="/pages3/static/imgs/toggle.png" mode="widthFix"></image>
  33. <view class="toggle_name">切换课程</view>
  34. <view class="numbers">共{{ goodsTeacher.length }}门</view>
  35. </view>
  36. </view>
  37. </view>
  38. <u-line color="#D6D6DB" />
  39. <view>
  40. <view>
  41. <u-tabs :item-width="itemWidth()" :list="list" font-size="32" bar-width="24" :current="current"
  42. @change="change" active-color="#007AFF"></u-tabs>
  43. </view>
  44. </view>
  45. <u-line color="#D6D6DB" />
  46. </view>
  47. <view class="box" :class="{ first_ml: current == 0 }">
  48. <scroll-view class="box_in" scroll-y="true">
  49. <!--目录 -->
  50. <view v-show="current == 0">
  51. <view class="top__header" v-if="livingItem" @click="goLive(livingItem)">
  52. <image class="img" src="/pages3/static/imgs/live.png" mode="widthFix"></image>
  53. <view class="note">正在直播中</view>
  54. <view class="title">{{ livingItem.sectionName }}</view>
  55. </view>
  56. <course-tree v-if="sectionItem.id || sectionItem.sectionId" :sectionMaxNum="goodsData.sectionMaxNum"
  57. :isRebuild="false" :isBuy="true" @isHaverebuild="isHaverebuild = true"></course-tree>
  58. </view>
  59. <!--讲义 -->
  60. <view v-if="current == 1">
  61. <handouts-box :handoutsId="goodsData.handoutsId"></handouts-box>
  62. </view>
  63. <!--笔记 -->
  64. <view v-if="current == 2">
  65. <note-Box @jumpNote="jumpNote"></note-Box>
  66. </view>
  67. <!--答疑 -->
  68. <view v-if="current == 3">
  69. <answer-box :userId="userInfo ? userInfo.userId : 0"></answer-box>
  70. </view>
  71. <!--重修目录 -->
  72. <view v-if="current == 4">
  73. <course-tree v-if="sectionItem.id || sectionItem.sectionId" :sectionMaxNum="goodsData.sectionMaxNum"
  74. :isRebuild="true" :isBuy="true"></course-tree>
  75. </view>
  76. </scroll-view>
  77. </view>
  78. <u-popup v-model="noticeShow" class="notice_modal" mode="center" border-radius="28" width="650rpx"
  79. height="622rpx" :mask-close-able="false">
  80. <view class="content">
  81. <view class="title">学员须知</view>
  82. <scroll-view scroll-y="true">
  83. <view class="text" v-html="
  84. goodsData.buyNote && goodsData.buyNote.replace(/\n|\r\n/g, '<br>')
  85. ">
  86. </view>
  87. </scroll-view>
  88. <view class="had_read" :class="{ gray: CountTo > 0 }" @click="noticeConfirm()">
  89. <text v-if="CountTo > 0">请阅读学员须知,{{ " " + CountTo + "s" }}后可关闭</text>
  90. <text v-else>我已阅读学员须知</text>
  91. </view>
  92. </view>
  93. </u-popup>
  94. <!-- 倒计时提交 -->
  95. <u-popup v-model="noticeShow1" class="notice_modal" mode="center" border-radius="28" width="650rpx"
  96. height="262rpx" :mask-close-able="false">
  97. <view class="content">
  98. <view class="title">提示</view>
  99. <view class="had_read">
  100. <text v-if="CountTo1 >= 0">视频学习时长不达标,请等待</text>
  101. <text v-if="CountTo1 >= 0">{{ " " + CountTo1 + "s" }}</text>
  102. </view>
  103. </view>
  104. </u-popup>
  105. <u-modal v-model="showMark" title="提示" @confirm="markConfirm" @cancel="toBack" confirm-text="复制学习网址"
  106. :show-cancel-button="true" cancel-text="关闭">
  107. <view class="slot-content">
  108. <view>您的学习账号已经开通,请按照步骤操作,进行学习。</view>
  109. <view>1.复制学习地址:{{ markContent }}</view>
  110. <view>2.在【浏览器中】打开复制的学习网址</view>
  111. <view>3.打开学习网址后,选择【个人用户】进行登录</view>
  112. <view>(1)账号:您个人的身份证号码</view>
  113. <view>(2)密码:身份证号码,再加111111</view>
  114. </view>
  115. </u-modal>
  116. <!-- 切换课程弹窗 -->
  117. <u-popup v-model="toggleCourseShow" mode="bottom" border-radius="40" :mask-close-able="false">
  118. <view class="popup_box">
  119. <view class="check_head">
  120. <view class="headers">
  121. <view class="grade">切换课程</view>
  122. <u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
  123. </view>
  124. <view class="coruse_num">共{{ goodsTeacher.length }}门</view>
  125. <view class="menuSel">
  126. <scroll-view class="sub_sliper" scroll-x="true">
  127. <view v-for="(item, index) in subList" :key="index"
  128. style="margin-right: 50rpx; display: inline-block">
  129. <view class="r_t1" :class="{ nactive: subIndex == index }" @click="cMenu(item, index)">
  130. {{ item.subjectName }}
  131. </view>
  132. </view>
  133. </scroll-view>
  134. </view>
  135. </view>
  136. <view class="check_con">
  137. <scroll-view scroll-y="true" style="height: 700rpx">
  138. <view v-for="(courseItem, gTindex) in goodsTeacher" :key="gTindex">
  139. <view v-for="(item, index) in courseItem.courseList" :key="index" v-show="
  140. item.subjectId === newActiveSubjectId || !newActiveSubjectId
  141. ">
  142. <view class="course_items" v-if="item.show && item.show == 1">
  143. <view class="course_lefts">
  144. <view class="course_title">
  145. {{ item.courseName }}
  146. </view>
  147. <view v-if="courseItem.teaList && courseItem.teaList.length > 0"
  148. class="teacher_names">
  149. <view v-for="(tea, tindex) in courseItem.teaList" :key="tindex"
  150. class="names">{{ tea.aliasName }}
  151. </view>
  152. </view>
  153. <view class="course_pros">
  154. 学习进度
  155. <text>
  156. {{ item.stuAllNum + item.recordNum }}/{{
  157. item.secAllNum + item.examNum
  158. }}</text>
  159. </view>
  160. </view>
  161. <view class="course_rights" @click="jump(item, gTindex, 'jump')">
  162. <view class="cicles">
  163. <u-icon name="arrow-right" color="#498AFE" size="20"></u-icon>
  164. </view>
  165. <view class="intoStudy">进入学习</view>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. </scroll-view>
  171. </view>
  172. </view>
  173. </u-popup>
  174. <!-- 摄像头 -->
  175. <Popup-camera @submitPhoto="submitPhoto" :visible.sync="showCamera" ref="camera" />
  176. </view>
  177. </template>
  178. <script>
  179. import handoutsBox from "@/components/course/handoutsBox.vue";
  180. import courseTree from "@/components/course/courseTree.vue";
  181. import PopupCamera from "../../components/popup/camera.vue";
  182. import myPlayer from "@/components/myPlayer/polyvPlayer.vue";
  183. import myPlayer2 from "@/components/myPlayer2/tcPlayer.vue";
  184. import noteBox from "@/components/course/noteBox.vue";
  185. import answerBox from "@/components/course/answerBox.vue";
  186. import {
  187. mapGetters,
  188. mapMutations
  189. } from "vuex";
  190. import {
  191. lockAction
  192. } from "../../utils/lock";
  193. import {
  194. debounce,
  195. throttle,
  196. reload
  197. } from "../../utils/common";
  198. export default {
  199. components: {
  200. handoutsBox,
  201. myPlayer,
  202. myPlayer2,
  203. noteBox,
  204. answerBox,
  205. courseTree,
  206. PopupCamera,
  207. },
  208. data() {
  209. return {
  210. markContent: "http://admin.zhujianpeixun.com/",
  211. showMark: false,
  212. lockTimer: null,
  213. orderGoodsId: 0,
  214. noticeShow: false,
  215. showSet: false,
  216. courseId: 0,
  217. current: 0,
  218. playSource: 1,
  219. vid: "",
  220. goodsId: 0,
  221. goodsData: {},
  222. showCamera: false,
  223. goodsPlayConfig: null,
  224. autoplay: false,
  225. isAllowSeek: "no",
  226. playbackRate: [1.0],
  227. timer: null,
  228. goodsPhotographConfig: null,
  229. playTime: 0, // 播放时刻
  230. avatarUrl: "",
  231. ossAvatarUrl: "",
  232. gradeId: 0,
  233. chapterId: 0,
  234. moduleId: 0,
  235. videoCurrentTime: 0,
  236. photoIndex: 0,
  237. photoNum: 0,
  238. photoList: [], //拍照的时间点
  239. photoConfig: false, //是否配置好拍照次数
  240. photoHistoryList: [], //已拍照历史的下标点
  241. sectionItem: {},
  242. isShowBar: true,
  243. isRebuild: false, //视频是否从重修目录点击
  244. livingItem: "",
  245. option: null,
  246. toggleCourseShow: false, // 切换课程弹窗
  247. courseList: [], // 课程列表
  248. subList: [],
  249. subIndex: 0,
  250. goodsTeacher: [],
  251. teacherList: [],
  252. teacherIndex: 0,
  253. newActiveSubjectId: "", //当前选中ID
  254. compareFaceData: 0, // 拍照匹配相似度
  255. prendreAutoCarme: false, // 是否发起授权相机
  256. CountTo: 0, // 倒计时
  257. CountTo1: 0,
  258. menuAllList: [],
  259. curPlayIndex: 0, // 正在播放的节的下标
  260. faceUrl: "",
  261. erJianErZao: false,
  262. jjShiGongYuan: false,
  263. pauseTime: 0,
  264. pauseTimer: null,
  265. isReach: false,
  266. noticeShow1: false,
  267. refPlv: null,
  268. isCache: false,
  269. isHaverebuild: false,
  270. isPlaying: false,
  271. beforeHideIsPlaying: false,
  272. isLeave: false,
  273. text: "",
  274. throttleFn: throttle(this.postStudyRecord, 15000)
  275. };
  276. },
  277. computed: {
  278. ...mapGetters(["userInfo", "other"]),
  279. playSecIsLearn() {
  280. if (!this.playVid) {
  281. return false;
  282. }
  283. return this.sectionItem.learning != 1;
  284. },
  285. orderNum() {
  286. return this.goodsData.goodsLearningOrder;
  287. },
  288. list() {
  289. let list = [{
  290. name: "目录",
  291. },
  292. {
  293. name: "讲义",
  294. },
  295. {
  296. name: "笔记",
  297. },
  298. {
  299. name: "答疑",
  300. },
  301. ];
  302. if (this.isHaverebuild) {
  303. list.push({
  304. name: "重修目录"
  305. });
  306. }
  307. return list;
  308. },
  309. params: function() {
  310. return (keys = ["orderGoodsId", "goodsId", "courseId"]) => {
  311. let params = {};
  312. for (const key of keys) {
  313. params[key] = this[key];
  314. }
  315. return params;
  316. };
  317. },
  318. detail() {
  319. if (!this.courseId || !this.courseList.length) {
  320. return {};
  321. }
  322. return this.courseList.find((e) => e.courseId == this.courseId);
  323. },
  324. sectionId() {
  325. return this.sectionItem.sectionId || this.sectionItem.id;
  326. },
  327. playVid() {
  328. return this.sectionItem.recordingUrl;
  329. },
  330. isPlayRebuild() {
  331. return this.sectionItem.rebuild != 1;
  332. },
  333. },
  334. async onLoad(option) {
  335. // #ifdef H5
  336. console.error(this.$method.myBrowser(), '浏览器')
  337. if (this.$method.myBrowser() == 'UC') {
  338. uni.showModal({
  339. title: "提示",
  340. content: "请使用其他浏览器进行学习",
  341. showCancel: false,
  342. complete: () => {
  343. uni.switchTab({
  344. url: "/pages/learn/index",
  345. });
  346. }
  347. })
  348. return
  349. }
  350. // #endif
  351. // 针对腾讯商品并且是webview重载后的对URl参数的处理
  352. if (option.obj) {
  353. this.isShowBar = false;
  354. console.log("检测option.obj", option)
  355. console.log("解析后的option.obj", JSON.parse(decodeURIComponent(option.obj)))
  356. option = JSON.parse(decodeURIComponent(option.obj));
  357. }
  358. // 请求商品类型并判断是否是小程序环境
  359. await this.orderGetViewSign(option)
  360. if (option.isOther) {
  361. this.showMark = true;
  362. return;
  363. }
  364. this.option = option;
  365. let {
  366. skipPort,
  367. id,
  368. goodsId,
  369. orderGoodsId,
  370. gradeId,
  371. informId
  372. } = option;
  373. this.orderGoodsId = Number(orderGoodsId) || "";
  374. this.courseId = Number(id) || "";
  375. this.goodsId = Number(goodsId);
  376. this.gradeId = Number(gradeId);
  377. this.isLeave = false;
  378. uni.addInterceptor("navigateTo", {
  379. success: (e) => {
  380. this.isLeave = true;
  381. this.isCache = true;
  382. },
  383. });
  384. if (skipPort) {
  385. await this.$method.skipLogin(skipPort);
  386. }
  387. if (this.$method.isGoLogin()) {
  388. return;
  389. }
  390. if (!this.lockTimer) {
  391. lockAction();
  392. this.lockTimer = setInterval(lockAction, 10000);
  393. }
  394. this.saveLoaclCheckClass()
  395. // 公众号模板消息的数据埋点
  396. informId && this.clickOfficial(informId);
  397. this.init();
  398. },
  399. async onShow() {
  400. if (!this.$method.isLogin()) {
  401. return;
  402. }
  403. if (this.isCache) {
  404. console.log("返回刷新数据");
  405. this.isCache = false;
  406. this.sectionItem = {};
  407. this.beforeHideIsPlaying = false;
  408. reload(this.option);
  409. return;
  410. }
  411. if (this.beforeHideIsPlaying) {
  412. console.log("显示重新播放");
  413. if (this.text) {
  414. this.refPlv.playPause();
  415. return;
  416. }
  417. this.refPlv.resumeVideo();
  418. }
  419. },
  420. onUnload() {
  421. console.log("onUnload");
  422. if (this.isPlaying) {
  423. this.postStudyRecord();
  424. }
  425. this.refPlv = null;
  426. uni.$off();
  427. this.clearPauseTimer();
  428. uni.removeInterceptor("navigateTo");
  429. if (this.lockTimer) {
  430. clearInterval(this.lockTimer);
  431. this.$api.lockDelLock({
  432. action: "jxjy",
  433. uuid: this.$method.getUuid(),
  434. }).then(res => {
  435. console.log("删除登录", res)
  436. });
  437. }
  438. },
  439. onHide() {
  440. console.log('隐藏页面')
  441. this.beforeHideIsPlaying = this.isPlaying;
  442. if (this.isPlaying) {
  443. this.refPlv.playPause();
  444. }
  445. },
  446. mounted() {},
  447. methods: {
  448. ...mapMutations(["updateChapterOpen", "updateLiveLast"]),
  449. <<<<<<< HEAD
  450. orderGetViewSign(option){
  451. return new Promise(resolve => {
  452. this.$api.orderGetViewSign(Number(option.orderGoodsId)).then((res) => {
  453. this.playSource = res.data.data.viewSign;
  454. if (this.playSource == 2) {
  455. // #ifdef MP-WEIXIN
  456. this.$api
  457. .courseSkipPort()
  458. .then((res2) => {
  459. console.log("详情页请求的域名", res2.data.data.domain, res2.data.data.skipPort)
  460. let obj = {
  461. skipPort: res2.data.data.skipPort,
  462. ...option
  463. }
  464. let webViewUrl = encodeURIComponent(
  465. res2.data.data.domain +
  466. '/pages3/polyv/detail?obj=' +
  467. JSON.stringify(obj))
  468. uni.redirectTo({
  469. url: `/pages5/webview/detaillink?url=${webViewUrl}`
  470. })
  471. })
  472. return;
  473. // #endif
  474. }
  475. resolve()
  476. })
  477. })
  478. =======
  479. // 进行学习后,保存标识,用于检查是否二建15天提示弹窗弹出
  480. saveLoaclCheckClass() {
  481. let ary = uni.getStorageSync("loaclCheckClass") || []
  482. let userFindIndex = ary.findIndex(i => i.userId == this.userInfo.userId)
  483. if (userFindIndex !== -1) {
  484. if (!ary[userFindIndex].orderGoodsIds.includes(this.orderGoodsId)) {
  485. ary[userFindIndex].orderGoodsIds.push(this.orderGoodsId)
  486. }
  487. } else {
  488. ary.push({
  489. userId: this.userInfo.userId,
  490. orderGoodsIds: [this.orderGoodsId]
  491. })
  492. }
  493. uni.setStorageSync("loaclCheckClass", ary)
  494. >>>>>>> 4f648c99062bf3dd977a35d3fcdd633155d8097f
  495. },
  496. async init() {
  497. if (this.playSource == 2) {
  498. this.isAllowSeek = false;
  499. } else {
  500. // #ifdef MP-WEIXIN
  501. this.isAllowSeek = "no";
  502. // #endif
  503. // #ifdef H5
  504. this.isAllowSeek = "on";
  505. // #endif
  506. }
  507. console.log("进入:",this.playSource,this.isAllowSeek)
  508. this.photoList = [];
  509. this.courseList = [];
  510. this.photoConfig = false;
  511. await this.isCanLearn();
  512. this.courseCourseList();
  513. },
  514. // 七大员是否能进入学习
  515. async qCheckIsCanLearn() {
  516. let res = await this.$api.qCheckIsCanLearn(this.orderGoodsId);
  517. if (res.data.code !== 200) {
  518. uni.showModal({
  519. showCancel: false,
  520. title: "提示",
  521. content: res.data.msg,
  522. success: (resultst) => {
  523. uni.navigateBack();
  524. },
  525. });
  526. return Promise.reject();
  527. }
  528. let res1 = await this.$api.syncSevenPublicClass({
  529. orderGoodsId: this.orderGoodsId,
  530. });
  531. if (res1.data.code !== 200) {
  532. uni.showModal({
  533. showCancel: false,
  534. title: "提示",
  535. content: "无法进入学习!",
  536. success: (resultst) => {
  537. uni.navigateBack();
  538. },
  539. });
  540. return Promise.reject();
  541. }
  542. },
  543. // 新增微信公众号模板消息点击数据
  544. clickOfficial(informId) {
  545. this.$http({
  546. url: "/data/click",
  547. method: "post",
  548. data: {
  549. informId
  550. },
  551. });
  552. },
  553. // 点击课程目录
  554. cMenu(item, index) {
  555. this.subIndex = index;
  556. this.newActiveSubjectId = item.subjectId;
  557. },
  558. courseCourseList() {
  559. this.$api
  560. .courseCourseList({
  561. pageNum: 1,
  562. pageSize: 200,
  563. ...this.params(["goodsId", "orderGoodsId", "gradeId"]),
  564. })
  565. .then((res) => {
  566. if (res.data.code == 200) {
  567. this.courseList = res.data.rows;
  568. if (res.data.total > 1) {
  569. // 科目
  570. this.subList = [{
  571. subjectId: 0,
  572. subjectName: "所有"
  573. }];
  574. this.courseList.forEach((item) => {
  575. if (!this.subList.find((e) => e.subjectId == item.subjectId)) {
  576. this.subList.push(item);
  577. }
  578. });
  579. this.getUserWatchLast();
  580. } else {
  581. this.originOnShow();
  582. this.originMounted();
  583. }
  584. }
  585. });
  586. },
  587. // 查询用户最后一次看的录播的信息
  588. getUserWatchLast() {
  589. this.$http({
  590. url: "/study/record/getUserWatchLast",
  591. method: "get",
  592. data: {
  593. orderGoodsId: this.orderGoodsId,
  594. },
  595. }).then((res) => {
  596. if (res.data.code == 200 && res.data.data) {
  597. this.courseId = res.data.data.courseId;
  598. }
  599. if (!this.courseId) {
  600. this.courseId = this.courseList[0].courseId;
  601. }
  602. this.originOnShow();
  603. this.originMounted();
  604. //获取商品双师资模板
  605. this.getCourseTeacher(this.courseList);
  606. });
  607. },
  608. getCourseTeacher(rows) {
  609. this.goodsTeacher = [];
  610. //获取商品双师资模板
  611. this.$api
  612. .courseTeacherList({
  613. goodsId: this.goodsId,
  614. })
  615. .then((res1) => {
  616. if (res1.data.data && res1.data.data.length > 0) {
  617. //课程老师模板
  618. let teacherTel = res1.data.data;
  619. //商品课程
  620. let courses = rows;
  621. teacherTel.forEach((tea) => {
  622. let dataList = [];
  623. let teacherList = [];
  624. courses.forEach((item) => {
  625. let data = tea.courseList.filter(
  626. (x) => x.courseId == item.courseId
  627. );
  628. if (data && data.length > 0) {
  629. dataList.push(item);
  630. teacherList = tea.courseList;
  631. }
  632. });
  633. let result = {
  634. teaList: teacherList,
  635. courseList: dataList,
  636. };
  637. this.goodsTeacher.push(result);
  638. });
  639. if (this.goodsTeacher && this.goodsTeacher.length > 0) {
  640. let courseIds = [];
  641. this.goodsTeacher.forEach((item) => {
  642. item.courseList.forEach((course) => {
  643. courseIds.push(course.courseId);
  644. });
  645. });
  646. if (courseIds.length > 0) {
  647. courses.forEach((item) => {
  648. if (!courseIds.includes(item.courseId)) {
  649. let data = {
  650. teaList: [],
  651. courseList: [],
  652. };
  653. data.courseList.push(item);
  654. this.goodsTeacher.push(data);
  655. }
  656. });
  657. }
  658. this.goodsTeacher.forEach((item) => {
  659. if (item.courseList && item.courseList.length > 0) {
  660. item.courseList[0].show = 1;
  661. }
  662. });
  663. }
  664. } else {
  665. //没有双师资模板
  666. rows.forEach((item) => {
  667. item.show = 1;
  668. let data = {
  669. teaList: [],
  670. courseList: [],
  671. };
  672. data.courseList.push(item);
  673. this.goodsTeacher.push(data);
  674. });
  675. }
  676. this.goodsTeacher.forEach((item) => {
  677. if (item.courseList.some((x) => x.courseId == this.courseId)) {
  678. this.teacherList = item.teaList;
  679. }
  680. });
  681. });
  682. },
  683. erJianErZaoPauseTip() {
  684. if (this.playSecIsLearn && this.erJianErZao && !this.isLeave) {
  685. if (this.pauseTimer) {
  686. return;
  687. }
  688. this.pauseTime = Date.now();
  689. this.pauseTimer = setInterval(() => {
  690. console.log("暂停时间", Date.now() - this.pauseTime, this.pauseTime);
  691. if (Date.now() - this.pauseTime > 5 * 60 * 1000) {
  692. // 5 * 60 * 1000
  693. this.refPlv.exitFullScreen();
  694. this.text = "暂停";
  695. if (this.showCamera) {
  696. this.text = "拍照停留";
  697. this.closeCamera();
  698. }
  699. uni.showModal({
  700. title: "提示",
  701. showCancel: false,
  702. content: `检测${this.text}时间过长,刷新当前页面`,
  703. cancelText: "取消",
  704. confirmText: "确定",
  705. success: (res) => {
  706. this.text = "";
  707. reload(this.option);
  708. // #ifdef MP-WEIXIN
  709. this.sectionItem = {};
  710. // #endif
  711. },
  712. });
  713. this.clearPauseTimer();
  714. }
  715. }, 5000);
  716. }
  717. },
  718. // 原来onshow里面的内容
  719. async originOnShow() {
  720. await this.studyRecordMenuAllList();
  721. // 消息过来 定位某个节
  722. if (this.option.noteSecond) {
  723. this.jumpNote({
  724. sectionType: 1,
  725. ...this.option,
  726. });
  727. return;
  728. }
  729. this.studyRecordQueryLiveLast();
  730. },
  731. // 原来的mouted内容
  732. originMounted() {
  733. uni.$on(
  734. "getSection",
  735. debounce((item) => {
  736. if (this.playSource == 2) {
  737. if (!this.refPlv && this.playVid) {
  738. this.refPlv = this.$refs.player2;
  739. }
  740. } else {
  741. if (!this.refPlv && this.playVid) {
  742. this.refPlv = this.$refs.player;
  743. }
  744. }
  745. if (this.isPlaying) {
  746. this.refPlv.playPause();
  747. }
  748. this.photoConfig = false;
  749. this.photoList = [];
  750. this.moduleId = item.moduleId || 0;
  751. this.chapterId = item.chapterId || 0;
  752. this.sectionItem = item;
  753. this.playVideo(item);
  754. this.postStudyRecord(0);
  755. })
  756. );
  757. uni.$on("isRebuild", (item) => {
  758. this.isRebuild = item;
  759. });
  760. this.updateChapterOpen(true);
  761. },
  762. clearPauseTimer() {
  763. if (this.pauseTimer) {
  764. this.pauseTime = 0;
  765. clearInterval(this.pauseTimer);
  766. this.pauseTimer = null;
  767. }
  768. },
  769. changeCourses() {
  770. this.toggleCourseShow = true;
  771. },
  772. closePop() {
  773. this.toggleCourseShow = false;
  774. },
  775. async activeFunc(item, index) {
  776. this.teacherIndex = index;
  777. let findResult = "";
  778. this.goodsTeacher.forEach((citem, index) => {
  779. citem.courseList.forEach((e, e_index) => {
  780. if (e.courseId == item.courseId) {
  781. findResult = e;
  782. }
  783. });
  784. });
  785. this.jump(findResult, 1);
  786. },
  787. // 进入学习
  788. async jump(item, index, type) {
  789. if (this.courseId === item.courseId) {
  790. this.toggleCourseShow = false;
  791. return;
  792. }
  793. if (this.orderNum == 2 && index != 0) {
  794. let prevItem = this.courseList[index - 1];
  795. if (
  796. prevItem.stuAllNum + prevItem.recordNum <
  797. prevItem.secAllNum + prevItem.examNum
  798. ) {
  799. uni.showToast({
  800. icon: "none",
  801. title: "请按顺序学完上一课再学习这一课",
  802. });
  803. return;
  804. }
  805. }
  806. // 打回 需重修
  807. if (item.rebuild === 0) {
  808. this.$navTo.togo("/pages2/learn/details", {
  809. id: item.courseId,
  810. ...this.params(["goodsId", "orderGoodsId", "gradeId"]),
  811. });
  812. return;
  813. }
  814. if (type) {
  815. this.teacherIndex = 0;
  816. this.goodsTeacher.forEach((citem) => {
  817. if (citem.courseList.some((x) => x.courseId == item.courseId)) {
  818. this.teacherList = citem.teaList;
  819. }
  820. });
  821. }
  822. this.sectionItem = {};
  823. this.toggleCourseShow = false;
  824. this.courseId = item.courseId;
  825. this.originOnShow();
  826. },
  827. clickLeft() {
  828. uni.switchTab({
  829. url: "/pages/learn/index",
  830. });
  831. },
  832. toBack(delta = 1) {
  833. uni.navigateBack({
  834. delta,
  835. });
  836. },
  837. markConfirm() {
  838. uni.setClipboardData({
  839. data: this.markContent,
  840. success: () => {
  841. setTimeout(this.toBack, 1000);
  842. },
  843. });
  844. },
  845. noticeConfirm() {
  846. if (this.CountTo <= 0) {
  847. this.noticeShow = false;
  848. if (this.autoplay) {
  849. this.refPlv && this.refPlv.resumeVideo();
  850. }
  851. this.$api.baseHandoutTip({
  852. orderGoodsId: this.orderGoodsId,
  853. });
  854. }
  855. },
  856. baseHandoutTipList() {
  857. this.$api
  858. .baseHandoutTipList({
  859. orderGoodsId: this.orderGoodsId,
  860. })
  861. .then((res) => {
  862. if (res.data.rows.length == 0) {
  863. this.noticeShow = true;
  864. this.CountTo = 30;
  865. var timer = setInterval(() => {
  866. this.CountTo--;
  867. if (this.CountTo < 0) {
  868. clearInterval(timer);
  869. }
  870. }, 1000);
  871. }
  872. });
  873. },
  874. /**
  875. * 获取上次观看的直播
  876. */
  877. studyRecordGetLastLive() {
  878. this.$api
  879. .studyRecordGetLastLive({
  880. orderGoodsId: this.orderGoodsId,
  881. courseId: this.courseId,
  882. })
  883. .then((res) => {
  884. this.updateLiveLast(res.data.data);
  885. });
  886. },
  887. async initPlayVideo(sectionItem) {
  888. this.moduleId = sectionItem.moduleId || 0;
  889. this.chapterId = sectionItem.chapterId || 0;
  890. this.sectionItem = sectionItem;
  891. if (sectionItem.sectionType == 1) {
  892. //录播
  893. this.playVideo(sectionItem);
  894. } else if (sectionItem.sectionType == 2) {
  895. //直播
  896. this.studyRecordGetLastLive();
  897. } else if (sectionItem.sectionType == 3) {
  898. //回放
  899. this.playVideo(sectionItem);
  900. } else if (sectionItem.doType == 2) {
  901. uni.showModal({
  902. title: "温馨提示",
  903. content: "当前节视频已学完,是否进入考试?",
  904. success: (res) => {
  905. if (res.confirm) {
  906. this.toQuestionBank(sectionItem);
  907. }
  908. },
  909. });
  910. return;
  911. }
  912. },
  913. async submitPhoto(url, compareFaceData) {
  914. this.ossAvatarUrl = url;
  915. this.compareFaceData = compareFaceData;
  916. this.postCoursePhotoRecord()
  917. .then(async (res) => {
  918. console.log("showCamera1", this.showCamera)
  919. this.photoHistoryList[this.photoIndex] = true;
  920. await this.postStudyRecord();
  921. this.closeCamera();
  922. if (this.isReach) {
  923. console.log("showCamera2", this.showCamera)
  924. await this.postStudyRecord(1);
  925. this.nextSection();
  926. console.log("showCamera3", this.showCamera)
  927. return;
  928. }
  929. console.log("showCamera4", this.showCamera)
  930. this.refPlv.resumeVideo();
  931. })
  932. .catch((err) => {
  933. uni.showToast({
  934. title: "上传接口报错,请重新拍照上传" + err,
  935. icon: "none",
  936. });
  937. this.$refs["camera"].reTake();
  938. });
  939. },
  940. toQuestionBank(sectionItem) {
  941. // type 1模块 2章 3节 4章卷 5模块卷
  942. uni.navigateTo({
  943. url: "/pages2/class/questionBank?courseId=" +
  944. this.courseId +
  945. "&gradeId=" +
  946. this.gradeId +
  947. "&isFromVideo=1&id=" +
  948. sectionItem.id +
  949. "&goodsid=" +
  950. this.goodsId +
  951. "&moduleId=" +
  952. (sectionItem.moduleId || 0) +
  953. "&chapterId=" +
  954. (sectionItem.chapterId || 0) +
  955. "&orderGoodsId=" +
  956. this.orderGoodsId +
  957. "&type=" +
  958. (sectionItem.type == 4 ? 1 : 3) +
  959. "&learning=" +
  960. sectionItem.studyStatus +
  961. "&isBackVideo=" +
  962. 1,
  963. });
  964. },
  965. studyRecordQueryLiveLast() {
  966. this.$api
  967. .studyRecordQueryLiveLast({
  968. gradeId: this.gradeId,
  969. orderGoodsId: this.orderGoodsId,
  970. courseId: this.courseId,
  971. })
  972. .then((res) => {
  973. let {
  974. data
  975. } = res.data;
  976. if(data && data.endTime > parseInt(new Date().getTime() / 1000)){
  977. uni.showModal({
  978. showCancel: false,
  979. title: "提示",
  980. content: "当前无法学习,"+ this.$method.timestampToTime(data.endTime,false) +"过后可继续学习",
  981. success: (resultst) => {
  982. uni.navigateBack();
  983. },
  984. });
  985. return
  986. }
  987. if (!data.sectionId) {
  988. data = this.menuAllList[0];
  989. }
  990. if (data.learning == 1 && this.orderNum == 2) {
  991. let next = this.menuAllList.find((e) => e.studyStatus != 1);
  992. next && (data = next);
  993. }
  994. this.initPlayVideo(data);
  995. });
  996. },
  997. async goLive(item) {
  998. let moduleId = item.moduleId || 0;
  999. let chapterId = item.chapterId || 0;
  1000. let sectionId = item.sectionId || item.menuId;
  1001. let uuid = new Date().valueOf() + "";
  1002. if (!this.userInfo) {
  1003. await this.$store.dispatch('getUserInfo')
  1004. }
  1005. // buyCourse 是否购买课程:1是 0否
  1006. let encode = encodeURIComponent(
  1007. this.other.hostLive +
  1008. "/pages/live/index?token=" +
  1009. uni.getStorageSync("token") +
  1010. "&userInfo=" +
  1011. JSON.stringify(this.userInfo) +
  1012. "&channelId=" +
  1013. item.liveUrl +
  1014. "&gradeId=" +
  1015. this.gradeId +
  1016. "&courseId=" +
  1017. this.courseId +
  1018. "&goodsId=" +
  1019. this.goodsId +
  1020. "&orderGoodsId=" +
  1021. this.orderGoodsId +
  1022. "&sectionId=" +
  1023. sectionId +
  1024. "&chapterId=" +
  1025. chapterId +
  1026. "&moduleId=" +
  1027. moduleId +
  1028. "&buyCourse=1" +
  1029. "&ident=" +
  1030. uuid
  1031. );
  1032. uni.navigateTo({
  1033. url: `/pages5/webview/index?url=` + encode,
  1034. });
  1035. },
  1036. studyRecordMenuAllList() {
  1037. // study/record/menuAllList
  1038. return this.$api
  1039. .studMenuAllList({
  1040. courseId: this.courseId,
  1041. ...this.params(["goodsId", "orderGoodsId", "gradeId"]),
  1042. })
  1043. .then((res) => {
  1044. let nowTime = Number(new Date().getTime() / 1000).toFixed(0);
  1045. if (res.data.data) {
  1046. this.menuAllList = res.data.data.filter(
  1047. (e) => e.doType != 1 || (e.doType == 2 && e.studyStatus == 1)
  1048. );
  1049. this.livingItem = res.data.data.find(
  1050. (item) =>
  1051. item.liveStartTime <= nowTime && item.liveEndTime > nowTime
  1052. );
  1053. }
  1054. return Promise.resolve();
  1055. });
  1056. },
  1057. async getbaseprofiletplists() {
  1058. let {
  1059. data: {
  1060. code,
  1061. rows
  1062. },
  1063. } = await this.$api.getbaseprofiletplists({
  1064. goodsId: this.goodsId,
  1065. orderGoodsId: this.orderGoodsId,
  1066. });
  1067. if (code === 200 && rows.length && rows[0].keyValue) {
  1068. let baseRes = await this.$api.getbaseprofiletpId(this.goodsId);
  1069. if (baseRes.data.code === 200 && baseRes.data.data) {
  1070. let {
  1071. data: {
  1072. code,
  1073. data
  1074. },
  1075. } = await this.$api.getbaseprofiletpgetInfo({
  1076. goodsId: this.goodsId,
  1077. orderGoodsId: this.orderGoodsId,
  1078. });
  1079. if (
  1080. code === 200 &&
  1081. (!data || (data.status === 3 && data.changeStatus === 1))
  1082. ) {
  1083. uni.showModal({
  1084. content: !data ?
  1085. "请前往填写资料" : "资料审核不通过,请前往重新填写",
  1086. cancelText: "返回",
  1087. success: (resultst) => {
  1088. if (resultst.confirm) {
  1089. this.$navTo.togo("/pages2/verify/input", {
  1090. id: this.goodsId,
  1091. orderGoodsId: this.orderGoodsId,
  1092. });
  1093. }
  1094. if (resultst.cancel) {
  1095. uni.navigateBack();
  1096. }
  1097. },
  1098. });
  1099. return Promise.reject();
  1100. } else if (data.status === 1 && JSON.parse(rows[0].keyValue2)[0] && false) {
  1101. let {
  1102. data: {
  1103. code,
  1104. data
  1105. },
  1106. } = await this.$api.getbaseprofileStampgetInfo({
  1107. goodsId: this.goodsId,
  1108. orderGoodsId: this.orderGoodsId,
  1109. });
  1110. if (
  1111. code === 200 &&
  1112. (!data || (data.status === 3 && data.changeStatus === 1))
  1113. ) {
  1114. uni.showModal({
  1115. content: !data ?
  1116. "请前往填写盖章资料" : "资料盖章审核不通过,请前往重新填写",
  1117. cancelText: "返回",
  1118. success: (resultst) => {
  1119. if (resultst.confirm) {
  1120. this.$navTo.togo("/pages2/verify/input2", {
  1121. id: this.goodsId,
  1122. orderGoodsId: this.orderGoodsId,
  1123. });
  1124. }
  1125. if (resultst.cancel) {
  1126. uni.navigateBack();
  1127. }
  1128. },
  1129. });
  1130. return Promise.reject();
  1131. }
  1132. } else if (data.status !== 1 && baseRes.data.data.checkStatus == 1) {
  1133. uni.showModal({
  1134. content: "资料正在审核中,暂无法学习,请耐心等待!如需加急审核,请联系客服人员",
  1135. cancelText: "返回",
  1136. success: (resultst) => {
  1137. if (resultst.confirm) {
  1138. uni.switchTab({
  1139. url: '/pages/learn/index'
  1140. });
  1141. }
  1142. if (resultst.cancel) {
  1143. uni.switchTab({
  1144. url: '/pages/learn/index'
  1145. });
  1146. }
  1147. },
  1148. });
  1149. return Promise.reject();
  1150. }
  1151. }
  1152. }
  1153. return Promise.resolve();
  1154. },
  1155. async isCanLearn() {
  1156. await this.qCheckIsCanLearn();
  1157. await this.getGradeInfo();
  1158. await this.getGoodsDetail();
  1159. },
  1160. /**
  1161. * 计算tabs宽度
  1162. */
  1163. itemWidth() {
  1164. return 100 / this.list.length + "%";
  1165. },
  1166. loadedmetadata(event) {
  1167. if (this.playSource == 2) {
  1168. this.refPlv = this.$refs.player2;
  1169. } else {
  1170. this.refPlv = this.$refs.player;
  1171. }
  1172. },
  1173. getPhotoLastRecord() {
  1174. let {
  1175. chapterId,
  1176. sectionId,
  1177. moduleId
  1178. } = this.sectionItem;
  1179. let data = {
  1180. ...this.params(),
  1181. sectionId: sectionId || 0,
  1182. gradeId: this.gradeId,
  1183. chapterId: chapterId || 0,
  1184. moduleId: moduleId || 0,
  1185. };
  1186. this.$api.getPhotoLastRecord(data).then((res) => {
  1187. if (res.data.code == 200) {
  1188. //清空历史数据
  1189. this.photoHistoryList = [];
  1190. this.photoList = [];
  1191. for (let i = 0; i < res.data.data.length; i++) {
  1192. //-2存储随机拍照数组
  1193. if (res.data.data[i].photoIndex == -2) {
  1194. this.photoList =
  1195. res.data.data[i].timeInterval &&
  1196. res.data.data[i].timeInterval.split(",");
  1197. } else {
  1198. this.photoHistoryList.push(res.data.data[i].photoIndex);
  1199. }
  1200. }
  1201. }
  1202. });
  1203. },
  1204. //postTime 只提交随机时间
  1205. postCoursePhotoRecord(postTime = false) {
  1206. return new Promise((resolve, reject) => {
  1207. let data = {
  1208. ...this.params(["orderGoodsId", "goodsId", "courseId", "gradeId"]),
  1209. photo: this.ossAvatarUrl,
  1210. sectionId: this.sectionId,
  1211. photoTime: this.playTime || 0,
  1212. photoIndex: postTime ? -2 : this.photoIndex, //从0算起,-2只提交随机时间
  1213. photoNum: this.photoNum,
  1214. chapterId: this.chapterId,
  1215. moduleId: this.moduleId,
  1216. timeInterval: postTime ? this.photoList.join(",") : "",
  1217. };
  1218. this.$api
  1219. .coursePhotoRecord(data)
  1220. .then((res) => {
  1221. if (res.data.code == 200) {
  1222. resolve();
  1223. } else {
  1224. reject();
  1225. }
  1226. })
  1227. .catch((err) => {
  1228. reject();
  1229. });
  1230. });
  1231. },
  1232. randomNum(minNum, maxNum) {
  1233. switch (arguments.length) {
  1234. case 1:
  1235. return parseInt(Math.random() * minNum + 1, 10);
  1236. break;
  1237. case 2:
  1238. return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  1239. break;
  1240. default:
  1241. return 0;
  1242. break;
  1243. }
  1244. },
  1245. //配置随机拍照时间
  1246. configPhoto(duration) {
  1247. if ((this.photoConfig && this.photoList.length) || !this.isPlaying) {
  1248. return;
  1249. }
  1250. let totalVideoTime = this.refPlv.getDuration();
  1251. this.photoConfig = true;
  1252. if (this.erJianErZao) {
  1253. this.photoList = this.randomConfig(totalVideoTime, duration);
  1254. console.log(this.photoList, "this.photoList");
  1255. return;
  1256. }
  1257. //没有历史拍照间隔数据
  1258. if (!this.photoList || this.photoList.length == 0) {
  1259. // 46 * 60
  1260. this.photoList = this.commonConfig(
  1261. totalVideoTime,
  1262. this.jjShiGongYuan ? totalVideoTime < 2760 ? (46 * 60) - 1 : (45 * 60) - 1 : undefined
  1263. );
  1264. this.postCoursePhotoRecord(true); //提交随机拍照时间数组
  1265. }
  1266. console.log(this.photoList, "this.photoList");
  1267. },
  1268. // 二建随机拍摄时间
  1269. randomConfig(totalVideoTime, duration) {
  1270. this.photoHistoryList = [];
  1271. let photoList = [duration];
  1272. let pre = duration;
  1273. if (totalVideoTime > 300) {
  1274. while (pre <= totalVideoTime) {
  1275. pre += this.randomNum(780, 900);
  1276. pre <= totalVideoTime && photoList.push(pre);
  1277. }
  1278. if (totalVideoTime - 300 > photoList.slice(-1)[0]) {
  1279. photoList.push(this.randomNum(totalVideoTime - 180, totalVideoTime));
  1280. }
  1281. }
  1282. return photoList;
  1283. },
  1284. // 随机前后五分钟
  1285. commonConfig(totalVideoTime, fixS) {
  1286. let photoList = [];
  1287. // 固定间隔时间取
  1288. if (fixS) {
  1289. let num = Math.ceil(totalVideoTime / fixS);
  1290. if (num == 1) {
  1291. photoList.push(parseInt(totalVideoTime / 2));
  1292. } else {
  1293. for (let i = 0; i < num; i++) {
  1294. photoList.push(parseInt((totalVideoTime / (num + 1)) * (i + 1)));
  1295. }
  1296. }
  1297. this.photoNum = num;
  1298. } else {
  1299. photoList = [0];
  1300. if (this.photoNum == 3) {
  1301. if (totalVideoTime >= 900) {
  1302. //大于15分钟
  1303. let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
  1304. let centerMinTime = centerTime - 300; //前后5分钟
  1305. let centerMaxTime = centerTime + 300;
  1306. let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
  1307. photoList.push(centerTakeTime); //中间拍一张
  1308. let endMaxTime = totalVideoTime - 60;
  1309. let endMinTime = totalVideoTime - 300;
  1310. let endTakeTime = this.randomNum(endMinTime, endMaxTime);
  1311. photoList.push(endTakeTime); //最后拍一张
  1312. } else {
  1313. //小于15分钟
  1314. let centerTime = this.randomNum(
  1315. (1 / 3) * totalVideoTime,
  1316. (2 / 3) * totalVideoTime
  1317. );
  1318. photoList.push(centerTime);
  1319. let endTakeTime = this.randomNum(
  1320. (2 / 3) * totalVideoTime,
  1321. totalVideoTime
  1322. );
  1323. photoList.push(endTakeTime);
  1324. }
  1325. }
  1326. }
  1327. return photoList;
  1328. },
  1329. studyNotice() {
  1330. this.noticeShow = true;
  1331. },
  1332. //正常播放视频
  1333. async playVideo(item) {
  1334. let {
  1335. learning,
  1336. videoCurrentTime,
  1337. recordingUrl
  1338. } = item;
  1339. this.videoCurrentTime =
  1340. videoCurrentTime || (await this.getRecordLast(item));
  1341. // 往前播3秒
  1342. if (this.videoCurrentTime > 3) {
  1343. this.videoCurrentTime -= 3;
  1344. }
  1345. this.sectionItem = item;
  1346. // 查找拍照历史
  1347. if ((this.photoNum > 0 || this.jjShiGongYuan || this.erJianErZao) && learning != 1) {
  1348. await this.getPhotoLastRecord();
  1349. }
  1350. if (this.refPlv) {
  1351. if (this.playSource == 2) {
  1352. this.refPlv.changeFileId({
  1353. fileId: recordingUrl,
  1354. currentTime: this.videoCurrentTime,
  1355. });
  1356. } else {
  1357. this.refPlv.changeVid({
  1358. vid: recordingUrl,
  1359. videoCurrentTime: this.videoCurrentTime,
  1360. });
  1361. }
  1362. }
  1363. },
  1364. getRecordLast(sectionItem) {
  1365. let {
  1366. chapterId,
  1367. sectionId,
  1368. courseId,
  1369. moduleId
  1370. } = sectionItem;
  1371. return new Promise((resolve) => {
  1372. let data = {
  1373. ...this.params(),
  1374. gradeId: this.gradeId || this.gradeId == 0 ? Number(this.gradeId) : null,
  1375. sectionId: sectionId || 0,
  1376. chapterId: chapterId || 0,
  1377. moduleId: moduleId || 0,
  1378. };
  1379. this.$api.recordLast(data).then((res) => {
  1380. resolve(res.data.data.videoCurrentTime);
  1381. });
  1382. });
  1383. },
  1384. jumpNote(item) {
  1385. this.$u.toast("即将跳到笔记位置");
  1386. if (this.sectionId != item.sectionId) {
  1387. this.initPlayVideo({
  1388. sectionType: 1,
  1389. ...item,
  1390. videoCurrentTime: Number(item.noteSecond),
  1391. });
  1392. } else {
  1393. this.refPlv.seekVideo(item.noteSecond);
  1394. }
  1395. },
  1396. getGradeInfo() {
  1397. // 即刻 1 待定2 日期3
  1398. return this.$api.goodsGradeInfo(this.gradeId).then((res) => {
  1399. if (res.data.code == 200) {
  1400. let {
  1401. data
  1402. } = res.data;
  1403. if (
  1404. data.learningStatus == 2 ||
  1405. (data.learningStatus == 3 &&
  1406. Number(data.learningTimeStart) > Number(new Date() / 1000))
  1407. ) {
  1408. uni.showModal({
  1409. showCancel: false,
  1410. confirmText: "确定",
  1411. content: "当前课程正在申请中,正式开班后方可进行学习,请耐心等候!",
  1412. success: function(resultst) {
  1413. uni.navigateBack();
  1414. },
  1415. });
  1416. return Promise.reject();
  1417. }
  1418. }
  1419. });
  1420. },
  1421. postStudyRecord(status = 0, sectionId = this.sectionId) {
  1422. if (!this.refPlv && this.playVid) {
  1423. return;
  1424. }
  1425. let currentTime = this.refPlv.playCurrentTime();
  1426. let PlayDuration = this.refPlv.playVideoTime();
  1427. if (currentTime < 10 && !this.ossAvatarUrl) {
  1428. if (status == 0) return;
  1429. currentTime = this.playTime;
  1430. }
  1431. let self = this;
  1432. let fromPlat = 1;
  1433. // #ifdef H5
  1434. fromPlat = 3;
  1435. // #endif
  1436. let data = {
  1437. ...this.params([
  1438. "orderGoodsId",
  1439. "goodsId",
  1440. "courseId",
  1441. "erJianErZao",
  1442. "gradeId",
  1443. ]),
  1444. fromPlat, //来源平台 1小程序 2网站
  1445. photo: self.ossAvatarUrl,
  1446. sectionId: sectionId || 0,
  1447. studyDuration: parseInt(PlayDuration),
  1448. chapterId: this.chapterId || 0,
  1449. moduleId: this.moduleId || 0,
  1450. videoCurrentTime: parseInt(currentTime),
  1451. };
  1452. if (this.ossAvatarUrl) {
  1453. data.similarity = this.compareFaceData; // 相似度
  1454. }
  1455. if (status > 0) {
  1456. data.status = status;
  1457. }
  1458. console.log(data, "记录参数");
  1459. return new Promise((resolve, reject) => {
  1460. this.$api
  1461. .studyRecord(data)
  1462. .then((res) => {
  1463. console.log(res, "记录返回");
  1464. let {
  1465. code,
  1466. msg
  1467. } = res.data;
  1468. if (code == 200) {
  1469. if (status > 0) {
  1470. // 刷新数据
  1471. uni.$emit("playEnd");
  1472. this.studyRecordMenuAllList();
  1473. }
  1474. self.ossAvatarUrl = "";
  1475. } else if (code == 600) {
  1476. uni.showModal({
  1477. showCancel: false,
  1478. title: "提示",
  1479. content: msg,
  1480. success: (resultst) => {
  1481. uni.navigateBack();
  1482. },
  1483. });
  1484. this.closeCamera();
  1485. return
  1486. } else if (code == 558) {
  1487. this.CountTo1 = msg.split(",")[1];
  1488. this.noticeShow1 = true;
  1489. var timer = setInterval(() => {
  1490. this.CountTo1--;
  1491. if (this.CountTo1 < 0) {
  1492. this.noticeShow1 = false;
  1493. clearInterval(timer);
  1494. this.postStudyRecord(1).then(this.nextSection);
  1495. }
  1496. }, 1000);
  1497. this.closeCamera();
  1498. return
  1499. } else {
  1500. uni.showToast({
  1501. icon: "none",
  1502. title: res.data.msg,
  1503. duration: 2000,
  1504. });
  1505. if (code == 559) {
  1506. this.isReach = true;
  1507. this.openCamera()
  1508. }
  1509. return
  1510. }
  1511. resolve();
  1512. })
  1513. .catch((err) => {
  1514. this.studyRecordMenuAllList();
  1515. });
  1516. });
  1517. },
  1518. timeEvent(time) {
  1519. console.log(this.refPlv.getDuration(), 'getDurationgetDuration')
  1520. this.clearPauseTimer();
  1521. if (this.playSecIsLearn && (this.erJianErZao || this.jjShiGongYuan || this.photoNum > 0)) {
  1522. this.configPhoto(time);
  1523. this.isReach = false;
  1524. const index = this.photoList.findIndex((e) => e < time && e > time - 8);
  1525. if (index != -1 && !this.photoHistoryList[index] && this.photoHistoryList[index] != 0) {
  1526. this.photoIndex = index;
  1527. // 拍照
  1528. this.openCamera();
  1529. }
  1530. }
  1531. },
  1532. // 新增用户视频学习日志
  1533. studyLog() {
  1534. this.$http({
  1535. url: "/user/study/log",
  1536. method: "post",
  1537. data: {
  1538. ...this.params(),
  1539. moduleId: this.moduleId || 0,
  1540. chapterId: this.chapterId || 0,
  1541. sectionId: this.sectionId || 0,
  1542. fromPlat: 1, //来源平台 1小程序 2PC网站
  1543. goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
  1544. },
  1545. }).then((res) => {});
  1546. },
  1547. timeupdate(time) {
  1548. // console.log("🚀 ~ file: detail.vue:1498 ~ timeupdate ~ time:");
  1549. if (this.noticeShow) {
  1550. this.refPlv.playPause();
  1551. return;
  1552. }
  1553. this.playTime = time;
  1554. this.throttleFn();
  1555. this.timeEvent(time);
  1556. },
  1557. playing() {
  1558. //特殊设备跳过拍照停止学习
  1559. if (this.showCamera) {
  1560. this.refPlv.playPause();
  1561. this.refPlv.exitFullScreen();
  1562. return;
  1563. }
  1564. this.isPlaying = true;
  1565. this.clearPauseTimer();
  1566. },
  1567. openCamera() {
  1568. if (this.showCamera) return;
  1569. this.showCamera = true;
  1570. this.refPlv.playPause();
  1571. this.refPlv.exitFullScreen();
  1572. },
  1573. closeCamera() {
  1574. console.log("关闭")
  1575. this.showCamera = false;
  1576. },
  1577. pause() {
  1578. console.log("视频暂停");
  1579. this.isPlaying = false;
  1580. this.erJianErZaoPauseTip();
  1581. },
  1582. async ended() {
  1583. console.log("视频播放完毕");
  1584. this.isPlaying = false;
  1585. uni.showToast({
  1586. icon: "none",
  1587. title: "播放完毕",
  1588. });
  1589. this.clearPauseTimer();
  1590. await this.postStudyRecord(1);
  1591. this.nextSection();
  1592. },
  1593. playerError() {
  1594. console.log("播放错误");
  1595. },
  1596. //播放下一节
  1597. nextSection() {
  1598. console.log("播放下一节");
  1599. if (!this.menuAllList.length) {
  1600. return;
  1601. }
  1602. this.curPlayIndex = this.menuAllList.findIndex((item) => {
  1603. let i_sectionId = item.sectionId || 0;
  1604. let i_chapterId = item.chapterId || 0;
  1605. let i_moduleId = item.moduleId || 0;
  1606. return (
  1607. i_sectionId == this.sectionId &&
  1608. i_chapterId == this.chapterId &&
  1609. i_moduleId == this.moduleId
  1610. );
  1611. });
  1612. let data = this.menuAllList[this.curPlayIndex + 1];
  1613. data.learning = data.learning || data.studyStatus
  1614. if (!data) {
  1615. //第二个弹窗
  1616. uni.showModal({
  1617. title: "温馨提示",
  1618. content: "恭喜您课程学习全部完成,教务会在1-3个工作日内完成学习初审,请耐心等待。",
  1619. showCancel: !this.erJianErZao,
  1620. success: (res) => {
  1621. if (res.confirm) {
  1622. uni.switchTab({
  1623. url: "/pages/learn/index",
  1624. });
  1625. }
  1626. },
  1627. });
  1628. } else {
  1629. if (data.doType == 2) {
  1630. if (data.studyStatus == 1) {
  1631. uni.showToast({
  1632. title: "试卷已合格!",
  1633. duration: 2000,
  1634. icon: "none",
  1635. });
  1636. return;
  1637. }
  1638. uni.showModal({
  1639. title: "温馨提示",
  1640. content: "当前节视频已学完,是否进入考试?",
  1641. success: (res) => {
  1642. if (res.confirm) {
  1643. this.toQuestionBank(data);
  1644. }
  1645. },
  1646. });
  1647. return;
  1648. }
  1649. uni.showModal({
  1650. title: "温馨提示",
  1651. content: "当前节视频已学完,继续学习下一节?",
  1652. success: async (res) => {
  1653. if (res.confirm) {
  1654. this.moduleId = data.moduleId;
  1655. this.chapterId = data.chapterId;
  1656. this.sectionId = data.sectionId;
  1657. if (data.sectionType == 1) {
  1658. //录播
  1659. this.photoConfig = false;
  1660. this.sectionItem = data;
  1661. this.playVideo(data);
  1662. } else if (data.sectionType == 2) {
  1663. //直播
  1664. this.studyRecordGetLastLive();
  1665. } else if (data.sectionType == 3) {
  1666. //回放
  1667. this.sectionItem = data;
  1668. this.playVideo(data);
  1669. }
  1670. this.updateChapterOpen(true);
  1671. }
  1672. },
  1673. });
  1674. }
  1675. },
  1676. async userConfirmInfoDetail() {
  1677. let info = await this.$api.userConfirmInfoDetail({
  1678. orderGoodsId: this.orderGoodsId,
  1679. });
  1680. if (!info.data.data || info.data.data.pushInfo !== 1) {
  1681. uni.showModal({
  1682. showCancel: false,
  1683. title: "提示",
  1684. content: "开通信息推送不成功,无法进入学习!",
  1685. success: (resultst) => {
  1686. uni.navigateBack();
  1687. },
  1688. });
  1689. return Promise.reject();
  1690. }
  1691. },
  1692. checkFinishRequiredCourse() {
  1693. return this.$api
  1694. .checkFinishRequiredCourse({
  1695. businessId: this.goodsData.businessId,
  1696. goodsId: this.goodsId,
  1697. })
  1698. .then((res) => {
  1699. if (res.data.code == 200) {
  1700. if (res.data.data > 0) {
  1701. uni.showModal({
  1702. showCancel: false,
  1703. confirmText: "确定",
  1704. content: "该业务层次下有未学完的商品,无法学习新商品!",
  1705. success: function(resultst) {
  1706. uni.navigateBack();
  1707. },
  1708. });
  1709. return Promise.reject();
  1710. }
  1711. return Promise.resolve();
  1712. } else {
  1713. uni.showModal({
  1714. showCancel: false,
  1715. confirmText: "确定",
  1716. content: res.data.msg,
  1717. success: function(resultst) {
  1718. uni.navigateBack();
  1719. },
  1720. });
  1721. return Promise.reject();
  1722. }
  1723. })
  1724. },
  1725. async getGoodsDetail() {
  1726. let {
  1727. data
  1728. } = await this.$api.goodsDetail(this.goodsId);
  1729. this.goodsData = data.data;
  1730. if (data.data.firstChoiceStatus) {
  1731. uni.redirectTo({
  1732. url: `/pages3/polyv/preference?courseId=${this.courseId}&goodsId=${data.data.goodsId}&orderGoodsId=${this.orderGoodsId}&gradeId=${data.data.gradeId}&minClassHour=${data.data.minClassHour || 0}`,
  1733. });
  1734. return
  1735. }
  1736. await this.getbaseprofiletplists();
  1737. this.erJianErZao = this.goodsData.erJianErZao;
  1738. this.jjShiGongYuan = this.goodsData.jjShiGongYuan;
  1739. if (this.erJianErZao || this.jjShiGongYuan) {
  1740. await this.userConfirmInfoDetail();
  1741. }
  1742. if (this.erJianErZao) {
  1743. await this.checkFinishRequiredCourse()
  1744. }
  1745. this.goodsData.buyNote && this.baseHandoutTipList();
  1746. !this.gradeId && (this.gradeId = this.goodsData.gradeId);
  1747. if (this.goodsData.goodsPlayConfig) {
  1748. this.goodsPlayConfig = JSON.parse(this.goodsData.goodsPlayConfig);
  1749. if (this.goodsPlayConfig.autoPlay > 0) {
  1750. this.autoplay = true;
  1751. }
  1752. if (this.goodsPlayConfig.drag > 0 && !this.erJianErZao) {
  1753. if (this.playSource == 2) {
  1754. this.isAllowSeek = true;
  1755. } else {
  1756. // #ifdef MP-WEIXIN
  1757. this.isAllowSeek = "yes";
  1758. // #endif
  1759. // #ifdef H5
  1760. this.isAllowSeek = "off";
  1761. // #endif
  1762. }
  1763. }
  1764. if (this.goodsPlayConfig.speed > 0) {
  1765. this.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
  1766. }
  1767. }
  1768. if (this.goodsData.goodsPhotographConfig) {
  1769. this.goodsPhotographConfig = JSON.parse(
  1770. this.goodsData.goodsPhotographConfig
  1771. );
  1772. if (this.goodsPhotographConfig.photoNum > 0) {
  1773. this.photoNum = this.goodsPhotographConfig.photoNum;
  1774. }
  1775. }
  1776. },
  1777. change(index) {
  1778. this.current = index;
  1779. },
  1780. paramsFn(
  1781. keys = ["orderGoodsId", "goodsId", "courseId", "gradeId", "sectionItem"]
  1782. ) {
  1783. return this.params(keys);
  1784. },
  1785. },
  1786. provide() {
  1787. return {
  1788. paramsFn: this.paramsFn,
  1789. };
  1790. },
  1791. };
  1792. </script>
  1793. <style lang="scss" scope>
  1794. @import "./css/detail.scss";
  1795. .top {
  1796. &__header {
  1797. position: relative;
  1798. width: 100%;
  1799. height: 150rpx;
  1800. padding: 24rpx 150rpx 24rpx 24rpx;
  1801. .img {
  1802. position: absolute;
  1803. left: 0;
  1804. top: 0;
  1805. width: 100%;
  1806. }
  1807. .note {
  1808. position: relative;
  1809. z-index: 10;
  1810. font-size: 24rpx;
  1811. font-family: PingFang SC;
  1812. font-weight: bold;
  1813. color: #efdbff;
  1814. }
  1815. .title {
  1816. position: relative;
  1817. z-index: 10;
  1818. font-size: 26rpx;
  1819. font-family: PingFang SC;
  1820. font-weight: bold;
  1821. color: #ffffff;
  1822. }
  1823. }
  1824. }
  1825. #top {
  1826. position: relative;
  1827. z-index: 99;
  1828. }
  1829. .polyv_detail {
  1830. display: flex;
  1831. flex-direction: column;
  1832. height: 100vh;
  1833. position: relative;
  1834. top: 0;
  1835. left: 0;
  1836. .pops {
  1837. position: absolute;
  1838. top: 0;
  1839. left: 0;
  1840. background: #ccc;
  1841. opacity: 0.5;
  1842. width: 100%;
  1843. height: 300rpx;
  1844. z-index: 9999;
  1845. }
  1846. .box {
  1847. flex: 1;
  1848. overflow: hidden;
  1849. margin: 16rpx 16rpx 100rpx 16rpx;
  1850. .box_in {
  1851. height: 100%;
  1852. }
  1853. }
  1854. .first_ml {
  1855. margin: 16rpx 16rpx 16rpx 16rpx;
  1856. }
  1857. }
  1858. .title {
  1859. font-size: 24rpx;
  1860. color: #999999;
  1861. }
  1862. page {
  1863. background: #eaeef1;
  1864. }
  1865. .ts {
  1866. font-size: 24rpx;
  1867. color: #999;
  1868. margin: 14rpx 0rpx;
  1869. padding-right: 29rpx;
  1870. padding-left: 34rpx;
  1871. }
  1872. .content {
  1873. padding: 24rpx;
  1874. text-align: left;
  1875. }
  1876. .sc_t {
  1877. font-size: 22rpx;
  1878. color: #000000;
  1879. }
  1880. .sc {
  1881. width: 29rpx;
  1882. height: 29rpx;
  1883. }
  1884. .buy {
  1885. width: 138rpx;
  1886. height: 48rpx;
  1887. line-height: 48rpx;
  1888. background: #32467b;
  1889. border-radius: 10rpx;
  1890. color: #ffffff;
  1891. font-size: 28rpx;
  1892. text-align: center;
  1893. vertical-align: middle;
  1894. position: absolute;
  1895. right: 30rpx;
  1896. }
  1897. .video_body {
  1898. padding-bottom: 96rpx;
  1899. }
  1900. .tj_box {
  1901. width: 50%;
  1902. display: inline-block;
  1903. text-align: center;
  1904. margin: 10rpx 0;
  1905. }
  1906. .t2 {
  1907. font-size: 24rpx;
  1908. font-family: PingFang SC;
  1909. color: #666666;
  1910. line-height: 36rpx;
  1911. margin: 15rpx;
  1912. }
  1913. .r_t2 {
  1914. width: 201rpx;
  1915. height: 49rpx;
  1916. background: rgba(22, 119, 255, 0.05);
  1917. border: 1rpx solid #32467b;
  1918. border-radius: 16rpx;
  1919. color: #666666;
  1920. font-size: 23rpx;
  1921. text-align: center;
  1922. display: flex;
  1923. align-items: center;
  1924. padding: 5rpx;
  1925. }
  1926. .scroll_box {
  1927. width: 100%;
  1928. height: 60rpx;
  1929. background: #ffffff;
  1930. box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  1931. white-space: nowrap;
  1932. overflow: hidden;
  1933. margin: 15rpx 0;
  1934. }
  1935. .r_sliper {
  1936. padding: 0 20rpx;
  1937. }
  1938. .top_line {
  1939. width: 6rpx;
  1940. height: 22rpx;
  1941. background: #32467b;
  1942. margin-right: 10rpx;
  1943. }
  1944. .video_t2 {
  1945. font-size: 24rpx;
  1946. font-family: PingFang SC;
  1947. font-weight: 500;
  1948. color: #666666;
  1949. }
  1950. .video_play {
  1951. position: absolute;
  1952. width: 95rpx;
  1953. height: 95rpx;
  1954. top: 0;
  1955. left: 0;
  1956. right: 0;
  1957. bottom: 0;
  1958. margin: auto;
  1959. }
  1960. .video_box {
  1961. position: relative;
  1962. }
  1963. .slot-content {
  1964. padding: 0 20rpx;
  1965. }
  1966. .notice_modal {
  1967. .content {
  1968. width: 100%;
  1969. height: 100%;
  1970. padding: 56rpx 56rpx 56rpx 64rpx;
  1971. .title {
  1972. color: #222;
  1973. line-height: 40rpx;
  1974. font-size: 36rpx;
  1975. text-align: center;
  1976. font-weight: bold;
  1977. margin-bottom: 24rpx;
  1978. }
  1979. .text {
  1980. height: 340rpx;
  1981. line-height: 40rpx;
  1982. text-indent: 2em;
  1983. font-size: 32rpx;
  1984. color: #222;
  1985. }
  1986. .had_read {
  1987. width: 100%;
  1988. height: 88rpx;
  1989. line-height: 88rpx;
  1990. text-align: center;
  1991. background: #3577e8;
  1992. border-radius: 240rpx;
  1993. font-size: 32rpx;
  1994. font-weight: 500;
  1995. color: #fff;
  1996. margin-top: 20rpx;
  1997. &.gray {
  1998. background: #bbbec5;
  1999. }
  2000. }
  2001. }
  2002. }
  2003. </style>