detail.vue 53 KB

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