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

<template>
    <view class="book-item">
        <image class="book-image" :src="book.cover" mode="aspectFill" />
        <view class="book-info">
            <view class="book-title">
                <text>{{ book.bookName }}</text>
                <u-icon name="close" size="18" @click="removeBook" />
            </view>
            <view class="flex-a flex-1">
                <view class="book-details flex-d">
                    <text>ISBN: {{ book.isbn }}</text>
                    <text>定价: {{ book.price }}</text>
                    <text>折扣: {{ book.recycleDiscount }}</text>
                </view>
                <view class="book-stats flex-d ml-20">
                    <text>数量: {{ book.quantity }}</text>
                    <text>预估单价: {{ book.expectPrice }}</text>
                    <text style="color: #ff0000;">审核金额: {{ book.auditPrice }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

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

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

const removeBook = () => {
    emit('remove', { book: props.book, index: props.index });
};
</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: 66px;
    height: 90px;
    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;
    font-size: 32rpx;
}

.book-details,
.book-stats,
.book-rating {
    font-size: 28rpx;
    color: #666;
    line-height: 42rpx;
    justify-content: space-around;
}

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