|
|
@ -13,8 +13,8 @@ |
|
|
|
|
|
|
|
|
body { |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
|
background-color: #f5f5f5; |
|
|
background-color: #F5F7FA; |
|
|
color: #333; |
|
|
color: #333333; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
overflow-x: hidden; |
|
|
overflow-x: hidden; |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -30,12 +30,12 @@ |
|
|
.container { |
|
|
.container { |
|
|
max-width: 480px; |
|
|
max-width: 480px; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
background-color: white; |
|
|
background-color: #F5F7FA; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
overflow-y: auto; |
|
|
overflow-y: auto; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
position: relative; |
|
|
position: relative; |
|
|
padding: 20px; |
|
|
padding: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
.header { |
|
|
@ -43,97 +43,141 @@ |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
padding: 16px; |
|
|
padding: 16px; |
|
|
background-color: #28a745; |
|
|
background-color: #2E7D32; |
|
|
color: white; |
|
|
color: white; |
|
|
margin: -20px -20px 20px; |
|
|
position: relative; |
|
|
|
|
|
border-bottom: 1px solid #E0E0E0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.header h1 { |
|
|
.header h1 { |
|
|
font-size: 18px; |
|
|
font-size: 18px; |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
|
|
|
margin: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.header-actions { |
|
|
.back-btn { |
|
|
display: flex; |
|
|
position: absolute; |
|
|
gap: 12px; |
|
|
left: 16px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.more-btn { |
|
|
|
|
|
background: none; |
|
|
background: none; |
|
|
border: none; |
|
|
border: none; |
|
|
color: white; |
|
|
color: white; |
|
|
font-size: 18px; |
|
|
font-size: 20px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
padding: 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.filter-section { |
|
|
.filter-section { |
|
|
margin-bottom: 20px; |
|
|
padding: 16px; |
|
|
|
|
|
background-color: white; |
|
|
|
|
|
border-bottom: 1px solid #E0E0E0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-between; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.filter-section h3 { |
|
|
.filter-title { |
|
|
font-size: 16px; |
|
|
font-size: 14px; |
|
|
color: #333; |
|
|
color: #666666; |
|
|
margin-bottom: 10px; |
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
gap: 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.filter-buttons { |
|
|
.filter-toggle { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
background-color: #F0F0F0; |
|
|
gap: 8px; |
|
|
border-radius: 20px; |
|
|
|
|
|
padding: 4px; |
|
|
|
|
|
gap: 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.filter-btn { |
|
|
.filter-toggle-btn { |
|
|
padding: 8px 12px; |
|
|
padding: 6px 12px; |
|
|
border: 1px solid #ddd; |
|
|
border: none; |
|
|
border-radius: 16px; |
|
|
border-radius: 16px; |
|
|
background-color: white; |
|
|
background-color: transparent; |
|
|
color: #666; |
|
|
color: #666666; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.filter-btn.active { |
|
|
.filter-toggle-btn.active { |
|
|
background-color: #28a745; |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
color: white; |
|
|
border-color: #28a745; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-section { |
|
|
.qr-section { |
|
|
margin-bottom: 30px; |
|
|
padding: 0 16px; |
|
|
|
|
|
margin-top: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.qr-item { |
|
|
|
|
|
background-color: white; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
padding: 12px 16px; |
|
|
|
|
|
margin-bottom: 8px; |
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06); |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: transform 0.2s; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.qr-item:active { |
|
|
|
|
|
transform: scale(0.98); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.qr-item-info { |
|
|
|
|
|
flex: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-section h3 { |
|
|
.qr-item-name { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #333; |
|
|
font-weight: 500; |
|
|
margin-bottom: 15px; |
|
|
color: #333333; |
|
|
padding-bottom: 8px; |
|
|
line-height: 24px; |
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-grid { |
|
|
.qr-item-details { |
|
|
display: grid; |
|
|
font-size: 14px; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
color: #666666; |
|
|
gap: 15px; |
|
|
line-height: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-item { |
|
|
.qr-item-arrow { |
|
|
background-color: #f8f9fa; |
|
|
color: #999999; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
margin-left: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.qr-content { |
|
|
|
|
|
background-color: white; |
|
|
border-radius: 8px; |
|
|
border-radius: 8px; |
|
|
padding: 12px; |
|
|
padding: 16px; |
|
|
text-align: center; |
|
|
margin-top: 8px; |
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06); |
|
|
|
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-item img { |
|
|
.qr-content img { |
|
|
max-width: 100%; |
|
|
max-width: 100%; |
|
|
max-height: 150px; |
|
|
max-height: 250px; |
|
|
margin-bottom: 10px; |
|
|
margin: 0 auto; |
|
|
|
|
|
display: block; |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-info { |
|
|
.qr-info { |
|
|
font-size: 12px; |
|
|
margin-top: 12px; |
|
|
color: #666; |
|
|
font-size: 14px; |
|
|
|
|
|
color: #666666; |
|
|
|
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-info p { |
|
|
.qr-info p { |
|
|
@ -142,13 +186,13 @@ |
|
|
|
|
|
|
|
|
.qr-info .name { |
|
|
.qr-info .name { |
|
|
font-weight: 500; |
|
|
font-weight: 500; |
|
|
color: #333; |
|
|
color: #333333; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.empty-state { |
|
|
.empty-state { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
padding: 40px 20px; |
|
|
padding: 40px 20px; |
|
|
color: #999; |
|
|
color: #999999; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.empty-state img { |
|
|
.empty-state img { |
|
|
@ -157,71 +201,120 @@ |
|
|
opacity: 0.5; |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.action-buttons { |
|
|
.filter-sidebar-btn { |
|
|
display: flex; |
|
|
background-color: #4CAF50; |
|
|
flex-direction: column; |
|
|
color: white; |
|
|
gap: 15px; |
|
|
|
|
|
margin-top: 30px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
|
padding: 15px; |
|
|
|
|
|
border: none; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
border-radius: 8px; |
|
|
font-size: 16px; |
|
|
padding: 8px 12px; |
|
|
font-weight: 500; |
|
|
font-size: 14px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
text-align: center; |
|
|
display: flex; |
|
|
transition: background-color 0.3s; |
|
|
align-items: center; |
|
|
|
|
|
gap: 6px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-primary { |
|
|
.filter-sidebar { |
|
|
background-color: #28a745; |
|
|
position: fixed; |
|
|
color: white; |
|
|
top: 0; |
|
|
|
|
|
right: -300px; |
|
|
|
|
|
width: 250px; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background: white; |
|
|
|
|
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1); |
|
|
|
|
|
z-index: 1000; |
|
|
|
|
|
transition: right 0.3s; |
|
|
|
|
|
padding: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-primary:hover { |
|
|
.sidebar-overlay { |
|
|
background-color: #218838; |
|
|
position: fixed; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
display: none; |
|
|
|
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-secondary { |
|
|
.sidebar-header { |
|
|
background-color: #6c757d; |
|
|
display: flex; |
|
|
color: white; |
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-bottom: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-secondary:hover { |
|
|
.sidebar-header h3 { |
|
|
background-color: #5a6268; |
|
|
font-size: 16px; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
margin: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
.close-sidebar-btn { |
|
|
text-align: center; |
|
|
background: none; |
|
|
margin-top: 40px; |
|
|
border: none; |
|
|
padding: 20px 0; |
|
|
font-size: 20px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
color: #999999; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.sidebar-filter-buttons { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
gap: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.sidebar-filter-btn { |
|
|
|
|
|
padding: 10px 12px; |
|
|
|
|
|
border: 1px solid #E0E0E0; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
background-color: white; |
|
|
|
|
|
color: #666666; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: #999; |
|
|
cursor: pointer; |
|
|
border-top: 1px solid #f0f0f0; |
|
|
text-align: left; |
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.sidebar-filter-btn:hover { |
|
|
|
|
|
background-color: #F5F5F5; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 480px) { |
|
|
@media (max-width: 480px) { |
|
|
.container { |
|
|
.container { |
|
|
max-width: 100%; |
|
|
max-width: 100%; |
|
|
padding: 15px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
|
margin: -15px -15px 15px; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.header h1 { |
|
|
.header h1 { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-grid { |
|
|
.qr-item { |
|
|
grid-template-columns: 1fr; |
|
|
padding: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.filter-section { |
|
|
|
|
|
padding: 12px 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.filter-sidebar-btn { |
|
|
|
|
|
padding: 6px 10px; |
|
|
|
|
|
font-size: 13px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.qr-item-name { |
|
|
|
|
|
font-size: 15px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.qr-item-details { |
|
|
|
|
|
font-size: 13px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qr-item img { |
|
|
.filter-toggle-btn { |
|
|
max-height: 200px; |
|
|
padding: 5px 10px; |
|
|
|
|
|
font-size: 13px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
@ -229,33 +322,34 @@ |
|
|
<body> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<div class="header"> |
|
|
|
|
|
<button class="back-btn" onclick="window.location.href='invite.html'">←</button> |
|
|
<h1>二维码合集</h1> |
|
|
<h1>二维码合集</h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="filter-section"> |
|
|
<div class="filter-section"> |
|
|
<div style="display: flex; align-items: center; justify-content: space-between;"> |
|
|
<div class="filter-toggle"> |
|
|
<h3>筛选</h3> |
|
|
<button class="filter-toggle-btn active" data-filter="all">全部</button> |
|
|
<button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: none; background: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer;">筛选</button> |
|
|
<button class="filter-toggle-btn" data-filter="me">我的</button> |
|
|
</div> |
|
|
|
|
|
<div class="filter-buttons"> |
|
|
|
|
|
<button class="filter-btn active" data-filter="all">全部</button> |
|
|
|
|
|
<button class="filter-btn" data-filter="me">我的二维码</button> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: none;"> |
|
|
|
|
|
<span>🔍</span> |
|
|
|
|
|
<span>筛选</span> |
|
|
|
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 筛选侧边栏 --> |
|
|
<!-- 筛选侧边栏 --> |
|
|
<div id="filterSidebar" class="filter-sidebar" style="position: fixed; top: 0; right: -300px; width: 250px; height: 100%; background: white; box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 1000; transition: right 0.3s; padding: 20px;"> |
|
|
<div id="filterSidebar" class="filter-sidebar"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> |
|
|
<div class="sidebar-header"> |
|
|
<h3>筛选用户</h3> |
|
|
<h3>筛选用户</h3> |
|
|
<button id="closeSidebarBtn" style="background: none; border: none; font-size: 20px; cursor: pointer;">×</button> |
|
|
<button id="closeSidebarBtn" class="close-sidebar-btn">×</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="sidebarFilterButtons" style="display: flex; flex-direction: column; gap: 10px;"> |
|
|
<div id="sidebarFilterButtons" class="sidebar-filter-buttons"> |
|
|
<!-- 动态生成的筛选按钮 --> |
|
|
<!-- 动态生成的筛选按钮 --> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 遮罩层 --> |
|
|
<!-- 遮罩层 --> |
|
|
<div id="sidebarOverlay" class="sidebar-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: none; transition: opacity 0.3s;"></div> |
|
|
<div id="sidebarOverlay" class="sidebar-overlay"></div> |
|
|
|
|
|
|
|
|
<div id="qrCollection"> |
|
|
<div id="qrCollection"> |
|
|
<div class="empty-state"> |
|
|
<div class="empty-state"> |
|
|
@ -265,13 +359,8 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="action-buttons"> |
|
|
<div style="padding: 16px;"> |
|
|
<button class="btn btn-primary" onclick="window.location.href='invite.html'">生成邀请二维码</button> |
|
|
<button class="btn btn-primary" onclick="window.location.href='invite.html'" style="width: 100%; padding: 12px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; text-align: center; transition: background-color 0.3s;">生成邀请二维码</button> |
|
|
<button class="btn btn-secondary" onclick="window.location.href='invite.html'">返回主页面</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="footer"> |
|
|
|
|
|
技术支持：四川又鸟蛋贸易有限公司 |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -349,23 +438,14 @@ |
|
|
|
|
|
|
|
|
// 动态生成筛选按钮 |
|
|
// 动态生成筛选按钮 |
|
|
function generateFilterButtons(invitees, currentUser) { |
|
|
function generateFilterButtons(invitees, currentUser) { |
|
|
const filterButtonsContainer = document.querySelector('.filter-buttons'); |
|
|
|
|
|
const filterSidebarBtn = document.getElementById('filterSidebarBtn'); |
|
|
const filterSidebarBtn = document.getElementById('filterSidebarBtn'); |
|
|
const sidebarFilterButtons = document.getElementById('sidebarFilterButtons'); |
|
|
const sidebarFilterButtons = document.getElementById('sidebarFilterButtons'); |
|
|
|
|
|
|
|
|
if (!filterButtonsContainer) return; |
|
|
|
|
|
|
|
|
|
|
|
// 清空现有按钮，只保留"全部"和"我的" |
|
|
|
|
|
filterButtonsContainer.innerHTML = ` |
|
|
|
|
|
<button class="filter-btn active" data-filter="all">全部</button> |
|
|
|
|
|
<button class="filter-btn" data-filter="me">我的</button> |
|
|
|
|
|
`; |
|
|
|
|
|
|
|
|
|
|
|
// 为管理员显示筛选按钮并填充侧边栏 |
|
|
// 为管理员显示筛选按钮并填充侧边栏 |
|
|
if (invitees && invitees.length > 0) { |
|
|
if (invitees && invitees.length > 0) { |
|
|
// 显示筛选按钮 |
|
|
// 显示筛选按钮 |
|
|
if (filterSidebarBtn) { |
|
|
if (filterSidebarBtn) { |
|
|
filterSidebarBtn.style.display = 'block'; |
|
|
filterSidebarBtn.style.display = 'flex'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 填充侧边栏筛选按钮 |
|
|
// 填充侧边栏筛选按钮 |
|
|
@ -376,17 +456,7 @@ |
|
|
// 跳过当前用户自己 |
|
|
// 跳过当前用户自己 |
|
|
if (invitee.inviter && invitee.inviter !== (currentUser.name || currentUser.userName)) { |
|
|
if (invitee.inviter && invitee.inviter !== (currentUser.name || currentUser.userName)) { |
|
|
const button = document.createElement('button'); |
|
|
const button = document.createElement('button'); |
|
|
button.className = 'filter-btn'; |
|
|
button.className = 'sidebar-filter-btn'; |
|
|
button.style.width = '100%'; |
|
|
|
|
|
button.style.textAlign = 'left'; |
|
|
|
|
|
button.style.padding = '8px 12px'; |
|
|
|
|
|
button.style.border = '1px solid #ddd'; |
|
|
|
|
|
button.style.borderRadius = '4px'; |
|
|
|
|
|
button.style.backgroundColor = 'white'; |
|
|
|
|
|
button.style.color = '#666'; |
|
|
|
|
|
button.style.fontSize = '14px'; |
|
|
|
|
|
button.style.cursor = 'pointer'; |
|
|
|
|
|
button.style.transition = 'all 0.3s'; |
|
|
|
|
|
button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`; |
|
|
button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`; |
|
|
button.dataset.inviter = invitee.inviter; |
|
|
button.dataset.inviter = invitee.inviter; |
|
|
button.textContent = invitee.inviter; |
|
|
button.textContent = invitee.inviter; |
|
|
@ -402,15 +472,6 @@ |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 绑定筛选按钮事件 |
|
|
|
|
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
|
|
|
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
if (!this.disabled) { |
|
|
|
|
|
filterQrCodes(this.dataset.filter, this.dataset.inviter); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 打开筛选侧边栏 |
|
|
// 打开筛选侧边栏 |
|
|
@ -440,30 +501,25 @@ |
|
|
// 生成HTML |
|
|
// 生成HTML |
|
|
let html = ''; |
|
|
let html = ''; |
|
|
qrCodes.forEach((qrCode, index) => { |
|
|
qrCodes.forEach((qrCode, index) => { |
|
|
// 生成唯一的section ID |
|
|
// 生成唯一的item ID |
|
|
const sectionId = `section_${index}_${encodeURIComponent(qrCode.sessionId || Math.random().toString(36).substr(2, 9))}`; |
|
|
const itemId = `item_${index}_${encodeURIComponent(qrCode.sessionId || Math.random().toString(36).substr(2, 9))}`; |
|
|
|
|
|
|
|
|
html += ` |
|
|
html += ` |
|
|
<div class="qr-section" style="margin-bottom: 20px;"> |
|
|
<div class="qr-item" onclick="toggleSection('${itemId}')"> |
|
|
<div class="section-header" onclick="toggleSection('${sectionId}')" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<div class="qr-item-info"> |
|
|
<div> |
|
|
<div class="qr-item-name">${qrCode.company || '未知'}</div> |
|
|
<div style="font-size: 12px; color: #666;"> |
|
|
<div class="qr-item-details"> |
|
|
<p style="margin: 2px 0;">主体名称: ${qrCode.company || '未知'}</p> |
|
|
${qrCode.phoneNumber || '未知'} / ${qrCode.createdAt || '未知'} |
|
|
<p style="margin: 2px 0;">电话号码: ${qrCode.phoneNumber || '未知'}</p> |
|
|
|
|
|
<p style="margin: 2px 0;">开具日期: ${qrCode.createdAt || '未知'}</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<span class="toggle-icon" id="toggle_${sectionId}" style="font-size: 18px; color: #28a745;">▼</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div id="${sectionId}" class="qr-grid" style="display: none; padding: 10px; background-color: #fafafa; border-radius: 8px;"> |
|
|
<div class="qr-item-arrow">▼</div> |
|
|
<div class="qr-item"> |
|
|
</div> |
|
|
<img src="${qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`}" alt="邀请二维码"> |
|
|
<div id="${itemId}" class="qr-content" style="display: none;"> |
|
|
<div class="qr-info"> |
|
|
<img src="${qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`}" alt="邀请二维码"> |
|
|
<p class="name">${qrCode.inviter || '未知'}</p> |
|
|
<div class="qr-info"> |
|
|
<p>${qrCode.inviterProjectName || '无职位'}</p> |
|
|
<p class="name">${qrCode.inviter || '未知'}</p> |
|
|
<p>${qrCode.createdAt || ''}</p> |
|
|
<p>${qrCode.inviterProjectName || '无职位'}</p> |
|
|
</div> |
|
|
<p>${qrCode.createdAt || ''}</p> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
`; |
|
|
@ -475,15 +531,16 @@ |
|
|
// 切换展开/收起状态 |
|
|
// 切换展开/收起状态 |
|
|
function toggleSection(sectionId) { |
|
|
function toggleSection(sectionId) { |
|
|
const section = document.getElementById(sectionId); |
|
|
const section = document.getElementById(sectionId); |
|
|
const toggleIcon = document.getElementById(`toggle_${sectionId}`); |
|
|
const qrItem = section ? section.previousElementSibling : null; |
|
|
|
|
|
const arrowIcon = qrItem ? qrItem.querySelector('.qr-item-arrow') : null; |
|
|
|
|
|
|
|
|
if (section && toggleIcon) { |
|
|
if (section && arrowIcon) { |
|
|
if (section.style.display === 'none') { |
|
|
if (section.style.display === 'none') { |
|
|
section.style.display = 'block'; |
|
|
section.style.display = 'block'; |
|
|
toggleIcon.textContent = '▲'; |
|
|
arrowIcon.textContent = '▲'; |
|
|
} else { |
|
|
} else { |
|
|
section.style.display = 'none'; |
|
|
section.style.display = 'none'; |
|
|
toggleIcon.textContent = '▼'; |
|
|
arrowIcon.textContent = '▼'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
Default User
1 month ago