mashangyoujiu/Application/Retail/View/RiderOrder/detail.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css?v=2.13.2">
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js?v=2.13.2"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
    <style>
        body { margin: 0; padding: 20px; background: #f5f7fa; }
        .detail-section { margin-bottom: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
        .detail-section-title { font-size: 16px; font-weight: bold; color: #303133; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #409EFF; }
        .detail-item { display: flex; margin-bottom: 12px; }
        .detail-label { width: 120px; color: #606266; font-weight: 500; }
        .detail-value { flex: 1; color: #303133; }
    </style>
    <script>
        // 简单的 URL 参数解析
        function getQueryParam(name) {
            var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
            return results ? decodeURIComponent(results[1]) : null;
        }
    </script>
</head>
<body>
<div id="OrderDetailApp" v-cloak>
    <div v-loading="loading" v-if="detail">
        <!-- 基本信息 -->
        <div class="detail-section">
            <div class="detail-section-title">订单信息</div>
            <div class="detail-item">
                <div class="detail-label">订单号：</div>
                <div class="detail-value">{{ detail.order_no || '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">状态：</div>
                <div class="detail-value">{{ getStatusText(detail.status) }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">下单时间：</div>
                <div class="detail-value">{{ formatDate(detail.add_time) }}</div>
            </div>
        </div>

        <!-- 商户信息 -->
        <div class="detail-section">
            <div class="detail-section-title">商户信息</div>
            <div class="detail-item">
                <div class="detail-label">商户名称：</div>
                <div class="detail-value">{{ (detail.merchant && detail.merchant.name) || '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">地址：</div>
                <div class="detail-value">{{ (detail.merchant && detail.merchant.address) || '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">电话：</div>
                <div class="detail-value">{{ (detail.merchant && (detail.merchant.phone || detail.merchant.mobile)) || '-' }}</div>
            </div>
        </div>

        <!-- 收货信息 -->
        <div class="detail-section">
            <div class="detail-section-title">收货信息</div>
            <div class="detail-item">
                <div class="detail-label">收货人：</div>
                <div class="detail-value">{{ (detail.customer && detail.customer.name) || '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">收货地址：</div>
                <div class="detail-value">{{ (detail.customer && detail.customer.address) || '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">联系电话：</div>
                <div class="detail-value">{{ (detail.customer && detail.customer.phone) || '-' }}</div>
            </div>
        </div>

        <!-- 配送信息 -->
        <div class="detail-section">
            <div class="detail-section-title">配送信息</div>
            <div class="detail-item">
                <div class="detail-label">骑手：</div>
                <div class="detail-value">{{ (detail.rider && detail.rider.name) || '未分配' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">配送费：</div>
                <div class="detail-value">¥{{ detail.deliveryFee }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">距离：</div>
                <div class="detail-value">{{ detail.distance }}km</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">预计时间：</div>
                <div class="detail-value">{{ detail.estimatedTime }}分钟</div>
            </div>
        </div>
    </div>
</div>

<script>
new Vue({
    el: '#OrderDetailApp',
    data() {
        return {
            loading: false,
            detail: null
        }
    },
    mounted() {
        const id = getQueryParam('id');
        if (id) {
            this.loadDetail(id);
        }
    },
    methods: {
        async loadDetail(id) {
            this.loading = true;
            try {
                const res = await $.ajax({
                    url: '/Retail/RiderOrder/getOrderDetail',
                    type: 'POST',
                    data: { orderId: id },
                    dataType: 'json'
                });
                if (res.code === 1) {
                    this.detail = res.data || {};
                } else {
                    this.$message.error(res.msg || '获取订单详情失败');
                }
            } catch (e) {
                console.error('获取订单详情异常:', e);
                this.$message.error('网络错误，请重试');
            } finally {
                this.loading = false;
            }
        },
        formatDate(date) {
            if (!date) return '-';
            try { return new Date(date).toLocaleString(); } catch (e) { return date; }
        },
        getStatusText(status) {
            const map = {
                pending: '待分配',
                accepted: '已接单',
                picking_up: '取货中',
                delivering: '配送中',
                completed: '已完成',
                cancelled: '已取消'
            };
            return map[status] || '-';
        }
    }
});
</script>
</body>
</html>