book-hi/pages-car/components/buy-order-item.vue

<template>
    <view class="buy-order-item" @click="goToDetail">
        <!-- 订单头部：订单号和状态 -->
        <view class="order-header">
            <text class="order-no">订单号：{{ order.orderId }}</text>
            <text class="order-status">{{ getStatusText(order) }}</text>
        </view>

        <!-- 商品信息 -->
        <view class="goods-list">
            <scroll-view scroll-x class="goods-scroll">
                <view class="goods-wrapper">
                    <image v-for="(cover, index) in order.detailCoverList" :key="index" :src="cover || defaultCover"
                        mode="aspectFill" class="goods-cover"></image>
                </view>
            </scroll-view>
        </view>

        <!-- 价格汇总 -->
        <view class="order-total">
            <text>共{{ order.totalNum }}本</text>
            <text class="ml-20">实付款 ¥{{ order.payMoney || 0 }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="action-box">
            <!-- 待付款 -->
            <template v-if="order.status == '1' && order.cancelStatus == '0'">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
                <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('cancel')">取消订单</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('pay')">付款</u-button>
            </template>
            <!-- 待发货 -->
            <template v-else-if="order.status == '2' && order.refundStatus == '1' && order.cancelStatus == '0'">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
                <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('refund')">申请售后</u-button>
                <u-button size="mini" shape="circle" type="warning" plain :custom-style="btnStyle" @click.stop="handleAction('remind')">催发货</u-button>
            </template>
            <!-- 待收货 -->
            <template v-else-if="order.status == '3' && order.refundStatus == '1' && order.cancelStatus == '0'">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('extend')">延长收货</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('invoice')">申请开票</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('complaint')">投诉</u-button>
                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('logistics')">查看物流</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('confirm')">确认收货</u-button>
            </template>
            <!-- 已完成 -->
            <template v-else-if="order.status == '4' && order.refundStatus == '1' && order.cancelStatus == '0'">
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('rebuy')">再买一单</u-button>
                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('evaluate')">评价</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('more', ['applyAfterSales', 'logistics', 'invoice'])">更多</u-button>
            </template>
            <!-- 退款/售后 -->
            <template v-else-if="order.refundStatus != '1'">
                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('moneyWhere')">钱款去向</u-button>
                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('detail')">查看详情</u-button>
            </template>
            <!-- 已取消 -->
            <template v-else-if="order.cancelStatus == '1'">
                <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('delete')">删除订单</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
            </template>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        order: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            defaultCover: 'https://uviewui.com/album/1.jpg',
            btnStyle: {
                marginLeft: '20rpx',
                width: '150rpx',
                height: '60rpx',
                lineHeight: '60rpx',
                padding: '0',
                fontSize:'26rpx',
            },
            themeBtnStyle: {
                marginLeft: '20rpx',
                width: '160rpx',
                height: '60rpx',
                lineHeight: '60rpx',
                padding: '0',
                backgroundColor: '#38C148',
                color: '#fff',
                fontSize:'26rpx',
            }
        }
    },
    methods: {
        goToDetail() {
            uni.navigateTo({
                url: `/pages-car/pages/order-detail?orderId=${this.order.orderId}`
            })
        },
        getStatusText(order) {
            if (order.cancelStatus == '1') return '已取消';
            if (order.refundStatus == '2') return '退款中';
            if (order.refundStatus == '3') return '已退款';
            
            const map = {
                '1': '待付款',
                '2': '待发货',
                '3': '待收货',
                '4': '已完成'
            }
            return map[order.status] || '未知状态'
        },
        handleAction(type, data) {
            this.$emit('action', { type, order: this.order, data })
        }
    }
}
</script>

<style lang="scss" scoped>
.buy-order-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 20rpx;

    .order-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        font-size: 28rpx;

        .order-no {
            color: #333;
            font-weight: 500;
        }

        .order-status {
            color: #999;
        }
    }

    .goods-list {
        margin-bottom: 20rpx;

        .goods-scroll {
            width: 100%;
            white-space: nowrap;
        }

        .goods-wrapper {
            display: flex;
        }

        .goods-cover {
            width: 140rpx;
            height: 170rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
            background-color: #eee;
            display: inline-block;
        }
    }

    .order-total {
        text-align: right;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 20rpx;

        .ml-20 {
            margin-left: 20rpx;
            font-weight: 500;
        }
    }

    .action-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap; // 防止按钮过多换行问题
        
        u-button {
             margin-bottom: 10rpx; // 如果换行，增加间距
        }

        .status-desc {
            font-size: 26rpx;
            color: #999;
        }
    }
}
</style>