liveRoom.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. <template>
  2. <div class="pb_content">
  3. <div class="pb_content_body">
  4. <div class="body_student">
  5. <div class="student_head">
  6. <div class="box_course">
  7. <div class="wheel">
  8. <img
  9. :src="
  10. studentMessage.headportrait != null
  11. ? studentMessage.headportrait
  12. : tx
  13. "
  14. alt=""
  15. />
  16. </div>
  17. <div class="right_box">
  18. <div class="right_box_title">
  19. {{ studentMessage.name ? studentMessage.name : "暂无名称" }}
  20. </div>
  21. <div class="people">
  22. <div>
  23. <span>班级:</span
  24. ><span>{{
  25. studentMessage.cname ? studentMessage.cname : "暂无班级"
  26. }}</span>
  27. </div>
  28. <div style="margin-left: 50px">
  29. <span>所属组织:</span
  30. ><span>{{
  31. studentMessage.sname ? studentMessage.sname : "暂无学校"
  32. }}</span>
  33. </div>
  34. </div>
  35. <div>
  36. <span>手机号码:</span
  37. ><span>{{
  38. studentMessage.phonenumber
  39. ? studentMessage.phonenumber
  40. : "暂无手机号"
  41. }}</span>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="student_body">
  47. <div class="myProject">我的项目</div>
  48. <div class="project_box">
  49. <div
  50. class="three_box_inthis"
  51. v-for="(item, index) in myCourse"
  52. :key="index"
  53. >
  54. <div
  55. class="project"
  56. @click="
  57. goTo(
  58. '/liveProjectDetail?courseId=' +
  59. item.id +
  60. '&userid=' +
  61. userid +
  62. '&oid=' +
  63. oid
  64. )
  65. "
  66. >
  67. <!-- <img
  68. :src="
  69. item.cover != null && item.cover != ''
  70. ? JSON.parse(item.cover)[0].url
  71. : mpj
  72. "
  73. alt=""
  74. /> -->
  75. <img :src="item.poster ? item.poster : mpj" alt="" />
  76. </div>
  77. <div class="projct_nav">
  78. <div style="font-size: 18px">
  79. {{ item.name }}
  80. </div>
  81. <div>
  82. <span style="color: #999">{{ item.time }}</span>
  83. </div>
  84. </div>
  85. <!-- <div class="three_bottom">
  86. <div
  87. @click="
  88. goTo(
  89. '/liveProjectDetail?courseId=' +
  90. item.id +
  91. '&userid=' +
  92. userid +
  93. '&oid=' +
  94. oid
  95. )
  96. "
  97. >
  98. 课前预习
  99. </div>
  100. <div
  101. @click="
  102. goTo(
  103. '/liveProjectDetail?courseId=' +
  104. item.id +
  105. '&userid=' +
  106. userid +
  107. '&oid=' +
  108. oid
  109. )
  110. "
  111. >
  112. 开始上课
  113. </div>
  114. <div
  115. @click="
  116. goTo(
  117. '/liveProjectDetail?courseId=' +
  118. item.id +
  119. '&userid=' +
  120. userid +
  121. '&oid=' +
  122. oid
  123. )
  124. "
  125. >
  126. 课后复习
  127. </div>
  128. </div> -->
  129. </div>
  130. </div>
  131. <div class="student_page">
  132. <el-pagination
  133. background
  134. layout="prev, pager, next"
  135. :page-size="10"
  136. :total="total"
  137. v-if="page && myCourse.length"
  138. style="padding-bottom: 20px"
  139. @current-change="handleCurrentChange"
  140. ></el-pagination>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </template>
  147. <script>
  148. export default {
  149. data() {
  150. return {
  151. myCourse: [
  152. // {
  153. // cover: [],
  154. // courseid: "9a4e8dbe-132e-438e-97db-b07eb01fa04c",
  155. // title: "introduce a festival (Final)",
  156. // chapters: [],
  157. // createTime: this.getNowTime(),
  158. // },
  159. ],
  160. studentMessage: [],
  161. tx: require("../assets/avatar.png"),
  162. mpj: require("../assets/icon/pptImg2.png"),
  163. userid: this.$route.query.userid,
  164. oid: this.$route.query.oid,
  165. classid: this.$route.query.classid,
  166. loading: "",
  167. page: 1,
  168. total: 0,
  169. };
  170. },
  171. methods: {
  172. goTo(path) {
  173. this.$router.push(path);
  174. },
  175. getNowTime() {
  176. const yy = new Date().getFullYear();
  177. const MM =
  178. new Date().getMonth() + 1 < 10
  179. ? "0" + (new Date().getMonth() + 1)
  180. : new Date().getMonth() + 1;
  181. const dd =
  182. new Date().getDate() < 10
  183. ? "0" + new Date().getDate()
  184. : new Date().getDate();
  185. const HH =
  186. new Date().getHours() < 10
  187. ? "0" + new Date().getHours()
  188. : new Date().getHours();
  189. const mm =
  190. new Date().getMinutes() < 10
  191. ? "0" + new Date().getMinutes()
  192. : new Date().getMinutes();
  193. const ss =
  194. new Date().getSeconds() < 10
  195. ? "0" + new Date().getSeconds()
  196. : new Date().getSeconds();
  197. return yy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
  198. },
  199. selectSDetail() {
  200. let params = {
  201. uid: this.userid,
  202. };
  203. this.ajax
  204. .get(this.$store.state.api + "selectSDetail", params)
  205. .then((res) => {
  206. this.studentMessage = res.data[0][0];
  207. })
  208. .catch((err) => {
  209. this.isLoading = false;
  210. console.error(err);
  211. });
  212. },
  213. handleCurrentChange(val) {
  214. // console.log(`当前页: ${val}`);
  215. this.page = val;
  216. this.getData();
  217. },
  218. getData() {
  219. if (!this.loading) {
  220. this.loading = this.openLoading(document.querySelector(".project_box"));
  221. }
  222. let params = {
  223. oid: this.oid,
  224. cid: this.classid,
  225. page: this.page,
  226. };
  227. this.ajax
  228. .get(this.$store.state.api + "getRealTimeClassStu", params)
  229. .then((res) => {
  230. this.loading.close();
  231. this.loading = "";
  232. this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
  233. this.myCourse = res.data[0];
  234. })
  235. .catch((err) => {
  236. this.loading.close();
  237. this.loading = "";
  238. console.error(err);
  239. });
  240. },
  241. },
  242. created() {
  243. this.selectSDetail();
  244. this.page = 1;
  245. this.getData();
  246. document.scrollingElement.scrollTop = 0;
  247. },
  248. };
  249. </script>
  250. <style scoped>
  251. .body_student {
  252. margin: 0px auto;
  253. width: 98%;
  254. height: 100%;
  255. }
  256. .student_head {
  257. width: 100%;
  258. margin: 0 auto;
  259. height: 30%;
  260. background-image: linear-gradient(90deg, #30c499, #75ceba);
  261. color: #fff;
  262. }
  263. .wheel > img,
  264. .project > img {
  265. width: 100%;
  266. height: 100%;
  267. object-fit: contain;
  268. }
  269. .box_course {
  270. display: flex;
  271. padding: 35px 0 25px 60px;
  272. align-items: center;
  273. }
  274. .wheel {
  275. width: 210px;
  276. }
  277. .right_box {
  278. display: flex;
  279. flex-direction: column;
  280. margin-left: 30px;
  281. /* justify-content: space-around; */
  282. }
  283. .right_box_title {
  284. font-size: 23px;
  285. }
  286. .people {
  287. display: flex;
  288. margin: 30px 0 20px 0px;
  289. }
  290. .student_body {
  291. width: 100%;
  292. margin: 0 auto;
  293. background: #fff;
  294. margin-top: 20px;
  295. padding: 0 0 20px;
  296. min-height: 1000px;
  297. }
  298. .project {
  299. width: 100%;
  300. height: 150px;
  301. overflow: hidden;
  302. cursor: pointer;
  303. }
  304. .project_box {
  305. display: flex;
  306. width: 100%;
  307. flex-direction: row;
  308. flex-wrap: wrap;
  309. }
  310. .three_box_inthis {
  311. display: flex;
  312. width: 300px;
  313. flex-direction: column;
  314. align-items: flex-start;
  315. border: 1px solid #ccc;
  316. margin: 15px;
  317. }
  318. .projct_nav {
  319. padding-left: 5px;
  320. display: flex;
  321. flex-direction: column;
  322. flex-wrap: nowrap;
  323. justify-content: space-around;
  324. width: 100%;
  325. box-sizing: border-box;
  326. }
  327. .projct_nav > div:nth-child(1) {
  328. cursor: pointer;
  329. }
  330. .projct_nav > div {
  331. margin-bottom: 5px;
  332. }
  333. .myProject {
  334. padding: 20px 20px 10px 0;
  335. border-bottom: 1px solid #ccc;
  336. margin-left: 20px;
  337. width: 95%;
  338. }
  339. .three_bottom {
  340. display: flex;
  341. flex-direction: row;
  342. justify-content: space-around;
  343. height: 40px;
  344. align-items: center;
  345. background: #f5f4f4;
  346. font-size: 14px;
  347. width: 100%;
  348. margin-bottom: 0;
  349. }
  350. .three_bottom > div {
  351. cursor: pointer;
  352. }
  353. </style>