综述: 重构摊位管理模块为菜市场管理模块
- 将商家端web中摊位管理目录重命名为菜市场管理目录 - 修改菜单结构，将原摊位管理菜单改为菜市场管理顶级菜单 - 在菜市场管理菜单下添加子菜单: 摊位列表、专员列表、市场基础设置、同城运费配置 - 更新index.html中的菜单导航链接指向新的菜市场管理目录 - 移除旧的摊位管理目录及其文件(摊位列表.html、摊位创建.html) - 新增菜市场管理模块相关页面文件
This commit is contained in:
parent
5cef624e75
commit
633d7f7302
|
|
@ -452,12 +452,33 @@
|
|||
</li>
|
||||
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link" onclick="loadContent('./摊位管理/摊位列表.html', this)">
|
||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
||||
<span class="menu-icon">
|
||||
<i class="fas fa-store"></i>
|
||||
</span>
|
||||
<span class="menu-text">摊位管理</span>
|
||||
</a>
|
||||
<span class="menu-text">菜市场管理</span>
|
||||
<span class="menu-arrow">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="submenu">
|
||||
<a href="#" class="submenu-link" onclick="loadContent('./菜市场管理/摊位列表.html', this)">
|
||||
<span class="submenu-icon"></span>
|
||||
摊位列表
|
||||
</a>
|
||||
<a href="#" class="submenu-link" onclick="loadContent('./菜市场管理/专员列表.html', this)">
|
||||
<span class="submenu-icon"></span>
|
||||
专员列表
|
||||
</a>
|
||||
<a href="#" class="submenu-link" onclick="loadContent('./菜市场管理/市场基础管理.html', this)">
|
||||
<span class="submenu-icon"></span>
|
||||
市场基础设置
|
||||
</a>
|
||||
<a href="#" class="submenu-link" onclick="loadContent('./菜市场管理/同城运费配置.html', this)">
|
||||
<span class="submenu-icon"></span>
|
||||
同城运费配置
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-item">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,747 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专员管理</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.config-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.config-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.config-help {
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.config-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.config-label::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.config-value {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.config-value-display {
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid #1890ff;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.modify-btn:hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
width: 100%;
|
||||
padding: 8px 30px 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.select-box:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.select-box:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.select-wrapper::after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.staff-section {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
|
||||
.staff-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.staff-table thead {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.staff-table th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.staff-table td {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.staff-table tbody tr:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.staff-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.market-badge {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩层 */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 弹窗容器 */
|
||||
.modal-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 弹窗标题 */
|
||||
.modal-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 弹窗内容 */
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-label.required::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.form-input:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 复选框组 */
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-item input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
accent-color: #1890ff;
|
||||
}
|
||||
|
||||
.checkbox-item label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 弹窗底部按钮 */
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.modal-btn.cancel {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.modal-btn.cancel:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-btn.confirm {
|
||||
background-color: #2d6a4f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-btn.confirm:hover {
|
||||
background-color: #1d4d38;
|
||||
}
|
||||
|
||||
/* 单选按钮组 */
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio-item input[type="radio"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
accent-color: #1890ff;
|
||||
}
|
||||
|
||||
.radio-item label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="page-title">专员管理</h1>
|
||||
|
||||
<!-- 费用配置部分 -->
|
||||
<div class="config-section">
|
||||
<div class="config-header">
|
||||
<div class="config-title">专员调度费配置</div>
|
||||
<div class="config-help">字段说明</div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-label">费用支付方</div>
|
||||
<div class="config-value">
|
||||
<span class="config-value-display" id="paymentMethodDisplay">顾客支付</span>
|
||||
</div>
|
||||
<button class="modify-btn" onclick="openPaymentModal()">修改</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专员列表部分 -->
|
||||
<div class="staff-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">专员列表</div>
|
||||
<button class="add-btn" onclick="addStaff()">添加专员</button>
|
||||
</div>
|
||||
|
||||
<table class="staff-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>账号</th>
|
||||
<th>专员类型</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="staff-name-cell">
|
||||
<span>春申菜场专员</span>
|
||||
<span class="market-badge">当前市场专员</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>13800000299</td>
|
||||
<td>调度专员；配送专员；客服专员</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="action-btn">取消市场专员</button>
|
||||
<button class="action-btn primary" onclick="editStaff('春申菜场专员', '13800000299', ['scheduler', 'delivery', 'service'])">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="staff-name-cell">
|
||||
<span>春申菜场调度专员</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>13800000298</td>
|
||||
<td>调度专员</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="action-btn">设为市场专员</button>
|
||||
<button class="action-btn primary" onclick="editStaff('春申菜场调度专员', '13800000298', ['scheduler'])">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="staff-name-cell">
|
||||
<span>春申菜场客服专员</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>13800000296</td>
|
||||
<td>客服专员</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="action-btn">设为市场专员</button>
|
||||
<button class="action-btn primary" onclick="editStaff('春申菜场客服专员', '13800000296', ['service'])">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="staff-name-cell">
|
||||
<span>春申菜市场配送专员</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>13800000297</td>
|
||||
<td>配送专员</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="action-btn">设为市场专员</button>
|
||||
<button class="action-btn primary" onclick="editStaff('春申菜市场配送专员', '13800000297', ['delivery'])">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑专员弹窗 -->
|
||||
<div class="modal-overlay" id="staffModal">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="modalTitle">添加专员</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="staffForm">
|
||||
<div class="form-item">
|
||||
<label class="form-label required">专员姓名</label>
|
||||
<input type="text" class="form-input" id="staffName" placeholder="请输入专员姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label required">专员账号</label>
|
||||
<input type="text" class="form-input" id="staffPhone" placeholder="请输入手机号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label required">专员类型</label>
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox-item">
|
||||
<input type="checkbox" id="typeScheduler" value="scheduler">
|
||||
<label for="typeScheduler">调度专员</label>
|
||||
</div>
|
||||
<div class="checkbox-item">
|
||||
<input type="checkbox" id="typeDelivery" value="delivery">
|
||||
<label for="typeDelivery">配送专员</label>
|
||||
</div>
|
||||
<div class="checkbox-item">
|
||||
<input type="checkbox" id="typeService" value="service">
|
||||
<label for="typeService">客服专员</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="modal-btn cancel" onclick="closeModal()">取消</button>
|
||||
<button class="modal-btn confirm" onclick="submitStaff()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 费用支付方修改弹窗 -->
|
||||
<div class="modal-overlay" id="paymentModal">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">专员调度费配置</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="paymentForm">
|
||||
<div class="form-item">
|
||||
<div class="radio-group">
|
||||
<div class="radio-item">
|
||||
<input type="radio" id="paymentCustomer" name="paymentMethod" value="customer" checked>
|
||||
<label for="paymentCustomer">
|
||||
<div style="font-weight: 500; margin-bottom: 4px;">顾客支付</div>
|
||||
<div style="color: #999; font-size: 13px;">顾客在下单时，将根据配置内容额外收取专员调度费用；</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio-item">
|
||||
<input type="radio" id="paymentOperator" name="paymentMethod" value="operator">
|
||||
<label for="paymentOperator">
|
||||
<div style="font-weight: 500; margin-bottom: 4px;">经营者支付</div>
|
||||
<div style="color: #999; font-size: 13px;">根据配置，从经营者收益中扣除相应费用作为专员调度费；</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="modal-btn cancel" onclick="closePaymentModal()">取消</button>
|
||||
<button class="modal-btn confirm" onclick="submitPaymentMethod()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let isEditMode = false;
|
||||
let currentEditStaff = null;
|
||||
let currentPaymentMethod = 'customer'; // 默认顾客支付
|
||||
|
||||
// 添加专员
|
||||
function addStaff() {
|
||||
isEditMode = false;
|
||||
document.getElementById('modalTitle').textContent = '添加专员';
|
||||
document.getElementById('staffForm').reset();
|
||||
document.getElementById('staffModal').classList.add('active');
|
||||
}
|
||||
|
||||
// 编辑专员
|
||||
function editStaff(name, phone, types) {
|
||||
isEditMode = true;
|
||||
currentEditStaff = { name, phone, types };
|
||||
|
||||
document.getElementById('modalTitle').textContent = '编辑专员';
|
||||
document.getElementById('staffName').value = name;
|
||||
document.getElementById('staffPhone').value = phone;
|
||||
|
||||
// 重置所有复选框
|
||||
document.getElementById('typeScheduler').checked = false;
|
||||
document.getElementById('typeDelivery').checked = false;
|
||||
document.getElementById('typeService').checked = false;
|
||||
|
||||
// 设置已选择的专员类型
|
||||
types.forEach(type => {
|
||||
if (type === 'scheduler') {
|
||||
document.getElementById('typeScheduler').checked = true;
|
||||
} else if (type === 'delivery') {
|
||||
document.getElementById('typeDelivery').checked = true;
|
||||
} else if (type === 'service') {
|
||||
document.getElementById('typeService').checked = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('staffModal').classList.add('active');
|
||||
}
|
||||
|
||||
// 关闭专员弹窗
|
||||
function closeModal() {
|
||||
document.getElementById('staffModal').classList.remove('active');
|
||||
document.getElementById('staffForm').reset();
|
||||
}
|
||||
|
||||
// 提交专员表单
|
||||
function submitStaff() {
|
||||
const name = document.getElementById('staffName').value.trim();
|
||||
const phone = document.getElementById('staffPhone').value.trim();
|
||||
const types = [];
|
||||
|
||||
if (document.getElementById('typeScheduler').checked) {
|
||||
types.push('调度专员');
|
||||
}
|
||||
if (document.getElementById('typeDelivery').checked) {
|
||||
types.push('配送专员');
|
||||
}
|
||||
if (document.getElementById('typeService').checked) {
|
||||
types.push('客服专员');
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
if (!name) {
|
||||
alert('请输入专员姓名');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!phone) {
|
||||
alert('请输入手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
alert('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (types.length === 0) {
|
||||
alert('请至少选择一个专员类型');
|
||||
return;
|
||||
}
|
||||
|
||||
// 这里应该调用后端API保存数据
|
||||
if (isEditMode) {
|
||||
console.log('编辑专员:', { name, phone, types });
|
||||
alert('专员信息已更新');
|
||||
} else {
|
||||
console.log('添加专员:', { name, phone, types });
|
||||
alert('专员已添加');
|
||||
}
|
||||
|
||||
closeModal();
|
||||
// 实际项目中应该在这里刷新列表数据
|
||||
}
|
||||
|
||||
// 打开费用支付方弹窗
|
||||
function openPaymentModal() {
|
||||
// 设置当前选中的支付方式
|
||||
if (currentPaymentMethod === 'customer') {
|
||||
document.getElementById('paymentCustomer').checked = true;
|
||||
} else {
|
||||
document.getElementById('paymentOperator').checked = true;
|
||||
}
|
||||
document.getElementById('paymentModal').classList.add('active');
|
||||
}
|
||||
|
||||
// 关闭费用支付方弹窗
|
||||
function closePaymentModal() {
|
||||
document.getElementById('paymentModal').classList.remove('active');
|
||||
}
|
||||
|
||||
// 提交费用支付方
|
||||
function submitPaymentMethod() {
|
||||
const selectedRadio = document.querySelector('input[name="paymentMethod"]:checked');
|
||||
if (selectedRadio) {
|
||||
currentPaymentMethod = selectedRadio.value;
|
||||
const displayText = selectedRadio.value === 'customer' ? '顾客支付' : '经营者支付';
|
||||
document.getElementById('paymentMethodDisplay').textContent = displayText;
|
||||
console.log('费用支付方已更改为:', displayText);
|
||||
// 这里应该调用后端API保存配置
|
||||
}
|
||||
closePaymentModal();
|
||||
}
|
||||
|
||||
// 点击遮罩层关闭弹窗
|
||||
document.getElementById('staffModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('paymentModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closePaymentModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>同城配送设置</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 44px; /* 平衡返回按钮的宽度 */
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-help {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-help::after {
|
||||
content: "?";
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
flex: 0 0 200px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-label.required::before {
|
||||
content: "*";
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 120px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.form-unit {
|
||||
margin-left: 10px;
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
color: #999;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
input:checked ~ .switch-label {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select::after {
|
||||
content: "›";
|
||||
font-size: 24px;
|
||||
margin-left: 8px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 15px 20px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 40px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
min-width: 120px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
border-color: #40a9ff;
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #006d3e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background-color: #00562f;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 10px;
|
||||
background-color: #f5f5f5;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
.compound-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* PC端优化 */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
margin-top: 30px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
flex: 0 0 140px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<a href="javascript:history.back()" class="back-btn">‹</a>
|
||||
<h1 class="header-title">同城配送设置</h1>
|
||||
</div>
|
||||
|
||||
<!-- 同城配送开关 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">同城配送开关</div>
|
||||
<div class="section-help">字段说明</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label">是否开启同城配送</label>
|
||||
<div class="form-value">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="deliveryEnabled" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="switch-label" id="switchLabel">已开启</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 基础配置 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">基础配置</div>
|
||||
<div class="section-help">字段说明</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">订单包装费</label>
|
||||
<div class="form-value">
|
||||
<input type="number" class="form-input" value="1" min="0" step="0.1">
|
||||
<span class="form-unit">元/单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">订单起送价</label>
|
||||
<div class="form-value">
|
||||
<input type="number" class="form-input" value="1" min="0" step="0.1">
|
||||
<span class="form-unit">元/单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">最大配送距离</label>
|
||||
<div class="form-value">
|
||||
<input type="number" class="form-input" value="5" min="0" step="0.1">
|
||||
<span class="form-unit">公里</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">承诺订单送达时间</label>
|
||||
<div class="form-value">
|
||||
<input type="number" class="form-input" value="3" min="0" step="1">
|
||||
<span class="form-unit">小时以内</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 运费收益方 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">运费收益方</div>
|
||||
<div class="section-help">字段说明</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">运费收益方</label>
|
||||
<div class="form-value">
|
||||
<select id="beneficiary" class="form-input" style="width: 200px; text-align: left;">
|
||||
<option value="market">市场经营者</option>
|
||||
<option value="courier">专员</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 运费计算 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">运费计算</div>
|
||||
<div class="section-help">字段说明</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">运费模式</label>
|
||||
<div class="form-value">
|
||||
<select id="freightMode" class="form-input" style="width: 200px; text-align: left;">
|
||||
<option value="distance">距离运费</option>
|
||||
<option value="fixed">固定费用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 距离运费配置 -->
|
||||
<div id="distanceFreightConfig">
|
||||
<div class="form-item">
|
||||
<label class="form-label required">配送起步价</label>
|
||||
<div class="form-value">
|
||||
<div class="compound-input">
|
||||
<input type="number" class="form-input" id="startDistance" value="3" min="0" step="0.1" style="width: 80px;">
|
||||
<span class="form-unit" style="margin: 0; min-width: auto;">公里内</span>
|
||||
<input type="number" class="form-input" id="startPrice" value="1" min="0" step="0.1" style="width: 80px;">
|
||||
<span class="form-unit" style="margin: 0 0 0 10px;">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="form-label required">每+0.1公里加收</label>
|
||||
<div class="form-value">
|
||||
<input type="number" class="form-input" id="extraPrice" value="0" min="0" step="0.1">
|
||||
<span class="form-unit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 固定费用配置 -->
|
||||
<div id="fixedFreightConfig" style="display: none;">
|
||||
<div class="form-item">
|
||||
<label class="form-label required">配送费用</label>
|
||||
<div class="form-value">
|
||||
<input type="number" class="form-input" id="fixedPrice" value="5" min="0" step="0.1">
|
||||
<span class="form-unit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="footer">
|
||||
<button class="btn btn-cancel" onclick="handleCancel()">取消</button>
|
||||
<button class="btn btn-submit" onclick="handleSubmit()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 同城配送开关
|
||||
const deliveryEnabledSwitch = document.getElementById('deliveryEnabled');
|
||||
const switchLabel = document.getElementById('switchLabel');
|
||||
|
||||
deliveryEnabledSwitch.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
switchLabel.textContent = '已开启';
|
||||
console.log('同城配送已开启');
|
||||
} else {
|
||||
switchLabel.textContent = '已关闭';
|
||||
console.log('同城配送已关闭');
|
||||
}
|
||||
});
|
||||
|
||||
// 运费模式切换
|
||||
const freightModeSelect = document.getElementById('freightMode');
|
||||
const distanceFreightConfig = document.getElementById('distanceFreightConfig');
|
||||
const fixedFreightConfig = document.getElementById('fixedFreightConfig');
|
||||
|
||||
freightModeSelect.addEventListener('change', function(e) {
|
||||
const mode = e.target.value;
|
||||
if (mode === 'distance') {
|
||||
distanceFreightConfig.style.display = 'block';
|
||||
fixedFreightConfig.style.display = 'none';
|
||||
} else if (mode === 'fixed') {
|
||||
distanceFreightConfig.style.display = 'none';
|
||||
fixedFreightConfig.style.display = 'block';
|
||||
}
|
||||
console.log('运费模式切换为：', mode === 'distance' ? '距离运费' : '固定费用');
|
||||
});
|
||||
|
||||
// 运费收益方切换
|
||||
const beneficiarySelect = document.getElementById('beneficiary');
|
||||
beneficiarySelect.addEventListener('change', function(e) {
|
||||
const beneficiary = e.target.value;
|
||||
console.log('运费收益方切换为：', beneficiary === 'market' ? '市场经营者' : '专员');
|
||||
});
|
||||
|
||||
// 取消按钮
|
||||
function handleCancel() {
|
||||
if (confirm('确定要取消吗？未保存的更改将丢失。')) {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
function handleSubmit() {
|
||||
const mode = freightModeSelect.value;
|
||||
const beneficiary = document.getElementById('beneficiary').value;
|
||||
const deliveryEnabled = deliveryEnabledSwitch.checked;
|
||||
|
||||
// 收集表单数据
|
||||
const formData = {
|
||||
同城配送开关: {
|
||||
是否开启: deliveryEnabled
|
||||
},
|
||||
基础配置: {
|
||||
订单包装费: parseFloat(document.querySelectorAll('.form-input')[0].value),
|
||||
订单起送价: parseFloat(document.querySelectorAll('.form-input')[1].value),
|
||||
最大配送距离: parseFloat(document.querySelectorAll('.form-input')[2].value),
|
||||
承诺订单送达时间: parseInt(document.querySelectorAll('.form-input')[3].value)
|
||||
},
|
||||
运费收益方: {
|
||||
收益方: beneficiary === 'market' ? '市场经营者' : '专员'
|
||||
},
|
||||
运费计算: {
|
||||
运费模式: mode === 'distance' ? '距离运费' : '固定费用'
|
||||
}
|
||||
};
|
||||
|
||||
// 根据模式添加不同的配置
|
||||
if (mode === 'distance') {
|
||||
formData.运费计算.配送起步距离 = parseFloat(document.getElementById('startDistance').value);
|
||||
formData.运费计算.配送起步价 = parseFloat(document.getElementById('startPrice').value);
|
||||
formData.运费计算.每01公里加收 = parseFloat(document.getElementById('extraPrice').value);
|
||||
} else {
|
||||
formData.运费计算.配送费用 = parseFloat(document.getElementById('fixedPrice').value);
|
||||
}
|
||||
|
||||
console.log('提交的数据：', formData);
|
||||
|
||||
// TODO: 这里添加实际的提交逻辑
|
||||
alert('配置已保存！');
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
document.querySelectorAll('.form-input').forEach(input => {
|
||||
input.addEventListener('input', function(e) {
|
||||
if (this.type === 'number' && this.value < 0) {
|
||||
this.value = 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,891 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>市场基础管理</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header .back-btn {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 25px;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
min-width: 200px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.form-label.required::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.image-upload-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-delete {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.image-upload-btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background-color: #fafafa;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.image-upload-btn:hover {
|
||||
border-color: #1a6f3f;
|
||||
background-color: #f0f9f4;
|
||||
}
|
||||
|
||||
.image-upload-btn .camera-icon {
|
||||
font-size: 32px;
|
||||
color: #ccc;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.image-upload-btn .upload-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-link {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-link::after {
|
||||
content: '›';
|
||||
font-size: 20px;
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ddd;
|
||||
border-radius: 28px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.toggle-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background-color: #1a6f3f;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.toggle-labels {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.toggle-labels span {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.toggle-labels span.active {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.number-input input {
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number-input .unit {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 50px;
|
||||
font-size: 16px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #1a6f3f;
|
||||
color: white;
|
||||
padding: 12px 80px;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background-color: #155c34;
|
||||
}
|
||||
|
||||
/* 地图弹窗样式 */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideUp 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-placeholder {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.map-placeholder .map-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.map-placeholder .map-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.map-placeholder .map-address {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.map-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 48px;
|
||||
color: #ff4d4f;
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
}
|
||||
|
||||
.location-info {
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.location-info-item {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.location-info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.location-info-label {
|
||||
color: #999;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.location-info-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 10px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.modal-btn-cancel {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-btn-cancel:hover {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.modal-btn-confirm {
|
||||
background-color: #1a6f3f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-btn-confirm:hover {
|
||||
background-color: #155c34;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
min-width: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<span class="back-btn" onclick="history.back()">‹</span>
|
||||
<h1>市场基础管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- 基础配置 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">基础配置</h2>
|
||||
<span class="help-icon">字段说明 ⓘ</span>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">菜市场背景图</div>
|
||||
<div class="form-value">
|
||||
<div class="image-upload-container">
|
||||
<div class="image-preview">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%23f0f0f0' width='120' height='120'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23999' font-size='14'%3E背景图%3C/text%3E%3C/svg%3E" alt="菜市场背景图">
|
||||
<div class="image-delete">×</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">菜市场营业执照(顾客可见)</div>
|
||||
<div class="form-value">
|
||||
<div class="image-upload-container">
|
||||
<div class="image-preview">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%23f0f0f0' width='120' height='120'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23999' font-size='14'%3E营业执照%3C/text%3E%3C/svg%3E" alt="营业执照">
|
||||
<div class="image-delete">×</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">菜市场实拍图(顾客可见)</div>
|
||||
<div class="form-value">
|
||||
<div class="image-upload-container">
|
||||
<div class="image-preview">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%23f0f0f0' width='120' height='120'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23999' font-size='14'%3E实拍图%3C/text%3E%3C/svg%3E" alt="实拍图">
|
||||
<div class="image-delete">×</div>
|
||||
</div>
|
||||
<div class="image-upload-btn">
|
||||
<div class="camera-icon">📷</div>
|
||||
<div class="upload-text">(1/5)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label">市场联系电话(顾客可见)</div>
|
||||
<div class="form-value">
|
||||
<span class="input-text">13818776990</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">市场位置</div>
|
||||
<div class="form-value">
|
||||
<span class="input-link" onclick="openMapModal('market')">农家小炒(春申路店)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">市场详细地址</div>
|
||||
<div class="form-value">
|
||||
<span class="input-text">闵行区春申路1501号</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label">是否自动营业</div>
|
||||
<div class="form-value">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="autoOpen">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<div class="toggle-labels">
|
||||
<span id="closeLabel">关闭</span>
|
||||
<span id="openLabel" class="active">开启</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自提点配置 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">自提点配置</h2>
|
||||
<span class="help-icon">字段说明 ⓘ</span>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">顾客自提点位置</div>
|
||||
<div class="form-value">
|
||||
<span class="input-link" onclick="openMapModal('pickup')">农家小炒(春申路店)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">自提点详细地址</div>
|
||||
<div class="form-value">
|
||||
<span class="input-text">春申菜市场一楼北门旁边</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label">自提点位置示意图</div>
|
||||
<div class="form-value">
|
||||
<div class="image-upload-container">
|
||||
<div class="image-preview">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%23f0f0f0' width='120' height='120'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23999' font-size='14'%3E示意图%3C/text%3E%3C/svg%3E" alt="示意图">
|
||||
<div class="image-delete">×</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">承诺送达自提点时间</div>
|
||||
<div class="form-value">
|
||||
<div class="number-input">
|
||||
<input type="number" value="1" min="1">
|
||||
<span class="unit">小时以内</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 摊主入驻配置 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">摊主入驻配置</h2>
|
||||
<span class="help-icon">字段说明 ⓘ</span>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-label required">若有摊主想入驻菜市场是否允许摊主联系您</div>
|
||||
<div class="form-value">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="allowContact" checked>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<div class="toggle-labels">
|
||||
<span id="forbidLabel">禁止</span>
|
||||
<span id="allowLabel" class="active">允许</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button class="btn btn-cancel" onclick="history.back()">取消</button>
|
||||
<button class="btn btn-submit" onclick="handleSubmit()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图弹窗 -->
|
||||
<div id="mapModal" class="modal-overlay" onclick="closeMapModal(event)">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h3 id="modalTitle">选择位置</h3>
|
||||
<span class="modal-close" onclick="closeMapModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="map-container">
|
||||
<div class="map-placeholder">
|
||||
<div class="map-icon">📍</div>
|
||||
<div class="map-text">地图占位符</div>
|
||||
<div class="map-address" id="mapAddress">农家小炒(春申路店)</div>
|
||||
</div>
|
||||
<div class="map-marker">📍</div>
|
||||
</div>
|
||||
<div class="location-info">
|
||||
<div class="location-info-item">
|
||||
<span class="location-info-label">位置名称:</span>
|
||||
<span class="location-info-value" id="locationName">农家小炒(春申路店)</span>
|
||||
</div>
|
||||
<div class="location-info-item">
|
||||
<span class="location-info-label">详细地址:</span>
|
||||
<span class="location-info-value" id="locationAddress">闵行区春申路1501号</span>
|
||||
</div>
|
||||
<div class="location-info-item">
|
||||
<span class="location-info-label">经纬度:</span>
|
||||
<span class="location-info-value">121.3826, 31.1226</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="modal-btn modal-btn-cancel" onclick="closeMapModal()">取消</button>
|
||||
<button class="modal-btn modal-btn-confirm" onclick="confirmLocation()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 当前选择的位置类型
|
||||
let currentLocationType = null;
|
||||
|
||||
// 打开地图弹窗
|
||||
function openMapModal(type) {
|
||||
currentLocationType = type;
|
||||
const modal = document.getElementById('mapModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const mapAddress = document.getElementById('mapAddress');
|
||||
const locationName = document.getElementById('locationName');
|
||||
const locationAddress = document.getElementById('locationAddress');
|
||||
|
||||
if (type === 'market') {
|
||||
modalTitle.textContent = '选择市场位置';
|
||||
mapAddress.textContent = '农家小炒(春申路店)';
|
||||
locationName.textContent = '农家小炒(春申路店)';
|
||||
locationAddress.textContent = '闵行区春申路1501号';
|
||||
} else if (type === 'pickup') {
|
||||
modalTitle.textContent = '选择自提点位置';
|
||||
mapAddress.textContent = '农家小炒(春申路店)';
|
||||
locationName.textContent = '农家小炒(春申路店)';
|
||||
locationAddress.textContent = '春申菜市场一楼北门旁边';
|
||||
}
|
||||
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// 关闭地图弹窗
|
||||
function closeMapModal(event) {
|
||||
if (event && event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
const modal = document.getElementById('mapModal');
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
currentLocationType = null;
|
||||
}
|
||||
|
||||
// 确认选择位置
|
||||
function confirmLocation() {
|
||||
const locationName = document.getElementById('locationName').textContent;
|
||||
console.log('选择的位置:', locationName, '类型:', currentLocationType);
|
||||
alert('位置已选择: ' + locationName);
|
||||
closeMapModal();
|
||||
}
|
||||
|
||||
// 自动营业开关
|
||||
const autoOpenSwitch = document.getElementById('autoOpen');
|
||||
const closeLabel = document.getElementById('closeLabel');
|
||||
const openLabel = document.getElementById('openLabel');
|
||||
|
||||
autoOpenSwitch.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
closeLabel.classList.remove('active');
|
||||
openLabel.classList.add('active');
|
||||
} else {
|
||||
closeLabel.classList.add('active');
|
||||
openLabel.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 摊主入驻开关
|
||||
const allowContactSwitch = document.getElementById('allowContact');
|
||||
const forbidLabel = document.getElementById('forbidLabel');
|
||||
const allowLabel = document.getElementById('allowLabel');
|
||||
|
||||
allowContactSwitch.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
forbidLabel.classList.remove('active');
|
||||
allowLabel.classList.add('active');
|
||||
} else {
|
||||
forbidLabel.classList.add('active');
|
||||
allowLabel.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 图片上传处理
|
||||
document.querySelectorAll('.image-upload-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
input.onchange = function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
console.log('图片已选择:', file.name);
|
||||
// 这里可以添加图片预览逻辑
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
});
|
||||
});
|
||||
|
||||
// 删除图片
|
||||
document.querySelectorAll('.image-delete').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
if (confirm('确定要删除这张图片吗?')) {
|
||||
this.parentElement.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 提交表单
|
||||
function handleSubmit() {
|
||||
// 收集表单数据
|
||||
const formData = {
|
||||
autoOpen: autoOpenSwitch.checked,
|
||||
allowContact: allowContactSwitch.checked,
|
||||
deliveryTime: document.querySelector('.number-input input').value
|
||||
};
|
||||
|
||||
console.log('提交表单数据:', formData);
|
||||
alert('表单提交成功!');
|
||||
}
|
||||
|
||||
// 初始化开关状态
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
// 自动营业默认关闭
|
||||
autoOpenSwitch.checked = false;
|
||||
closeLabel.classList.add('active');
|
||||
openLabel.classList.remove('active');
|
||||
|
||||
// 摊主入驻默认允许
|
||||
allowContactSwitch.checked = true;
|
||||
forbidLabel.classList.remove('active');
|
||||
allowLabel.classList.add('active');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue