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

<template>
	<!--用于显示课程的图片-->
	<view class="img-box" id="img-box">
		<image style="background-color: #eeeeee"
			:class="{'border':border}"
			:style="`width:${width};height:${height};`"
		    mode="aspectFit	" 
			:src="imageUrl"
		    @error="imageError"></image>
			<!-- <text v-if="textShow && isTextShow == 1" class="text mid" style="color: #fff !important;" v-html="name"></text>
			<text v-if="textShow && isTextShow ==2" class="text mini" style="color: #fff !important;" v-html="name"></text>
			<text v-if="textShow && isTextShow ==3" class="text max" style="color: #fff !important;" v-html="name"></text> -->
			<!-- <text class="text" style="color: #fff !important;" v-html="name"></text> -->
	</view>
</template>

<script>
	export default {
		props:{
			course:{
				type: Object,
				default:()=>{}
			},
			border:{
				type:Boolean,
				default:false
			},
			height:{
				type:String,
				default:'100%'
			},
			width:{
				type:String,
				default:'100%'
			}
		},
		computed:{
			name(){
				let name = '';
				if(this.course && this.course.name && this.course.name !== '') {
						name = this.course.name.replace('color:#ff0000','color:#fff');
				}
				if(this.course && this.course.courseName && this.course.courseName !== '') {
						name = this.course.courseName.replace('color:#ff0000','color:#fff');
				}
				if(this.course && this.course.title && this.course.title !== '') {
						name = this.course.title.replace('color:#ff0000','color:#fff');
				}
				return name;
				// course.name || course.courseName || course.title
			},
			imageUrl(){
				this.textShow = false;
				if(!this.course){
					this.textShow = true;
					return this.$config.context+'/static/images/course/courseDefault.png'
				}
				if(this.course.cmtask_imgurl && this.course.cmtask_imgurl.startsWith('/upload/')) {
					return this.course.cmtask_imgurl;
				} 
				if(this.course.cmtask_imgurl && this.course.cmtask_imgurl.startsWith('http')) {
					return this.course.cmtask_imgurl;
				} else  if(this.course.coverImg && this.course.coverImg.startsWith('http')) {
					return this.course.coverImg;
				} else if(this.course.courseImage && this.course.courseImage.startsWith('http')){
					return this.course.courseImage;
				}else{
					if(this.course.image && this.course.image!=''){
						return this.$config.fileUrl+this.course.image;
					}else if(this.course.coverImg && this.course.coverImg!=''){
						return this.$config.fileUrl+this.course.coverImg;
					}else if(this.course.courseImage && this.course.courseImage!=''){
						return this.$config.fileUrl+this.course.courseImage;
					}else if(this.course.coverImg == '' || this.course.courseImage == '' || this.course.image == ''){
						this.textShow = true;
						return this.$config.context+'/static/images/course/courseDefault.png'
					}
				}
				
				
			}
		},
		data() {
			return {
				imageText:'',//图片上面的文字
				isTextShow:0,
				textShow:false,
			}
		},
		mounted() {
			this.isTextShow = 0;
			  let obj = document.getElementById("img-box");
			    if (obj.offsetWidth > 350) {
			      this.isTextShow = 3;
			    } else if (obj.offsetWidth > 100 && obj.offsetWidth < 150) {
			      this.isTextShow = 2;
			    } else if(obj.offsetWidth > 50 && obj.offsetWidth < 100){
			      this.isTextShow = 1;
			    }
		},
		methods:{
			imageError(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.border{
		border: 1px solid #ededed;
	}
	.img-box{
		// width: 100%;
		// height: 100%;
		position: relative;
		.text{
			position: absolute;
			color: #fff !important;
			overflow: hidden; 
			word-break:break-all;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical; 
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 1em;
			top: 36%;
			left: 7%;
			-webkit-line-clamp: 2;
		
		}
		// .mid{
		// 	font-size: 3em;
		// 	top: 36%;
		// 	left: 7%;
		// 	-webkit-line-clamp: 1;
		// }
		// .mini{
		// 	font-size: 3em;
		// 	top: 36%;
		// 	left: 7%;
		// 	-webkit-line-clamp: 2;
		// }
		// .max{
		// 	font-size: 3em;
		// 	top: 36%;
		// 	left: 7%;
		// 	-webkit-line-clamp: 3;
		// }
		// .end{
		// 	font-size: 3em;
		// 	top: 36%;
		// 	left: 7%;
		// 	-webkit-line-clamp: 2;
		// }
	}
</style>