book-hi/pages-mine/components/partner-order-item.vue

<template>
    <view class="order-item">
        <view class="order-no">
            订单编号：{{ order.orderNo }}
            <text class="status">{{ order.status }}</text>
        </view>
        <view class="book-list">
            <image v-for="(book, index) in order.books" :key="index" :src="book.cover" mode="aspectFill" class="book-cover"/>
        </view>
        <view class="order-info">
            <view class="info-row">
                <text>买书订单状态</text>
                <text>{{ order.orderStatus }}</text>
            </view>
            <view class="info-row">
                <text>买书订单预估金额</text>
                <text class="amount">¥{{ order.estimatedAmount }}</text>
            </view>
            <view class="info-row">
                <text>我的预估佣金</text>
                <text class="commission">¥{{ order.estimatedCommission }}</text>
            </view>
            <view class="info-row" v-if="order.finalAmount">
                <text>买书订单核算金额</text>
                <text class="amount">¥{{ order.finalAmount }}</text>
            </view>
            <view class="info-row" v-if="order.finalCommission">
                <text>我的结算佣金</text>
                <text class="commission">¥{{ order.finalCommission }}</text>
            </view>
        </view>
        <view class="order-time">创建时间：{{ order.createTime }}</view>
    </view>
</template>

<script>
export default {
    name: 'partner-order-item',
    props: {
        order: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style lang="scss" scoped>
.order-item {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;

    .order-no {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
        margin-bottom: 12px;

        .status {
            color: #FF0000;
        }
    }

    .book-list {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;

        .book-cover {
            width: 60px;
            height: 80px;
            border-radius: 4px;
        }
    }

    .order-info {
        background: #F8F8F8;
        padding: 12px;
        border-radius: 4px;

        .info-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 8px;
            color: #666;

            &:last-child {
                margin-bottom: 0;
            }

            .amount {
                color: #333;
            }

            .commission {
                color: #FF0000;
            }
        }
    }

    .order-time {
        margin-top: 12px;
        font-size: 12px;
        color: #999;
    }
}
</style>