courseDetail.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706
  1. <template>
  2. <div class="pb_content">
  3. <div class="pb_content_body" style="height: 100%">
  4. <div class="body_student">
  5. <div class="student_head">
  6. <div v-if="tType != 4" class="return" @click.stop="
  7. goTo(
  8. '/index?userid=' +
  9. userid +
  10. '&oid=' +
  11. oid +
  12. '&org='+
  13. org +
  14. '&cid=' +
  15. classId +
  16. '&tType=' +
  17. tType +
  18. '&screenType=' +
  19. screenType
  20. )
  21. ">
  22. 返回
  23. <!-- <img src="../assets/icon/return.png" alt="" /> -->
  24. </div>
  25. <div class="box_course">
  26. <div class="wheel">
  27. <img style="object-fit: contain" :src="
  28. this.courseDetail.cover != null &&
  29. this.courseDetail.cover != ''
  30. ? JSON.parse(this.courseDetail.cover).length > 0
  31. ? JSON.parse(this.courseDetail.cover)[0].url
  32. : mr
  33. : mr
  34. " alt />
  35. </div>
  36. <div class="right_box">
  37. <div class="rightT">
  38. <div class="right_box_title">{{ courseDetail.title }}</div>
  39. <div class="jd">{{ chapInfo.length }}阶段</div>
  40. <div class="jd">{{ rw }}任务</div>
  41. </div>
  42. <div class="cType">
  43. <div class="all_choose" v-for="(item, index) in courseType" :key="index">
  44. <span style="color: #6c6c6c">{{ item + ":" }}</span>
  45. <span class="type_children" v-for="(item2, index2) in courseTypeJson[item]" :key="index2">{{ item2
  46. }}</span>
  47. </div>
  48. </div>
  49. <div class="cType" style="font-size: 18px; color: #6c6c6c">
  50. <div>
  51. 创建者:<span style="color: #000">{{
  52. courseDetail.username
  53. }}</span>
  54. </div>
  55. <div class="Tname" v-if="Tname.length > 0">
  56. 协同人员:<span v-for="(tname, tIndex) in Tname" :key="tIndex" style="margin: 0 5px; color: #000">{{ tname
  57. }}</span>
  58. </div>
  59. </div>
  60. <div class="people">
  61. <div class="man">
  62. <img src="../assets/people.png" alt />
  63. </div>
  64. <div class="person">
  65. {{ courseDetail.vcount != null ? courseDetail.vcount : 0 }}人
  66. </div>
  67. </div>
  68. <div class="now_study" @click="dialogVisible = true">
  69. 立即学习
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="student_body">
  75. <div class="sLeft" v-if="courseDetail.brief">
  76. <div class="courseT">项目详情</div>
  77. <div class="courseTd">{{ courseDetail.brief }}</div>
  78. </div>
  79. <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
  80. <div class="blue_box_one" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
  81. <div>第{{ index + 1 }}阶段</div>
  82. <div :title="item.dyName">{{ item.dyName }}</div>
  83. <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
  84. </div>
  85. </div>
  86. </div>
  87. <!-- <div
  88. style="
  89. text-align: center;
  90. padding: 30px 0 20px 0;
  91. box-sizing: border-box;
  92. "
  93. >
  94. 此处滚动加载..
  95. </div>-->
  96. <el-dialog title="阶段选择" :visible.sync="dialogVisible" :append-to-body="true" width="700px"
  97. :before-close="handleClose" class="dialog_change">
  98. <div style="font-size: 20px">请选择阶段</div>
  99. <div style="
  100. padding: 20px 30px;
  101. display: flex;
  102. flex-direction: row;
  103. flex-wrap: wrap;
  104. ">
  105. <div class="blue_box" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
  106. <div>第{{ index + 1 }}阶段</div>
  107. <div>{{ item.dyName }}</div>
  108. <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
  109. </div>
  110. </div>
  111. </el-dialog>
  112. </div>
  113. </div>
  114. </div>
  115. </template>
  116. <script>
  117. export default {
  118. data() {
  119. return {
  120. choose: 0,
  121. dialogVisible: false,
  122. id: this.$route.query.courseId,
  123. userid: this.$route.query.userid,
  124. oid: this.$route.query.oid,
  125. org: this.$route.query.org,
  126. classId: this.$route.query.cid,
  127. tType: this.$route.query.tType,
  128. screenType: this.$route.query.screenType,
  129. courseDetail: {},
  130. aStudentName: [],
  131. chapInfo: [],
  132. courseType: [],
  133. Tname: [],
  134. courseTypeJson: {},
  135. userinfo: [],
  136. mr: require("../assets/icon/wheel.png"),
  137. rw: 0,
  138. };
  139. },
  140. methods: {
  141. handleClose(done) {
  142. done();
  143. },
  144. goTo(path) {
  145. this.$router.push(path);
  146. },
  147. addUserRate(i) {
  148. // var suid = this.userid;
  149. // if (
  150. // JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1 &&
  151. // JSON.parse(this.courseDetail.userid) != suid
  152. // ) {
  153. // this.$message.error("你没有该权限");
  154. // return;
  155. // }
  156. // var a =
  157. // this.courseDetail.course_student != ""
  158. // ? JSON.parse(this.courseDetail.course_student)
  159. // : "";
  160. // if (this.courseDetail.userid != suid) {
  161. // if (this.userinfo.type == 2) {
  162. // if (a != "") {
  163. // if (
  164. // JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1
  165. // ) {
  166. // this.$message.error("你没有该权限");
  167. // return;
  168. // }
  169. // } else {
  170. // this.$message.error("暂无项目学员,请联系老师添加项目学员!");
  171. // return;
  172. // }
  173. // }
  174. // }
  175. let params = {
  176. uid: this.userid,
  177. cid: this.id,
  178. };
  179. this.ajax
  180. .get(this.$store.state.api + "addUserR", params)
  181. .then((res) => {
  182. console.log(res.data);
  183. this.updateVc();
  184. if (this.tType == 1 || this.tType == 2 || this.tType == 4) {
  185. this.goTo(
  186. "/studyStudent?type=" +
  187. i +
  188. "&courseId=" +
  189. this.id +
  190. "&userid=" +
  191. this.userid +
  192. "&oid=" +
  193. this.oid +
  194. "&org=" +
  195. this.org +
  196. "&cid=" +
  197. this.classId +
  198. "&tType=" +
  199. this.tType +
  200. "&screenType=" +
  201. this.screenType
  202. );
  203. } else {
  204. this.goTo(
  205. "/study?type=" +
  206. i +
  207. "&courseId=" +
  208. this.id +
  209. "&userid=" +
  210. this.userid +
  211. "&oid=" +
  212. this.oid +
  213. "&org=" +
  214. this.org +
  215. "&cid=" +
  216. this.classId +
  217. "&tType=" +
  218. this.tType +
  219. "&screenType=" +
  220. this.screenType
  221. );
  222. }
  223. })
  224. .catch((err) => {
  225. console.error(err);
  226. });
  227. },
  228. updateVc() {
  229. let params = {
  230. cid: this.id,
  231. };
  232. this.ajax
  233. .get(this.$store.state.api + "updateVc", params)
  234. .then((res) => {
  235. console.log(res.data);
  236. })
  237. .catch((err) => {
  238. console.error(err);
  239. });
  240. },
  241. getCourseDetail() {
  242. const loading = this.$loading.service({
  243. background: "rgba(255, 255, 255, 0.7)",
  244. target: document.querySelector(".student_table"),
  245. });
  246. let params = {
  247. courseId: this.id,
  248. };
  249. this.ajax
  250. .get(this.$store.state.api + "selectCourseDetail", params)
  251. .then((res) => {
  252. loading.close();
  253. // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
  254. this.courseDetail = res.data[0][0];
  255. var a = res.data[0];
  256. var b = res.data[1];
  257. var c = res.data[2];
  258. for (var i = 0; i < b.length; i++) {
  259. // if (!this.id) {
  260. // this.courseType[b[i].id] = [];
  261. // }
  262. for (var j = 0; j < a.length; j++) {
  263. if (b[i].id == a[j].pid) {
  264. if (!this.courseTypeJson[b[i].name]) {
  265. this.courseType.push(b[i].name);
  266. this.courseTypeJson[b[i].name] = [];
  267. }
  268. this.courseTypeJson[b[i].name].push(a[j].name);
  269. }
  270. }
  271. }
  272. for (var k = 0; k < c.length; k++) {
  273. this.Tname.push(c[k].name);
  274. }
  275. console.log(this.courseTypeJson.length);
  276. this.aStudentName = res.data[2];
  277. this.chapInfo = JSON.parse(this.courseDetail.chapters);
  278. for (var z = 0; z < this.chapInfo.length; z++) {
  279. this.rw += this.chapInfo[z].chapterInfo[0].taskJson.length;
  280. }
  281. })
  282. .catch((err) => {
  283. loading.close();
  284. console.error(err);
  285. });
  286. },
  287. getUser() {
  288. let params = { uid: this.userid };
  289. this.ajax
  290. .get(this.$store.state.api + "getUser", params)
  291. .then((res) => {
  292. this.userinfo = res.data[0][0];
  293. })
  294. .catch((err) => {
  295. console.error(err);
  296. });
  297. },
  298. // getSName() {
  299. // let params = {
  300. // uid: JSON.stringify(this.courseDetail.course_student),
  301. // };
  302. // this.ajax
  303. // .get(this.$store.state.api + "selectSName", params)
  304. // .then((res) => {
  305. // this.aStudentName = res.data[0];
  306. // })
  307. // .catch((err) => {
  308. // console.error(err);
  309. // });
  310. // },
  311. },
  312. created() {
  313. this.getCourseDetail();
  314. this.getUser();
  315. document.scrollingElement.scrollTop = 0;
  316. // this.getSName();
  317. },
  318. };
  319. </script>
  320. <style scoped>
  321. @media screen and (max-width: 1024px) {
  322. .Tname {
  323. width: 500px;
  324. white-space: nowrap;
  325. overflow: hidden;
  326. text-overflow: ellipsis;
  327. }
  328. }
  329. .body_student {
  330. margin: 10px auto;
  331. width: 98%;
  332. height: 100%;
  333. }
  334. .student_head {
  335. width: 100%;
  336. background: #fff;
  337. height: 30%;
  338. position: relative;
  339. }
  340. .wheel {
  341. width: 250px;
  342. max-height: 146px;
  343. display: flex;
  344. align-items: center;
  345. }
  346. .man {
  347. width: 16px;
  348. height: 16px;
  349. }
  350. .wheel>img,
  351. .man>img {
  352. width: 100%;
  353. height: 100%;
  354. }
  355. .box_course {
  356. display: flex;
  357. padding: 25px 0 20px 60px;
  358. }
  359. .right_box {
  360. display: flex;
  361. flex-direction: column;
  362. margin-left: 30px;
  363. align-items: flex-start;
  364. width: calc(100% - 350px);
  365. }
  366. .right_box_title {
  367. font-size: 23px;
  368. max-width: calc(100% - 190px);
  369. white-space: nowrap;
  370. overflow: hidden;
  371. text-overflow: ellipsis;
  372. }
  373. .people {
  374. display: flex;
  375. margin-top: 20px;
  376. }
  377. .person {
  378. margin-left: 10px;
  379. line-height: 18px;
  380. }
  381. .now_study {
  382. width: 150px;
  383. height: 35px;
  384. color: #fff;
  385. background: #4a9eed;
  386. text-align: center;
  387. line-height: 35px;
  388. border-radius: 5px;
  389. font-size: 13px;
  390. cursor: pointer;
  391. margin-top: 30px;
  392. }
  393. .choose_who {
  394. display: flex;
  395. margin: 15px 0 0 25px;
  396. }
  397. .who_choose {
  398. height: 28px;
  399. cursor: pointer;
  400. }
  401. .choose_who>div:nth-child(2) {
  402. margin-left: 35px;
  403. }
  404. .choose {
  405. border-bottom: 5px solid #4a9eed;
  406. color: #4a9eed;
  407. }
  408. .student_body {
  409. display: flex;
  410. }
  411. .student_body,
  412. .right {
  413. width: 100%;
  414. margin: 10px auto;
  415. min-height: 688px;
  416. }
  417. .nav {
  418. margin: auto 25px;
  419. width: 80%;
  420. padding-top: 5px;
  421. text-indent: 25px;
  422. }
  423. .pic {
  424. width: 100%;
  425. display: flex;
  426. flex-direction: row;
  427. flex-wrap: wrap;
  428. height: 100%;
  429. justify-content: space-evenly;
  430. }
  431. .Img {
  432. /*width: 30%; */
  433. width: 300px;
  434. margin: 20px 50px;
  435. margin: 20px 10px;
  436. border: 1px solid #dbdbdb;
  437. border-radius: 5px;
  438. overflow: hidden;
  439. }
  440. .Img>img {
  441. width: 100%;
  442. height: 100%;
  443. }
  444. .student_body_one,
  445. .right_one {
  446. width: 100%;
  447. margin: 0 auto;
  448. background: #fff;
  449. margin-top: 10px;
  450. min-height: 688px;
  451. }
  452. .student {
  453. width: 85%;
  454. display: flex;
  455. flex-direction: row;
  456. flex-wrap: wrap;
  457. justify-content: flex-start;
  458. margin: auto 10px;
  459. }
  460. .student>div {
  461. width: 12%;
  462. height: 35px;
  463. background: #e3759a;
  464. text-align: center;
  465. border: 1px solid #e3759a;
  466. border-radius: 5px;
  467. color: #fff;
  468. line-height: 35px;
  469. margin: 10px;
  470. }
  471. .dialog_change>>>.el-dialog {
  472. border-radius: 5px;
  473. }
  474. .dialog_change>>>.el-dialog__header {
  475. background: #303030;
  476. height: 36px;
  477. line-height: 36px;
  478. padding-left: 10px;
  479. padding: 0px 10px 0px;
  480. }
  481. .dialog_change>>>.el-dialog__headerbtn {
  482. top: 10px !important;
  483. right: 10px !important;
  484. }
  485. .dialog_change>>>.el-dialog__title {
  486. color: #fff;
  487. font-size: 14px;
  488. line-height: 5px;
  489. }
  490. .dialog_change>>>.el-dialog__body {
  491. background: #f5f5f5;
  492. }
  493. .blue_box {
  494. align-items: center;
  495. display: flex;
  496. flex-direction: column;
  497. justify-content: center;
  498. }
  499. .blue_box,
  500. .blue_box_one {
  501. width: 30%;
  502. height: 100px;
  503. text-align: center;
  504. color: #fff;
  505. background-image: linear-gradient(90deg, #477cd7, #65b9fc);
  506. border-radius: 15px;
  507. margin: 15px 0 15px 15px;
  508. cursor: pointer;
  509. }
  510. .blue_box_one {
  511. width: 200px;
  512. height: 200px;
  513. background-image: linear-gradient(90deg, #477cd7, #65b9fc);
  514. display: flex;
  515. flex-direction: column;
  516. flex-wrap: nowrap;
  517. align-items: center;
  518. justify-content: center;
  519. }
  520. .blue_box_one>div {
  521. margin: 5px 0;
  522. }
  523. .blue_box_one>div:nth-child(1) {
  524. font-size: 20px;
  525. font-weight: bold;
  526. }
  527. .blue_box>div:nth-child(2) {
  528. margin-top: 10px;
  529. }
  530. .blue_box_one>div:nth-child(2) {
  531. white-space: nowrap;
  532. text-overflow: ellipsis;
  533. overflow: hidden;
  534. word-break: break-all;
  535. width: 100%;
  536. text-align: center;
  537. max-width: calc(100% - 85px);
  538. margin: 0 auto;
  539. }
  540. .return {
  541. background: #205cc6;
  542. width: 70px;
  543. height: 30px;
  544. color: #fff;
  545. text-align: center;
  546. line-height: 32px;
  547. margin-right: 20px;
  548. cursor: pointer;
  549. border-radius: 5px;
  550. position: absolute;
  551. right: 0;
  552. top: 24px;
  553. font-size: 14px;
  554. }
  555. .return>img {
  556. width: 100%;
  557. height: 100%;
  558. }
  559. .cType {
  560. display: flex;
  561. flex-direction: row;
  562. justify-content: center;
  563. align-items: center;
  564. margin-top: 20px;
  565. }
  566. .cType>div>span {
  567. font-size: 18px;
  568. }
  569. .type_children+.type_children {
  570. margin-left: 10px;
  571. }
  572. .all_choose {
  573. margin-right: 10px;
  574. max-width: 250px;
  575. white-space: nowrap;
  576. overflow: hidden;
  577. text-overflow: ellipsis;
  578. }
  579. .rightT {
  580. display: flex;
  581. flex-direction: row;
  582. flex-wrap: nowrap;
  583. align-items: center;
  584. width: calc(100% - 20px);
  585. }
  586. .jd {
  587. background: #4a9eed;
  588. margin-left: 15px;
  589. border-radius: 10px;
  590. color: #fff;
  591. width: 70px;
  592. height: 25px;
  593. text-align: center;
  594. line-height: 25px;
  595. }
  596. .sLeft {
  597. width: 14%;
  598. margin-right: 10px;
  599. background: rgb(255, 255, 255);
  600. padding: 20px 0 0 15px;
  601. border-radius: 10px;
  602. }
  603. .courseT {
  604. border-left: 3px solid #2e66c9;
  605. padding-left: 5px;
  606. color: #2e66c9;
  607. font-weight: bold;
  608. }
  609. .courseTd {
  610. padding-top: 15px;
  611. height: 700px;
  612. overflow: auto;
  613. word-break: break-word;
  614. }
  615. .courseTd::-webkit-scrollbar {
  616. /*滚动条整体样式*/
  617. width: 6px;
  618. /*高宽分别对应横竖滚动条的尺寸*/
  619. height: 6px;
  620. }
  621. /*定义滚动条轨道 内阴影+圆角*/
  622. .courseTd::-webkit-scrollbar {
  623. border-radius: 10px;
  624. background-color: #eee;
  625. }
  626. /*定义滑块 内阴影+圆角*/
  627. .courseTd::-webkit-scrollbar-thumb {
  628. border-radius: 10px;
  629. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  630. background-color: rgba(0, 0, 0, 0.1);
  631. }
  632. .rightTd,
  633. .noBRight {
  634. width: 84%;
  635. background: #fff;
  636. display: flex;
  637. flex-direction: row;
  638. flex-wrap: wrap;
  639. align-content: flex-start;
  640. align-items: center;
  641. justify-content: flex-start;
  642. }
  643. .noBRight {
  644. width: 100%;
  645. }
  646. .Tname {
  647. margin-left: 40px;
  648. }
  649. </style>