shuhi-app/pages/index/components/BookItem.vue

<template>
	<view class="book-item">
		<image class="book-image"
			src="https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png"
			mode="aspectFill" />
		<view class="book-info">
			<view class="book-title">
				<text>{{ book.title }}</text>
				<u-icon name="close" size="18" @click="removeBook" />
			</view>
			<view class="flex-a">
				<view class="book-details flex-d">
					<text>ISBN: {{ book.isbn }}</text>
					<text>定价: {{ book.price }}</text>
					<text>折扣: {{ book.discount }}</text>
				</view>
				<view class="book-stats flex-d ml-20">
					<text>数量: {{ book.quantity }}</text>
					<text>预估单价: {{ book.estimatedPrice }}</text>
					<text>审核金额: {{ book.reviewAmount }}</text>
				</view>
			</view>

			<view class="book-rating flex-a flex-j-b mt-6">
				<text>良好 ({{ book.good }})</text>
				<text>一般 ({{ book.average }})</text>
				<text>极差 ({{ book.poor }})</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		book: Object
	});

	const emit = defineEmits(['remove']);

	const removeBook = () => {
		emit('remove', props.book);
	};
</script>

<style scoped>
	.book-item {
		display: flex;
		padding: 8px;
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.book-image {
		width: 80px;
		height: 100px;
		border-radius: 4px;
		margin-right: 12px;
	}

	.book-info {
		flex: 1;
	}

	.book-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.book-details,
	.book-stats,
	.book-rating {
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
	}

	.book-rating text {
		margin-right: 8px;
	}
</style>