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

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

        <!-- 商品信息 -->
        <view class="goods-list">
            <!-- 单本书样式 -->
            <view class="single-book">
                <image :src="order.cover || defaultCover" mode="aspectFit" class="book-cover"></image>
                <view class="book-info">
                    <view class="info-top">
                        <text class="book-name u-line-2">{{ order.bookName }}</text>
                        <view class="price-box">
                            <text class="num">x{{ order.refundNum || 1 }}</text>
                        </view>
                    </view>
                    <view class="book-sku" v-if="order.conditionType">
                        品相：{{ order.conditionType | conditionText }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 价格汇总 -->
        <view class="order-total">
            <text class="ml-20">退款金额 ¥{{ order.refundMoney || '0.00' }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="action-box">
            <!-- 查看详情 -->
            <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                @click.stop="goToDetail">查看详情</u-button>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'refund-order-item',
        props: {
            order: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                defaultCover: 'https://uviewui.com/album/1.jpg',
                btnStyle: {
                    marginLeft: '20rpx',
                    height: '60rpx',
                    lineHeight: '60rpx',
                    padding: '0 24rpx',
                    fontSize: '26rpx',
                },
                themeBtnStyle: {
                    marginLeft: '20rpx',
                    height: '60rpx',
                    lineHeight: '60rpx',
                    padding: '0 30rpx',
                    backgroundColor: '#38C148',
                    color: '#fff',
                    fontSize: '26rpx',
                }
            }
        },
        methods: {
            goToDetail() {
                uni.navigateTo({
                    url: `/pages-car/pages/refund-detail?refundOrderId=${this.order.refundOrderId}`
                })
            },
            getStatusText(status) {
                const map = {
                    '1': '申请退款',
                    '2': '协商中待用户确认',
                    '3': '协商中待商家确认',
                    '4': '审核通过',
                    '5': '审核驳回',
                    '6': '超时关闭',
                    '7': '买家已发货',
                    '8': '商家已签收',
                    '9': '确认收货',
                    '10': '退款成功',
                    '11': '退款已撤销'
                }
                return map[status] || '未知状态'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .refund-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: #FF000C;
            }
        }

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

            .single-book {
                display: flex;

                .book-cover {
                    width: 140rpx;
                    height: 140rpx;
                    margin-right: 10rpx;
                    border-radius: 8rpx;
                    flex-shrink: 0;
                }

                .book-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .info-top {
                        display: flex;
                        justify-content: space-between;

                        .book-name {
                            flex: 1;
                            font-size: 28rpx;
                            color: #333;
                            font-weight: bold;
                            margin-right: 30rpx;
                        }

                        .price-box {
                            text-align: right;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;

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

                    .book-sku {
                        background: rgb(56, 193, 72, 0.1);
                        color: #333;
                        font-size: 24rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 4rpx;
                        align-self: flex-start;
                        margin-top: 10rpx;
                    }
                }
            }
        }

        .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; // 如果换行，增加间距
            }
        }
    }
</style>