new-88live/components/dynamics/post-content-block.vue

<template>
	<view class="pcb">
		<!-- 上新 -->
		<view v-if="post.type === 'new'" class="pcb-new">
			<view class="pcb-date-badge">
				<text class="pcb-date-day">{{ post.createtime_date || '—' }}</text>
			</view>
			<text class="pcb-new-label">今日上新</text>
		</view>

		<!-- 图文九宫格（列表 + 详情） -->
		<post-image-grid
			v-if="showGrid"
			:images="post.images"
			:max="gridMax"
			@tap-image="onGridTap"
		/>

		<!-- 视频缩略 -->
		<view v-if="post.type === 'video'" class="pcb-video" @tap="$emit('open-video', post)">
			<image class="pcb-video-cover" :src="videoCover" mode="aspectFill" />
			<view class="pcb-video-play">
				<text class="pcb-video-play-icon">▶</text>
			</view>
		</view>

		<!-- 关联商品 -->
		<scroll-view
			v-if="post.goods && post.goods.length"
			class="pcb-goods-scroll"
			scroll-x
			:show-scrollbar="false"
		>
			<view
				v-for="goods in post.goods"
				:key="goods.id"
				class="pcb-goods-item"
				:class="{ 'pcb-goods-item--solo': post.goods.length === 1 }"
				@tap="openGoods(goods.id)"
			>
				<image class="pcb-goods-img" :src="oss(goods.image, 100, 100)" mode="aspectFill" />
				<view class="pcb-goods-meta">
					<text class="pcb-goods-title">{{ goods.title }}</text>
					<text class="pcb-goods-price">¥{{ goods.price }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 正文 -->
		<view v-if="htmlContent" class="pcb-body">
			<rich-text v-if="useRichText" :nodes="htmlContent" />
			<text v-else class="pcb-body-text">{{ plainContent }}</text>
		</view>
	</view>
</template>

<script>
import PostImageGrid from '@/components/dynamics/post-image-grid.vue'
import { stripHtml } from '@/features/feed/clip-normalize'
import { absolutizePreviewUrls, GRID_MAX } from '@/features/dynamics/post-media'

export default {
	name: 'PostContentBlock',
	components: { PostImageGrid },
	props: {
		post: { type: Object, default: () => ({}) },
		isMain: { type: Boolean, default: false }
	},
	computed: {
		hasImages() {
			return Array.isArray(this.post.images) && this.post.images.length > 0
		},
		showGrid() {
			return this.post.type !== 'video' && this.hasImages
		},
		gridMax() {
			return GRID_MAX
		},
		videoCover() {
			const cover = (this.post.video && this.post.video.cover_url)
				|| (this.post.images && this.post.images[0])
				|| ''
			return this.oss(cover, 750, 0)
		},
		htmlContent() {
			return this.post.content || ''
		},
		plainContent() {
			return stripHtml(this.post.content)
		},
		useRichText() {
			return /<[^>]+>/.test(String(this.post.content || ''))
		}
	},
	methods: {
		oss(url, w = 400, h = 0) {
			if (this.$appKit && typeof this.$appKit.oss === 'function') {
				return this.$appKit.oss(url, w, h)
			}
			return url || ''
		},
		onGridTap(index) {
			if (this.isMain) {
				this.previewImages(index)
				return
			}
			this.$emit('open-detail', { id: this.post.id, img: index })
		},
		previewImages(index) {
			const urls = absolutizePreviewUrls(this.post.images, (u) => this.oss(u, 750, 0))
			if (!urls.length) return
			uni.previewImage({
				current: urls[index] || urls[0],
				urls
			})
		},
		openGoods(id) {
			if (typeof this.$appKit.onGoods === 'function') {
				this.$appKit.onGoods(id)
				return
			}
			uni.navigateTo({ url: `/pages/product/goods?id=${id}` })
		}
	}
}
</script>

<style scoped>
.pcb {
	width: 100%;
}
.pcb-new {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
}
.pcb-date-badge {
	width: 72rpx;
	height: 72rpx;
	border-radius: 18rpx;
	background: linear-gradient(135deg, #4a8cff 0%, #6ec8ff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
}
.pcb-date-day {
	color: #ffffff;
	font-size: 22rpx;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}
.pcb-new-label {
	font-size: 30rpx;
	font-weight: 700;
	color: #1a1d26;
}
.pcb-video {
	position: relative;
	width: 62%;
	height: 520rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background-color: #1a1d26;
}
.pcb-video-cover {
	width: 100%;
	height: 100%;
}
.pcb-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 88rpx;
	height: 88rpx;
	border-radius: 44rpx;
	background-color: rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pcb-video-play-icon {
	color: #ffffff;
	font-size: 32rpx;
	margin-left: 6rpx;
}
.pcb-goods-scroll {
	width: 100%;
	white-space: nowrap;
	margin-top: 24rpx;
}
.pcb-goods-item {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	width: 420rpx;
	margin-right: 16rpx;
	padding: 12rpx;
	border-radius: 16rpx;
	background-color: #f5f7fb;
	vertical-align: top;
}
.pcb-goods-item--solo {
	width: 100%;
	margin-right: 0;
}
.pcb-goods-img {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	background-color: #eef2f8;
	flex-shrink: 0;
}
.pcb-goods-meta {
	flex: 1;
	min-width: 0;
	margin-left: 16rpx;
}
.pcb-goods-title {
	font-size: 26rpx;
	color: #1a1d26;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pcb-goods-price {
	font-size: 26rpx;
	color: #ff6b35;
	font-weight: 700;
	margin-top: 8rpx;
}
.pcb-body {
	margin-top: 24rpx;
}
.pcb-body-text {
	font-size: 28rpx;
	line-height: 44rpx;
	color: #3d4250;
}
</style>