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

<template>
	<view class="hot-item" @click="navigateToDetail">
		<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="info-top">
				<text class="title">{{ item.name || '-' }}</text>
				<view class="price-row">
					<text class="currency">¥</text>
					<text class="price">{{ item.productPrice }}</text>
				</view>

				<view class="flex space-between">
					<view class="discount-tag" v-if="item.discountDesc">
						<text class="discount">{{ item.discountDesc }}</text>
						<text class="discount-desc">省{{ item.discountPrice }}元</text>
					</view>

					<view class="btn-cart" :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>

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

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

export default {
	name: 'HotRecommendItem',
	components: {
		SelectGoodPopup
	},
	props: {
		item: {
			type: Object,
			required: true,
			default: () => ({})
		}
	},
	methods: {
		navigateToDetail() {
			uni.navigateTo({
				url: '/pages-sell/pages/detail?isbn=' + this.item.isbn
			});
		},
		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() {
			// 加入购物车时，传递 sourceFrom 参数为 1
			this.$refs.popup.open(this.item, 1);
		},
		onPopupConfirm(data) {
			this.$emit('add-cart', data);
		}
	}
}
</script>

<style lang="scss" scoped>
.hot-item {
	display: flex;
	border-radius: 16rpx;

	.image-wrapper {
		position: relative;
		width: 140rpx;
		height: 180rpx;
		border-radius: 4rpx;
		background-color: #f5f5f5;
		margin-right: 20rpx;
		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;

		.info-top {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}

			.price-row {
				display: flex;
				align-items: baseline;
				margin-bottom: 10rpx;

				.currency {
					font-size: 32rpx;
					color: #D81A00;
					font-weight: bold;
				}

				.price {
					font-size: 36rpx;
					color: #D81A00;
					font-weight: bold;
				}
			}

			.discount-tag {
				display: inline-block;
				border-radius: 10rpx;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 22rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #fff;
				border: 2rpx solid #D81A00;
				box-sizing: border-box;
				overflow: auto;

				.discount {
					background: #D81A00;
					color: #fff;
					display: inline-block;
					padding: 0 12rpx;
					box-sizing: border-box;
				}

				.discount-desc {
					color: #D81A00;
					padding: 0 10rpx;
				}
			}
		}

		.btn-cart {
			align-self: flex-end;
			background: #38C248;
			border-radius: 30rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;

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

			text {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
}
</style>