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

<template>
	<view class="recommend-item" @click.stop="handleClick">
		<!-- Main Info Row -->
		<view class="main-info" :style="{ 'margin-bottom': showDesc ? '30rpx' : '0' }">
			<view class="image-wrapper">
				<image :src="item.cover" class="book-cover" mode="aspectFill"></image>
				<!-- 状态遮罩 -->
				<view class="status-mask" v-if="item.availableStock === 0">
					<text>暂无库存</text>
				</view>
			</view>

			<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.originalPrice || item.price }}</text>
					</view>

					<view class="cart-btn" :class="{ 'gray-btn': item.availableStock === 0 && item.hasArrivalNotice === 1 }" @click.stop="handleAction">
						<text v-if="item.availableStock === 0 && item.hasArrivalNotice === 1">取消到货通知</text>
						<text v-else-if="item.availableStock === 0">到货通知</text>
						<text v-else>加入购物车</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>

	</view>
</template>

<script>
	import { eventBus } from '@/utils/event-bus'

	export default {
		name: 'RecommendItem',
		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>');
			},
			handleAction() {
				if (this.item.availableStock === 0) {
					this.handleNotify();
				} else {
					this.handleAddToCart();
				}
			},
			handleNotify() {
				const isCancel = this.item.hasArrivalNotice === 1;
				const apiUrl = isCancel ? '/token/shop/user/noticeArrivalCancel' : '/token/shop/user/noticeArrival';

				uni.$u.http.post(apiUrl, {
					isbn: this.item.isbn,
				}).then(res => {
					if (res.code === 200) {
						const newValue = isCancel ? 0 : 1;
						// Notify parent component to update the item
						this.$emit('update-item', { ...this.item, hasArrivalNotice: newValue });
						// Try updating local object properties directly (Vue reactivity)
						this.$set(this.item, 'hasArrivalNotice', newValue);
						this.item.hasArrivalNotice = newValue;
						this.$u.toast(isCancel ? '已取消到货通知' : '到货通知设置成功');
					}
				});
			},
			handleAddToCart() {
				eventBus.emit('openSelectGoodPopup', {
					product: this.item,
					sourceFrom: this.showDesc ? 2 : 1,
				});
			},
			//图书详情页
			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;

			.image-wrapper {
				position: relative;
				width: 172rpx;
				height: 220rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				flex-shrink: 0;
				overflow: hidden;

				.book-cover {
					width: 100%;
					height: 100%;
				}

				.status-mask {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 40rpx;
					background-color: rgba(0, 0, 0, 0.6);
					display: flex;
					justify-content: center;
					align-items: center;

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

			.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;

						&.gray-btn {
							background: #cccccc;
						}

						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>