index.vue 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477
  1. <template>
  2. <view class="learnings">
  3. <nav-logo title="学习中心"></nav-logo>
  4. <u-line color="#D6D6DB" />
  5. <view class="contents">
  6. <!-- <view class="diatance">
  7. <image class="clock" src="/static/learn/clock.png" mode=""></image>
  8. <text>
  9. 一级建造师,距离考试还有
  10. </text>
  11. <u-count-down :timestamp="leftDays" :show-days="true" separator="zh"
  12. :show-hours="false" :show-minutes="false" :show-seconds="false" font-size="28"
  13. bg-color="#007AFF" separator-color="#fff" color="#fff" separator-size="28">
  14. </u-count-down>
  15. </view> -->
  16. <!-- 有学习的课程 -->
  17. <view v-if="allCourse" class="had_courses">
  18. <!-- 直播 -->
  19. <view v-if="livingLists.length" class="lives">
  20. <view
  21. v-for="(live, l_index) in livingLists"
  22. :key="l_index"
  23. class="live_item"
  24. @click="toLiveLook(live)"
  25. >
  26. <view class="live_con">
  27. <view class="live_status">
  28. <image
  29. v-if="bgShow(live.liveStartTime, live.watchStatus)"
  30. src="/static/learn/living.png"
  31. class="liv_icon"
  32. ></image>
  33. <image
  34. v-else
  35. src="/static/learn/wlive.png"
  36. class="liv_icon"
  37. ></image>
  38. <text class="status_s">{{
  39. live.liveStartTime | liveStatus(live.watchStatus)
  40. }}</text>
  41. <view
  42. class="look_bt"
  43. :class="{
  44. living:
  45. lookTimeStatus(live.liveStartTime, live.watchStatus) == 1,
  46. futuring:
  47. lookTimeStatus(live.liveStartTime, live.watchStatus) == 4,
  48. curring: [2, 3].includes(
  49. lookTimeStatus(live.liveStartTime, live.watchStatus)
  50. ),
  51. }"
  52. >
  53. <text
  54. v-if="
  55. lookTimeStatus(live.liveStartTime, live.watchStatus) == 1
  56. "
  57. >点击观看</text
  58. >
  59. <text
  60. v-if="
  61. lookTimeStatus(live.liveStartTime, live.watchStatus) == 2
  62. "
  63. >即将开播</text
  64. >
  65. <template
  66. v-if="
  67. lookTimeStatus(live.liveStartTime, live.watchStatus) == 3
  68. "
  69. >
  70. 剩余:
  71. <u-count-down
  72. :timestamp="curTimeTamp(live.liveStartTime)"
  73. :show-days="false"
  74. color="#fff"
  75. separator-color="#fff"
  76. font-size="24"
  77. separator-size="24"
  78. bg-color="#FFB102"
  79. >
  80. </u-count-down>
  81. </template>
  82. <template
  83. v-if="
  84. lookTimeStatus(live.liveStartTime, live.watchStatus) == 4
  85. "
  86. >
  87. 剩余:
  88. <u-count-down
  89. :timestamp="curTimeTamp(live.liveStartTime)"
  90. :show-days="true"
  91. separator="zh"
  92. color="#fff"
  93. separator-color="#fff"
  94. bg-color="#007AFF"
  95. :show-hours="false"
  96. :show-minutes="false"
  97. :show-seconds="false"
  98. font-size="24"
  99. separator-size="24"
  100. >
  101. </u-count-down>
  102. <u-count-down
  103. :timestamp="curTimeTamp(live.liveStartTime)"
  104. :show-days="false"
  105. color="#fff"
  106. separator-color="#fff"
  107. bg-color="#007AFF"
  108. font-size="24"
  109. separator-size="24"
  110. >
  111. </u-count-down>
  112. </template>
  113. </view>
  114. </view>
  115. <view class="liv_time">
  116. <text class="timeR">{{
  117. live.liveStartTime | formate("mm月dd日")
  118. }}</text>
  119. <text>{{ live.liveStartTime | formate("hh:mm") }}</text>
  120. </view>
  121. <view class="liv_title">{{ live.name }}</view>
  122. </view>
  123. <image
  124. v-if="bgShow(live.liveStartTime, live.watchStatus)"
  125. src="/static/learn/living_bg.png"
  126. class="my_bg"
  127. ></image>
  128. <image
  129. v-else
  130. src="/static/learn/wlive_bg.png"
  131. class="my_bg"
  132. ></image>
  133. </view>
  134. </view>
  135. <!-- 我的课程 -->
  136. <view v-if="courseLists.length" class="my_courses">
  137. <text class="titles">我的课程</text>
  138. <view
  139. v-for="(item, index) in courseLists"
  140. :key="index"
  141. class="course_item"
  142. >
  143. <view
  144. class="titlews"
  145. @click="studyIn(item.goodsId, item.gradeId, item, index)"
  146. >
  147. <view class="cou_titles">{{ item.goodsName }}</view>
  148. <view
  149. v-if="
  150. item.serviceStartTime &&
  151. item.serviceEndTime &&
  152. !item.externalLinkStatus
  153. "
  154. class="learn_ranges"
  155. >
  156. <image
  157. class="l_range"
  158. src="/static/learn/learn_range.png"
  159. ></image>
  160. 学习周期:
  161. <text class="l_time"
  162. >{{ item.serviceStartTime | formate("yyyy.mm.dd") }}-{{
  163. item.serviceEndTime | formate("yyyy.mm.dd")
  164. }}</text
  165. >
  166. </view>
  167. </view>
  168. <!-- 状态 -->
  169. <view
  170. v-if="item.goodsType == 1"
  171. class="all_status"
  172. @click="studyIn(item.goodsId, item.gradeId, item, index)"
  173. >
  174. <template v-if="!item.externalLinkStatus">
  175. <!-- 不在学习服务期 -->
  176. <template
  177. v-if="
  178. item.serviceStartTime &&
  179. (sysTime < item.serviceStartTime ||
  180. sysTime > item.serviceEndTime)
  181. "
  182. >
  183. <view
  184. class="class-warm"
  185. v-if="item.gradeId != 0 && item.gradeStatus == 1"
  186. >
  187. <view class="class-warm__text">
  188. <view class="date"> 不在学习服务期,不可以学习了哦 </view>
  189. </view>
  190. </view>
  191. </template>
  192. <template v-else>
  193. <!-- 班级有效期过了 -->
  194. <template
  195. v-if="item.classEndTime && item.classEndTime < sysTime"
  196. >
  197. <view class="class-warm">
  198. <u-icon
  199. class="class-warm__icon"
  200. size="30"
  201. color="#FF3B30"
  202. name="error-circle-fill"
  203. >
  204. </u-icon>
  205. <view class="class-warm__text">
  206. <view class="date"
  207. >班级有效期:{{
  208. $method.timestampToTime(
  209. item.classStartTime,
  210. true,
  211. true
  212. )
  213. }}
  214. -
  215. {{
  216. $method.timestampToTime(
  217. item.classEndTime,
  218. true,
  219. true
  220. )
  221. }}</view
  222. >
  223. <view class="date"
  224. >班级状态:已过期,有疑问请联系
  225. <text @click="call()">020-87085982</text></view
  226. >
  227. </view>
  228. </view>
  229. </template>
  230. <!-- 班级有效期之前 -->
  231. <template
  232. v-else-if="
  233. item.classStartTime && item.classStartTime > sysTime
  234. "
  235. >
  236. <view class="class-warm">
  237. <u-icon
  238. class="class-warm__icon"
  239. size="30"
  240. color="#FF3B30"
  241. name="error-circle-fill"
  242. >
  243. </u-icon>
  244. <view class="class-warm__text">
  245. <view class="date"
  246. >班级有效期:{{
  247. $method.timestampToTime(
  248. item.classStartTime,
  249. true,
  250. true
  251. )
  252. }}
  253. -
  254. {{
  255. $method.timestampToTime(
  256. item.classEndTime,
  257. true,
  258. true
  259. )
  260. }}</view
  261. >
  262. <view class="date"
  263. >班级状态:未到学习时间,有疑问请联系
  264. <text @click="call()">020-87085982</text></view
  265. >
  266. </view>
  267. </view>
  268. </template>
  269. <!-- 在班级有效期之间或者没有班级有效期 -->
  270. <template v-else>
  271. <view
  272. class="class-warm"
  273. v-if="
  274. item.gradeId != 0 &&
  275. item.gradeStatus == 1 &&
  276. item.classStatus != null
  277. "
  278. >
  279. <view class="class-warm__text">
  280. <view class="date">
  281. 班级状态:
  282. <text v-if="item.classStatus == 1">已开班</text>
  283. <text v-if="item.classStatus == 0">未开班</text>
  284. </view>
  285. <view class="date" v-if="item.classStatus == 0"
  286. >教务处正在为您开通班级,请耐心等待</view
  287. >
  288. <view
  289. class="date"
  290. v-if="
  291. item.classStatus == 1 &&
  292. item.classStartTime &&
  293. item.classEndTime
  294. "
  295. >
  296. 班级有效期:{{
  297. $method.timestampToTime(
  298. item.classStartTime,
  299. true,
  300. true
  301. )
  302. }}-{{
  303. $method.timestampToTime(
  304. item.classEndTime,
  305. true,
  306. true
  307. )
  308. }}
  309. </view>
  310. </view>
  311. </view>
  312. <!-- 学时审核状态不可审核 -->
  313. <template
  314. v-if="item.periodStatus == -1 || item.periodStatus == 2"
  315. >
  316. <view
  317. class="class-warm"
  318. v-if="
  319. item.classStatus == 1 || item.classStatus === null
  320. "
  321. >
  322. <view class="class-warm__text">
  323. <view class="date">
  324. <template
  325. v-if="
  326. sysTime >= item.serviceStartTime &&
  327. sysTime <= item.serviceEndTime
  328. "
  329. >
  330. 学习状态:
  331. <text v-if="item.stuAllNum + item.recordNum == 0"
  332. >未学习</text
  333. >
  334. <text
  335. v-else-if="
  336. item.stuAllNum + item.recordNum > 0 &&
  337. item.stuAllNum + item.recordNum <
  338. item.secAllNum + item.examNum
  339. "
  340. >学习中</text
  341. >
  342. <text
  343. v-else-if="
  344. item.stuAllNum + item.recordNum >=
  345. item.secAllNum + item.examNum
  346. "
  347. >已学完</text
  348. >
  349. </template>
  350. <template v-else>
  351. <template v-if="item.serviceStartTime"
  352. >已过学习服务期,不可以学习了哦!</template
  353. >
  354. </template>
  355. </view>
  356. </view>
  357. </view>
  358. </template>
  359. <!-- 学时审核状态可以审核 -->
  360. <template v-if="item.periodStatus != -1">
  361. <view class="class-warm">
  362. <view class="class-warm__text">
  363. <view class="date">
  364. <text v-if="item.periodStatus == 0"
  365. >机构审核:学时审核不通过</text
  366. >
  367. <!-- <text v-else-if="item.periodStatus == 2">学时待审核</text> -->
  368. <text v-else-if="item.periodStatus == 3"
  369. >学时审核中</text
  370. >
  371. <text v-else-if="item.periodStatus == 1">
  372. <text v-if="item.periodPlush > 0"
  373. >学时已上报注册中心</text
  374. >
  375. <text v-else>机构审核:学时审核通过</text>
  376. </text>
  377. </view>
  378. </view>
  379. </view>
  380. <view
  381. class="class-warm"
  382. v-if="
  383. item.subscribeId != null && item.periodStatus == 1
  384. "
  385. >
  386. <view class="class-warm__text">
  387. <view class="date">
  388. <view v-if="item.subExamStatus === null"
  389. >待预约考试</view
  390. >
  391. <view
  392. v-else-if="
  393. item.subExamStatus === 0 &&
  394. sysTime <
  395. $method.TimeTotimestamp(
  396. $method.timestampToTime(
  397. item.subApplySiteExamTime,
  398. true
  399. ) +
  400. ' ' +
  401. item.subApplySiteStartTime
  402. )
  403. "
  404. >
  405. 待考试,考试时间:
  406. {{
  407. $method.timestampToTime(
  408. item.subApplySiteExamTime,
  409. true
  410. ) +
  411. " " +
  412. item.subApplySiteStartTime
  413. }}
  414. -
  415. {{
  416. $method.timestampToTime(
  417. item.subApplySiteExamTime,
  418. true
  419. ) +
  420. " " +
  421. item.subApplySiteEndTime
  422. }}
  423. </view>
  424. <view v-else-if="item.subExamStatus === 0"
  425. >待出考试结果</view
  426. >
  427. <view v-else-if="item.subExamStatus === 1">
  428. <text v-if="item.subResult === null"
  429. >待出考试结果</text
  430. >
  431. <text v-if="item.subResult === 0"
  432. >考试结果:不通过,需补考</text
  433. >
  434. <text v-else-if="item.subResult === 1"
  435. >考试结果:通过,考试成绩为{{
  436. item.subPerformance
  437. }}</text
  438. >
  439. </view>
  440. <view v-else-if="item.subExamStatus === 2"
  441. >缺考,无成绩,需补考</view
  442. >
  443. <view v-else-if="item.subExamStatus === 3"
  444. >作弊,无成绩,需补考</view
  445. >
  446. <view v-else-if="item.subExamStatus === 4"
  447. >替考,无成绩,需补考</view
  448. >
  449. </view>
  450. </view>
  451. </view>
  452. </template>
  453. </template>
  454. </template>
  455. </template>
  456. </view>
  457. <view
  458. class="c_downs"
  459. @click="studyIn(item.goodsId, item.gradeId, item, index)"
  460. >
  461. <view class="lefts">
  462. <image
  463. class="lefet_img"
  464. :src="$method.splitImgHost(item.coverUrl, true)"
  465. mode=""
  466. ></image>
  467. <view v-if="item.goodsType == 6" class="live_icon">直播</view>
  468. </view>
  469. <view class="rights">
  470. <template
  471. v-if="
  472. item.externalLinkStatus ||
  473. (item.gradeStatus == 1 &&
  474. item.status == 1 &&
  475. item.serviceEndTime > sysTime &&
  476. item.serviceStartTime < sysTime &&
  477. item.classEndTime &&
  478. item.classEndTime < sysTime &&
  479. (item.periodStatus == 0 || item.periodStatus == -1) &&
  480. item.studyCount > 0)
  481. "
  482. >
  483. </template>
  484. <view v-else class="learn_progress">
  485. <view class="progress_up">
  486. <!-- 学习进度 (已做试卷+已做节)/(试卷数+节数) -->
  487. <view class="classHour">
  488. <text
  489. >{{
  490. item.courseNum || item.courseNum == 0
  491. ? item.courseNum
  492. : "-"
  493. }}课程/</text
  494. >
  495. <text
  496. >{{
  497. item.classHours || item.classHours == 0
  498. ? item.classHours
  499. : "-"
  500. }}学时/</text
  501. >
  502. <text>{{ item.secAllNum + item.examNum || "-" }}节</text>
  503. </view>
  504. <view class="scheduling">
  505. <view class="sche_bar">
  506. 进度:{{ item.stuAllNum + item.recordNum }}/{{
  507. item.secAllNum + item.examNum
  508. }}
  509. </view>
  510. <view class="progress_bar">
  511. <u-line-progress
  512. :showText="false"
  513. height="22"
  514. active-color="#ff9900"
  515. :show-percent="false"
  516. :percent="
  517. ((item.stuAllNum + item.recordNum) /
  518. (item.secAllNum + item.examNum)) *
  519. 100
  520. "
  521. ></u-line-progress>
  522. </view>
  523. </view>
  524. </view>
  525. </view>
  526. </view>
  527. </view>
  528. <!-- 按钮 -->
  529. <view class="study_btns">
  530. <template
  531. v-if="
  532. item.gradeStatus == 1 &&
  533. item.status == 1 &&
  534. item.serviceEndTime > sysTime &&
  535. item.serviceStartTime < sysTime &&
  536. item.classEndTime &&
  537. item.classEndTime < sysTime &&
  538. (item.periodStatus == 0 || item.periodStatus == -1) &&
  539. item.userStudyCount > 0
  540. "
  541. >
  542. <view
  543. class="exam_word ones"
  544. @click.stop="selectClass(item, index)"
  545. >
  546. 选班重学
  547. </view>
  548. </template>
  549. <!-- examApplyGoodsList.length -是判断是否关联指定学员 -->
  550. <view v-else class="exam_btns">
  551. <view
  552. class="box_appoint"
  553. v-if="
  554. item.applyStatus === 1 &&
  555. !(
  556. sysTime <= item.serviceStartTime ||
  557. sysTime >= item.serviceEndTime ||
  558. (item.classStartTime && sysTime <= item.classStartTime) ||
  559. (item.classEndTime && sysTime >= item.classEndTime) ||
  560. item.learningStatus == 2 ||
  561. item.classStatus == 0 ||
  562. (item.learningStatus == 3 &&
  563. sysTime < item.learningTimeStart) ||
  564. !item.examApplyGoodsList.length
  565. )
  566. "
  567. @click="appointment(item, appoint)"
  568. >
  569. <view class="exam_word ones">预约考试</view>
  570. </view>
  571. <view
  572. class="box_appoint"
  573. v-if="
  574. item.beforeStatus === 1 &&
  575. !(
  576. sysTime <= item.serviceStartTime ||
  577. sysTime >= item.serviceEndTime ||
  578. (item.classStartTime && sysTime <= item.classStartTime) ||
  579. (item.classEndTime && sysTime >= item.classEndTime) ||
  580. item.learningStatus == 2 ||
  581. item.classStatus == 0 ||
  582. (item.learningStatus == 3 &&
  583. sysTime < item.learningTimeStart)
  584. )
  585. "
  586. @click="appBeforeAddress(item.goodsId, item)"
  587. >
  588. <view class="exam_word ones">进入刷题</view>
  589. </view>
  590. </view>
  591. <view
  592. class="box_appoint"
  593. @click="studyIn(item.goodsId, item.gradeId, item, index)"
  594. >
  595. <view class="exam_word intos">进入学习</view>
  596. </view>
  597. </view>
  598. </view>
  599. </view>
  600. </view>
  601. <!-- 没有学习的课程 -->
  602. <view v-if="!allLoading && !allCourse" class="no_datas">
  603. <image
  604. class="courses"
  605. src="/static/learn/no_course.png"
  606. mode=""
  607. ></image>
  608. <view class="no_learns">您目前没有可学习的课程</view>
  609. <view class="choose" @click="toChoose()">立即去选购</view>
  610. </view>
  611. </view>
  612. <!-- 弹窗 -->
  613. <u-popup
  614. v-model="selectClassModal"
  615. @close="gradeValue = -1"
  616. mode="bottom"
  617. border-radius="40"
  618. >
  619. <view class="popup_box">
  620. <view style="margin-bottom: 20rpx">
  621. <view class="line1"></view>
  622. <view class="grade">选择班级</view>
  623. </view>
  624. <u-line color="#D6D6DB" />
  625. <view>
  626. <scroll-view scroll-y="true" style="height: 500rpx">
  627. <view>
  628. <u-radio-group v-model="gradeValue" @change="radioGroupChange">
  629. <view v-for="(item, index) in gradeList" :key="index">
  630. <view
  631. style="display: flex; align-items: center; padding: 20rpx"
  632. >
  633. <view>
  634. <u-radio
  635. shape="circle"
  636. :name="index"
  637. :disabled="
  638. item.studentNum > 0 &&
  639. item.studentNum == item.studentUpper
  640. "
  641. >
  642. <view
  643. :class="
  644. item.checked ? 'white-box blue-box' : 'white-box'
  645. "
  646. >
  647. <view>
  648. <view class="blackTxt">{{ item.className }}</view>
  649. <view class="redTxt" v-if="item.classEndTime">
  650. 有效期至:{{
  651. $method.timestampToTime(
  652. item.classEndTime,
  653. true,
  654. true
  655. )
  656. }}
  657. </view>
  658. <view class="redTxt" v-if="item.classEndTime">
  659. 本班还剩{{
  660. $method.GetRTime(item.classEndTime)
  661. }}天将结束学习</view
  662. >
  663. </view>
  664. </view>
  665. </u-radio>
  666. </view>
  667. </view>
  668. </view>
  669. </u-radio-group>
  670. </view>
  671. </scroll-view>
  672. </view>
  673. <view class="confrim-btn">
  674. <view class="okBtn" @click="okPopup()">确定</view>
  675. </view>
  676. </view>
  677. </u-popup>
  678. <u-modal
  679. v-model="showUserConfirmInfo"
  680. @confirm="confirmUserConfirm"
  681. ref="uModal"
  682. :async-close="true"
  683. @cancel="cancelUserConfirm"
  684. :confirm-text="
  685. '确认' + (confirmCount > 0 ? '(' + confirmCount + ')' : '')
  686. "
  687. :confirm-color="confirmCount > 0 ? '#999' : '#2979ff'"
  688. class="confirm-modal"
  689. title="实名验证确认"
  690. cancel="取消"
  691. :show-cancel-button="true"
  692. >
  693. <view class="slot-content">
  694. <view class="content">
  695. 为避免个人信息不正确导致您的学习时长无效,请认真核对以下信息是否正确,如信息有误请取消当前操作,立刻联系020-38946666
  696. <view class="msg-list" v-if="userInfo">
  697. <view class="item">
  698. <text class="item__left">姓名:</text>
  699. <text class="item__right">{{ userInfo.realname }}</text>
  700. </view>
  701. <view class="item">
  702. <text class="item__left">手机号:</text>
  703. <text class="item__right">{{ userInfo.telphone }}</text>
  704. </view>
  705. <view class="item">
  706. <text class="item__left">身份号:</text>
  707. <text class="item__right">{{ userInfo.idCard }}</text>
  708. </view>
  709. <view class="item">
  710. <u-checkbox v-model="confirmChecked" :label-disabled="false"
  711. >确认个人信息无误</u-checkbox
  712. >
  713. </view>
  714. </view>
  715. </view>
  716. </view>
  717. </u-modal>
  718. <!-- 多个预约考试时的弹窗 -->
  719. <u-popup v-model="appointTestShow" mode="bottom" border-radius="40">
  720. <view class="popuptest_box">
  721. <view class="check_head">
  722. <view class="headers">
  723. <view class="grade">切换课程</view>
  724. <u-icon
  725. name="close"
  726. color="#9C9C9C"
  727. size="40"
  728. @click="closePop()"
  729. ></u-icon>
  730. </view>
  731. </view>
  732. <view class="check_con">
  733. <scroll-view scroll-y="true" style="height: 700rpx">
  734. <view
  735. class="course_items"
  736. v-for="(appoint, index) in appointTestList"
  737. :key="index"
  738. >
  739. <view class="course_lefts">
  740. <view class="course_title">{{ appoint.applyName }}</view>
  741. </view>
  742. <view
  743. class="course_rights"
  744. @click="jumpTest(appointItemIndex, appoint)"
  745. >
  746. <view class="intoStudy">预约</view>
  747. </view>
  748. </view>
  749. </scroll-view>
  750. </view>
  751. </view>
  752. </u-popup>
  753. </view>
  754. </template>
  755. <script>
  756. var curTime = new Date().getTime(); // 当前时间的时间戳
  757. import { mapGetters, mapActions } from "vuex";
  758. export default {
  759. data() {
  760. return {
  761. leftDays: 0,
  762. paramC: {
  763. pageNum: 1,
  764. pageSize: 10,
  765. },
  766. activeItem: {},
  767. itemIndex: "",
  768. confirmTimer: null,
  769. confirmCount: 10,
  770. confirmChecked: false,
  771. showUserConfirmInfo: false,
  772. selectItem: {},
  773. selectClassModal: false,
  774. gradeList: [],
  775. gradeValue: -1,
  776. sysTime: 0,
  777. courseLists: [], // 课程列表
  778. total: 0,
  779. livingLists: [], // 直播列表
  780. allLoading: false, // 加载样式
  781. current: 2,
  782. appointTestShow: false, //预约考试弹窗
  783. appointTestList: [],
  784. appointItemIndex: {}, // 点击了哪项课程
  785. imgwidth: 0,
  786. imgheight: 0,
  787. };
  788. },
  789. filters: {
  790. liveStatus(liveTime, watchStatus) {
  791. let value = liveTime * 1000;
  792. if (curTime < value) {
  793. // 判断当前时间和直播开始时间
  794. return " 未开播";
  795. } else {
  796. return watchStatus == "live" ? "正在直播中" : "即将开播";
  797. }
  798. },
  799. },
  800. computed: {
  801. ...mapGetters(["userInfo", "config"]),
  802. allCourse() {
  803. return this.courseLists.length || this.livingLists.length ? true : false;
  804. },
  805. },
  806. onLoad() {
  807. // 1668873600 ,2022.11.20的时间戳
  808. this.leftDays = 1668873600 - parseInt(curTime / 1000);
  809. this.sysTime = +this.$method.timest();
  810. if (this.$method.isLogin()) {
  811. !this.userInfo && this.$api.refreshUserInfo();
  812. }
  813. },
  814. async onShow() {
  815. uni.pageScrollTo({
  816. duration: 0,
  817. scrollTop: 0, // number number number!
  818. });
  819. this.getCourseLiveQues();
  820. // await this.commonSystemTime()
  821. },
  822. onPullDownRefresh() {
  823. this.getCourseLiveQues();
  824. },
  825. onReachBottom() {
  826. if (this.courseLists.length <= this.total) {
  827. this.paramC.pageNum++;
  828. this.getCourseList();
  829. }
  830. },
  831. methods: {
  832. ...mapActions(["getUserInfo"]),
  833. bgShow(liveTime, watchStatus) {
  834. let value = liveTime * 1000;
  835. if (curTime > value) {
  836. // 判断当前时间和直播开始时间
  837. return watchStatus == "live" ? true : false;
  838. }
  839. },
  840. lookTimeStatus(liveTime, watchStatus) {
  841. if (liveTime) {
  842. let value = new Date(liveTime * 1000);
  843. var Y = value.getFullYear();
  844. var M =
  845. value.getMonth() + 1 < 10
  846. ? "0" + (value.getMonth() + 1)
  847. : value.getMonth() + 1;
  848. var D = value.getDate() < 10 ? "0" + value.getDate() : value.getDate();
  849. var valZ = Y + "/" + M + "/" + D;
  850. let curZeroTime = new Date(valZ).getTime(); // 获取开始直播时间当天的零点时间戳
  851. if (curTime > value) {
  852. // 判断当前时间和直播开始时间
  853. if (watchStatus == "live") {
  854. //
  855. return 1;
  856. } else {
  857. return 2;
  858. }
  859. } else {
  860. if (curZeroTime <= curTime && curTime <= value) {
  861. //当天
  862. return 3;
  863. } else {
  864. return 4;
  865. }
  866. }
  867. }
  868. },
  869. curTimeTamp(liveTime) {
  870. let min = liveTime - parseInt(curTime / 1000);
  871. return min;
  872. },
  873. toChoose() {
  874. uni.switchTab({
  875. url: "/pages/course/index",
  876. });
  877. },
  878. // 查询直播课
  879. getCourseLiveQues() {
  880. if (!this.$method.isLogin()) {
  881. return;
  882. }
  883. this.allLoading = true;
  884. this.paramC.pageNum = 1;
  885. let arrs = [
  886. this.$api.listUserVideoLive(this.paramC), // 查询用户拥有视频+直播商品 /goods/listUserVideoLive
  887. this.$api.getgoodsLiveList({
  888. pageNum: 1,
  889. pageSize: 3, // 默认3条
  890. }),
  891. ];
  892. wx.stopPullDownRefresh();
  893. Promise.all(arrs)
  894. .then((res) => {
  895. // if (res.data.code == 200) {
  896. const [{ data: res1 }, { data: res2 }] = res;
  897. if (res1.code == 200) {
  898. this.total = res1.total;
  899. this.courseLists = res1.rows || [];
  900. }
  901. // if (res2.code == 200) {
  902. // this.questionLists = res2.rows || []
  903. // }
  904. if (res2.code == 200) {
  905. this.livingLists = res2.rows || [];
  906. } else {
  907. this.$u.toast(res2.msg);
  908. }
  909. this.allLoading = false;
  910. this.sysTime = +this.$method.timest();
  911. // }
  912. uni.hideLoading();
  913. })
  914. .catch((err) => {
  915. uni.hideLoading();
  916. this.allLoading = false;
  917. });
  918. },
  919. getCourseList() {
  920. this.$api
  921. .listUserVideoLive(this.paramC)
  922. .then((res) => {
  923. this.courseLists.push(...res.data.rows);
  924. })
  925. .finally((e) => {
  926. uni.hideLoading();
  927. });
  928. },
  929. // 看直播
  930. toLiveLook(item) {
  931. let moduleId = item.moduleId || 0;
  932. let chapterId = item.chapterId || 0;
  933. let sectionId = item.sectionId || item.menuId;
  934. let uuid = new Date().valueOf() + "";
  935. // buyCourse 是否购买课程:1是 0否
  936. let encode = encodeURIComponent(
  937. this.config.hostLive +
  938. "/pages/live/index?token=" +
  939. uni.getStorageSync("token") +
  940. "&userInfo=" +
  941. (JSON.stringify(this.userInfo) || "") +
  942. "&channelId=" +
  943. item.liveUrl +
  944. "&gradeId=" +
  945. 0 +
  946. "&courseId=" +
  947. item.courseId +
  948. "&goodsId=" +
  949. item.goodsId +
  950. "&orderGoodsId=" +
  951. item.orderGoodsId +
  952. "&sectionId=" +
  953. sectionId +
  954. "&chapterId=" +
  955. chapterId +
  956. "&moduleId=" +
  957. moduleId +
  958. "&buyCourse=1" +
  959. "&ident=" +
  960. uuid +
  961. "&sectionType=2"
  962. );
  963. uni.navigateTo({
  964. url: `../../pages/webview/index?url=` + encode,
  965. });
  966. },
  967. toLive(item) {
  968. this.$api
  969. .courseCourseList({
  970. pageNum: 1,
  971. pageSize: 1,
  972. goodsId: item.goodsId,
  973. gradeId: 0,
  974. orderGoodsId: item.orderGoodsId,
  975. })
  976. .then((res) => {
  977. if (res.data.code == 200) {
  978. if (res.data.total > 1) {
  979. // uni.navigateTo({
  980. // url:'/pages5/liveDetail/course?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0'
  981. // })
  982. uni.navigateTo({
  983. url:
  984. "/pages3/live/detail?orderGoodsId=" +
  985. item.orderGoodsId +
  986. "&goodsId=" +
  987. item.goodsId +
  988. '&gradeId=0&courseId=""',
  989. });
  990. } else if (res.data.total == 1) {
  991. uni.navigateTo({
  992. url:
  993. "/pages3/live/detail?orderGoodsId=" +
  994. item.orderGoodsId +
  995. "&goodsId=" +
  996. item.goodsId +
  997. "&gradeId=0&courseId=" +
  998. res.data.rows[0].courseId,
  999. });
  1000. } else {
  1001. uni.showToast({
  1002. icon: "none",
  1003. title: "暂无可观看的直播课程",
  1004. });
  1005. }
  1006. }
  1007. });
  1008. },
  1009. async studyIn(v, i, item, index) {
  1010. if (item.externalLinkStatus) {
  1011. this.$method.toLink(item.externalLink);
  1012. return;
  1013. }
  1014. if (item.goodsType == 6) {
  1015. // 进入直播课
  1016. this.toLive(item);
  1017. return;
  1018. }
  1019. // 进入视频课
  1020. this.activeItem = item;
  1021. if (item.interfaceAccountId > 0) {
  1022. //学习账号已开通
  1023. if (item.learnStatus > 0) {
  1024. //跳转第三方h5
  1025. uni.navigateTo({
  1026. url: `/pages3/polyv/detail?goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}&isOther=1`,
  1027. });
  1028. return;
  1029. } else {
  1030. uni.showModal({
  1031. showCancel: false,
  1032. content:
  1033. "您的学习账号未开通,请稍后再尝试,有疑问,请联系020-87085982!",
  1034. });
  1035. return;
  1036. }
  1037. return;
  1038. }
  1039. if (
  1040. item.serviceStartTime &&
  1041. (this.sysTime <= item.serviceStartTime ||
  1042. this.sysTime >= item.serviceEndTime)
  1043. ) {
  1044. uni.showToast({
  1045. icon: "none",
  1046. title: "不在学习服务期,不能进入学习",
  1047. });
  1048. return;
  1049. }
  1050. if (
  1051. (item.classStartTime && this.sysTime <= item.classStartTime) ||
  1052. (item.classEndTime && this.sysTime >= item.classEndTime)
  1053. ) {
  1054. uni.showToast({
  1055. icon: "none",
  1056. title: "不在班级有效期,不能进入学习",
  1057. });
  1058. return;
  1059. }
  1060. // learningStatus: 1即刻,2待定,3不在日期内
  1061. if (item.learningStatus == 2) {
  1062. uni.showToast({
  1063. icon: "none",
  1064. title: "开放学习时间待定,不能进入学习",
  1065. });
  1066. return;
  1067. }
  1068. if (item.classStatus == 0) {
  1069. uni.showToast({
  1070. icon: "none",
  1071. title: "尚未开班,不能进入学习",
  1072. });
  1073. return;
  1074. }
  1075. if (item.learningStatus == 3 && this.sysTime < item.learningTimeStart) {
  1076. uni.showToast({
  1077. icon: "none",
  1078. title: "不在开放学习时间,不能进入学习",
  1079. });
  1080. return;
  1081. }
  1082. uni.showLoading({
  1083. title: "拼命加载中...",
  1084. mask: true,
  1085. });
  1086. var confirmDetail = true;
  1087. if (item.educationName == "继续教育") {
  1088. if (
  1089. item.officialName &&
  1090. item.businessName == "二级" &&
  1091. item.projectName == "建造师"
  1092. ) {
  1093. confirmDetail = await this.userConfirmInfoDetail();
  1094. }
  1095. }
  1096. if (!confirmDetail) {
  1097. return;
  1098. }
  1099. this.itemIndex = index;
  1100. if (
  1101. item.gradeStatus == 1 &&
  1102. item.status == 1 &&
  1103. item.serviceEndTime > this.sysTime &&
  1104. item.classEndTime &&
  1105. item.classEndTime < this.sysTime &&
  1106. (item.periodStatus == 0 || item.periodStatus == -1) &&
  1107. item.studyCount > 0
  1108. ) {
  1109. this.selectClass(item, index, "loading");
  1110. return;
  1111. }
  1112. // /course/goodsRebuildStatus查询用户商品重修状态
  1113. let rebuildStatus = await this.courseGoodsRebuildStatus(
  1114. item.goodsId,
  1115. item.gradeId
  1116. );
  1117. if (rebuildStatus == 0) {
  1118. uni.hideLoading();
  1119. this.$navTo.togo("/pages2/learn/details", {
  1120. gradeId: item.gradeId,
  1121. goodsId: item.goodsId,
  1122. orderGoodsId: item.orderGoodsId,
  1123. });
  1124. return;
  1125. }
  1126. // /lock/lockStatus
  1127. this.$api
  1128. .lockLockStatus({
  1129. action: "jxjy",
  1130. uuid: this.$method.getUuid(),
  1131. })
  1132. .then((res) => {
  1133. if (res.data.code == 200) {
  1134. //有其他端在操作,不能学习
  1135. uni.showToast({
  1136. icon: "none",
  1137. title: res.data.msg,
  1138. mask: true,
  1139. duration: 3000,
  1140. });
  1141. } else if (res.data.code == 500) {
  1142. //可以学习
  1143. this.$http({
  1144. url: "/course/courseList",
  1145. method: "get",
  1146. data: {
  1147. pageNum: 1,
  1148. pageSize: 100,
  1149. goodsId: item.goodsId,
  1150. gradeId: item.gradeId,
  1151. orderGoodsId: item.orderGoodsId,
  1152. },
  1153. noLoading: true,
  1154. }).then((res) => {
  1155. if (res.data.code == 200) {
  1156. if (res.data.total > 1) {
  1157. // this.$navTo.togo(`/pages2/wd/course?id=${v}&gid=${i}&orderGoodsId=${item.orderGoodsId}`);
  1158. uni.navigateTo({
  1159. url: `/pages3/polyv/detail?id=''&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
  1160. });
  1161. } else if (res.data.total == 1) {
  1162. uni.navigateTo({
  1163. url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
  1164. });
  1165. } else {
  1166. uni.showToast({
  1167. icon: "none",
  1168. title: "暂无可观看的视频课程",
  1169. });
  1170. }
  1171. }
  1172. });
  1173. return;
  1174. }
  1175. });
  1176. },
  1177. /**
  1178. * @param {Object} goodsId 商品id
  1179. * 查询商品重修状态
  1180. */
  1181. courseGoodsRebuildStatus(goodsId, gradeId) {
  1182. return new Promise((resolve) => {
  1183. this.$http({
  1184. url: "/course/goodsRebuildStatus",
  1185. method: "get",
  1186. data: {
  1187. goodsId: goodsId,
  1188. gradeId: gradeId,
  1189. },
  1190. noLoading: true,
  1191. compleLoading: true, // 请求成功是否还要继续显示加载中
  1192. }).then((res) => {
  1193. resolve(res.data.data);
  1194. });
  1195. });
  1196. },
  1197. userConfirmInfoDetail() {
  1198. return new Promise((resolve) => {
  1199. this.$http({
  1200. url: "/user/confirm/info/detail",
  1201. method: "get",
  1202. data: { orderGoodsId: this.activeItem.orderGoodsId },
  1203. noLoading: true,
  1204. }).then((res) => {
  1205. if (!res.data.data) {
  1206. clearInterval(this.confirmTimer);
  1207. this.confirmCount = 10;
  1208. this.showUserConfirmInfo = true;
  1209. this.confirmTimer = setInterval(() => {
  1210. if (this.confirmCount > 0) {
  1211. this.confirmCount--;
  1212. } else {
  1213. clearInterval(this.confirmTimer);
  1214. }
  1215. }, 1000);
  1216. } else {
  1217. if (res.data.data.pushInfo) {
  1218. resolve(true);
  1219. } else {
  1220. uni.showModal({
  1221. showCancel: false,
  1222. title: "提示",
  1223. content:
  1224. "开通信息推送不成功,无法进入学习,请联系020-87085982!",
  1225. });
  1226. resolve(false);
  1227. }
  1228. }
  1229. });
  1230. });
  1231. },
  1232. selectClass(item, index, load) {
  1233. this.itemIndex = index;
  1234. this.selectItem = item;
  1235. this.selectClassModal = true;
  1236. this.goodsGradeList(item.goodsId, load);
  1237. },
  1238. goodsGradeList(id, load) {
  1239. this.$http({
  1240. url: "/grade/grade/list",
  1241. method: "get",
  1242. data: { goodsId: id },
  1243. noLoading: load ? true : false,
  1244. }).then((res) => {
  1245. if (res.data.code == 200) {
  1246. this.gradeList = res.data.rows;
  1247. if (this.gradeList.length == 0) {
  1248. let item = {
  1249. className: "系统分班",
  1250. gradeId: 0,
  1251. };
  1252. this.gradeList.push(item);
  1253. } else {
  1254. let isGradeFull = this.gradeList.every(
  1255. (item) =>
  1256. item.studentNum > 0 && item.studentNum == item.studentUpper
  1257. );
  1258. //所有班级都满了
  1259. if (isGradeFull) {
  1260. let item = {
  1261. className: "系统分班",
  1262. gradeId: 0,
  1263. };
  1264. this.gradeList.unshift(item);
  1265. }
  1266. }
  1267. }
  1268. });
  1269. },
  1270. radioGroupChange(e) {
  1271. // console.log(e)
  1272. },
  1273. okPopup() {
  1274. if (this.gradeValue == -1) {
  1275. uni.showToast({
  1276. icon: "none",
  1277. title: "请选择班级",
  1278. });
  1279. return;
  1280. }
  1281. this.$api
  1282. .changeGrade({
  1283. goodsId: this.selectItem.goodsId,
  1284. gradeId: this.gradeValue,
  1285. oldGradeId: this.selectItem.gradeId,
  1286. orderGoodsId: this.selectItem.orderGoodsId,
  1287. userId: this.selectItem.userId,
  1288. })
  1289. .then((res) => {
  1290. if (res.data.code == 200) {
  1291. if (this.itemIndex !== "") {
  1292. this.refreshByIndex();
  1293. }
  1294. this.selectClassModal = false;
  1295. uni.showToast({
  1296. title: "选班成功",
  1297. });
  1298. } else {
  1299. uni.showToast({
  1300. icon: "none",
  1301. title: res.data.msg,
  1302. });
  1303. }
  1304. });
  1305. },
  1306. /**
  1307. * 返回刷新之前进入的课程数据
  1308. */
  1309. refreshByIndex() {
  1310. this.$api
  1311. .listUserVideoLive({
  1312. pageNum: this.itemIndex + 1,
  1313. pageSize: 1,
  1314. })
  1315. .then((res) => {
  1316. if (res.data.code == 200) {
  1317. this.$set(this.courseLists, this.itemIndex, res.data.rows[0]);
  1318. }
  1319. });
  1320. },
  1321. confirmUserConfirm() {
  1322. this.$refs.uModal.clearLoading();
  1323. if (this.confirmCount <= 0) {
  1324. if (this.confirmChecked) {
  1325. let infoJson = {
  1326. realname: this.userInfo.realname,
  1327. idCard: this.userInfo.idCard,
  1328. telphone: this.userInfo.telphone,
  1329. };
  1330. this.$api
  1331. .userConfirminfo({
  1332. orderGoodsId: this.activeItem.orderGoodsId,
  1333. infoJson: JSON.stringify(infoJson),
  1334. })
  1335. .then((res) => {
  1336. if (res.data.code != 200) {
  1337. this.showUserConfirmInfo = false;
  1338. uni.showToast({
  1339. icon: "none",
  1340. title: res.data.msg,
  1341. });
  1342. return;
  1343. }
  1344. if (res.data.data.pushInfo) {
  1345. uni.showToast({
  1346. icon: "none",
  1347. title: "提交成功",
  1348. });
  1349. } else {
  1350. uni.showModal({
  1351. showCancel: false,
  1352. title: "提示",
  1353. content:
  1354. "开通信息推送不成功,无法进入学习,请联系020-87085982!",
  1355. });
  1356. }
  1357. this.showUserConfirmInfo = false;
  1358. });
  1359. } else {
  1360. uni.showToast({
  1361. icon: "none",
  1362. title: "请勾选确认个人信息无误",
  1363. });
  1364. }
  1365. } else {
  1366. return;
  1367. }
  1368. },
  1369. cancelUserConfirm() {
  1370. clearInterval(this.confirmTimer);
  1371. },
  1372. call() {
  1373. uni.makePhoneCall({
  1374. phoneNumber: "020-87085982", //仅为示例
  1375. });
  1376. },
  1377. closePop() {
  1378. this.appointTestShow = false;
  1379. },
  1380. jumpTest(item, appoint) {
  1381. this.appoint_an(item, appoint);
  1382. this.appointTestShow = false;
  1383. },
  1384. appointment(item, appoint) {
  1385. this.appointItemIndex = item;
  1386. if (item.examApplyGoodsList.length > 1) {
  1387. // 多个考试预约
  1388. this.appointTestList = item.examApplyGoodsList;
  1389. this.appointTestShow = true;
  1390. return;
  1391. }
  1392. let appoint_item = item.examApplyGoodsList[0];
  1393. this.appoint_an(item, appoint_item);
  1394. },
  1395. appoint_an(item, appoint) {
  1396. var data = {
  1397. goodsId: item.goodsId,
  1398. gradeId: item.gradeId,
  1399. applyId: appoint.applyId,
  1400. orderGoodsId: item.orderGoodsId,
  1401. };
  1402. this.$api.getApplysubscribe(data).then((res) => {
  1403. if (res.data.code === 500) {
  1404. uni.showModal({
  1405. showCancel: false,
  1406. content: res.data.msg,
  1407. });
  1408. }
  1409. if (res.data.code === 200) {
  1410. this.$navTo.togo("/pages2/appointment/index", {
  1411. goodsId: item.goodsId,
  1412. gradeId: item.gradeId,
  1413. orderGoodsId: item.orderGoodsId,
  1414. applyId: appoint.applyId,
  1415. });
  1416. }
  1417. });
  1418. },
  1419. // 进入刷题,调整小程序
  1420. appBeforeAddress(goodsId, item) {
  1421. this.$api
  1422. .appBeforeAddress({
  1423. orderGoodsId: item.orderGoodsId,
  1424. })
  1425. .then((res) => {
  1426. if (res.data.code == 200) {
  1427. uni.navigateToMiniProgram({
  1428. appId: res.data.data.url,
  1429. success(res) {
  1430. // 打开成功
  1431. },
  1432. });
  1433. } else {
  1434. uni.showModal({
  1435. title: "提示",
  1436. content: res.data.msg,
  1437. showCancel: false,
  1438. });
  1439. }
  1440. });
  1441. },
  1442. },
  1443. };
  1444. </script>
  1445. <style>
  1446. page {
  1447. background: #eaeef1;
  1448. }
  1449. </style>
  1450. <style lang="scss" scoped>
  1451. @import "./index.scss";
  1452. </style>