index.vue 49 KB

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