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

<template>
	<view class="recommend-item" @click="handleClick">
		<!-- 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
				// 加入购物车时，传递 sourceFrom 参数为 2
				this.$refs.popup.open(this.item, props.showDesc ? 2 : 1);
			},
			onPopupConfirm(data) {
				// Emit the confirmed data
				this.$emit('add-cart', data);
			},
			//图书详情页
			handleClick() {
				uni.navigateTo({
					url: '/pages-sell/pages/detail?isbn=' + this.item.isbn
				});
			}
		}
	}
</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>