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>{{ orderStatusList[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": "已失效",
            },
            //-1-已取消 0-待提交 1-已删除 2-待初审 3-待取件 4-初审未通过 5-待签收 6-待收货 7-待收货 8-待审核 9-审核中 10-待到款 11-已完成
            orderStatusList: {
                "-1": "已取消",
                "0": "待提交",
                "1": "已删除",
                "2": "待初审",
                "3": "待取件",
                "4": "初审未通过",
                "5": "待签收",
                "6": "待收货",
                "7": "待收货",
                "8": "待审核",
                "9": "审核中",
                "10": "待到款",
                "11": "已完成",
            },
        };
    },
};
</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;
        font-family: PingFang SC;
        font-weight: bold;

        .status {
            color: #ff0000;
        }
    }

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

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

    .order-info {
        background: #f8f8f8;
        border-radius: 4px;
        width: 630rpx;
        border: 1px solid #ebebeb;

        .info-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            height: 60rpx;
            line-height: 60rpx;
            border-bottom: 1px solid #ebebeb;
            color: #666;
            &:last-child {
                border-bottom: none;
            }
            &:last-child {
                margin-bottom: 0;
            }
            text {
                flex: 1;
                padding-left: 20rpx;
            }
            text:last-child {
                border-left: 1px solid #ebebeb;
                background-color: #ffffff;
            }
            .amount {
                color: #333;
            }

            .commission {
                color: #ff0000;
            }
        }
    }

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