sqxp/docs/原型图/web/订单详情.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 订单详情</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item:hover { background: #f5f7fa; color: #1989fa; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
        .status-tag.primary { background: #ecf5ff; color: #1989fa; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.warning { background: #fdf6ec; color: #ff976a; }
        .status-tag.danger { background: #fef0f0; color: #ee0a24; }
        .status-tag.info { background: #f4f4f5; color: #909399; }
        .form-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
        .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
        .info-item { background: #f9f9f9; border-radius: 8px; padding: 16px; }
        .info-item label { font-size: 13px; color: #909399; display: block; margin-bottom: 8px; }
        .info-item span { font-size: 16px; font-weight: 600; color: #303133; }
        .order-items-table { width: 100%; border-collapse: collapse; }
        .order-items-table th, .order-items-table td { padding: 12px; border: 1px solid #eee; text-align: left; font-size: 14px; }
        .order-items-table th { background: #f5f7fa; font-weight: 600; color: #606266; }
        .amount-row { display: flex; justify-content: flex-end; gap: 40px; padding: 16px 0; border-top: 2px solid #1989fa; margin-top: 16px; }
        .amount-row .label { font-size: 16px; color: #606266; }
        .amount-row .value { font-size: 20px; font-weight: 600; color: #ee0a24; }
        .action-bar { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; border-top: 1px solid #eee; }
        .timeline { padding: 20px 0; }
        .timeline-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
        .timeline-dot { width: 12px; height: 12px; background: #1989fa; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
        .timeline-dot.success { background: #07c160; }
        .timeline-dot.warning { background: #ff976a; }
        .timeline-dot.danger { background: #ee0a24; }
        .timeline-line { position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: #e4e7ed; }
        .timeline-content h4 { font-size: 14px; color: #303133; margin-bottom: 4px; }
        .timeline-content p { font-size: 13px; color: #909399; }
        .tabs { display: flex; gap: 4px; background: #f5f7fa; padding: 4px; border-radius: 8px; margin-bottom: 20px; width: fit-content; }
        .tab { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; }
        .tab.active { background: #fff; color: #1989fa; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .back-btn { margin-bottom: 16px; }
        /* 订单锁定提示 */
        .lock-tip { background: #fff1f0; border: 1px solid #ffccc7; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
        .lock-tip .icon { color: #ee0a24; font-size: 20px; }
        .lock-tip .text { font-size: 14px; color: #303133; }
        .lock-tip .text strong { color: #ee0a24; }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="topbar">
        <div class="topbar-logo">
            <h1>叁强鲜配</h1>
            <span>运营管理后台</span>
        </div>
        <div class="topbar-user">
            <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
            <span>管理员</span>
        </div>
    </div>

    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>首页</span></div>
            <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
            <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
            <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
            <div class="menu-item"><el-icon><Search /></el-icon><span>询价管理</span></div>
            <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
            <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
            <div class="menu-item active"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
            <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
            <div class="menu-item"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
        </div>

        <!-- 内容区 -->
        <div class="content">
            <div class="breadcrumb">订单管理 / 订单列表 / 订单详情</div>

            <el-button class="back-btn" @click="goBack">
                <el-icon><ArrowLeft /></el-icon> 返回列表
            </el-button>

            <!-- 订单锁定提示 -->
            <div class="lock-tip">
                <div class="icon"><el-icon><WarningFilled /></el-icon></div>
                <div class="text">
                    此订单已被 <strong>张三</strong> 锁定编辑中，锁定时间：2026-03-19 10:30:15<br/>
                    请等待其完成操作或联系解除锁定后再进行操作。
                </div>
                <el-button type="danger" size="small">强制解锁</el-button>
            </div>

            <!-- Tab切换 -->
            <div class="tabs">
                <div class="tab active">订单信息</div>
                <div class="tab">配送信息</div>
                <div class="tab">操作记录</div>
            </div>

            <!-- 订单基本信息 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">订单基本信息</span>
                    <span class="status-tag warning">待分配配送</span>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <label>订单编号</label>
                        <span>ORD202603190001</span>
                    </div>
                    <div class="info-item">
                        <label>下单客户</label>
                        <span>XX餐厅</span>
                    </div>
                    <div class="info-item">
                        <label>所属区域</label>
                        <span>城东区域</span>
                    </div>
                    <div class="info-item">
                        <label>价格版本</label>
                        <span>V3</span>
                    </div>
                    <div class="info-item">
                        <label>支付方式</label>
                        <span>微信支付</span>
                    </div>
                    <div class="info-item">
                        <label>支付状态</label>
                        <span style="color:#07c160;">已支付</span>
                    </div>
                    <div class="info-item">
                        <label>下单时间</label>
                        <span>2026-03-19 10:23:45</span>
                    </div>
                    <div class="info-item">
                        <label>支付时间</label>
                        <span>2026-03-19 10:25:30</span>
                    </div>
                </div>
            </div>

            <!-- 配送信息 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">配送信息</span>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <label>联系人</label>
                        <span>张三</span>
                    </div>
                    <div class="info-item">
                        <label>联系电话</label>
                        <span>13800138001</span>
                    </div>
                    <div class="info-item">
                        <label>配送地址</label>
                        <span>城东区XX路XX号</span>
                    </div>
                    <div class="info-item">
                        <label>配送状态</label>
                        <span class="status-tag warning">待分配</span>
                    </div>
                </div>
            </div>

            <!-- 商品明细 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">商品明细</span>
                    <span style="color:#909399;font-size:13px;">共 5 件商品</span>
                </div>
                <table class="order-items-table">
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>分类</th>
                            <th>单位</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>金额</th>
                            <th>已配送</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>新鲜猪肉</td>
                            <td>肉类</td>
                            <td>斤</td>
                            <td>¥25.00</td>
                            <td>10</td>
                            <td>¥250.00</td>
                            <td>0</td>
                            <td><span class="status-tag warning">待配送</span></td>
                        </tr>
                        <tr>
                            <td>新鲜蔬菜</td>
                            <td>蔬菜</td>
                            <td>斤</td>
                            <td>¥8.00</td>
                            <td>20</td>
                            <td>¥160.00</td>
                            <td>0</td>
                            <td><span class="status-tag warning">待配送</span></td>
                        </tr>
                        <tr>
                            <td>新鲜水果</td>
                            <td>水果</td>
                            <td>斤</td>
                            <td>¥12.00</td>
                            <td>15</td>
                            <td>¥180.00</td>
                            <td>0</td>
                            <td><span class="status-tag warning">待配送</span></td>
                        </tr>
                        <tr>
                            <td>鸡蛋</td>
                            <td>禽蛋</td>
                            <td>个</td>
                            <td>¥6.00</td>
                            <td>20</td>
                            <td>¥120.00</td>
                            <td>0</td>
                            <td><span class="status-tag warning">待配送</span></td>
                        </tr>
                    </tbody>
                </table>
                <div class="amount-row">
                    <div>
                        <span class="label">订单总金额：</span>
                        <span class="value">¥710.00</span>
                    </div>
                    <div>
                        <span class="label">已付金额：</span>
                        <span class="value" style="color:#07c160;">¥710.00</span>
                    </div>
                    <div>
                        <span class="label">应收金额：</span>
                        <span class="value">¥710.00</span>
                    </div>
                </div>
            </div>

            <!-- 操作记录 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">状态变更记录</span>
                </div>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-dot warning"></div>
                        <div class="timeline-line"></div>
                        <div class="timeline-content">
                            <h4>订单已支付，等待分配配送</h4>
                            <p>2026-03-19 10:25:30 | 客户 XX餐厅</p>
                            <p style="margin-top:4px;color:#07c160;">微信支付成功，支付金额：¥710.00</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-dot success"></div>
                        <div class="timeline-line"></div>
                        <div class="timeline-content">
                            <h4>订单已创建</h4>
                            <p>2026-03-19 10:23:45 | 客户 XX餐厅</p>
                            <p style="margin-top:4px;">订单价格版本：V3</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-bar">
                <el-button @click="goBack">返回列表</el-button>
                <el-button type="warning" @click="showAdjustDialog">调整订单</el-button>
                <el-button type="danger" @click="showCancelDialog">取消订单</el-button>
                <el-button type="primary" @click="showAssignDialog">分配配送</el-button>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp, ref } = Vue;
        const app = createApp({
            setup() {
                const goBack = () => {
                    window.history.back();
                };
                const showAdjustDialog = () => {
                    alert('打开订单调整对话框');
                };
                const showCancelDialog = () => {
                    alert('打开取消订单对话框');
                };
                const showAssignDialog = () => {
                    alert('打开分配配送对话框');
                };
                return {
                    goBack,
                    showAdjustDialog,
                    showCancelDialog,
                    showAssignDialog
                };
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>