book-hi/pages-sell/components/recommend-item/index.vue

<template>
	<view class="recommend-item">
		<!-- Main Info Row -->
		<view class="main-info" :style="{ 'margin-bottom': showDesc ? '30rpx' : '0' }">
			<image :src="item.cover" class="book-cover" mode="aspectFill"></image>

			<view class="info-right">
				<view class="title-author">
					<view class="title-row">
						<rich-text class="title" :nodes="highlightedName"></rich-text>
					</view>
					<rich-text class="author" :nodes="highlightedAuthor"></rich-text>
				</view>

				<view class="price-action">
					<view class="price-box">
						<text class="currency">¥</text>
						<text class="price">{{ item.productPrice || item.price }}</text>
						<text class="original">¥{{ item.price }}</text>
					</view>

					<view class="cart-btn" @click.stop="handleAddToCart">
						<text>加入购物车</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Description Row -->
		<view class="desc-section" v-if="showDesc">
			<view class="desc-header">
				<text class="label">简介</text>
				<view class="indicator"></view>
			</view>
			<rich-text class="desc-content" :nodes="highlightedDesc"></rich-text>
		</view>

		<!-- Product Selection Popup -->
		<SelectGoodPopup ref="popup" @confirm="onPopupConfirm"></SelectGoodPopup>
	</view>
</template>

<script>
import SelectGoodPopup from '../select-good-popup/index.vue';

export default {
	name: 'RecommendItem',
	components: {
		SelectGoodPopup
	},
	props: {
		item: {
			type: Object,
			required: true
		},
		showDesc: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		highlightedName() {
			return this.parseEmTag(this.item.name || this.item.title || '');
		},
		highlightedAuthor() {
			return this.parseEmTag(this.item.author || '');
		},
		highlightedDesc() {
			return this.parseEmTag(this.item.description || this.item.desc || '暂无简介');
		}
	},
	methods: {
		parseEmTag(text) {
			if (!text) return '';
			return text.replace(/<em>/g, '<span style="color: #38C148">').replace(/<\/em>/g, '</span>');
		},
		handleAddToCart() {
			// Open the popup using ref
			this.$refs.popup.open(this.item);
		},
		onPopupConfirm(data) {
			// Emit the confirmed data
			this.$emit('add-cart', data);
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-item {
	padding: 30rpx 0;
	border-bottom: 1rpx dashed #EEEEEE;

	.main-info {
		display: flex;
		margin-bottom: 30rpx;

		.book-cover {
			width: 172rpx;
			height: 220rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}

		.info-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 4rpx 0;

			.title-author {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 12rpx;
					display: block;
					line-height: 1.4;
				}

				.author {
					font-size: 24rpx;
					color: #999;
				}
			}

			.price-action {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.price-box {
					.currency {
						font-size: 24rpx;
						color: #FF4B4B;
						font-weight: bold;
					}

					.price {
						font-size: 36rpx;
						color: #FF4B4B;
						font-weight: bold;
						margin-right: 12rpx;
					}

					.original {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
					}
				}

				.cart-btn {
					background: #38C248;
					border-radius: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 24rpx;

					text {
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}

	.desc-section {
		.desc-header {
			position: relative;
			display: inline-block;
			margin-bottom: 16rpx;

			.label {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				position: relative;
				z-index: 1;
			}

			.indicator {
				position: absolute;
				bottom: 4rpx;
				right: 4rpx;
				width: 30rpx;
				height: 8rpx;
				background: #4ED964;
				border-radius: 4rpx;
				z-index: 0;
			}
		}

		.desc-content {
			font-family: Source Han Sans SC;
			font-size: 26rpx;
			color: #8D8D8D;
			line-height: 1.6;
			display: block;
			text-align: justify;
		}
	}
}
</style>