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>{{ isBuy ? '买书' : '卖书' }}订单状态</text>
                <text>{{ currentOrderStatusText || "-" }}</text>
            </view>
            <view class="info-row">
                <text>{{ isBuy ? '买书' : '卖书' }}订单预估金额</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>{{ isBuy ? '买书' : '卖书' }}订单核算金额</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-已完成
                sellStatusList: {
                    "-1": "已取消",
                    "0": "待提交",
                    "1": "已删除",
                    "2": "待初审",
                    "3": "待取件",
                    "4": "初审未通过",
                    "5": "待签收",
                    "6": "待收货",
                    "7": "待收货",
                    "8": "待审核",
                    "9": "审核中",
                    "10": "待到款",
                    "11": "已完成",
                },
                // 1-待付款 2-待发货 3-待收货 4-已完成 5-已取消 6-退款中 7-已退款
                buyStatusList: {
                    "1": "待付款",
                    "2": "待发货",
                    "3": "待收货",
                    "4": "已完成",
                    "5": "已取消",
                    "6": "退款中",
                    "7": "已退款",
                }
            };
        },
        computed: {
            isBuy() {
                return this.order.type == '2';
            },
            currentOrderStatusText() {
                if (this.isBuy) {
                    return this.buyStatusList[this.order.orderStatus] || "-";
                } else {
                    return this.sellStatusList[this.order.orderStatus] || "-";
                }
            }
        }
    };
</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>