baqing-shop/shop-app/components/cart/CartItemRow.vue

<template>
	<view class="cart-item" :class="{ 'cart-item--invalid': !item.purchasable }">
		<view
			class="cart-item__check"
			:class="{ 'cart-item__check--disabled': !item.purchasable }"
			@click.stop="onCheckTap"
		>
			<view class="check-icon" :class="{ 'check-icon--on': item.checked && item.purchasable }">
				<u-icon v-if="item.checked && item.purchasable" name="checkbox-mark" color="#fff" size="14" />
			</view>
		</view>
		<view class="cart-item__main" @click="emit('goods-click', item)">
			<image-preview class="cart-item__pic" :src="item.mainPic" />
			<view class="cart-item__info">
				<text class="cart-item__name">{{ item.goodsName }}</text>
				<view v-if="item.specList && item.specList.length" class="cart-item__specs">
					<text
						v-for="(spec, specIndex) in item.specList"
						:key="specIndex"
						class="cart-item__spec"
					>{{ spec }}</text>
				</view>
				<view class="cart-item__price-row">
					<text class="cart-item__price">¥{{ item.priceText }}</text>
					<text v-if="item.subtotalText" class="cart-item__subtotal">小计 ¥{{ item.subtotalText }}</text>
					<text v-if="item.invalidLabel" class="cart-item__tag">{{ item.invalidLabel }}</text>
				</view>
			</view>
		</view>
		<view class="cart-item__side">
			<view v-if="item.purchasable" class="cart-item__qty">
				<view class="qty-btn" @click.stop="onMinus">-</view>
				<text class="qty-num">{{ item.quantity }}</text>
				<view class="qty-btn" @click.stop="onPlus">+</view>
			</view>
			<text v-else class="cart-item__qty-text">×{{ item.quantity }}</text>
			<text class="cart-item__del" @click.stop="emit('delete', item)">删除</text>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	item: {
		type: Object,
		required: true
	}
})

const emit = defineEmits(['check-change', 'quantity-change', 'delete', 'goods-click'])

function onCheckTap() {
	if (!props.item.purchasable) return
	emit('check-change', props.item, !props.item.checked)
}

function onMinus() {
	if (!props.item.purchasable) return
	const next = Math.max(1, props.item.quantity - 1)
	if (next === props.item.quantity) return
	emit('quantity-change', props.item, next)
}

function onPlus() {
	if (!props.item.purchasable) return
	emit('quantity-change', props.item, props.item.quantity + 1)
}
</script>

<style lang="scss" scoped>
.cart-item {
	display: flex;
	align-items: flex-start;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}
.cart-item--invalid {
	opacity: 0.72;
}
.cart-item__check {
	padding-top: 40rpx;
	padding-right: 12rpx;
}
.cart-item__check--disabled {
	opacity: 0.4;
}
.check-icon {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #ccc;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.check-icon--on {
	background: #2e7d32;
	border-color: #2e7d32;
}
.cart-item__main {
	flex: 1;
	display: flex;
	min-width: 0;
}
.cart-item__pic {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	background: #eee;
	flex-shrink: 0;
}
.cart-item__info {
	flex: 1;
	margin-left: 16rpx;
	min-width: 0;
}
.cart-item__name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cart-item__specs {
	margin-top: 8rpx;
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}
.cart-item__spec {
	font-size: 24rpx;
	color: #999;
	line-height: 1.4;
}
.cart-item__price-row {
	margin-top: 12rpx;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12rpx;
}
.cart-item__price {
	font-size: 30rpx;
	color: #e53935;
	font-weight: 600;
}
.cart-item__subtotal {
	font-size: 24rpx;
	color: #666;
}
.cart-item__tag {
	font-size: 22rpx;
	color: #e65100;
	background: #fff3e0;
	padding: 4rpx 10rpx;
	border-radius: 6rpx;
}
.cart-item__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 8rpx;
	margin-left: 8rpx;
}
.cart-item__qty {
	display: flex;
	align-items: center;
	border: 1rpx solid #e0e0e0;
	border-radius: 8rpx;
	overflow: hidden;
}
.qty-btn {
	width: 52rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
	background: #f5f5f5;
}
.qty-num {
	min-width: 56rpx;
	text-align: center;
	font-size: 26rpx;
	color: #333;
}
.cart-item__qty-text {
	font-size: 26rpx;
	color: #999;
}
.cart-item__del {
	margin-top: 16rpx;
	font-size: 24rpx;
	color: #999;
}
</style>