baqing-shop/shop-app/components/order/CheckoutMultiGoodsRow.vue

<template>
	<view class="multi-goods-row">
		<image class="multi-goods-row__pic" :src="item.displayPic" mode="aspectFill" />
		<view class="multi-goods-row__main">
			<text class="multi-goods-row__name">{{ item.goodsName }}</text>
			<view v-if="item.specList && item.specList.length" class="multi-goods-row__specs">
				<text
					v-for="(spec, index) in item.specList"
					:key="index"
					class="multi-goods-row__spec"
				>{{ spec }}</text>
			</view>
			<text v-if="item.serviceDesc" class="multi-goods-row__service">{{ item.serviceDesc }}</text>
			<view class="multi-goods-row__price-row">
				<text class="multi-goods-row__price">¥{{ item.priceText }}</text>
				<view class="multi-goods-row__qty">
					<view class="qty-btn" @click="onMinus">-</view>
					<text class="qty-num">{{ item.quantity }}</text>
					<view class="qty-btn" @click="onPlus">+</view>
				</view>
			</view>
			<text class="multi-goods-row__subtotal">小计 ¥{{ item.subtotalText }}</text>
			<view class="multi-goods-row__remark">
				<text class="multi-goods-row__remark-label">备注</text>
				<input
					class="multi-goods-row__remark-input"
					:value="item.buyerRemark"
					:maxlength="remarkMax"
					placeholder="选填"
					@input="onRemarkInput"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
import { CHECKOUT_REMARK_MAX } from '@/constants/checkout'

const props = defineProps({
	item: {
		type: Object,
		required: true
	}
})

const emit = defineEmits(['quantity-change', 'remark-change'])
const remarkMax = CHECKOUT_REMARK_MAX

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

function onPlus() {
	const max = props.item.maxStock || 999999
	const next = props.item.quantity + 1
	if (next > max) {
		uni.showToast({ title: '库存不足', icon: 'none' })
		return
	}
	emit('quantity-change', next)
}

function onRemarkInput(e) {
	const val = (e && e.detail && e.detail.value) || ''
	emit('remark-change', val)
}
</script>

<style lang="scss" scoped>
.multi-goods-row {
	display: flex;
	padding: 20rpx 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
}
.multi-goods-row__pic {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	background: #eee;
	flex-shrink: 0;
}
.multi-goods-row__main {
	flex: 1;
	margin-left: 16rpx;
	min-width: 0;
}
.multi-goods-row__name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}
.multi-goods-row__specs {
	margin-top: 8rpx;
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}
.multi-goods-row__spec {
	font-size: 24rpx;
	color: #999;
}
.multi-goods-row__service {
	display: block;
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #2e7d32;
}
.multi-goods-row__price-row {
	margin-top: 12rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.multi-goods-row__price {
	font-size: 30rpx;
	color: #e53935;
	font-weight: 600;
}
.multi-goods-row__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;
}
.multi-goods-row__subtotal {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #666;
	text-align: right;
}
.multi-goods-row__remark {
	margin-top: 12rpx;
	display: flex;
	align-items: center;
}
.multi-goods-row__remark-label {
	font-size: 24rpx;
	color: #999;
	margin-right: 12rpx;
	flex-shrink: 0;
}
.multi-goods-row__remark-input {
	flex: 1;
	height: 56rpx;
	padding: 0 16rpx;
	font-size: 24rpx;
	background: #f9f9f9;
	border-radius: 8rpx;
}
</style>