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; }
        .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .page-nav { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
        .form-label { font-size: 14px; color: #606266; font-weight: 500; min-width: 100px; }
        .form-item { margin-bottom: 20px; }
        .form-item-content { display: flex; gap: 20px; flex-wrap: wrap; }
        .price-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
        .price-table th, .price-table td { padding: 12px 16px; border: 1px solid #ebeef5; text-align: center; font-size: 13px; }
        .price-table th { background: #f5f7fa; font-weight: 600; color: #606266; }
        .price-table .price { color: #07c160; font-weight: 600; }
        .price-table .input-cell input { width: 100px; text-align: center; padding: 6px 10px; border: 1px solid #dcdfe6; border-radius: 4px; }
        .price-table .input-cell input:focus { border-color: #1989fa; outline: none; }
        .summary-row { background: #ecf5ff; font-weight: 600; }
        .summary-row td { color: #1989fa; font-size: 15px; }
        .action-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff; border-radius: 12px; margin-bottom: 20px; }
        .source-card { background: #f9f9f9; border-radius: 8px; padding: 20px; margin-top: 16px; }
        .source-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; }
        .source-item { background: #fff; padding: 12px; border-radius: 6px; text-align: center; }
        .source-item .label { font-size: 12px; color: #909399; margin-bottom: 4px; }
        .source-item .value { font-size: 14px; font-weight: 600; color: #303133; }
        .preview-section { background: linear-gradient(135deg, #ecf5ff 0%, #f0f9eb 100%); border-radius: 12px; padding: 24px; margin-top: 20px; }
        .preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .preview-title { font-size: 16px; font-weight: 600; color: #1989fa; }
        .step-indicator { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
        .step { display: flex; align-items: center; gap: 8px; }
        .step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
        .step-dot.active { background: #1989fa; color: #fff; }
        .step-dot.finish { background: #07c160; color: #fff; }
        .step-dot.wait { background: #e4e7ed; color: #909399; }
        .step-line { width: 60px; height: 2px; background: #e4e7ed; }
        .step-line.active { background: #07c160; }
        .step-label { font-size: 13px; color: #606266; }
        .step-label.active { color: #1989fa; font-weight: 600; }
        .time-picker-group { display: flex; gap: 16px; align-items: center; }
        .time-type-btn { padding: 8px 16px; border: 1px solid #dcdfe6; border-radius: 4px; cursor: pointer; font-size: 13px; }
        .time-type-btn.active { background: #1989fa; color: #fff; border-color: #1989fa; }
    </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 active"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
            <div class="menu-item"><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>

            <!-- 操作栏 -->
            <div class="action-bar">
                <el-button @click="$router.back()">返回列表</el-button>
                <div style="display:flex;gap:12px;">
                    <el-button type="info" plain>保存草稿</el-button>
                    <el-button type="primary">发布价格</el-button>
                </div>
            </div>

            <!-- 步骤指示器 -->
            <div class="card">
                <div class="step-indicator">
                    <div class="step">
                        <div class="step-dot finish">1</div>
                        <span class="step-label active">选择来源</span>
                    </div>
                    <div class="step-line active"></div>
                    <div class="step">
                        <div class="step-dot active">2</div>
                        <span class="step-label active">确认价格</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step">
                        <div class="step-dot wait">3</div>
                        <span class="step-label">设置生效</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step">
                        <div class="step-dot wait">4</div>
                        <span class="step-label">发布完成</span>
                    </div>
                </div>
            </div>

            <!-- 价格基本信息 -->
            <div class="card">
                <div class="form-section-title">价格基本信息</div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label"><span style="color:#ee0a24;">*</span> 所属区域</span>
                        <el-select placeholder="请选择区域" style="width:200px;">
                            <el-option label="城东区域" value="CD" />
                            <el-option label="城西区域" value="CX" />
                            <el-option label="城南区域" value="CN" />
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label"><span style="color:#ee0a24;">*</span> 来源询价单</span>
                        <el-select placeholder="请选择询价单" style="width:280px;">
                            <el-option label="2026年3月第3周询价单-城东" value="1" />
                            <el-option label="2026年3月第2周询价单-城东" value="2" />
                        </el-select>
                        <span style="font-size:12px;color:#909399;margin-left:8px;">选择后将自动填充报价明细</span>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label"><span style="color:#ee0a24;">*</span> 来源供应商</span>
                        <el-select placeholder="请选择供应商" style="width:200px;">
                            <el-option label="XX供应商" value="1" />
                            <el-option label="YY供应商" value="2" />
                            <el-option label="ZZ供应商" value="3" />
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label">价格清单版本</span>
                        <el-input placeholder="V4" style="width:100px;" disabled />
                        <span style="font-size:12px;color:#909399;">系统自动生成</span>
                    </div>
                </div>
            </div>

            <!-- 来源信息卡片 -->
            <div class="source-card">
                <div style="font-size:14px;font-weight:600;color:#606266;">来源报价信息</div>
                <div class="source-info">
                    <div class="source-item">
                        <div class="label">询价单号</div>
                        <div class="value">INQ20260318003</div>
                    </div>
                    <div class="source-item">
                        <div class="label">供应商</div>
                        <div class="value">XX供应商</div>
                    </div>
                    <div class="source-item">
                        <div class="label">报价金额</div>
                        <div class="value" style="color:#07c160;">¥1,280.00</div>
                    </div>
                    <div class="source-item">
                        <div class="label">提交时间</div>
                        <div class="value">2026-03-18 14:30</div>
                    </div>
                </div>
            </div>

            <!-- 价格明细 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">价格明细</span>
                    <el-button type="primary" link>+ 添加商品</el-button>
                </div>
                <table class="price-table">
                    <thead>
                        <tr>
                            <th style="width:60px;">序号</th>
                            <th>商品名称</th>
                            <th>分类</th>
                            <th>单位</th>
                            <th>单价（元）</th>
                            <th>备注</th>
                            <th style="width:80px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>新鲜猪肉</td>
                            <td>肉类</td>
                            <td>斤</td>
                            <td class="price">25.00</td>
                            <td>-</td>
                            <td><el-button type="danger" link size="small">删除</el-button></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>新鲜蔬菜</td>
                            <td>蔬菜</td>
                            <td>斤</td>
                            <td class="price">8.00</td>
                            <td>-</td>
                            <td><el-button type="danger" link size="small">删除</el-button></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>新鲜水果</td>
                            <td>水果</td>
                            <td>斤</td>
                            <td class="price">12.00</td>
                            <td>-</td>
                            <td><el-button type="danger" link size="small">删除</el-button></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>鸡蛋</td>
                            <td>禽蛋</td>
                            <td>个</td>
                            <td class="price">6.00</td>
                            <td>-</td>
                            <td><el-button type="danger" link size="small">删除</el-button></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>大米</td>
                            <td>粮食</td>
                            <td>斤</td>
                            <td class="price">10.00</td>
                            <td>-</td>
                            <td><el-button type="danger" link size="small">删除</el-button></td>
                        </tr>
                        <tr class="summary-row">
                            <td colspan="4">合计</td>
                            <td>¥1,280.00</td>
                            <td colspan="2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 生效时间设置 -->
            <div class="card">
                <div class="form-section-title">生效时间设置</div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label">生效方式</span>
                        <div class="time-picker-group">
                            <div class="time-type-btn active">立即生效</div>
                            <div class="time-type-btn">定时生效</div>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label">生效时间</span>
                        <el-date-picker type="datetime" placeholder="选择生效时间" style="width:200px;" value-format="YYYY-MM-DD HH:mm:ss" />
                        <span style="font-size:12px;color:#909399;">设置后价格将在指定时间自动生效</span>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-row">
                        <span class="form-label">备注说明</span>
                        <el-input placeholder="选填，添加价格调整说明" style="width:400px;" />
                    </div>
                </div>
            </div>

            <!-- 预览确认 -->
            <div class="preview-section">
                <div class="preview-header">
                    <span class="preview-title">发布确认</span>
                </div>
                <div class="source-info">
                    <div class="source-item" style="background:#fff;">
                        <div class="label">区域</div>
                        <div class="value">城东区域</div>
                    </div>
                    <div class="source-item" style="background:#fff;">
                        <div class="label">供应商</div>
                        <div class="value">XX供应商</div>
                    </div>
                    <div class="source-item" style="background:#fff;">
                        <div class="label">商品数量</div>
                        <div class="value">5种</div>
                    </div>
                    <div class="source-item" style="background:#fff;">
                        <div class="label">生效时间</div>
                        <div class="value" style="color:#1989fa;">2026-03-19 00:00</div>
                    </div>
                </div>
                <div style="margin-top:20px;padding:16px;background:#fff;border-radius:8px;text-align:center;">
                    <div style="font-size:13px;color:#909399;margin-bottom:8px;">发布后将对所有客户可见，确认发布此价格清单？</div>
                    <div style="display:flex;gap:12px;justify-content:center;margin-top:16px;">
                        <el-button size="large">取消</el-button>
                        <el-button type="primary" size="large" style="width:160px;">确认发布</el-button>
                    </div>
                </div>
            </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() {
                return {};
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>