saas_miniprogram/components/course/courseModule.vue

<template>
<!-- style="margin: 20rpx 0;" -->
	<view>
		<view class="title" @click="openModule(menuItem)">
			<text class="title_name" style="margin-left: 10rpx;">{{menuItem.name}}</text>
			<view>
				<image src="/static/icon/up.png" class="icon_up" v-if="down"></image>
				<image src="/static/icon/down.png" class="icon_up" v-if="!down"></image>
			</view>
		</view>
		<view v-show="!down">
			<view v-for="(itemM,indexM) in list" :key="indexM">
				<!-- v-if='itemM.type != 2' -->
				<courseChapter v-if='itemM.type != 2'  :orderGoodsId="orderGoodsId"
						:isLive="isLive" :preItem="list[indexM - 1] || preItem" :sectionMaxNum="sectionMaxNum" :needOpen="needOpen" @playEnd="playEnd($event)" 
						@toDo="toDo($event)" :courseId="courseId" :learningOrder="learningOrder" :goodsId="goodsId" :isBuy="isBuy" :gradeId="gradeId" 
						:isRebuild="isRebuild"  :menuItem="itemM" :levelId="levelId+'-'+itemM.chapterId" :menuAllList="menuAllList">
				</courseChapter>
				<u-line v-if="indexM<list.length-1"></u-line>
				<!-- 模块卷 -->
				<view v-if="itemM.type == 2">
					<view
						class="examBox"
						@click="
						toDoModuleExam(
							itemM.typeId,
							goodsId,
							itemM.moduleId,
							itemM.chapterId,
							itemM,
							indexM
						)
						"
					>
						<view class="exam">
							<view class="eTag">{{
								itemM.doType == 1 ? "练习" : "考试"
							}}</view>
							<view style="margin-left: 15rpx; flex: 1">{{ itemM.name }}</view>
						</view>
						
						<view>
							<view
								:class="{
								tagGreen: itemM.learning == 1,
								tagRe: itemM.learning == 0 || itemM.rebuild > 0,
								}"
							>
							
								<text v-if="itemM.learning == 1">合格</text>
								<text v-else-if="itemM.learning == 0">不合格</text>
								<!-- <text v-else>不合格</text> -->
							</view>
						</view>
					</view>
					</view>
				

			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import courseChapter from "@/components/course/courseChapter.vue";
export default {
	name: 'courseModule',
	props: {
		isLive:false,
		orderGoodsId:{
			default:0
		},
		preItem:{
			default:undefined
		},
		learningOrder:{ //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
			type:Number,
			defaule:0
		},
		needOpen:{ //是否默认展开
			type:Boolean,
			default:false,
		},
		menuItem: {
			type: Object,
			default: {}
		},
		goodsId: {
			type: Number,
			default: 0
		},
		courseId: {
			type: Number,
			default: 0
		},
		isBuy: { //是否是已购买商品
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		isRebuild: {  //是否重修目录
			type: Boolean,
			default: false
		},
		gradeId: {  //重修需要班级ID
			type: Number,
			default: 0
		},
		sectionMaxNum:{
			default:undefined
		},
		// 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播	
		goodsType: {
			type: [Number, String],
			default: 0,
		}, 
		menuAllList: { // 课程所有子目录结构列表
			type: Array,
			default: () => []
		}
	},
	components: {
		courseChapter
	},
	data() {
		return {
			 down:true,
			 list:[],
		};
	},
	mounted() {
		if(this.needOpen && this.chapterOpen) {
			this.openModule(this.menuItem)
		}
	},
	methods: {
		playEnd(isRebuild) {
			this.$emit('playEnd',{isRebuild:isRebuild.isRebuild})
		},
		toDo(item) {
			this.$emit('toDo',item)
		},
		openModule(item){
			this.down = !this.down
			if(!this.down&&this.list.length==0){
				if(this.isBuy){
					if(this.isRebuild){
						this.getReChapterList(item.id,item.courseId)
					}else{
						this.getBuyChapterList(item.id,item.courseId) //已购买目录
					}
				}else{
					this.getChapterList(item.id) //未购买目录
				}
				
			}
		},
			getChapterList(moduleId) {
                    // url: '/app/common/course/chapterList/'+data,
					this.$api.chapterList(moduleId).then(res => {
						if(res.data.code==200){
							for(let i=0;i<res.data.data.length;i++){
								let item = res.data.data[i]
								item.id = item.chapterId
								item.menuType = 2;
							}
							this.list = res.data.data
						}
					});
				},
		getReChapterList(moduleId,courseId) {
			this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId,rebuild:1}).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.chapterId
						
					}
					this.list = res.data.data
				}
			});
		},
		getBuyChapterList(moduleId,courseId) {
			// course/chapterList
			this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId}).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.chapterId
						item.menuType = 2;
					}
					this.list = res.data.data
				}
				console.log('-----------list', this.list)
			});
			
		},
		/**
		 * 去做题
		 */
		async toDoModuleExam(id, goodsId = 0, moduleId = 0, chapterId = 0, item, index) {
			uni.navigateTo({
			url:
				"/pages2/class/questionBank?courseId=" +
				this.courseId +
				"&gradeId=" +
				this.gradeId +
				"&isFromVideo=1&id=" +
				id +
				"&goodsid=" +
				goodsId +
				"&moduleId=" +
				moduleId +
				"&chapterId=" +
				chapterId +
				"&orderGoodsId=" +
				this.orderGoodsId +
				"&type=3" + '&learning=' + item.learning,
			})
		},
		
	},
	computed: { ...mapGetters(['chapterOpen']) },
};
</script>

<style lang="scss" scoped>
	
.title{
	height: 70rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #EEEEEE;
	.title_name {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
}

.examBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .exam {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.eTag {
		width: 64rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 20rpx;
		background: #007aff;
		border-radius: 8rpx;
		color: #ffffff;
	}
}
.tagRe {
  width: 80rpx;
  height: 28rpx;
  background: #ff3b30;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
}
.tagGreen {
  width: 80rpx;
  height: 28rpx;
  background: #34c759;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
}

</style>