2025-10-20 10:10:46 +00:00
|
|
|
<!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: #f5f7fa;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 30px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #303133;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
padding-bottom: 15px;
|
|
|
|
|
border-bottom: 2px solid #409eff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 表单样式 */
|
|
|
|
|
.form-section {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-section-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #303133;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-group {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-label {
|
|
|
|
|
width: 150px;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding-right: 12px;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-label.required::before {
|
|
|
|
|
content: "*";
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input-wrapper {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input,
|
|
|
|
|
.form-select,
|
|
|
|
|
.form-textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
border: 1px solid #dcdfe6;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition: border-color 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input:focus,
|
|
|
|
|
.form-select:focus,
|
|
|
|
|
.form-textarea:focus {
|
|
|
|
|
border-color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input::placeholder,
|
|
|
|
|
.form-textarea::placeholder {
|
|
|
|
|
color: #c0c4cc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-textarea {
|
|
|
|
|
resize: vertical;
|
|
|
|
|
min-height: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 图片上传样式 */
|
|
|
|
|
.upload-box {
|
|
|
|
|
width: 140px;
|
|
|
|
|
height: 140px;
|
|
|
|
|
border: 1px dashed #dcdfe6;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-color: #fafafa;
|
|
|
|
|
transition: border-color 0.3s;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
color: #909399;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upload-box:hover {
|
|
|
|
|
border-color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upload-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upload-icon-plus {
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upload-icon-text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upload-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 开关样式 */
|
|
|
|
|
.switch-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 44px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-slider {
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: #dcdfe6;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
border-radius: 22px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-slider:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
height: 18px;
|
|
|
|
|
width: 18px;
|
|
|
|
|
left: 2px;
|
|
|
|
|
bottom: 2px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .switch-slider {
|
|
|
|
|
background-color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .switch-slider:before {
|
|
|
|
|
transform: translateX(22px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-label {
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-label.active {
|
|
|
|
|
color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 单选框组样式 */
|
|
|
|
|
.radio-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.radio-option {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.radio-option input[type="radio"] {
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.radio-option label {
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 复选框组样式 */
|
|
|
|
|
.checkbox-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox-option {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox-option input[type="checkbox"] {
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox-option label {
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 时间输入样式 */
|
|
|
|
|
.time-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-input {
|
|
|
|
|
width: 180px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-separator {
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 说明文字样式 */
|
|
|
|
|
.form-hint {
|
|
|
|
|
color: #909399;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 地图位置选择 */
|
|
|
|
|
.location-input {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.location-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
color: #409eff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 按钮样式 */
|
|
|
|
|
.btn {
|
|
|
|
|
padding: 10px 24px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
|
background-color: #409eff;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
|
|
background-color: #66b1ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-success {
|
|
|
|
|
background-color: #67c23a;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-success:hover {
|
|
|
|
|
background-color: #85ce61;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-cancel {
|
|
|
|
|
background-color: white;
|
|
|
|
|
color: #606266;
|
|
|
|
|
border: 1px solid #dcdfe6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-cancel:hover {
|
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
|
border-color: #c0c4cc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-footer {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
border-top: 1px solid #ebeef5;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 权限配置样式 */
|
|
|
|
|
.permission-section {
|
|
|
|
|
background-color: #f9fafc;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
border: 1px solid #ebeef5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permission-item {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permission-item:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permission-label {
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permission-label.required::before {
|
|
|
|
|
content: "*";
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permission-sub-items {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.permission-hint-text {
|
|
|
|
|
color: #909399;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h1 class="page-title" id="pageTitle">创建摊位</h1>
|
|
|
|
|
|
|
|
|
|
<form id="createBoothForm">
|
|
|
|
|
<!-- 绑定收益人账号 -->
|
|
|
|
|
<div class="form-section" id="beneficiarySection">
|
|
|
|
|
<div class="form-section-title">绑定收益人账号</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">操作类型</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<select class="form-select" id="operationType" onchange="handleOperationTypeChange()">
|
|
|
|
|
<option value="">请选择操作类型</option>
|
|
|
|
|
<option value="bind_market_manager">绑定收益人是市场经营者</option>
|
|
|
|
|
<option value="create_supplier">创建新收益人（供货商）</option>
|
2025-10-20 17:40:00 +00:00
|
|
|
<option value="bind_existing_supplier">绑定已存在的供货商账号</option>
|
2025-10-20 10:10:46 +00:00
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group" id="supplierAccountGroup" style="display: none;">
|
|
|
|
|
<div class="form-label required">供货商账号</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="supplierAccount" placeholder="请输入供货商账号" maxlength="11">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group" id="supplierPasswordGroup" style="display: none;">
|
|
|
|
|
<div class="form-label required">密码</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="password" class="form-input" id="password" placeholder="请输入密码">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-10-21 01:35:51 +00:00
|
|
|
<!-- 权限配置 -->
|
|
|
|
|
<div class="form-section" id="permissionSection" style="display: none;">
|
|
|
|
|
<div class="form-section-title">权限配置</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label"></div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="permission-section">
|
|
|
|
|
<div class="permission-item">
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" id="permissionAll" onchange="toggleAllPermissions()">
|
|
|
|
|
<label for="permissionAll"><strong>账号权限管理</strong></label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="permission-sub-items">
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm1">
|
|
|
|
|
<label for="perm1">订单权限管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm2">
|
|
|
|
|
<label for="perm2">订单管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm3">
|
|
|
|
|
<label for="perm3">商品管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm4">
|
|
|
|
|
<label for="perm4">数据分析</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm5">
|
|
|
|
|
<label for="perm5">内容管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm6">
|
|
|
|
|
<label for="perm6">运营管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm7">
|
|
|
|
|
<label for="perm7">银行卡管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm8">
|
|
|
|
|
<label for="perm8">优惠券统计工具管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm9">
|
|
|
|
|
<label for="perm9">营销营销工具管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm10">
|
|
|
|
|
<label for="perm10">等级规则</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm11">
|
|
|
|
|
<label for="perm11">会员营销工具管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm12">
|
|
|
|
|
<label for="perm12">钱包管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" class="sub-permission" id="perm13">
|
|
|
|
|
<label for="perm13">运营管理</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-10-20 10:10:46 +00:00
|
|
|
<!-- 店铺基础信息 -->
|
|
|
|
|
<div class="form-section">
|
|
|
|
|
<div class="form-section-title">店铺基础信息</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">摊位名称</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="boothName" placeholder="请输入摊位名称">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">主营类目</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<select class="form-select" id="mainCategory">
|
|
|
|
|
<option value="">请选择主营类目</option>
|
|
|
|
|
<option value="seafood">海鲜水产</option>
|
|
|
|
|
<option value="meat">肉禽蛋</option>
|
|
|
|
|
<option value="vegetable">蔬菜</option>
|
|
|
|
|
<option value="fruit">水果</option>
|
|
|
|
|
<option value="grain">粮油调味</option>
|
|
|
|
|
<option value="other">其他</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">摊位背景图</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="upload-list">
|
|
|
|
|
<div class="upload-box">
|
|
|
|
|
<div class="upload-icon">
|
|
|
|
|
<div class="upload-icon-plus">+</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">摊位联系电话</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="boothPhone" placeholder="请输入联系电话/手机号">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">摊位照片</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="upload-list">
|
|
|
|
|
<div class="upload-box">
|
|
|
|
|
<div class="upload-icon">
|
|
|
|
|
<div class="upload-icon-plus">+</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">摊位位置</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="boothLocation" placeholder="请输入摊位位置">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">摊位详细地址</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="boothDetailAddress" placeholder="请输入摊位详细地址">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">许可证</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="upload-list">
|
|
|
|
|
<div class="upload-box">
|
|
|
|
|
<div class="upload-icon">
|
|
|
|
|
<div class="upload-icon-plus">+</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="upload-box">
|
|
|
|
|
<div class="upload-icon">
|
|
|
|
|
<div class="upload-icon-plus">+</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 店铺配置 -->
|
|
|
|
|
<div class="form-section">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">是否自动开放</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="switch-group">
|
|
|
|
|
<span class="switch-label">手动营业</span>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="autoOpen" checked>
|
|
|
|
|
<span class="switch-slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="switch-label active">自动营业</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="time-group" style="margin-top: 15px;">
|
|
|
|
|
<div class="radio-group">
|
|
|
|
|
<div class="radio-option">
|
|
|
|
|
<input type="radio" id="businessTime1" name="businessTime" value="time1">
|
|
|
|
|
<label for="businessTime1">00:00:00</label>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="time-separator">至</span>
|
|
|
|
|
<div class="radio-option">
|
|
|
|
|
<input type="radio" id="businessTime2" name="businessTime" value="time2">
|
|
|
|
|
<label for="businessTime2">23:59:00</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">服务自提点位置</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="pickupLocation" placeholder="请输入服务自提点位置">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label required">自提点详细地址</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="pickupDetailAddress" placeholder="请输入自提点详细地址">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">自提点示意图</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="upload-list">
|
|
|
|
|
<div class="upload-box">
|
|
|
|
|
<div class="upload-icon">
|
|
|
|
|
<div class="upload-icon-plus">+</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">承接送达承诺</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="switch-group">
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="deliveryPromise" checked>
|
|
|
|
|
<span class="switch-slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-hint">是否自动承诺</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">营业时间</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<div class="checkbox-group">
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" id="everyday" checked>
|
|
|
|
|
<label for="everyday">每天</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" id="workday">
|
|
|
|
|
<label for="workday">工作日</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-option">
|
|
|
|
|
<input type="checkbox" id="custom">
|
|
|
|
|
<label for="custom">自定义</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="time-group" style="margin-top: 15px;">
|
|
|
|
|
<input type="time" class="form-input time-input" id="deliveryStartTime" value="00:00">
|
|
|
|
|
<span class="time-separator">至</span>
|
|
|
|
|
<input type="time" class="form-input time-input" id="deliveryEndTime" value="23:59">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<div class="form-label">承诺送达时间</div>
|
|
|
|
|
<div class="form-input-wrapper">
|
|
|
|
|
<input type="text" class="form-input" id="deliveryTime" placeholder="请输入小时数">
|
|
|
|
|
<span class="permission-hint-text">小时以内</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 底部按钮 -->
|
|
|
|
|
<div class="form-footer">
|
|
|
|
|
<button type="button" class="btn btn-success" onclick="submitForm()">保存</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 页面加载时检测URL参数
|
|
|
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
const mode = urlParams.get('mode');
|
|
|
|
|
|
|
|
|
|
if (mode === 'edit') {
|
|
|
|
|
// 编辑模式:隐藏收益人账号部分,修改页面标题
|
|
|
|
|
document.getElementById('pageTitle').textContent = '编辑摊位';
|
|
|
|
|
document.getElementById('beneficiarySection').style.display = 'none';
|
|
|
|
|
|
|
|
|
|
// 这里可以根据id参数加载摊位数据
|
|
|
|
|
const boothId = urlParams.get('id');
|
|
|
|
|
console.log('编辑摊位ID:', boothId);
|
|
|
|
|
// 调用后端API获取摊位详情并填充表单
|
|
|
|
|
// loadBoothData(boothId);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 处理操作类型变化
|
|
|
|
|
function handleOperationTypeChange() {
|
|
|
|
|
const operationType = document.getElementById('operationType').value;
|
|
|
|
|
const supplierAccountGroup = document.getElementById('supplierAccountGroup');
|
|
|
|
|
const supplierPasswordGroup = document.getElementById('supplierPasswordGroup');
|
2025-10-21 01:35:51 +00:00
|
|
|
const permissionSection = document.getElementById('permissionSection');
|
2025-10-20 10:10:46 +00:00
|
|
|
|
|
|
|
|
// 根据选择的操作类型显示或隐藏供货商账号和密码字段
|
|
|
|
|
if (operationType === 'create_supplier') {
|
|
|
|
|
// 创建新收益人（供货商）- 显示账号和密码
|
|
|
|
|
supplierAccountGroup.style.display = 'flex';
|
|
|
|
|
supplierPasswordGroup.style.display = 'flex';
|
2025-10-21 01:35:51 +00:00
|
|
|
permissionSection.style.display = 'block';
|
2025-10-20 17:40:00 +00:00
|
|
|
} else if (operationType === 'bind_existing_supplier') {
|
|
|
|
|
// 绑定已存在的供货商账号 - 只显示账号，不显示密码
|
|
|
|
|
supplierAccountGroup.style.display = 'flex';
|
|
|
|
|
supplierPasswordGroup.style.display = 'none';
|
2025-10-21 01:35:51 +00:00
|
|
|
permissionSection.style.display = 'block';
|
2025-10-20 10:10:46 +00:00
|
|
|
} else {
|
|
|
|
|
// 绑定收益人是市场经营者 - 隐藏账号和密码
|
|
|
|
|
supplierAccountGroup.style.display = 'none';
|
|
|
|
|
supplierPasswordGroup.style.display = 'none';
|
2025-10-21 01:35:51 +00:00
|
|
|
permissionSection.style.display = 'none';
|
2025-10-20 10:10:46 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 切换所有权限
|
|
|
|
|
function toggleAllPermissions() {
|
|
|
|
|
const allCheckbox = document.getElementById('permissionAll');
|
|
|
|
|
const subCheckboxes = document.querySelectorAll('.sub-permission');
|
|
|
|
|
|
|
|
|
|
subCheckboxes.forEach(checkbox => {
|
|
|
|
|
checkbox.checked = allCheckbox.checked;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 监听子权限变化,更新全选状态
|
|
|
|
|
document.querySelectorAll('.sub-permission').forEach(checkbox => {
|
|
|
|
|
checkbox.addEventListener('change', function() {
|
|
|
|
|
const allCheckbox = document.getElementById('permissionAll');
|
|
|
|
|
const subCheckboxes = document.querySelectorAll('.sub-permission');
|
|
|
|
|
const checkedCount = Array.from(subCheckboxes).filter(cb => cb.checked).length;
|
|
|
|
|
|
|
|
|
|
allCheckbox.checked = checkedCount === subCheckboxes.length;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 提交表单
|
|
|
|
|
function submitForm() {
|
|
|
|
|
// 检测是否为编辑模式
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
const mode = urlParams.get('mode');
|
|
|
|
|
const isEditMode = mode === 'edit';
|
|
|
|
|
|
|
|
|
|
// 获取表单数据
|
|
|
|
|
const formData = {
|
|
|
|
|
boothName: document.getElementById('boothName').value,
|
|
|
|
|
mainCategory: document.getElementById('mainCategory').value,
|
|
|
|
|
boothPhone: document.getElementById('boothPhone').value,
|
|
|
|
|
boothLocation: document.getElementById('boothLocation').value,
|
|
|
|
|
boothDetailAddress: document.getElementById('boothDetailAddress').value,
|
|
|
|
|
autoOpen: document.getElementById('autoOpen').checked,
|
|
|
|
|
pickupLocation: document.getElementById('pickupLocation').value,
|
|
|
|
|
pickupDetailAddress: document.getElementById('pickupDetailAddress').value,
|
|
|
|
|
deliveryPromise: document.getElementById('deliveryPromise').checked,
|
|
|
|
|
deliveryTime: document.getElementById('deliveryTime').value
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 如果不是编辑模式,需要验证收益人账号相关字段
|
|
|
|
|
if (!isEditMode) {
|
|
|
|
|
const operationType = document.getElementById('operationType').value;
|
|
|
|
|
formData.operationType = operationType;
|
|
|
|
|
|
|
|
|
|
// 验证操作类型
|
|
|
|
|
if (!formData.operationType) {
|
|
|
|
|
alert('请选择操作类型');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果选择了"创建新收益人（供货商）",需要验证供货商账号和密码
|
|
|
|
|
if (operationType === 'create_supplier') {
|
|
|
|
|
const supplierAccount = document.getElementById('supplierAccount').value;
|
|
|
|
|
const password = document.getElementById('password').value;
|
|
|
|
|
|
|
|
|
|
if (!supplierAccount) {
|
|
|
|
|
alert('请输入供货商账号');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!password) {
|
|
|
|
|
alert('请输入密码');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
formData.supplierAccount = supplierAccount;
|
|
|
|
|
formData.password = password;
|
|
|
|
|
}
|
2025-10-20 17:40:00 +00:00
|
|
|
// 如果选择了"绑定已存在的供货商账号",只需要验证供货商账号
|
|
|
|
|
else if (operationType === 'bind_existing_supplier') {
|
|
|
|
|
const supplierAccount = document.getElementById('supplierAccount').value;
|
|
|
|
|
|
|
|
|
|
if (!supplierAccount) {
|
|
|
|
|
alert('请输入供货商账号');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
formData.supplierAccount = supplierAccount;
|
|
|
|
|
}
|
2025-10-20 10:10:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!formData.boothName) {
|
|
|
|
|
alert('请输入摊位名称');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!formData.mainCategory) {
|
|
|
|
|
alert('请选择主营类目');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!formData.boothLocation) {
|
|
|
|
|
alert('请输入摊位位置');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!formData.boothDetailAddress) {
|
|
|
|
|
alert('请输入摊位详细地址');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!formData.pickupLocation) {
|
|
|
|
|
alert('请输入服务自提点位置');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!formData.pickupDetailAddress) {
|
|
|
|
|
alert('请输入自提点详细地址');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取权限配置
|
|
|
|
|
const permissions = [];
|
|
|
|
|
document.querySelectorAll('.sub-permission:checked').forEach(checkbox => {
|
|
|
|
|
permissions.push(checkbox.nextElementSibling.textContent);
|
|
|
|
|
});
|
|
|
|
|
formData.permissions = permissions;
|
|
|
|
|
|
|
|
|
|
console.log('提交的表单数据:', formData);
|
|
|
|
|
|
|
|
|
|
// 这里应该调用后端API提交表单
|
|
|
|
|
if (isEditMode) {
|
|
|
|
|
alert('摊位修改成功!');
|
|
|
|
|
} else {
|
|
|
|
|
alert('摊位创建成功!');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 可以选择跳转到摊位列表页面
|
|
|
|
|
// window.location.href = '摊位列表.html';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 图片上传功能(模拟)
|
|
|
|
|
document.querySelectorAll('.upload-box').forEach(box => {
|
|
|
|
|
box.addEventListener('click', function() {
|
|
|
|
|
alert('图片上传功能待实现');
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
