courseDetail.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <div class="course-detail" v-if="info" v-loading="loading">
  3. <div class="main">
  4. <h2>{{data.name}}</h2>
  5. <div class="main-top">
  6. <svg-icon icon-class="headset" className="icon-headset"></svg-icon>
  7. <span class="playsNumber">{{play_total_count}}</span>
  8. <span class="progress">已更新{{data.cs_item_count_valid}}课时/共{{data.cs_item_count}}课时</span>
  9. </div>
  10. <div class="main-center">
  11. <h1>{{(lessonIndex+1)+'. '+info.lb_course_cs_item.name}}</h1>
  12. <p class="teacher">主讲教师 {{info.lb_course_cs_item.teacher_name}}</p>
  13. <div class="audioline-box" v-if="info.lb_course_cs_item.file_url">
  14. <audio-line audioId='course-detail-audio' :mp3="info.lb_course_cs_item.file_url"></audio-line>
  15. </div>
  16. </div>
  17. <div class="main-bottom">
  18. <div class="main-bottom-left">
  19. <div class="tabs-box">
  20. <a class="info-btn" :class="[infoIndex===0?'active':'']" @click="handleChangeInfo(0)">课节信息</a>
  21. <a class="info-btn" :class="[infoIndex===1?'active':'']" @click="handleChangeInfo(1)">课节资源</a>
  22. </div>
  23. <div class="info-detail" v-html="info.lb_course_cs_item.intro" v-if="infoIndex===0"></div>
  24. <resources-list :data="info.resource_file_list" :type='type' v-if="infoIndex===1"></resources-list>
  25. </div>
  26. <lesson-catalog :data="lessonCatalog" :lessonCatalogEdsc="lessonCatalogEdsc" class="main-bottom-right" @getInfo="getInfo"></lesson-catalog>
  27. </div>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  33. //例如:import 《组件名称》from ‘《组件路径》';
  34. import LessonCatalog from "./components/LessonCatalog.vue"
  35. import AudioLine from "@/components/AudioLine.vue"
  36. import ResourcesList from "./components/ResourcesList.vue"
  37. import { getLogin } from "@/api/ajax";
  38. export default {
  39. //import引入的组件需要注入到对象中才能使用
  40. components: { LessonCatalog, AudioLine, ResourcesList},
  41. props: ["lessonCatalog", "data", "type", "lessonCatalogEdsc", "play_total_count"],
  42. data() {
  43. //这里存放数据
  44. return {
  45. infoIndex: 0, // 课节信息tabs
  46. info: null,
  47. id: this.$route.query.id?this.$route.query.id:'',
  48. lessonIndex: 0, // 课节索引
  49. loading: false
  50. }
  51. },
  52. //计算属性 类似于data概念
  53. computed: {},
  54. //监控data中数据变化
  55. watch: {},
  56. //方法集合
  57. methods: {
  58. // 切换infotabs
  59. handleChangeInfo(value){
  60. this.infoIndex = value
  61. },
  62. // 获取课节信息
  63. getInfo(index){
  64. this.loading = true
  65. let MethodName = "/CourseServer/Manager/LBCourseManager/GetLBCourseCSItemInfo";
  66. let data = {
  67. id: index||index===0?this.lessonCatalog[index].id:this.lessonCatalog[this.lessonIndex].id
  68. }
  69. getLogin(MethodName, data)
  70. .then((res) => {
  71. this.loading = false
  72. if(res.status===1){
  73. this.info = res
  74. this.lessonIndex = index||index===0?index:this.lessonIndex
  75. }
  76. })
  77. .catch(() => {
  78. this.loading = false
  79. });
  80. }
  81. },
  82. //生命周期 - 创建完成(可以访问当前this实例)
  83. created() {
  84. if(this.lessonCatalog.length>0){
  85. this.getInfo()
  86. }
  87. },
  88. //生命周期 - 挂载完成(可以访问DOM元素)
  89. mounted() {
  90. },
  91. //生命周期-创建之前
  92. beforeCreated() { },
  93. //生命周期-挂载之前
  94. beforeMount() { },
  95. //生命周期-更新之前
  96. beforUpdate() { },
  97. //生命周期-更新之后
  98. updated() { },
  99. //生命周期-销毁之前
  100. beforeDestory() { },
  101. //生命周期-销毁完成
  102. destoryed() { },
  103. //如果页面有keep-alive缓存功能,这个函数会触发
  104. activated() { }
  105. }
  106. </script>
  107. <style lang="scss" scoped>
  108. /* @import url(); 引入css类 */
  109. .course-detail {
  110. background: #fff;
  111. min-height: 100%;
  112. .main{
  113. width: 1200px;
  114. margin: 0 auto;
  115. padding: 105px 0;
  116. h2{
  117. font-weight: 400;
  118. font-size: 20px;
  119. line-height: 28px;
  120. color: #2F3742;
  121. margin: 0 0 10px 0;
  122. }
  123. &-top{
  124. margin-bottom: 24px;
  125. color: #929CA8;
  126. font-weight: 400;
  127. font-size: 14px;
  128. line-height: 22px;
  129. .playsNumber{
  130. margin: 0 24px 0 4px;
  131. }
  132. }
  133. &-center{
  134. background: #F7F8FA;
  135. border-radius: 8px;
  136. padding: 24px;
  137. h1{
  138. font-weight: 600;
  139. font-size: 24px;
  140. line-height: 32px;
  141. color: #1F2C5C;
  142. margin: 0;
  143. }
  144. .teacher{
  145. margin: 16px 0;
  146. color: #929CA8;
  147. font-weight: 400;
  148. font-size: 16px;
  149. line-height: 24px;
  150. }
  151. .audioline-box{
  152. border: 1px solid #EBEBEB;
  153. border-radius: 30px;
  154. background: #FFFFFF;
  155. height: 64px;
  156. display: flex;
  157. align-items: center;
  158. padding: 16px 24px;
  159. }
  160. }
  161. &-bottom{
  162. margin-top: 23px;
  163. display: flex;
  164. &-left{
  165. width: 808px;
  166. margin-right: 33px;
  167. padding-bottom: 48px;
  168. .tabs-box{
  169. display: flex;
  170. width: 100%;
  171. }
  172. .info-btn{
  173. background: #fff;
  174. border-radius: 16px;
  175. width: 88px;
  176. height: 32px;
  177. display: flex;
  178. align-items: center;
  179. justify-content: center;
  180. font-weight: 500;
  181. font-size: 14px;
  182. line-height: 22px;
  183. color: #4E5969;
  184. margin-right: 16px;
  185. &:hover{
  186. background: #F2F3F5;
  187. }
  188. &.active{
  189. color: #165DFF;
  190. background: #F2F3F5;
  191. }
  192. }
  193. .info-detail{
  194. background: #F7F8FA;
  195. border: 1px solid #F2F3F5;
  196. border-radius: 4px;
  197. padding: 40px;
  198. margin-top: 16px;
  199. height: 100%;
  200. }
  201. }
  202. &-right{
  203. width: 355px;
  204. }
  205. }
  206. }
  207. }
  208. </style>