exam/exam-06173-uni/pages/course/components/CourseFile.vue

<template>

	<view>
		<uni-collapse>
			 <uni-collapse-item v-for="dir in dataList" :title="dir.title" :name="dir.id" :open="true">
				 <view v-for="item in dir.fileList" @click="changeFile(item)" class="file-item">
					{{item.title}} <span style="float: right; font-size: 12px; color: #666;">{{item.learnMin}}/{{item.needLearn}}分钟</span>
					
					<view v-if="item.unlocked">
						<cmd-progress :percent="percent(item)"></cmd-progress>
					</view>
					<view v-else style="color: #666; font-size: 12px; display: flex; align-items: center;">
						<icon type="warn" size="14" style="margin-right:5px;"/>  当前文件未解锁
					</view>
					
				 </view>
			  </uni-collapse-item>
		</uni-collapse>
	</view>
	
</template>

<script>
	export default {
		name: 'CourseFile',
		props: {
			value: Array,
			courseId: String,
			drag: Boolean,
			checkOn: Boolean,
			checkSec: Number
		},

		data() {
			return {
				current: {},
				dataList: []
			}
		},

		watch: {
			value: {
				handler(val) {
					this.dataList = val
				}
			}
		},
		created() {
			this.dataList = this.value
		},
		methods: {
			
			// 切换文件跳转
			changeFile(data) {
				
				// 未解锁，不允许学习
				if (!data.unlocked) {
					uni.showToast({
						icon:"none",
						title: "此课件尚未解锁，请按顺序学习！"
					})
					return
				}
				
				// 通用参数
				const params = `courseId=${this.courseId}&fileId=${data.fileId}&drag=${this.drag}&checkOn=${this.checkOn}&checkSec=${this.checkSec}`
			
				if (data.fileType === '11') {
					uni.navigateTo({
						url: `/pages/course/pdf?${params}&path=${encodeURIComponent(data.viewUrl)}`
					});
					return;
				}
			
				if (data.fileType === '22') {
					uni.navigateTo({
						url: `/pages/course/pdf?${params}&path=${encodeURIComponent(data.fileUrl)}`
					});
					return;
				}
			
				// PDF直接查看
				if (data.fileType === '33') {
					uni.navigateTo({
						url: `/pages/course/video?${params}&path=${encodeURIComponent(data.viewUrl)}`
					});
					return;
				}
			},
			
			// 计算进度
			percent(item) {
			  if (!item.learnMin) {
				return 0
			  }
					
			  if (item.learnMin >= item.needLearn) {
				return 100
			  }
					
			  return parseInt((item.learnMin * 100 / item.needLearn))
			},
		}
	}
</script>

<style scoped>
	
	.file-item {
	
		border: #ddd 1px solid;
		text-align: left;
		padding: 10px;
		cursor: pointer;
		background: #fff;
		margin: 5px 0px 15px 0px;
	}
	
	.file-item-active {
	
		border: #1890ff 1px solid;
		box-sizing: border-box;
		color: #1890ff;
		font-weight: 700;
	}
	
	/deep/
	.uni-collapse-item__title-box{
		padding: 0px !important;
		
	}
	
	/deep/
	.uni-collapse-item__title-box .uni-collapse-item__title-text{
		font-size: 16px !important;
		font-weight: 700 ;
		color: rgb(0, 122, 255);
	}

</style>