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

<template>
	<view class="order-goods-row" @click="emit('click')">
		<image-preview class="order-goods-row__pic" :src="item.goodsImage || item.mainPic" />
		<view class="order-goods-row__main" :class="{ 'order-goods-row__main--compact': reviewAction }">
			<text class="order-goods-row__name">{{ item.goodsName }}</text>
			<view v-if="item.specList && item.specList.length" class="order-goods-row__specs">
				<text
					v-for="(spec, index) in item.specList"
					:key="index"
					class="order-goods-row__spec"
				>{{ spec }}</text>
			</view>
			<text v-if="item.serviceDesc" class="order-goods-row__service">{{ item.serviceDesc }}</text>
			<view class="order-goods-row__bottom">
				<text class="order-goods-row__price">¥{{ item.priceText }}</text>
				<text class="order-goods-row__qty">×{{ item.quantity }}</text>
			</view>
			<text v-if="showSubtotal && item.lineAmountText" class="order-goods-row__subtotal">
				小计 ¥{{ item.lineAmountText }}
			</text>
			<text v-if="item.buyerRemark" class="order-goods-row__remark">备注：{{ item.buyerRemark }}</text>
		</view>
		<button
			v-if="reviewAction"
			class="order-goods-row__review-btn"
			@click.stop="emit('review', reviewAction.code)"
		>
			{{ reviewAction.label }}
		</button>
	</view>
</template>

<script setup>
defineProps({
	item: {
		type: Object,
		required: true
	},
	showSubtotal: {
		type: Boolean,
		default: false
	},
	/** { code, label } 交易成功时商品行评价按钮 */
	reviewAction: {
		type: Object,
		default: null
	}
})

const emit = defineEmits(['click', 'review'])
</script>

<style lang="scss" scoped>
.order-goods-row {
	display: flex;
	align-items: flex-start;
	padding: 16rpx 0;
}
.order-goods-row__main--compact {
	padding-right: 8rpx;
}
.order-goods-row__pic {
	width: 140rpx;
	height: 140rpx;
	border-radius: 8rpx;
	background: #eee;
	flex-shrink: 0;
}
.order-goods-row__main {
	flex: 1;
	margin-left: 16rpx;
	min-width: 0;
}
.order-goods-row__name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}
.order-goods-row__specs {
	margin-top: 6rpx;
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}
.order-goods-row__spec {
	font-size: 24rpx;
	color: #999;
}
.order-goods-row__service {
	display: block;
	margin-top: 6rpx;
	font-size: 22rpx;
	color: #2e7d32;
}
.order-goods-row__bottom {
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-goods-row__price {
	font-size: 28rpx;
	color: #e53935;
	font-weight: 600;
}
.order-goods-row__qty {
	font-size: 24rpx;
	color: #999;
}
.order-goods-row__subtotal {
	display: block;
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #666;
	text-align: right;
}
.order-goods-row__remark {
	display: block;
	margin-top: 6rpx;
	font-size: 22rpx;
	color: #999;
}
.order-goods-row__review-btn {
	flex-shrink: 0;
	margin: 24rpx 0 0 8rpx;
	min-width: 128rpx;
	height: 52rpx;
	line-height: 52rpx;
	padding: 0 16rpx;
	font-size: 24rpx;
	color: #2e7d32;
	background: #fff;
	border: 1rpx solid #2e7d32;
	border-radius: 26rpx;
}
</style>