project.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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">{{ studentMessage.name }}</div>
  19. <div class="people">
  20. <div>
  21. <span>班级:</span><span>{{ studentMessage.cname }}</span>
  22. </div>
  23. <div style="margin-left: 50px">
  24. <span>所属学校:</span><span>{{ studentMessage.sname }}</span>
  25. </div>
  26. </div>
  27. <div>
  28. <span>手机号码:</span
  29. ><span>{{ studentMessage.phonenumber }}</span>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="student_body">
  35. <div class="myProject">我的项目</div>
  36. <div class="project_box">
  37. <div
  38. class="three_box_inthis"
  39. v-for="(item, index) in myCourse"
  40. :key="index"
  41. >
  42. <div
  43. class="project"
  44. @click="
  45. goTo(
  46. '/courseDetail?courseId=' +
  47. item.courseid +
  48. '&userid=' +
  49. userid +
  50. '&oid=' +
  51. oid +
  52. '&cid=' +
  53. classId +
  54. '&tType=' +
  55. tType +
  56. '&screenType=' +
  57. screenType
  58. )
  59. "
  60. >
  61. <img
  62. :src="
  63. item.cover != null && item.cover != ''
  64. ? JSON.parse(item.cover)[0].url
  65. : mpj
  66. "
  67. alt=""
  68. />
  69. <!-- <img
  70. :src="
  71. mpj
  72. "
  73. alt=""
  74. /> -->
  75. </div>
  76. <div class="projct_nav">
  77. <div
  78. style="font-size: 18px"
  79. @click="
  80. goTo(
  81. '/courseDetail?courseId=' +
  82. item.courseid +
  83. '&userid=' +
  84. userid +
  85. '&oid=' +
  86. oid
  87. )
  88. "
  89. >
  90. {{ item.title }}
  91. </div>
  92. <div style="color: #2fdb88">
  93. 共{{ JSON.parse(item.chapters).length }}讲
  94. </div>
  95. <div>
  96. <span style="color: #999">{{ item.createTime }}</span>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </template>
  106. <script>
  107. export default {
  108. data() {
  109. return {
  110. myCourse: [],
  111. studentMessage: [],
  112. tx: require("../assets/avatar.png"),
  113. // mpj: require("../assets/project.png"),
  114. mpj: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg",
  115. userid: this.$route.query.userid,
  116. oid: this.$route.query.oid,
  117. classId: this.$route.query.cid,
  118. tType: this.$route.query.tType,
  119. screenType: this.$route.query.screenType,
  120. };
  121. },
  122. methods: {
  123. goTo(path) {
  124. this.$router.push(path);
  125. },
  126. selectSDetail() {
  127. let params = {
  128. uid: this.userid,
  129. };
  130. this.ajax
  131. .get(this.$store.state.api + "selectSDetail", params)
  132. .then((res) => {
  133. this.studentMessage = res.data[0][0];
  134. })
  135. .catch((err) => {
  136. this.isLoading = false;
  137. console.error(err);
  138. });
  139. },
  140. selectMyCourse() {
  141. let params = {
  142. uid: this.userid,
  143. };
  144. this.ajax
  145. .get(this.$store.state.api + "selectMyCourseBycid", params)
  146. .then((res) => {
  147. this.myCourse = res.data[0];
  148. })
  149. .catch((err) => {
  150. console.error(err);
  151. });
  152. },
  153. },
  154. created() {
  155. this.selectSDetail();
  156. this.selectMyCourse();
  157. document.scrollingElement.scrollTop = 0;
  158. },
  159. };
  160. </script>
  161. <style scoped>
  162. .body_student {
  163. margin: 0px auto;
  164. width: 98%;
  165. height: 100%;
  166. }
  167. .student_head {
  168. width: 100%;
  169. margin: 0 auto;
  170. height: 30%;
  171. background-image: linear-gradient(90deg, #30c499, #75ceba);
  172. color: #fff;
  173. }
  174. .wheel > img,
  175. .project > img {
  176. width: 100%;
  177. height: 100%;
  178. }
  179. .box_course {
  180. display: flex;
  181. padding: 35px 0 25px 60px;
  182. align-items: center;
  183. }
  184. .wheel {
  185. width: 210px;
  186. }
  187. .right_box {
  188. display: flex;
  189. flex-direction: column;
  190. margin-left: 30px;
  191. /* justify-content: space-around; */
  192. }
  193. .right_box_title {
  194. font-size: 23px;
  195. }
  196. .people {
  197. display: flex;
  198. margin: 30px 0 20px 0px;
  199. }
  200. .student_body {
  201. width: 100%;
  202. margin: 0 auto;
  203. background: #fff;
  204. margin-top: 20px;
  205. padding: 0 0 20px;
  206. }
  207. .project {
  208. width: 100%;
  209. height: 175px;
  210. }
  211. .project_box {
  212. display: flex;
  213. width: 100%;
  214. flex-direction: row;
  215. flex-wrap: wrap;
  216. }
  217. .three_box_inthis {
  218. display: flex;
  219. width: 30.33%;
  220. flex-direction: column;
  221. align-items: flex-start;
  222. border: 1px solid #ccc;
  223. margin: 15px 0 0 15px;
  224. }
  225. .projct_nav {
  226. margin-left: 5px;
  227. display: flex;
  228. flex-direction: column;
  229. flex-wrap: nowrap;
  230. justify-content: space-around;
  231. }
  232. .projct_nav > div:nth-child(1) {
  233. cursor: pointer;
  234. }
  235. .projct_nav > div {
  236. margin-bottom: 5px;
  237. }
  238. .myProject {
  239. padding: 20px 20px 10px 0;
  240. border-bottom: 1px solid #ccc;
  241. margin-left: 20px;
  242. width: 95%;
  243. }
  244. </style>