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

<template>
    <view class="order-item">
        <view class="order-no">
            订单编号：{{ order.orderId }}
            <text class="status">{{ statusList[order.status] }}</text>
        </view>
        <view class="book-list">
            <image v-for="(book, index) in order.detailCoverList" :key="index" :src="book" 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.orderExpectMoney }}</text>
            </view>
            <view class="info-row">
                <text>我的预估佣金</text>
                <text class="commission">¥{{ order.expectSettlementMoney }}</text>
            </view>
            <view class="info-row" v-if="order.status==2||order.status==3">
                <text>买书订单核算金额</text>
                <text class="amount">¥{{ order.orderFinalMoney || '-' }}</text>
            </view>
            <view class="info-row" v-if="order.status==2||order.status==3">
                <text>我的结算佣金</text>
                <text class="commission">¥{{ order.settlementMoney || '-' }}</text>
            </view>
        </view>
        <view class="order-time">创建时间：{{ order.createTime }}</view>
    </view>
</template>

<script>
export default {
    name: 'partner-order-item',
    props: {
        order: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            statusList: {
                1: '未结算',
                2: '已结算',
                3: '已到账',
                4: '已失效'
            }
        }
    }
}
</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;
        margin-bottom: 12px;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;

        .status {
            color: #FF0000;
        }
    }

    .book-list {
        width: 100%;
        display: flex;
        gap: 16rpx;
        margin-bottom: 20rpx;
        overflow-x: auto;

        .book-cover {
            width: 132rpx;
            height: 185rpx;
            border-radius: 10rpx;
        }
    }

    .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>