courseChapter.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. <template>
  2. <view style="margin: 20rpx 0;">
  3. <view class="title" @click="openChapter(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: 30rpx;">{{menuItem.name}}</text>
  7. </view>
  8. <view v-if="!down">
  9. <view v-for="(itemM,indexM) in list" :key="indexM">
  10. <view v-if="itemM.type!=2">
  11. <courseSection :courseId="courseId" @playEnd="refreshList($event)" :goodsId="goodsId" :isBuy="isBuy" :nextMenuItem="findNextSection(indexM)" :isRebuild="isRebuild" :gradeId="gradeId" :menuItem="itemM" :levelId="levelId+'-'+itemM.sectionId"></courseSection>
  12. <u-line v-if="indexM<list.length-1"></u-line>
  13. </view>
  14. <view v-if="itemM.type==2">
  15. <u-line ></u-line>
  16. <view class="examBox" @click="toDo(itemM.typeId,goodsId,itemM.moduleId,itemM.chapterId,itemM,indexM)">
  17. <view class="exam">
  18. <view class="eTag">{{itemM.doType==1?'练习':'考试'}}</view>
  19. <view style="margin-left: 15rpx;">{{itemM.name}}</view>
  20. </view>
  21. <view v-if="isRebuild||itemM.rebuild>0" class="tagRe">待重修</view>
  22. <view v-else>
  23. <view :class="{tagGreen:itemM.learning == 1,tagRe:itemM.learning == 0 || itemM.rebuild>0}">
  24. <text v-if="itemM.rebuild > 0">待重测</text>
  25. <text v-else-if="itemM.learning == 1">合格</text>
  26. <text v-else-if="itemM.learning == 0">不合格</text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import { mapGetters } from 'vuex';
  37. import courseSection from '@/components/course/courseSection.vue';
  38. export default {
  39. name: 'courseChapter',
  40. props: {
  41. learningOrder:{ //是否设置学习顺序 0 设置 1不设置
  42. type:Number,
  43. default:1
  44. },
  45. menuItem: {
  46. type: Object,
  47. default: {}
  48. },
  49. isBuy: {
  50. type: Boolean,
  51. default: false
  52. },
  53. levelId: {
  54. type: String,
  55. default: ""
  56. },
  57. goodsId: {
  58. type: Number,
  59. default: 0
  60. },
  61. courseId: {
  62. type: Number,
  63. default: 0
  64. },
  65. isRebuild: {
  66. type: Boolean,
  67. default: false
  68. },
  69. gradeId: {
  70. type: Number,
  71. default: 0
  72. }
  73. },
  74. components: {
  75. courseSection
  76. },
  77. data() {
  78. return {
  79. down:true,
  80. list:[],
  81. examList:{},
  82. canLearn:false, //是否全部视频看完才可以练习、测试
  83. };
  84. },
  85. onLoad() {},
  86. created() {
  87. },
  88. mounted() {
  89. },
  90. onPageShow() {
  91. this.refreshList({isRebuild:this.isRebuild});
  92. },
  93. methods: {
  94. refreshList(isRebuild) {
  95. console.log(9999)
  96. let moduleId = this.menuItem.moduleId?this.menuItem.moduleId:0
  97. if(this.isRebuild){
  98. this.getReSectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
  99. }else{
  100. this.getBuySectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
  101. // this.getMenuExamList(item.id,item.courseId,moduleId)
  102. }
  103. this.$emit('playEnd',{isRebuild:isRebuild.isRebuild})
  104. console.log(10000)
  105. // let moduleId = this.menuItem.moduleId?this.menuItem.moduleId:0
  106. // this.getBuySectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
  107. },
  108. findNextSection(index){
  109. for(let i=index+1;i<this.list.length;i++){
  110. return this.list[i];
  111. }
  112. return {}
  113. },
  114. /**
  115. * 去做题
  116. */
  117. async toDo(id,goodsId =0,moduleId = 0, chapterId = 0,item,index) {
  118. console.log(this.learningOrder)
  119. if(this.learningOrder == 0) {
  120. if(this.canLearn) {
  121. let num = await this.bankRecordDoNum(item.typeId)
  122. //有次数限制
  123. if(item.answerNum - num > 0 && item.answerNum > 0) {
  124. // this.$set(this.list[index],'doNum',(item.doNum+1))
  125. console.log(this.list[index])
  126. uni.navigateTo({
  127. url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
  128. })
  129. //没有答题次数限制
  130. } else if(item.answerNum == 0) {
  131. uni.navigateTo({
  132. url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
  133. })
  134. } else {
  135. uni.showToast({
  136. icon:'none',
  137. title:'该试卷只能答题'+item.answerNum+'次'
  138. })
  139. return;
  140. }
  141. } else {
  142. uni.showToast({
  143. icon:'none',
  144. title:'请学完视频课程再进行练习和测试'
  145. })
  146. }
  147. } else {
  148. let num = await this.bankRecordDoNum(item.typeId)
  149. //有次数限制
  150. if(item.answerNum - item.doNum > 0 && item.answerNum > 0) {
  151. // this.$set(this.list[index],'doNum',(item.doNum+1))
  152. console.log(this.list[index])
  153. uni.navigateTo({
  154. url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
  155. })
  156. //没有答题次数限制
  157. } else if(item.answerNum == 0) {
  158. uni.navigateTo({
  159. url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
  160. })
  161. } else {
  162. uni.showToast({
  163. icon:'none',
  164. title:'该试卷只能答题'+item.answerNum+'次'
  165. })
  166. return;
  167. }
  168. }
  169. },
  170. bankRecordDoNum(examId) {
  171. return new Promise(resolve => {
  172. this.$api.bankRecordDoNum({
  173. goodsId:this.goodsId,
  174. gradeId:this.gradeId,
  175. chapterId:this.menuItem.id,
  176. courseId:this.courseId,
  177. moduleId:0,
  178. examId:examId,
  179. }).then(res => {
  180. resolve(res.data.data)
  181. })
  182. })
  183. },
  184. openChapter(item){
  185. console.log(this.menuItem)
  186. this.down = !this.down
  187. if(!this.down&&this.list.length==0){
  188. console.log(item.id,69)
  189. if(this.isBuy){
  190. let moduleId = item.moduleId?item.moduleId:0
  191. if(this.isRebuild){
  192. this.getReSectionList(item.id,item.courseId,moduleId)
  193. }else{
  194. this.getBuySectionList(item.id,item.courseId,moduleId)
  195. // this.getMenuExamList(item.id,item.courseId,moduleId)
  196. }
  197. }else{
  198. this.getSectionList(item.id)
  199. }
  200. }
  201. },
  202. getMenuExamList(chapterId,courseId,moduleId) {
  203. let self = this
  204. this.$api.menuExamList({chapterId:chapterId,courseId:courseId,moduleId:moduleId}).then(res => {
  205. if(res.data.code==200){
  206. self.examList = res.data.rows
  207. }
  208. });
  209. },
  210. getSectionList(chapterId) {
  211. let self = this
  212. this.$api.sectionList(chapterId).then(res => {
  213. if(res.data.code==200){
  214. for(let i=0;i<res.data.data.length;i++){
  215. let item = res.data.data[i]
  216. item.id = item.sectionId
  217. //判断是否试听
  218. item.tryListen = false
  219. if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
  220. item.tryListen = true
  221. }
  222. }
  223. let newArr = res.data.data.filter(item => {
  224. console.log(item)
  225. return item.type != 2;
  226. })
  227. this.canLearn = newArr.every(item => {
  228. console.log(item)
  229. if(item.learning == 1) {
  230. return true;
  231. } else {
  232. return false;
  233. }
  234. })
  235. self.list = res.data.data
  236. }
  237. });
  238. },
  239. getReSectionList(chapterId,courseId,moduleId) {
  240. let self = this
  241. this.$api.reSectionList({chapterId:chapterId,gradeId:this.gradeId,courseId:courseId,rebuild:1,moduleId:moduleId}).then(res => {
  242. if(res.data.code==200){
  243. for(let i=0;i<res.data.data.length;i++){
  244. let item = res.data.data[i]
  245. item.id = item.sectionId
  246. //判断是否试听
  247. item.tryListen = false
  248. if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
  249. item.tryListen = true
  250. }
  251. }
  252. let newArr = res.data.data.filter(item => {
  253. console.log(item)
  254. return item.type != 2;
  255. })
  256. this.canLearn = newArr.every(item => {
  257. console.log(item)
  258. if(item.learning == 1) {
  259. return true;
  260. } else {
  261. return false;
  262. }
  263. })
  264. self.list = res.data.data
  265. }
  266. });
  267. },
  268. getBuySectionList(chapterId,courseId,moduleId) {
  269. let self = this
  270. this.$api.reSectionList({chapterId:chapterId,gradeId:this.gradeId,courseId:courseId,moduleId:moduleId}).then(res => {
  271. if(res.data.code==200){
  272. for(let i=0;i<res.data.data.length;i++){
  273. let item = res.data.data[i]
  274. item.id = item.sectionId
  275. //判断是否试听
  276. item.tryListen = false
  277. if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
  278. item.tryListen = true
  279. }
  280. }
  281. let newArr = res.data.data.filter(item => {
  282. return item.type != 2;
  283. })
  284. this.canLearn = newArr.every(item => {
  285. console.log(item)
  286. if(item.learning == 1) {
  287. return true;
  288. } else {
  289. return false;
  290. }
  291. })
  292. self.list = res.data.data
  293. }
  294. });
  295. },
  296. },computed: { ...mapGetters(['goodsAuditionConfigIdList']) },
  297. };
  298. </script>
  299. <style scoped>
  300. .tagRe{
  301. width: 80rpx;
  302. height: 28rpx;
  303. background: #FF3B30;
  304. border-radius: 8rpx;
  305. font-size: 20rpx;
  306. color: #FFFFFF;
  307. text-align: center;
  308. }
  309. .tagGreen{
  310. width: 80rpx;
  311. height: 28rpx;
  312. background: #34C759;
  313. border-radius: 8rpx;
  314. font-size: 20rpx;
  315. color: #FFFFFF;
  316. text-align: center;
  317. }
  318. .eTag{
  319. width: 56rpx;
  320. height: 28rpx;
  321. background: #007AFF;
  322. border-radius: 8rpx;
  323. color: #FFFFFF;
  324. font-size: 20rpx;
  325. text-align: center;
  326. line-height: 28rpx;
  327. }
  328. .examBox{
  329. display: flex;
  330. align-items: center;
  331. justify-content: space-between;
  332. }
  333. .exam{
  334. display: flex;
  335. align-items: center;
  336. margin: 20rpx 0;
  337. }
  338. .icon_up{
  339. width: 24rpx;
  340. height: 24rpx;
  341. }
  342. .title{
  343. font-size: 30rpx;
  344. font-family: PingFang SC;
  345. font-weight: bold;
  346. color: #666666;
  347. white-space:nowrap;
  348. overflow:hidden;
  349. text-overflow:ellipsis;
  350. margin-bottom:30rpx;
  351. }
  352. </style>