learning-system-mobile/components/course-list/course-list.vue

<template>
		<view class="course-re-list">
			<view class="course-re-index" v-for="course in items" :key="course.id" @click="toCourseDetail(course)">
				<view class="course-img">
					<text class="img-score">
						<image style="width:28upx;height:28upx;margin-right: 6upx;" src="../../static/images/icon/index-start.png" mode=""></image>
						{{converToScore(course.score)}}分</text>
						<course-image :course="course" width="332upx" height="192upx"></course-image>
					<!-- <image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image> -->
				</view>
				<view class="course-title">
					{{course.name}}
				</view>
				<view class="course-text">
					<text style="margin-right: 6upx;" v-if="course.teacher">{{course.teacher}} |</text> {{formatUserNumber(course.studys || course.studies)}}人已学
				</view>
				<view class="course-type">
					<text class="type-index" v-if="sysTypeName(course.sysType1) != ''">{{sysTypeName(course.sysType1)}}</text>
					<text class="type-tow" v-if="sysTypeName(course.sysType2) != ''">{{sysTypeName(course.sysType2)}}</text>
				</view>
			</view>
		</view>
</template>

<script>
	import { mapGetters,mapActions} from 'vuex';
	import {toScore,formatUserNumber} from '@/utils/tools.js'
	export default {
		props:{
			items:{
				type:Array,
			},
		},
		computed: {
		    ...mapGetters(['userInfo','sysTypeMap'])
		},
		data() {
			return {
				converToScore:toScore,
				formatUserNumber,
			}
		},
		methods: {
			sysTypeName(code){
			  if(code=='' || code==0){return '';}
			  return this.sysTypeMap.get(code);
			},
			//课程跳转详情
			toCourseDetail(citem) {
				//console.log(citem,'citem')
				if(!citem.source){
					uni.navigateTo({
						url: '/pages/study/courseStudy?id=' + citem.id
					})
					return;
				}
				if (citem.source==1) {
					uni.navigateTo({
						url: '/pages/study/studydetail?id=' + citem.id + '&type=' + citem.type
					});
				}else if (citem.source==2){
					uni.navigateTo({
						url: '/pages/study/courseStudy?id=' + citem.id
					})
				}else if (citem.source==3){
					let params=encodeURIComponent('courseId='+citem.id);
					uni.navigateTo({
						url:'/pages/forward?to=/manageApi/stu/project/redirectDetail&params='+params
					});
				}else{
					console.log('不支持的数据来源 '+citem.source)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.course-re-list{
		display: flex;
		flex-wrap: wrap;
		// margin-top: 20upx;
		.course-re-index{
			padding: 15upx 0;
			width: 335upx;
			min-width: 335upx;
			&:nth-child(2n-1){
				margin-right: 20upx;
			}
			.course-img{
				width: 335upx;
				height: 188upx;
				// line-height: 0;
				
				border-radius: 16upx;
				position: relative;
				/deep/ uni-image {
					border-radius: 8upx;
				}
				.img-score{
					// display: inline-block;
					padding: 7upx 15upx;
					box-sizing: border-box;
					position: absolute;
					right:2upx;
					bottom: -4upx;
					color: #FFFFFF;
					font-size: 28upx;
					z-index: 99;
					// width: 136upx;
					height: 44upx;
					background: #1767FF;
					// background: ;
					// background: rgba($color: #1767FF, $alpha: 0.2);
					border-radius: 24upx 0px 8upx 0px;
					backdrop-filter: blur(20px);
				}
			}
			.course-title{
				margin-top: 20upx;
				font-size: 28upx;
				color: #39424C;
				display: -webkit-box;
				word-break:break-all;
				// white-space:pre-wrap;
				overflow: hidden;
				// text-overflow:ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				box-sizing: border-box;
			}
			.course-text{
				margin-top: 20upx;
				font-size: 28upx;
				color: #666666;
			}
			.course-type{
				margin-top: 20upx;
				.type-index{
					font-size: 22upx;
					color: #528CEC;
					background: rgba($color: #387DF7, $alpha: 0.1);
					border-radius: 16upx;
					margin-right: 12upx;
					padding: 2upx 12upx;
				}
				.type-tow{
					font-size: 22upx;
					color: #D98135;
					background: rgba($color: #FF7900, $alpha: 0.1);
					border-radius: 16upx;
					margin-right: 12upx;
					padding: 4upx 12upx;
				}
			}
		}
		
	}
</style>