gree_leran/components/CaseBox/CaseBox.vue

<template>
	<view class="cardbox">
		<view class="cardbox-top">
			<view class="cardbox-img">
				<img :src="info.cover" style="width: 100%;" alt="加载" @error="errorImg"/>
			</view>
			<view class="cardbox-text">
				<up-text :lines="1" :text="info.title" bold="true" size="30rpx" ></up-text>
				<up-text :lines="3" :text="info.text"></up-text>
				<up-text :lines="1" :text="info.data" bold="true"></up-text>
			</view>
		</view>
		<view class="cardbox-bttom">
			<view class="">
				<view class="cardbox-bttom-img">
					<up-avatar  :src="info.userImage"></up-avatar>
					<up-text :lines="1" :text="info.userName" ></up-text>
				</view>
			</view>
			<view class="cardbox-icon">
				<up-icon v-if="info.isLike" @click="toLike" name="heart-fill" color="#ff0004" size="28"></up-icon>
				<up-icon v-else name="heart" @click="toLike" color="#ff0004" size="28"></up-icon>
				{{info.likeNumber==0?'':info.likeNumber}}
				<up-icon v-if="info.isComments" @click="toComments" name="chat-fill" color="#ff0004" size="28"></up-icon>
				<up-icon v-else name="chat" @click="toComments" color="#ff0004" size="28"></up-icon>
				{{info.commentsNumber==0?'':info.commentsNumber}}
				<up-icon v-if="info.isCollection" @click="toCollection" name="star-fill" color="#ff0004" size="28"></up-icon>
				<up-icon v-else name="star" @click="toCollection" color="#ff0004" size="28"></up-icon>
				{{info.collectionNumber==0?'':info.collectionNumber}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted, reactive, ref,defineProps} from "vue"
	const ab="/static/image/imgerr.png";
	const errorImg=()=>{
		info.cover="/static/image/imgerr.png"
	};
	const aaa=ref("name");
	const props=defineProps({
		id:{
			type:String,
			default:""
		},
		title:{
			type:String,
			default:"标题"
		},
		text:{
			type:String,
			default:"正文嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻徐"
		},
		data:{
			type:String,
			default:"日期"
		},
		cover:{
			type:String,
			default:"/static/image/imgerr.png"
		},
		userImage:{
			type:String,
			default:"地址"
		},
		userName:{
			type:String,
			default:"作者"
		},
		userId:{
			type:String,
			default:""
		},
		isLike:{
			type:Boolean,
			default:false
		},
		likeNumber:{
			type:Number,
			default:0
		},
		isComments:{
			type:Boolean,
			default:false
		},
		commentsNumber:{
			type:Number,
			default:0
		},
		isCollection:{
			type:Boolean,
			default:false
		},
		collectionNumber:{
			type:Number,
			default:0
		},
	})
	const info=reactive({
		id:"文章id",
		title:"标题",
		cover:"封面地址",
		text:"正文嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻徐",
		data:"2024-11-11",
		userImage:"",
		userName:"作者",
		userId:"作者id",
		isLike:false,
		likeNumber:0,
		isComments:false,
		commentsNumber:0,
		isCollection:false,
		collectionNumber:0,
	});
	const toLike=()=>{
		info.isLike=!info.isLike;
		if(info.isLike){
			info.likeNumber++;
		}else{
			info.likeNumber--;
		}
	}
	const toComments=()=>{
		info.isComments=!info.isComments;
		if(info.isComments){
			info.commentsNumber++;
		}else{
			info.commentsNumber--;
		}
	}
	const toCollection=()=>{
		info.isCollection=!info.isCollection;
		if(info.isCollection){
			info.collectionNumber++;
		}else{
			info.collectionNumber--;
		}
	}
	const ggg=()=>{
		info.id = props.id;
	  info.title = props.title;
	  info.cover=props.cover;
	  info.text = props.text;
	  info.userImage = props.userImage;
	  info.userName = props.userName;
	  info.userId = props.userId;
	  info.isLike = props.isLike;
	  info.likeNumber = props.likeNumber;
	  info.isComments = props.isComments;
	  info.commentsNumber = props.commentsNumber;
	  info.isCollection = props.isCollection;
	  info.collectionNumber = props.collectionNumber;
	}
	onMounted(()=>{
		ggg();
		console.log("属性",props);
		console.log("属性2",info);
	})
</script>
<style lang="scss">
.cardbox-top{
	height: 60%;
	width: 100%;
	margin: 0 auto;
	display: flex;
	// flex-flow: column;
	justify-content: space-around;
	align-items: center;
}
.cardbox{
	height: 100%;
	color: #000;
	background-color: #fff;
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	align-items: center;
	// padding: 20rpx;
	border-radius: 20rpx;
}
.cardbox-img{
		height: 90%;
		width: 47%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		
		// background-color: #000;
	}
	.cardbox-text{
		width: 47%;
		height: 90%;
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		align-items: center;
	}
	.cardbox-bttom {
		width: 90%;
		height: 30%;
		overflow: hidden;
		// flex: 1;
		display: flex;
		justify-content: space-between;
		.cardbox-bttom-img{
			display: flex;
			flex: 1;
			justify-content: space-around;
		}
	}
	.cardbox-icon{
		display: flex;
		// flex: 1;
		justify-content: space-around;
		align-items: center;
	}
</style>