courseModule.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view style="margin: 20rpx 0;">
  3. <view class="title" @click="openModule(menuItem)">
  4. <image src="/static/icon/up1.png" class="icon_up" v-if="down"></image>
  5. <image src="/static/icon/down1.png" class="icon_up" v-if="!down"></image>
  6. <text style="margin-left: 10rpx;">{{menuItem.name}}</text>
  7. </view>
  8. <view v-if="!down">
  9. <view v-for="(itemM,indexM) in list" >
  10. <courseChapter :isBuy="isBuy" :gradeId="gradeId" :isRebuild="isRebuild" :menuItem="itemM" :levelId="levelId+'-'+itemM.chapterId"></courseChapter>
  11. <u-line v-if="indexM<list.length-1"></u-line>
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import courseChapter from '@/components/course/courseChapter.vue';
  18. export default {
  19. name: 'courseModule',
  20. props: {
  21. menuItem: {
  22. type: Object,
  23. default: {}
  24. },
  25. isBuy: { //是否是已购买商品
  26. type: Boolean,
  27. default: false
  28. },
  29. levelId: {
  30. type: String,
  31. default: ""
  32. },
  33. isRebuild: { //是否重修目录
  34. type: Boolean,
  35. default: false
  36. },
  37. gradeId: { //重修需要班级ID
  38. type: Number,
  39. default: 0
  40. }
  41. },
  42. components: {
  43. courseChapter
  44. },
  45. data() {
  46. return {
  47. down:true,
  48. list:[]
  49. };
  50. },
  51. onLoad() {},
  52. created() {
  53. },
  54. mounted() {
  55. },
  56. methods: {
  57. openModule(item){
  58. this.down = !this.down
  59. if(!this.down&&this.list.length==0){
  60. if(this.isRebuild){
  61. this.getReChapterList(item.id,item.courseId)
  62. }else{
  63. this.getChapterList(item.id)
  64. }
  65. }
  66. },
  67. getReChapterList(moduleId,courseId) {
  68. let self = this
  69. this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId,rebuild:1}).then(res => {
  70. if(res.data.code==200){
  71. for(let i=0;i<res.data.data.length;i++){
  72. let item = res.data.data[i]
  73. item.id = item.chapterId
  74. }
  75. self.list = res.data.data
  76. }
  77. });
  78. },
  79. getChapterList(moduleId) {
  80. let self = this
  81. this.$api.chapterList(moduleId).then(res => {
  82. if(res.data.code==200){
  83. for(let i=0;i<res.data.data.length;i++){
  84. let item = res.data.data[i]
  85. item.id = item.chapterId
  86. }
  87. self.list = res.data.data
  88. }
  89. });
  90. },
  91. }
  92. };
  93. </script>
  94. <style scoped>
  95. .icon_up{
  96. width: 24rpx;
  97. height: 24rpx;
  98. }
  99. .title{
  100. font-size: 30rpx;
  101. font-family: PingFang SC;
  102. font-weight: bold;
  103. color: #333333;
  104. white-space:nowrap;
  105. overflow:hidden;
  106. text-overflow:ellipsis;
  107. }
  108. </style>