pet-front-order/components/CompanionItem/CompanionItem.vue

<template>
	<uni-row :span="12">
		<uni-card :is-shadow="false" padding=0 margin="6rpx 20rpx" @click="handleClick">
			<view class="personal-list-item">
				<view class="personal-info">
					<view>
						<image class="people-img" slot='cover' :src="item.userImage"></image>
					</view>
					<view class="personal-info-1">
						<view class="personal-info-2">
							<view class="personal-info-title">
								<view class="personal-name">
									{{ item.userName || '匿名' }}
								</view>
								<view class="personal-sex">
									<img :src="item.appletUsersTeacher.sex == 0?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
											'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
										style="width: 20px;height: 20px;" />
								</view>
							</view>
							<view class="personal-star" @click.stop="handleLikeClick">
								<text style="color: #FFB13F;">点赞数{{ item.appletUsersTeacher.thumbsUp || 0 }}</text>
								<uni-icons v-if="isLike" type="hand-up-filled" size="20" color="#FFB13F"></uni-icons>
								<uni-icons v-else type="hand-up" size="20" color="#FFB13F"></uni-icons>
							</view>
						</view>
						<view class="personal-info-3" style="width: 100%;">
							<view class="ellipsis" v-if="item.distanceText">
								距离{{ item.distanceText }}km
							</view>
							<view class="ellipsis" v-else>
								{{ '<' }}1km
							</view>
						</view>
						<view class="personal-info-4" style="width: 100%;">
							<view class="ellipsis" style="max-width: 225px;">
								简介：{{ item.appletUsersTeacher.userBrief || '暂无' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="personal-item-bottom" v-if="showNumerBtn">
					<text class="personal-item-bottom-text">养宠{{ item.experience || 0 }}年 | 评价{{ item.commentNum || 0 }}条 | 服务小结{{ item.serviceSummaryNum || 0 }}份</text>
				</view>
				<view class="personal-item-bottom" v-else-if="showDetailBtn">
					<text class="personal-item-bottom-text">点击查看详情</text>
				</view>
			</view>
		</uni-card>
	</uni-row>
</template>

<script>
export default {
	name: 'CompanionItem',
	props: {
		item: {
			type: Object,
			required: true
		},
		showDetailBtn: {
			type: Boolean,
			default: false
		},
		showNumerBtn: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {
			isLike: false
		}
	},
	methods: {
		// 处理点击事件
		handleClick() {
			this.$emit('click', this.item)
		},
		// 处理点赞点击事件
		handleLikeClick() {
			this.isLike = !this.isLike
			this.$emit('like', this.item)
		}
	}
}
</script>

<style lang="scss" scoped>
.personal-list-item {
	padding: 10px 0px 0px 0;

	.personal-info {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.people-img {
			width: 168rpx;
			height: 168rpx;
			border: #FEA714 5rpx solid;
			border-radius: 20rpx;
		}

		.personal-info-1 {
			margin-left: 10px;
			width: 100%;

			.personal-info-2 {
				display: flex;

				.personal-info-title {
					display: flex;
					flex-wrap: wrap;
					width: 60%;
				}

				.personal-name {
					color: #333;
					font-size: 28rpx;
					margin-right: 10rpx;
					font-weight: 900;
					font-style: normal;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 200rpx;
				}

				.personal-star {
					color: #FFAA48;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					flex-shrink: 0;
					margin-left: auto;
				}
			}

			.personal-info-3 {
				display: flex;
				align-items: baseline;
				font-size: 28rpx;
				line-height: 32rpx;
				margin-top: 5px;
				color: #FFAA48;
				font-weight: 900;
			}

			.personal-info-4 {
				display: flex;
				align-items: baseline;
				font-size: 24rpx;
				margin-top: 10px;
				color: #7D8196;
				font-weight: 400;
				line-height: 32rpx;
			}
		}
	}
}

.personal-item-bottom {
	height: 60rpx;
	background-color: #FFF4E5;
	margin: 20rpx 0 20rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8rpx;

	.personal-item-bottom-text {
		color: #A94F20;
		margin: 14rpx;
		font-size: 24rpx;
		font-weight: 400;
	}
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>