detail.vue 53 KB

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