product-uniapp/components/PostCard.vue

<template>
	<view class="card-item">
		<view class="user" @click="handleUserClick">
			<image :src="item.user.avatar_pull || '/static/image/user.png'" class="avatar"></image>
			<view class="info">
				<view class="name">{{ item.user.nickname || '用户名' }}</view>
				<view class="time">{{ item.created_at }}</view>
			</view>
			<button v-if="!ismysq" class="chat-btn" @click.stop="handleContact">联系门店</button>
			<button
				v-else
				class="chat-btn"
				:class="item.status==1 ? 'chat-btn1' : item.status==2 ? 'chat-btn2' : item.status==3 ? 'chat-btn3' : 'chat-btn4'"
			>
				{{ item.status==1 ? '已发布' : item.status==2 ? '审核中' : item.status==3 ? '未通过' : '已过期' }}
			</button>
		</view>
		
		<view class="content" @click="handleView">
			<u-read-more :showHeight="80" ref="uReadMore" color="#999999" closeText="查看更多">
				<rich-text :nodes="item.content" @load="handleContentLoad"></rich-text>
			</u-read-more>
		</view>
		
		<!-- <view class="tags" v-if="item.tag && item.tag.length">
			<text v-for="(tag, index) in item.tag" :key="index">{{ tag }}</text>
		</view> -->
		<view class="tags">
			<text>#{{ item.age}}</text>
		</view>
		<view class="imgs" v-if="item.media && item.media.length">
			<image 
				v-for="(img, index) in item.media" 
				:key="index" 
				:src="getImgUrl(img)" 
				class="img"
				mode="aspectFill"
				@click.stop="previewImage(index)"
				@longpress.stop="downloadImage(img)"
			/>
		</view>
		
		<view class="location" v-if="item.location_name">
			<uni-icons type="location" color="#999" size="18"></uni-icons>
			<text>{{ item.location_name }}</text>
		</view>
		
		<view class="comment" @click="handleComment">
			评论({{ item.comment || 0 }})
		</view>
	</view>
</template>

<script>
import uReadMore from '@/uni_modules/uview-ui/components/u-read-more/u-read-more.vue'

export default {
	name: 'PostCard',
	components: {
		uReadMore
	},
	props: {
		item: {
			type: Object,
			required: true,
			default: () => ({})
		},
		ismysq:{
			type: Boolean,
			default: false
		}
	},
	methods: {
		getImgUrl(img) {
			if (!img) return '';
			if (typeof img === 'string') return img;
			return img.img_src || img.url_pull || img.url || '';
		},
		handleContentLoad() {
			this.$nextTick(() => {
				if (this.$refs.uReadMore) {
					this.$refs.uReadMore.init();
				}
			});
		},
		handleUserClick() {
			this.$emit('userClick', this.item);
		},
		handleContact() {
			this.$emit('contact', this.item);
		},
		handleView() {
			this.$emit('view', this.item);
		},
		previewImage(index) {
			if (!this.item.media || !this.item.media.length) return;
			const urls = this.item.media.map(m => this.getImgUrl(m)).filter(Boolean);
			uni.previewImage({
				current: index,
				urls
			});
		},
		downloadImage(img) {
			const url = this.getImgUrl(img);
			if (!url) return;
			uni.showActionSheet({
				itemList: ['保存图片'],
				success: (res) => {
					if (res.tapIndex === 0) {
						uni.showLoading({ title: '下载中...', mask: true });
						uni.downloadFile({
							url,
							success: (downloadRes) => {
								if (downloadRes.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: downloadRes.tempFilePath,
										success: () => {
											uni.hideLoading();
											uni.showToast({ title: '保存成功', icon: 'success' });
										},
										fail: () => {
											uni.hideLoading();
											uni.showToast({ title: '保存失败', icon: 'none' });
										}
									});
								} else {
									uni.hideLoading();
									uni.showToast({ title: '下载失败', icon: 'none' });
								}
							},
							fail: () => {
								uni.hideLoading();
								uni.showToast({ title: '下载失败', icon: 'none' });
							}
						});
					}
				}
			});
		},
		handleComment() {
			this.$emit('comment', this.item);
		}
	}
}
</script>

<style lang="scss" scoped>
.card-item {
	margin-bottom: 40rpx;
	background: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
}

.user {
	flex-direction: row;
	display: flex;
	align-items: center;

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.info {
		margin-left: 20rpx;
		flex: 1;
		.name { 
			font-size: 30rpx; 
			font-weight: bold; 
		}
		.time { 
			font-size: 24rpx; 
			color: #777; 
			margin-top: 6rpx; 
		}
	}
	.chat-btn {
		padding: 0 26rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 10rpx;
		background: #3BC6BD;
		color: #fff;
		font-size: 22rpx;
		border: none;
	}
	.chat-btn1{
		background:rgb(59 198 189 / 20%);
		color: #3BC6BD;
	}
	.chat-btn2{
		background: rgb(255 0 0 / 20%);
		color: #fff;
	}
	.chat-btn3{
		background: rgb(62 94 215 / 20%);
		color: #3E5ED7;
	}
	.chat-btn4{
		background: rgb(105 105 105 / 20%);
		color: #696969;
	}
}

.content {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #444;
}

.tags {
	margin-top: 20rpx;

	text {
		margin-right: 20rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #3BC6BD;
	}
}

.imgs {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;

	.img {
		width: 30%;
		margin-right: 3%;
		margin-bottom: 3%;
		border-radius: 12rpx;
		height: 190rpx;
	}
}

.location {
	display: flex;
	align-items: center;
	color: #666666;
	font-size: 22rpx;
	margin-top: 20rpx;
	gap: 8rpx;
}

.comment {
	border: 1px solid #ccc;
	text-align: center;
	line-height: 66rpx;
	border-radius: 34rpx;
	margin: 20rpx 0;
	font-size: 26rpx;
	color: #666;
}
</style>