book-hi/pages-car/pages/order-detail.vue

<template>
    <view class="order-detail-page">
        <!-- 顶部状态栏 -->
        <view class="status-header">
            <view class="status-text">{{ statusText }}</view>
            <view class="status-desc" v-if="orderInfo.status === 2">
                订单编号：{{ orderInfo.orderNo }}
                <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
            </view>
            <view class="status-desc" v-else-if="orderInfo.status === 3">
                订单编号：{{ orderInfo.orderNo }}
                <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
            </view>
            <view class="status-desc-block" v-else-if="orderInfo.status === 8">
                <view class="status-tip">还剩9天22时18分自动确认收货</view>
                <view class="status-desc-row">
                    订单编号：{{ orderInfo.orderNo }}
                    <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
                </view>
            </view>
            <view class="status-desc" v-else>
                订单编号：{{ orderInfo.orderNo }}
                <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
            </view>
        </view>

        <!-- 地址信息 -->
        <view class="info-card address-card">
            <view class="icon-box">
                <u-icon name="map-fill" color="#ff0000" size="40"></u-icon>
            </view>
            <view class="address-content">
                <view class="user-info">
                    <text class="name">{{ orderInfo.address && orderInfo.address.name }}</text>
                    <text class="mobile">{{ orderInfo.address && orderInfo.address.mobile }}</text>
                </view>
                <view class="address-detail">{{ orderInfo.address && orderInfo.address.detail }}</view>
            </view>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>

        <!-- 物流信息 (已发货/已完成/退款) -->
        <view class="info-card logistics-card" v-if="[8, 12, 10].includes(orderInfo.status) && orderInfo.logistics">
            <view class="icon-box">
                <u-icon name="car-fill" color="#38C148" size="40"></u-icon>
            </view>
            <view class="logistics-content" @click="viewLogistics">
                <view class="company-name">{{ orderInfo.logistics.company }} ({{ orderInfo.logistics.no }})</view>
                <view class="latest-trace">{{ orderInfo.logistics.trace }}</view>
                <view class="update-time">{{ orderInfo.logistics.updateTime }}</view>
            </view>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>

        <!-- 商品列表 -->
        <view class="info-card goods-card">
            <view class="goods-item" v-for="(goods, index) in orderInfo.goodsList" :key="index">
                <image :src="goods.cover" mode="aspectFill" class="goods-cover"></image>
                <view class="goods-info">
                    <view class="goods-title">{{ goods.title }}</view>
                    <view class="goods-quality">品相：{{ goods.quality }}</view>
                    <view class="price-box">
                        <text class="price">¥{{ goods.price }}</text>
                        <text class="num">x{{ goods.num }}</text>
                    </view>
                </view>
                <!-- 商品级按钮，如退款 -->
                <view class="goods-action" v-if="[3, 8].includes(orderInfo.status)">
                    <u-button size="mini" shape="circle" plain
                        custom-style="margin-left: 20rpx; height: 50rpx; line-height: 50rpx;">退款</u-button>
                </view>
                <view class="goods-action" v-if="[10].includes(orderInfo.status)">
                    <u-button size="mini" shape="circle" plain disabled
                        custom-style="margin-left: 20rpx; height: 50rpx; line-height: 50rpx; background: #f5f5f5; color: #999; border: none;">退款成功</u-button>
                </view>
            </view>

            <!-- 价格明细 -->
            <view class="price-detail">
                <view class="row">
                    <text>邮费</text>
                    <text>¥ {{ orderInfo.postage || '0.00' }}</text>
                </view>
                <view class="row">
                    <text>商品金额</text>
                    <text class="goods-total">¥{{ orderInfo.goodsTotalPrice }}</text>
                </view>
                <view class="row">
                    <text>优惠金额</text>
                    <text class="discount">-¥{{ orderInfo.discountPrice || '0.00' }}</text>
                </view>
                <view class="real-pay-row">
                    <text>实付款 (微信支付)</text>
                    <text class="real-price">¥ {{ orderInfo.realPayPrice }}</text>
                </view>
            </view>
        </view>

        <!-- 订单时间信息 -->
        <view class="info-card time-card">
            <view class="row">
                <text class="label">下单时间</text>
                <text class="value">{{ orderInfo.createTime }}</text>
            </view>
            <view class="row" v-if="orderInfo.payTime">
                <text class="label">付款时间</text>
                <text class="value">{{ orderInfo.payTime }}</text>
            </view>
            <view class="row" v-if="orderInfo.deliveryTime">
                <text class="label">发货时间</text>
                <text class="value">{{ orderInfo.deliveryTime }}</text>
            </view>
            <view class="row" v-if="orderInfo.finishTime">
                <text class="label">完成时间</text>
                <text class="value">{{ orderInfo.finishTime }}</text>
            </view>
            <view class="row" v-if="orderInfo.closeTime">
                <text class="label">关闭时间</text>
                <text class="value">{{ orderInfo.closeTime }}</text>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-bar">
            <!-- 待付款 -->
            <template v-if="orderInfo.status === 2">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('addToCart')">加入购物车</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('cancel')">取消订单</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('address')">修改地址</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
                    @click="handleAction('pay')">继续付款</u-button>
            </template>
            <!-- 待发货 -->
            <template v-else-if="orderInfo.status === 3">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('addToCart')">加入购物</u-button>
                <u-button size="mini" shape="circle" type="warning" :custom-style="btnStyle"
                    @click="handleAction('overtime')">超时发货</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
                    @click="handleAction('remind')">催发货</u-button>
            </template>
            <!-- 已发货 -->
            <template v-else-if="orderInfo.status === 8">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('addToCart')">加入购物</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" :custom-style="themeLightBtnStyle"
                    @click="handleAction('priceMatch')">降价补差</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
                    @click="handleAction('confirm')">确认收货</u-button>
            </template>
            <!-- 交易关闭/已退款 -->
            <template v-else-if="orderInfo.status === -1 || orderInfo.status === 10">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('addToCart')">加入购物</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('complaint')">投诉</u-button>
                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
                    @click="handleAction('moneyWhere')">钱款去向</u-button>
            </template>
            <!-- 交易完成 -->
            <template v-else-if="orderInfo.status === 12">
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('addToCart')">加入购物</u-button>
                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
                    @click="handleAction('complaint')">投诉</u-button>
            </template>
        </view>

        <!-- 占位符，防止底部按钮遮挡内容 -->
        <view style="height: 120rpx;"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            orderInfo: {
                status: 2,
                orderNo: '',
                goodsList: [],
                address: {}
            },
            btnStyle: {
                marginLeft: '20rpx',
                width: '160rpx',
                height: '60rpx',
                lineHeight: '60rpx',
                padding: '0'
            },
            themeBtnStyle: {
                marginLeft: '20rpx',
                width: '160rpx',
                height: '60rpx',
                lineHeight: '60rpx',
                padding: '0',
                backgroundColor: '#38C148',
                color: '#fff',
                border: 'none'
            },
            themeLightBtnStyle: {
                marginLeft: '20rpx',
                width: '160rpx',
                height: '60rpx',
                lineHeight: '60rpx',
                padding: '0',
                backgroundColor: '#5bc0de', // Light blue/green for price match? Or keep simple
                color: '#fff',
                border: 'none'
            }
        };
    },
    computed: {
        statusText() {
            const map = {
                2: '等待买家付款',
                3: '等待卖家发货',
                8: '已发货',
                12: '交易完成',
                10: '交易关闭', // 退款
                '-1': '交易关闭'
            };
            return map[this.orderInfo.status] || '未知状态';
        }
    },
    onLoad(options) {
        if (options.orderNo) {
            this.loadOrderDetail(options.orderNo);
        } else {
            // For testing/preview if no orderNo passed, use a mock default
            this.loadOrderDetail('SN_MOCK_DEFAULT');
        }
    },
    methods: {
        loadOrderDetail(orderNo) {
            // Mock data loading
            this.orderInfo = this.getMockData(orderNo);
        },
        copyOrderNo() {
            uni.setClipboardData({
                data: this.orderInfo.orderNo,
                success: () => {
                    uni.showToast({ title: '复制成功', icon: 'none' });
                }
            });
        },
        viewLogistics() {
            uni.navigateTo({
                url: `/pages-car/pages/logistics-detail?orderNo=${this.orderInfo.orderNo}`
            });
        },
        handleAction(type) {
            uni.showToast({ title: `点击了${type}`, icon: 'none' });
            // Implement specific logic here similar to my-order.vue
        },
        getMockData(orderNo) {
            // Basic mock structure
            return {
                status: 2, // Default to pending payment for dev
                orderNo: orderNo || '32656+56+5655',
                createTime: '2021-07-23 14:50:05',
                goodsTotalPrice: '6565',
                postage: '0.00',
                discountPrice: '55',
                realPayPrice: '918.00',
                address: {
                    name: '张三',
                    mobile: '155****5855',
                    detail: '四川省成都市高新区XXX街XXX路XXX号XXX小区XXX栋XXXX单元XXX楼XXX'
                },
                goodsList: [
                    {
                        title: '马克思主义基本原理',
                        quality: '中等',
                        price: '9.60',
                        num: 2,
                        cover: 'https://uviewui.com/album/1.jpg'
                    },
                    {
                        title: '马克思主义基本原理',
                        quality: '中等',
                        price: '9.60',
                        num: 2,
                        cover: 'https://uviewui.com/album/1.jpg'
                    }
                ]
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.order-detail-page {
    min-height: 100vh;
    background-color: #F5F5F5;
    padding-bottom: 20rpx;

    .status-header {
        background-color: #d1f2d8; // Light green bg
        padding: 40rpx 30rpx;
        color: #333;

        .status-text {
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .status-desc {
            font-size: 26rpx;
            color: #666;
            display: flex;
            align-items: center;
        }

        .status-desc-block {
            font-size: 26rpx;
            color: #666;

            .status-tip {
                margin-bottom: 10rpx;
            }

            .status-desc-row {
                display: flex;
                align-items: center;
            }
        }
    }

    .info-card {
        background-color: #fff;
        margin: 20rpx;
        border-radius: 16rpx;
        padding: 30rpx;
        display: flex;

        &.address-card {
            align-items: center;

            .icon-box {
                margin-right: 20rpx;
            }

            .address-content {
                flex: 1;
                margin-right: 20rpx;

                .user-info {
                    font-size: 30rpx;
                    font-weight: 500;
                    margin-bottom: 10rpx;

                    .mobile {
                        margin-left: 20rpx;
                    }
                }

                .address-detail {
                    font-size: 26rpx;
                    color: #666;
                    line-height: 1.4;
                }
            }
        }

        &.logistics-card {
            align-items: center;

            .icon-box {
                margin-right: 20rpx;
            }

            .logistics-content {
                flex: 1;
                margin-right: 20rpx;

                .company-name {
                    font-size: 28rpx;
                    color: #38C148;
                    margin-bottom: 6rpx;
                }

                .latest-trace {
                    font-size: 26rpx;
                    color: #333;
                    margin-bottom: 6rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }

                .update-time {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }

        &.goods-card {
            display: block;

            .goods-item {
                display: flex;
                margin-bottom: 30rpx;

                .goods-cover {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 8rpx;
                    margin-right: 20rpx;
                    background-color: #eee;
                }

                .goods-info {
                    flex: 1;

                    .goods-title {
                        font-size: 28rpx;
                        color: #333;
                        margin-bottom: 10rpx;
                    }

                    .goods-quality {
                        font-size: 24rpx;
                        color: #999;
                    }

                    .price-box {
                        margin-top: 10rpx;
                        display: flex;
                        justify-content: space-between;

                        .price {
                            font-weight: 500;
                        }

                        .num {
                            color: #999;
                        }
                    }
                }

                .goods-action {
                    display: flex;
                    align-items: center;
                }
            }

            .price-detail {
                border-top: 1rpx solid #eee;
                padding-top: 20rpx;

                .row {
                    display: flex;
                    justify-content: space-between;
                    font-size: 26rpx;
                    color: #666;
                    margin-bottom: 10rpx;

                    .goods-total {
                        color: #38C148;
                    }

                    .discount {
                        color: #38C148;
                    }
                }

                .real-pay-row {
                    display: flex;
                    justify-content: space-between;
                    font-size: 30rpx;
                    font-weight: 500;
                    margin-top: 20rpx;

                    .real-price {
                        color: #38C148;
                    }
                }
            }
        }

        &.time-card {
            display: block;

            .row {
                display: flex;
                justify-content: space-between;
                font-size: 24rpx;
                color: #999;
                margin-bottom: 10rpx;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        padding: 20rpx 30rpx;
        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
}
</style>