linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: linbin:e2f533383148fd27996714b50a876325ff9357ec
Branches Tags
linbin:master
..
compare: linbin:633d7f73029d36e8a187dc97942ec531175e1bda
Branches Tags
linbin:master

2 Commits
e2f5333831 ... 633d7f7302

Author SHA1 Message Date
linbin 633d7f7302 综述: 重构摊位管理模块为菜市场管理模块 
- 将商家端web中摊位管理目录重命名为菜市场管理目录
- 修改菜单结构，将原摊位管理菜单改为菜市场管理顶级菜单
- 在菜市场管理菜单下添加子菜单: 摊位列表、专员列表、市场基础设置、同城运费配置
- 更新index.html中的菜单导航链接指向新的菜市场管理目录
- 移除旧的摊位管理目录及其文件(摊位列表.html、摊位创建.html)
- 新增菜市场管理模块相关页面文件
 2025-10-21 04:29:03 +08:00
linbin 5cef624e75 综述: 优化平台端web布局结构，移除多余嵌套层级 
- 移除`.content-container`中间层，简化HTML结构，减少不必要的嵌套
- 优化`.content-area`样式，移除固定padding和背景色，使用flex布局和相对定位
- 将`.tab-content`改为绝对定位，直接填充父容器，最大化可用区域
- 移除iframe的固定高度限制（600px），改为自适应父容器高度（100%）
- 移除`.content-container`的最小高度限制（400px）和装饰性样式
- 修改JavaScript中的DOM查询，将`.content-container`选择器改为`.content-area`
- 优化首页内容区域，直接作为`.content-area`的子元素，减少嵌套层级
- 通过以上优化，iframe内容区域可以充分利用从标签页到窗口底部的所有垂直空间
 2025-10-21 01:55:04 +08:00
7 changed files with 2256 additions and 22 deletions
Show Stats Expand all files Collapse all files

27
商家端web/index.html
View File

@ -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">

747
商家端web/菜市场管理/专员列表.html Normal file
View File

@ -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>

567
商家端web/菜市场管理/同城运费配置.html Normal file
View File

@ -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>

891
商家端web/菜市场管理/市场基础管理.html Normal file
View File

@ -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()">&times;</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>

0
商家端web/摊位管理/摊位列表.html → 商家端web/菜市场管理/摊位列表.html
View File

0
商家端web/摊位管理/摊位创建.html → 商家端web/菜市场管理/摊位创建.html
View File

42
平台端web/index.html
View File

@ -309,17 +309,27 @@
/* 内容区域 */
.content-area {
flex: 1;
background: #f5f5f5;
padding: 20px;
overflow-y: auto;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.content-container {
background: #fff;
border-radius: 8px;
padding: 24px;
min-height: 400px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.tab-content {
flex: 1;
overflow: hidden;
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tab-content iframe {
width: 100%;
height: 100%;
border: none;
}
/* 响应式设计 */
@ -419,11 +429,9 @@
<!-- 内容区域 -->
<div class="content-area">
<div class="content-container">
<div id="tab-content-home" class="tab-content active">
<h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px;">欢迎使用管理后台</h2>
<p style="color: #666; font-size: 14px;">这是首页内容区域，点击左侧菜单可以在此区域显示对应的页面内容。</p>
</div>
<div id="tab-content-home" class="tab-content" style="display: block;">
<h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px; padding: 24px 24px 0;">欢迎使用管理后台</h2>
<p style="color: #666; font-size: 14px; padding: 0 24px;">这是首页内容区域，点击左侧菜单可以在此区域显示对应的页面内容。</p>
</div>
</div>
</main>
@ -467,7 +475,7 @@
tabsContainer.appendChild(newTab);
// 创建新内容区域
const contentArea = document.querySelector('.content-container');
const contentArea = document.querySelector('.content-area');
const newContent = document.createElement('div');
newContent.id = `tab-content-${tabId}`;
newContent.className = 'tab-content';
@ -506,13 +514,13 @@
tabsContainer.appendChild(newTab);
// 创建新内容区域，使用iframe嵌入页面
const contentArea = document.querySelector('.content-container');
const contentArea = document.querySelector('.content-area');
const newContent = document.createElement('div');
newContent.id = `tab-content-${tabId}`;
newContent.className = 'tab-content';
newContent.style.display = 'none';
newContent.innerHTML = `
<iframe src="${link.href}" style="width: 100%; height: 600px; border: none;"></iframe>
<iframe src="${link.href}"></iframe>
`;
contentArea.appendChild(newContent);