1050 lines
37 KiB
HTML
1050 lines
37 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
|
<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-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 头部标题 */
|
||
|
|
.header {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background: linear-gradient(135deg, #409eff, #66b1ff);
|
||
|
|
color: white;
|
||
|
|
padding: 15px;
|
||
|
|
z-index: 100;
|
||
|
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 搜索栏 */
|
||
|
|
.search-section {
|
||
|
|
background: white;
|
||
|
|
padding: 12px;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input,
|
||
|
|
.search-bar select {
|
||
|
|
flex: 1;
|
||
|
|
padding: 10px 12px;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
outline: none;
|
||
|
|
background: #f5f7fa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar input:focus,
|
||
|
|
.search-bar select:focus {
|
||
|
|
border-color: #409eff;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background: linear-gradient(135deg, #409eff, #66b1ff);
|
||
|
|
color: white;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success {
|
||
|
|
background: linear-gradient(135deg, #67c23a, #85ce61);
|
||
|
|
color: white;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-invite {
|
||
|
|
background: linear-gradient(135deg, #e6a23c, #ebb563);
|
||
|
|
color: white;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-invite:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 摊位卡片列表 */
|
||
|
|
.booth-list {
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-card:active {
|
||
|
|
transform: scale(0.99);
|
||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-name {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #303133;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-status {
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-open {
|
||
|
|
background: #f0f9ff;
|
||
|
|
color: #67c23a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-closed {
|
||
|
|
background: #f4f4f5;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-info {
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-row {
|
||
|
|
display: flex;
|
||
|
|
padding: 6px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-label {
|
||
|
|
color: #909399;
|
||
|
|
width: 100px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-value {
|
||
|
|
color: #606266;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booth-actions {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 8px;
|
||
|
|
margin-top: 12px;
|
||
|
|
padding-top: 12px;
|
||
|
|
border-top: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn {
|
||
|
|
padding: 8px 12px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn:active {
|
||
|
|
transform: scale(0.96);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-detail {
|
||
|
|
background: #ecf5ff;
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-edit {
|
||
|
|
background: #fdf6ec;
|
||
|
|
color: #e6a23c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-config {
|
||
|
|
background: #f0f9ff;
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-delete {
|
||
|
|
background: #fef0f0;
|
||
|
|
color: #f56c6c;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 空状态 */
|
||
|
|
.empty-state {
|
||
|
|
text-align: center;
|
||
|
|
padding: 60px 20px;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-icon {
|
||
|
|
font-size: 48px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 弹窗 */
|
||
|
|
.modal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1000;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
animation: fadeIn 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideUp {
|
||
|
|
from { transform: translateY(100%); }
|
||
|
|
to { transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal.show {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background: white;
|
||
|
|
width: 100%;
|
||
|
|
max-height: 80vh;
|
||
|
|
border-radius: 16px 16px 0 0;
|
||
|
|
animation: slideUp 0.3s;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-header {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background: white;
|
||
|
|
padding: 16px;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 16px 16px 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-title {
|
||
|
|
font-size: 17px;
|
||
|
|
color: #303133;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close {
|
||
|
|
background: #f5f7fa;
|
||
|
|
border: none;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
font-size: 20px;
|
||
|
|
color: #909399;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close:active {
|
||
|
|
transform: scale(0.9);
|
||
|
|
background: #e4e7ed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-body {
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-footer {
|
||
|
|
position: sticky;
|
||
|
|
bottom: 0;
|
||
|
|
background: white;
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-top: 1px solid #ebeef5;
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-footer .btn {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-cancel {
|
||
|
|
background: #f5f7fa;
|
||
|
|
color: #606266;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-confirm {
|
||
|
|
background: linear-gradient(135deg, #1a5c3a, #2d7a4f);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-confirm:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表单 */
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
display: block;
|
||
|
|
color: #606266;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label.required::before {
|
||
|
|
content: "*";
|
||
|
|
color: #f56c6c;
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input,
|
||
|
|
.form-select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
outline: none;
|
||
|
|
background: #f5f7fa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus,
|
||
|
|
.form-select:focus {
|
||
|
|
border-color: #409eff;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 权限配置样式 */
|
||
|
|
.permission-section {
|
||
|
|
background: #f9fafc;
|
||
|
|
padding: 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid #ebeef5;
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.permission-all {
|
||
|
|
padding: 12px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.permission-sub-items {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.permission-sub-items .checkbox-option {
|
||
|
|
padding-left: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 加载动画 */
|
||
|
|
.loading {
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-spinner {
|
||
|
|
display: inline-block;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
border: 3px solid #f3f3f3;
|
||
|
|
border-top: 3px solid #409eff;
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: spin 1s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 头部 -->
|
||
|
|
<div class="header">
|
||
|
|
<h1 class="page-title">摊位列表</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 搜索区域 -->
|
||
|
|
<div class="search-section">
|
||
|
|
<div class="search-bar">
|
||
|
|
<input type="text" placeholder="搜索摊位名称" id="searchBoothName">
|
||
|
|
<select id="searchStatus">
|
||
|
|
<option value="">全部状态</option>
|
||
|
|
<option value="open">营业中</option>
|
||
|
|
<option value="closed">休息中</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="search-actions">
|
||
|
|
<button class="btn btn-primary" onclick="searchBooths()">搜索</button>
|
||
|
|
<button class="btn btn-success" onclick="goToCreateBooth()">新增摊位</button>
|
||
|
|
<button class="btn btn-invite" onclick="openInviteModal()">邀请摊主</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 摊位列表 -->
|
||
|
|
<div class="booth-list" id="boothList">
|
||
|
|
<!-- 示例数据 -->
|
||
|
|
<div class="booth-card">
|
||
|
|
<div class="booth-header">
|
||
|
|
<div class="booth-name">张记海鲜</div>
|
||
|
|
<div class="booth-status status-open">营业中</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-info">
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">主营类目</div>
|
||
|
|
<div class="info-value">海鲜水产</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人账号</div>
|
||
|
|
<div class="info-value">张三</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人手机</div>
|
||
|
|
<div class="info-value">13800138000</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-actions">
|
||
|
|
<button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button>
|
||
|
|
<button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="booth-card">
|
||
|
|
<div class="booth-header">
|
||
|
|
<div class="booth-name">李氏鲜肉</div>
|
||
|
|
<div class="booth-status status-open">营业中</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-info">
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">主营类目</div>
|
||
|
|
<div class="info-value">肉禽蛋</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人账号</div>
|
||
|
|
<div class="info-value">李四</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人手机</div>
|
||
|
|
<div class="info-value">13900139000</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-actions">
|
||
|
|
<button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button>
|
||
|
|
<button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="booth-card">
|
||
|
|
<div class="booth-header">
|
||
|
|
<div class="booth-name">王家蔬菜</div>
|
||
|
|
<div class="booth-status status-closed">休息中</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-info">
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">主营类目</div>
|
||
|
|
<div class="info-value">蔬菜</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人账号</div>
|
||
|
|
<div class="info-value">王五</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人手机</div>
|
||
|
|
<div class="info-value">13700137000</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-actions">
|
||
|
|
<button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button>
|
||
|
|
<button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="booth-card">
|
||
|
|
<div class="booth-header">
|
||
|
|
<div class="booth-name">赵姐水果摊</div>
|
||
|
|
<div class="booth-status status-open">营业中</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-info">
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">主营类目</div>
|
||
|
|
<div class="info-value">水果</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人账号</div>
|
||
|
|
<div class="info-value">赵六</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人手机</div>
|
||
|
|
<div class="info-value">13600136000</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-actions">
|
||
|
|
<button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button>
|
||
|
|
<button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="booth-card">
|
||
|
|
<div class="booth-header">
|
||
|
|
<div class="booth-name">孙氏粮油</div>
|
||
|
|
<div class="booth-status status-closed">休息中</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-info">
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">主营类目</div>
|
||
|
|
<div class="info-value">粮油调味</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人账号</div>
|
||
|
|
<div class="info-value">孙七</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">收益人手机</div>
|
||
|
|
<div class="info-value">13500135000</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="booth-actions">
|
||
|
|
<button class="action-btn btn-detail" onclick="viewBoothDetail(this)">详情</button>
|
||
|
|
<button class="action-btn btn-edit" onclick="editBooth(this)">编辑</button>
|
||
|
|
<button class="action-btn btn-config" onclick="configureBeneficiary(this)">配置收益人</button>
|
||
|
|
<button class="action-btn btn-delete" onclick="deleteBooth(this)">删除</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 配置收益人弹窗 -->
|
||
|
|
<div id="beneficiaryModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3 class="modal-title">配置收益人</h3>
|
||
|
|
<button class="modal-close" onclick="closeBeneficiaryModal()">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form id="beneficiaryForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">操作类型</label>
|
||
|
|
<select class="form-select" id="modalOperationType" onchange="handleModalOperationTypeChange()">
|
||
|
|
<option value="">请选择操作类型</option>
|
||
|
|
<option value="bind_market_manager">绑定收益人是市场经营者</option>
|
||
|
|
<option value="create_supplier">创建新收益人(供货商)</option>
|
||
|
|
<option value="bind_existing_supplier">绑定已存在的供货商账号</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group" id="modalSupplierAccountGroup" style="display: none;">
|
||
|
|
<label class="form-label required">供货商手机号</label>
|
||
|
|
<input type="tel" class="form-input" id="modalSupplierAccount" placeholder="请输入供货商手机号" maxlength="11">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group" id="modalSupplierNameGroup" style="display: none;">
|
||
|
|
<label class="form-label required">供货商账号名称</label>
|
||
|
|
<input type="text" class="form-input" id="modalSupplierName" placeholder="请输入供货商账号名称">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group" id="modalSupplierPasswordGroup" style="display: none;">
|
||
|
|
<label class="form-label required">密码</label>
|
||
|
|
<input type="password" class="form-input" id="modalPassword" placeholder="请输入密码">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- 权限配置 -->
|
||
|
|
<div id="modalPermissionSection" style="display: none;">
|
||
|
|
<div class="permission-section">
|
||
|
|
<div class="permission-all">
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" id="modalPermissionAll" onchange="toggleAllModalPermissions()">
|
||
|
|
<label for="modalPermissionAll"><strong>账号权限管理</strong></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="permission-sub-items">
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm1">
|
||
|
|
<label for="modalPerm1">订单权限管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm2">
|
||
|
|
<label for="modalPerm2">订单管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm3">
|
||
|
|
<label for="modalPerm3">商品管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm4">
|
||
|
|
<label for="modalPerm4">数据分析</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm5">
|
||
|
|
<label for="modalPerm5">内容管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm6">
|
||
|
|
<label for="modalPerm6">运营管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm7">
|
||
|
|
<label for="modalPerm7">银行卡管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm8">
|
||
|
|
<label for="modalPerm8">优惠券统计工具管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm9">
|
||
|
|
<label for="modalPerm9">营销工具管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm10">
|
||
|
|
<label for="modalPerm10">等级规则</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm11">
|
||
|
|
<label for="modalPerm11">会员营销工具管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm12">
|
||
|
|
<label for="modalPerm12">钱包管理</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-option">
|
||
|
|
<input type="checkbox" class="modal-sub-permission" id="modalPerm13">
|
||
|
|
<label for="modalPerm13">运营管理</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-cancel" onclick="closeBeneficiaryModal()">取消</button>
|
||
|
|
<button class="btn btn-primary" onclick="saveBeneficiary()">保存</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 邀请摊主弹窗 -->
|
||
|
|
<div id="inviteModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3 class="modal-title">邀请摊主入驻</h3>
|
||
|
|
<button class="modal-close" onclick="closeInviteModal()">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form id="inviteForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">摊主姓名</label>
|
||
|
|
<input type="text" class="form-input" id="inviteBoothOwnerName" placeholder="请输入摊主姓名">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label required">摊主账号</label>
|
||
|
|
<input type="text" class="form-input" id="inviteBoothOwnerPhone" placeholder="请输入手机号" maxlength="11">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">备注</label>
|
||
|
|
<input type="text" class="form-input" id="inviteRemark" placeholder="请输入">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-cancel" onclick="closeInviteModal()">取消</button>
|
||
|
|
<button class="btn btn-confirm" onclick="submitInvite()">确定</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 搜索功能
|
||
|
|
function searchBooths() {
|
||
|
|
const boothName = document.getElementById('searchBoothName').value;
|
||
|
|
const status = document.getElementById('searchStatus').value;
|
||
|
|
|
||
|
|
console.log('搜索条件:', { boothName, status });
|
||
|
|
|
||
|
|
// TODO: 调用后端API进行搜索
|
||
|
|
alert('搜索功能\n摊位名称: ' + (boothName || '全部') + '\n营业状态: ' + (status || '全部'));
|
||
|
|
}
|
||
|
|
|
||
|
|
// 跳转到创建摊位页面
|
||
|
|
function goToCreateBooth() {
|
||
|
|
console.log('跳转到创建摊位页面');
|
||
|
|
window.location.href = '移动端摊位创建.html';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 查看摊位详情
|
||
|
|
function viewBoothDetail(button) {
|
||
|
|
const card = button.closest('.booth-card');
|
||
|
|
const boothName = card.querySelector('.booth-name').textContent;
|
||
|
|
const category = card.querySelectorAll('.info-value')[0].textContent;
|
||
|
|
const beneficiaryName = card.querySelectorAll('.info-value')[1].textContent;
|
||
|
|
const beneficiaryPhone = card.querySelectorAll('.info-value')[2].textContent;
|
||
|
|
const status = card.querySelector('.booth-status').textContent;
|
||
|
|
|
||
|
|
const boothData = {
|
||
|
|
name: boothName,
|
||
|
|
category,
|
||
|
|
beneficiaryName,
|
||
|
|
beneficiaryPhone,
|
||
|
|
status
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log('查看摊位详情:', boothData);
|
||
|
|
alert('查看摊位详情\n摊位名称: ' + boothData.name);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 编辑摊位
|
||
|
|
function editBooth(button) {
|
||
|
|
const card = button.closest('.booth-card');
|
||
|
|
const boothName = card.querySelector('.booth-name').textContent;
|
||
|
|
|
||
|
|
console.log('编辑摊位:', boothName);
|
||
|
|
// 跳转到摊位创建页面,传递编辑模式参数
|
||
|
|
window.location.href = '移动端摊位创建.html?mode=edit&id=xxx';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除摊位
|
||
|
|
function deleteBooth(button) {
|
||
|
|
const card = button.closest('.booth-card');
|
||
|
|
const boothName = card.querySelector('.booth-name').textContent;
|
||
|
|
|
||
|
|
if (confirm('确定要删除摊位"' + boothName + '"吗?')) {
|
||
|
|
console.log('删除摊位:', boothName);
|
||
|
|
// TODO: 调用后端API删除摊位
|
||
|
|
card.style.animation = 'fadeOut 0.3s';
|
||
|
|
setTimeout(() => card.remove(), 300);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 配置收益人 - 打开弹窗
|
||
|
|
let currentBoothCard = null;
|
||
|
|
function configureBeneficiary(button) {
|
||
|
|
const card = button.closest('.booth-card');
|
||
|
|
currentBoothCard = card;
|
||
|
|
|
||
|
|
// 重置表单
|
||
|
|
document.getElementById('modalOperationType').value = '';
|
||
|
|
document.getElementById('modalSupplierAccount').value = '';
|
||
|
|
document.getElementById('modalSupplierName').value = '';
|
||
|
|
document.getElementById('modalPassword').value = '';
|
||
|
|
document.getElementById('modalSupplierAccountGroup').style.display = 'none';
|
||
|
|
document.getElementById('modalSupplierNameGroup').style.display = 'none';
|
||
|
|
document.getElementById('modalSupplierPasswordGroup').style.display = 'none';
|
||
|
|
document.getElementById('modalPermissionSection').style.display = 'none';
|
||
|
|
|
||
|
|
// 重置权限复选框
|
||
|
|
document.getElementById('modalPermissionAll').checked = false;
|
||
|
|
document.querySelectorAll('.modal-sub-permission').forEach(cb => cb.checked = false);
|
||
|
|
|
||
|
|
// 显示弹窗
|
||
|
|
document.getElementById('beneficiaryModal').classList.add('show');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
function closeBeneficiaryModal() {
|
||
|
|
document.getElementById('beneficiaryModal').classList.remove('show');
|
||
|
|
currentBoothCard = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理弹窗中的操作类型变化
|
||
|
|
function handleModalOperationTypeChange() {
|
||
|
|
const operationType = document.getElementById('modalOperationType').value;
|
||
|
|
const supplierAccountGroup = document.getElementById('modalSupplierAccountGroup');
|
||
|
|
const supplierNameGroup = document.getElementById('modalSupplierNameGroup');
|
||
|
|
const supplierPasswordGroup = document.getElementById('modalSupplierPasswordGroup');
|
||
|
|
const permissionSection = document.getElementById('modalPermissionSection');
|
||
|
|
|
||
|
|
if (operationType === 'create_supplier') {
|
||
|
|
// 创建新收益人 - 显示手机号、账号名称和密码
|
||
|
|
supplierAccountGroup.style.display = 'block';
|
||
|
|
supplierNameGroup.style.display = 'block';
|
||
|
|
supplierPasswordGroup.style.display = 'block';
|
||
|
|
permissionSection.style.display = 'block';
|
||
|
|
} else if (operationType === 'bind_existing_supplier') {
|
||
|
|
// 绑定已存在的供货商 - 只显示手机号
|
||
|
|
supplierAccountGroup.style.display = 'block';
|
||
|
|
supplierNameGroup.style.display = 'none';
|
||
|
|
supplierPasswordGroup.style.display = 'none';
|
||
|
|
permissionSection.style.display = 'block';
|
||
|
|
} else {
|
||
|
|
// 绑定市场经营者 - 隐藏所有
|
||
|
|
supplierAccountGroup.style.display = 'none';
|
||
|
|
supplierNameGroup.style.display = 'none';
|
||
|
|
supplierPasswordGroup.style.display = 'none';
|
||
|
|
permissionSection.style.display = 'none';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 切换所有权限
|
||
|
|
function toggleAllModalPermissions() {
|
||
|
|
const allCheckbox = document.getElementById('modalPermissionAll');
|
||
|
|
const subCheckboxes = document.querySelectorAll('.modal-sub-permission');
|
||
|
|
|
||
|
|
subCheckboxes.forEach(checkbox => {
|
||
|
|
checkbox.checked = allCheckbox.checked;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 监听子权限变化
|
||
|
|
document.querySelectorAll('.modal-sub-permission').forEach(checkbox => {
|
||
|
|
checkbox.addEventListener('change', function() {
|
||
|
|
const allCheckbox = document.getElementById('modalPermissionAll');
|
||
|
|
const subCheckboxes = document.querySelectorAll('.modal-sub-permission');
|
||
|
|
const checkedCount = Array.from(subCheckboxes).filter(cb => cb.checked).length;
|
||
|
|
|
||
|
|
allCheckbox.checked = checkedCount === subCheckboxes.length;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 保存收益人配置
|
||
|
|
function saveBeneficiary() {
|
||
|
|
const operationType = document.getElementById('modalOperationType').value;
|
||
|
|
|
||
|
|
if (!operationType) {
|
||
|
|
alert('请选择操作类型');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const beneficiaryData = {
|
||
|
|
operationType: operationType
|
||
|
|
};
|
||
|
|
|
||
|
|
// 创建新收益人
|
||
|
|
if (operationType === 'create_supplier') {
|
||
|
|
const supplierAccount = document.getElementById('modalSupplierAccount').value;
|
||
|
|
const supplierName = document.getElementById('modalSupplierName').value;
|
||
|
|
const password = document.getElementById('modalPassword').value;
|
||
|
|
|
||
|
|
if (!supplierAccount) {
|
||
|
|
alert('请输入供货商手机号');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!/^1[3-9]\d{9}$/.test(supplierAccount)) {
|
||
|
|
alert('请输入正确的手机号');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!supplierName) {
|
||
|
|
alert('请输入供货商账号名称');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!password) {
|
||
|
|
alert('请输入密码');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
beneficiaryData.supplierAccount = supplierAccount;
|
||
|
|
beneficiaryData.supplierName = supplierName;
|
||
|
|
beneficiaryData.password = password;
|
||
|
|
|
||
|
|
// 获取权限配置
|
||
|
|
const permissions = [];
|
||
|
|
document.querySelectorAll('.modal-sub-permission:checked').forEach(checkbox => {
|
||
|
|
permissions.push(checkbox.nextElementSibling.textContent);
|
||
|
|
});
|
||
|
|
beneficiaryData.permissions = permissions;
|
||
|
|
}
|
||
|
|
// 绑定已存在的供货商
|
||
|
|
else if (operationType === 'bind_existing_supplier') {
|
||
|
|
const supplierAccount = document.getElementById('modalSupplierAccount').value;
|
||
|
|
|
||
|
|
if (!supplierAccount) {
|
||
|
|
alert('请输入供货商手机号');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!/^1[3-9]\d{9}$/.test(supplierAccount)) {
|
||
|
|
alert('请输入正确的手机号');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
beneficiaryData.supplierAccount = supplierAccount;
|
||
|
|
|
||
|
|
// 获取权限配置
|
||
|
|
const permissions = [];
|
||
|
|
document.querySelectorAll('.modal-sub-permission:checked').forEach(checkbox => {
|
||
|
|
permissions.push(checkbox.nextElementSibling.textContent);
|
||
|
|
});
|
||
|
|
beneficiaryData.permissions = permissions;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('保存收益人配置:', beneficiaryData);
|
||
|
|
|
||
|
|
// TODO: 调用后端API保存收益人配置
|
||
|
|
alert('收益人配置已保存!');
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
closeBeneficiaryModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 点击弹窗外部区域关闭弹窗
|
||
|
|
document.getElementById('beneficiaryModal').addEventListener('click', function(e) {
|
||
|
|
if (e.target === this) {
|
||
|
|
closeBeneficiaryModal();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('inviteModal').addEventListener('click', function(e) {
|
||
|
|
if (e.target === this) {
|
||
|
|
closeInviteModal();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 回车搜索
|
||
|
|
document.getElementById('searchBoothName').addEventListener('keypress', function(e) {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
searchBooths();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 邀请摊主 - 打开弹窗
|
||
|
|
function openInviteModal() {
|
||
|
|
// 重置表单
|
||
|
|
document.getElementById('inviteBoothOwnerName').value = '';
|
||
|
|
document.getElementById('inviteBoothOwnerPhone').value = '';
|
||
|
|
document.getElementById('inviteRemark').value = '';
|
||
|
|
|
||
|
|
// 显示弹窗
|
||
|
|
document.getElementById('inviteModal').classList.add('show');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭邀请摊主弹窗
|
||
|
|
function closeInviteModal() {
|
||
|
|
document.getElementById('inviteModal').classList.remove('show');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交邀请
|
||
|
|
function submitInvite() {
|
||
|
|
const boothOwnerName = document.getElementById('inviteBoothOwnerName').value;
|
||
|
|
const boothOwnerPhone = document.getElementById('inviteBoothOwnerPhone').value;
|
||
|
|
const remark = document.getElementById('inviteRemark').value;
|
||
|
|
|
||
|
|
// 验证
|
||
|
|
if (!boothOwnerName) {
|
||
|
|
alert('请输入摊主姓名');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!boothOwnerPhone) {
|
||
|
|
alert('请输入摊主账号');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!/^1[3-9]\d{9}$/.test(boothOwnerPhone)) {
|
||
|
|
alert('请输入正确的手机号');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const inviteData = {
|
||
|
|
boothOwnerName,
|
||
|
|
boothOwnerPhone,
|
||
|
|
remark
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log('邀请摊主数据:', inviteData);
|
||
|
|
|
||
|
|
// TODO: 调用后端API发送邀请
|
||
|
|
alert('邀请已发送!');
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
closeInviteModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加淡出动画
|
||
|
|
const style = document.createElement('style');
|
||
|
|
style.textContent = `
|
||
|
|
@keyframes fadeOut {
|
||
|
|
from { opacity: 1; transform: scale(1); }
|
||
|
|
to { opacity: 0; transform: scale(0.9); }
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
document.head.appendChild(style);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|