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.orderNo }}</text>
            <text class="order-status">{{ getStatusText(order.status) }}</text>
        </view>

        <!-- 商品信息 -->
        <view class="goods-list">
            <!-- 单个商品 -->
            <view v-if="order.goodsList && order.goodsList.length === 1" class="single-goods">
                <image :src="order.goodsList[0].cover || defaultCover" mode="aspectFill" class="goods-cover"></image>
                <view class="goods-info">
                    <view class="goods-title">{{ order.goodsList[0].title }}</view>
                    <view class="goods-quality">品相：{{ order.goodsList[0].quality || '中等' }}</view>
                </view>
                <view class="goods-price-num">
                    <view class="price">¥ {{ order.goodsList[0].price }}</view>
                    <view class="num">x{{ order.goodsList[0].num }}</view>
                </view>
            </view>
            <!-- 多个商品 -->
            <view v-else class="multi-goods">
                <scroll-view scroll-x class="goods-scroll">
                    <view class="goods-wrapper">
                        <image v-for="(goods, index) in order.goodsList" :key="index" :src="goods.cover || defaultCover"
                            mode="aspectFill" class="goods-cover"></image>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 价格汇总 -->
        <view class="order-total">
            <text>总价 ¥{{ order.totalPrice }}</text>
            <text class="ml-20">实付款 ¥{{ order.realPayPrice }}</text>
        </view>

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

        .single-goods {
            display: flex;

            .goods-cover {
                width: 140rpx;
                height: 170rpx;
                border-radius: 8rpx;
                margin-right: 20rpx;
                flex-shrink: 0;
                background-color: #eee;
            }

            .goods-info {
                flex: 1;
                margin-right: 20rpx;

                .goods-title {
                    font-size: 28rpx;
                    color: #333;
                    margin-bottom: 10rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }

                .goods-quality {
                    font-size: 24rpx;
                    color: #999;
                    background-color: #f5f5f5;
                    padding: 4rpx 10rpx;
                    border-radius: 4rpx;
                    display: inline-block;
                }
            }

            .goods-price-num {
                text-align: right;

                .price {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                }

                .num {
                    font-size: 24rpx;
                    color: #999;
                    margin-top: 6rpx;
                }
            }
        }

        .multi-goods {
            .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;

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