zq
2 months ago
8 changed files with 858 additions and 1 deletions
@ -0,0 +1,284 @@ |
|||||
|
.subCount-page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.subCount-main-content { |
||||
|
margin: 20px; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.subCount-main { |
||||
|
background: #fff; |
||||
|
padding: 0 14px; |
||||
|
} |
||||
|
|
||||
|
.tab-list { |
||||
|
justify-content: space-between; |
||||
|
/* padding-top: 13px; */ |
||||
|
height: 52px; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px solid #DFE2E6; |
||||
|
} |
||||
|
|
||||
|
.addNewBtn { |
||||
|
width: 121px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
/* padding: 7px 12px; */ |
||||
|
height: 32px; |
||||
|
border-radius: 3px; |
||||
|
opacity: 1; |
||||
|
height: 32px; |
||||
|
border: none; |
||||
|
background: #006AFF; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.addNewBtn img { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
table { |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
border-collapse: collapse; |
||||
|
} |
||||
|
|
||||
|
th, |
||||
|
td { |
||||
|
border: 1px solid #ddd; |
||||
|
padding: 8px; |
||||
|
text-align: left; |
||||
|
color: #1E2226; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
tr:hover { |
||||
|
background-color: #F6F7FA; |
||||
|
} |
||||
|
|
||||
|
.action-icon { |
||||
|
display: none; |
||||
|
cursor: pointer; |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
|
||||
|
tr:hover .action-icon { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
/* 表格 */ |
||||
|
#dataTable tr { |
||||
|
/* display: flex; */ |
||||
|
} |
||||
|
|
||||
|
#dataTable td { |
||||
|
/* display: flex; */ |
||||
|
border-color: #EAECF0; |
||||
|
padding: 18px 16px; |
||||
|
line-height: 18px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
#dataTable th { |
||||
|
min-width: 142px; |
||||
|
/* 自动布局 */ |
||||
|
/* display: flex; */ |
||||
|
align-items: center; |
||||
|
padding: 19px 16px; |
||||
|
/* middle/middle_grey_1 */ |
||||
|
background: #F6F7FA; |
||||
|
/* middle/middle_line_2 */ |
||||
|
border-width: 1px 1px 1px 0px; |
||||
|
border-style: solid; |
||||
|
border-color: #EAECF0; |
||||
|
} |
||||
|
|
||||
|
.popover { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
/* border: 1px solid #ccc; */ |
||||
|
padding: 32px; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
||||
|
z-index: 1000; |
||||
|
border-radius: 4px; |
||||
|
background: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.popover::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: -7px; |
||||
|
left: 50%; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
margin-left: -5px; |
||||
|
border-left: 8px solid transparent; |
||||
|
border-right: 8px solid transparent; |
||||
|
border-top: 8px solid #fff; |
||||
|
} |
||||
|
|
||||
|
.popover input { |
||||
|
border-radius: 2px; |
||||
|
background: #FFFFFF; |
||||
|
border: 1px solid #DFE2E6; |
||||
|
padding: 10px 12px; |
||||
|
width: 252px; |
||||
|
box-sizing: border-box; |
||||
|
line-height: 18px; |
||||
|
margin-left: 22px; |
||||
|
margin-bottom: 32px; |
||||
|
} |
||||
|
|
||||
|
.switch { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: 40px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.switch input { |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
.slider { |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: #BABDC2; |
||||
|
transition: 0.4s; |
||||
|
border-radius: 34px; |
||||
|
} |
||||
|
|
||||
|
.slider:before { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
height: 16px; |
||||
|
width: 16px; |
||||
|
left: 3px; |
||||
|
bottom: 2px; |
||||
|
background-color: white; |
||||
|
transition: 0.4s; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
input:checked+.slider { |
||||
|
background-color: #00C261; |
||||
|
} |
||||
|
|
||||
|
input:checked+.slider:before { |
||||
|
transform: translateX(19px); |
||||
|
} |
||||
|
|
||||
|
#confirmBtn, |
||||
|
#cancelBtn { |
||||
|
width: 96px; |
||||
|
height: 38px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
/* padding: 10px 33px; */ |
||||
|
line-height: 18px; |
||||
|
border-radius: 2px; |
||||
|
background: #006AFF; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #fff; |
||||
|
margin-left: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
#cancelBtn { |
||||
|
color: #23242B; |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
/* middle/middle_line_1 */ |
||||
|
border: 1px solid #DFE2E6; |
||||
|
} |
||||
|
|
||||
|
/* 弹框样式 */ |
||||
|
.addChildNumWrap { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: calc(544px - 156px); |
||||
|
padding: 32px 78px; |
||||
|
max-height: 650px; |
||||
|
overflow-y: auto; |
||||
|
background: #fff; |
||||
|
border-radius: 6px; |
||||
|
opacity: 1; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.addChildNumWrap h3 { |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
margin: 0; |
||||
|
font-weight: bold; |
||||
|
line-height: 26px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1F2026; |
||||
|
} |
||||
|
.temImg{ |
||||
|
width: 220px; |
||||
|
margin: 24px auto 12px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.addChildNumWrap p { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.btnGroups { |
||||
|
margin-top: 32px; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.name-top { |
||||
|
width: 100%; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.name-input { |
||||
|
box-sizing: border-box; |
||||
|
margin: 12px 0 0px; |
||||
|
width: 100%; |
||||
|
padding: 10px 12px; |
||||
|
border-radius: 4px; |
||||
|
background: #FFFFFF; |
||||
|
/* middle/middle_line_1 */ |
||||
|
border: 1px solid #DFE2E6; |
||||
|
} |
||||
|
.code-filter{ |
||||
|
width: 220px; |
||||
|
height: 220px; |
||||
|
opacity: 1; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
backdrop-filter: blur(2px); |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 82px; |
||||
|
left: 162px; |
||||
|
} |
||||
|
.code-filter img{ |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,346 @@ |
|||||
|
$(document).ready(function () { |
||||
|
var status = 0; |
||||
|
var currentPage = 1; // 定义变量，用于存储当前的页码
|
||||
|
var pageSize = 1; // 定义变量，用于存储当前页条数
|
||||
|
var totalPages = 9; |
||||
|
var pageData = [ |
||||
|
|
||||
|
{ |
||||
|
alias:'哈哈1', |
||||
|
name:'qq哎111', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:1 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈2', |
||||
|
name:'qq哎222', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:1 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈3', |
||||
|
name:'qq哎333', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:0 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈4', |
||||
|
name:'qq哎', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:0 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈5', |
||||
|
name:'qq哎', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:1 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈6', |
||||
|
name:'qq哎', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:0 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈7', |
||||
|
name:'qq哎', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:1 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈8', |
||||
|
name:'qq哎', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:0 |
||||
|
}, |
||||
|
{ |
||||
|
alias:'哈哈9', |
||||
|
name:'qq哎999', |
||||
|
date:'2025-03-04 05:59:59', |
||||
|
status:1 |
||||
|
}, |
||||
|
] |
||||
|
// 渲染分页按钮
|
||||
|
function renderPagination() { |
||||
|
const pageNumbers = $('#page-numbers'); |
||||
|
pageNumbers.empty(); |
||||
|
|
||||
|
// 总页数小于等于 7 时，显示所有页码
|
||||
|
if (totalPages <= 7) { |
||||
|
for (let i = 1; i <= totalPages; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
} else { |
||||
|
// 总页数大于 7 时，显示部分页码并用省略号代替
|
||||
|
if (currentPage <= 4) { |
||||
|
// 前 5 页 + 省略号 + 最后一页
|
||||
|
for (let i = 1; i <= 5; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
pageNumbers.append(`<span>${totalPages}</span>`); |
||||
|
} else if (currentPage >= totalPages - 3) { |
||||
|
// 第一页 + 省略号 + 最后 5 页
|
||||
|
pageNumbers.append('<span>1</span>'); |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
for (let i = totalPages - 4; i <= totalPages; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
} else { |
||||
|
// 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
|
||||
|
pageNumbers.append('<span>1</span>'); |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
for (let i = currentPage - 2; i <= currentPage + 2; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
pageNumbers.append(`<span>${totalPages}</span>`); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 绑定页码点击事件
|
||||
|
pageNumbers.find('span').click(function () { |
||||
|
const page = parseInt($(this).text()); |
||||
|
if (!isNaN(page)) { |
||||
|
currentPage = page; |
||||
|
getRenderData(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if(totalPages>0){ |
||||
|
$(".pagination").removeClass('hide'); |
||||
|
}else{ |
||||
|
$(".pagination").addClass('hide'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 初始化渲染
|
||||
|
getRenderData(); |
||||
|
|
||||
|
function getRenderData(){ |
||||
|
// $.ajax({
|
||||
|
// type: "post",
|
||||
|
// dataType: 'json',
|
||||
|
// url: 'http://zhishiku.yizherenxin.cn/weibo/ajax_weibo_list',
|
||||
|
// data: {
|
||||
|
// status,
|
||||
|
// currentPage,
|
||||
|
// pageSize
|
||||
|
// },
|
||||
|
// success: function (res) {
|
||||
|
// if(!res.status){
|
||||
|
// alert(`请求失败`);
|
||||
|
// }
|
||||
|
|
||||
|
// renderData(res.data)
|
||||
|
// }
|
||||
|
// })
|
||||
|
var data = JSON.parse(JSON.stringify(pageData)) |
||||
|
renderData(data.slice(currentPage-1,currentPage+1 )) |
||||
|
} |
||||
|
function renderData(pageData){ |
||||
|
console.log(pageData,'====data'); |
||||
|
$('#tbody-wrap').empty() |
||||
|
renderList() |
||||
|
|
||||
|
var html = ''; |
||||
|
pageData.forEach((item,index)=>{ |
||||
|
html += ` <tr data-id="${index}">
|
||||
|
<td>${item.alias}</td> |
||||
|
<td>${item.name} <img class="action-icon" src="../../images/edit.svg" alt=""></td> |
||||
|
<td> |
||||
|
${item.date} |
||||
|
</td> |
||||
|
<td> |
||||
|
<label class="switch"> |
||||
|
<input type="checkbox" ${item.status >0 ? 'checked' : ''}> |
||||
|
<span class="slider"></span> |
||||
|
</label> |
||||
|
</td> |
||||
|
</tr>` |
||||
|
$('#tbody-wrap').html(html) |
||||
|
}) |
||||
|
|
||||
|
renderPagination() |
||||
|
|
||||
|
} |
||||
|
// 当文档加载完成后执行以下函数
|
||||
|
function renderList() { |
||||
|
function createPagination(currentPage, totalPages) { |
||||
|
var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码
|
||||
|
|
||||
|
// 如果当前页不是第一页，则生成一个“上一页”按钮
|
||||
|
// if (currentPage > 1) {
|
||||
|
paginationHtml += "<li><</li>"; |
||||
|
// }
|
||||
|
|
||||
|
// 始终显示第一页的页码
|
||||
|
paginationHtml += generatePageNumberHtml(1, currentPage); |
||||
|
|
||||
|
// 如果总页数大于1页，则继续生成分页条的其余部分
|
||||
|
if (totalPages > 1) { |
||||
|
// 如果当前页码大于3，则在第一页和当前页之间添加省略号
|
||||
|
if (currentPage > 3) { |
||||
|
paginationHtml += "<li>...</li>"; |
||||
|
} |
||||
|
// 遍历当前页附近的页码，并生成对应的分页按钮
|
||||
|
for ( |
||||
|
let i = Math.max(currentPage - 2, 2); i <= Math.min(currentPage + 2, totalPages - 1); i++ |
||||
|
) { |
||||
|
paginationHtml += generatePageNumberHtml(i, currentPage); |
||||
|
} |
||||
|
// 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号
|
||||
|
if (currentPage < totalPages - 2) { |
||||
|
paginationHtml += "<li>...</li>"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 始终显示最后一页的页码
|
||||
|
paginationHtml += generatePageNumberHtml(totalPages, currentPage); |
||||
|
|
||||
|
// 如果当前页不是最后一页，则生成一个“下一页”按钮
|
||||
|
if (currentPage < totalPages) { |
||||
|
paginationHtml += "<li>></li>"; |
||||
|
} |
||||
|
|
||||
|
// 返回生成的分页条HTML字符串
|
||||
|
return paginationHtml; |
||||
|
} |
||||
|
// 创建分页条的函数
|
||||
|
|
||||
|
// 生成单个页码按钮的HTML的函数
|
||||
|
function generatePageNumberHtml(pageNumber, currentPage) { |
||||
|
// 返回一个格式化后的HTML字符串，包含激活状态的判断
|
||||
|
return ( |
||||
|
'<li class="' + |
||||
|
(pageNumber === currentPage ? "pagActive" : "") + |
||||
|
'">' + |
||||
|
pageNumber + |
||||
|
"</li>" |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 选择页码的函数
|
||||
|
function selectPage(pageNumber) { |
||||
|
// 更新当前页码的变量，并重新生成分页条
|
||||
|
currentPage = pageNumber; |
||||
|
$("#pagination").html(createPagination(currentPage, totalPages)); |
||||
|
} |
||||
|
|
||||
|
// 为分页条上的每个按钮绑定点击事件
|
||||
|
$("#pagination").on("click", "li", function (event) { |
||||
|
let pageNumber = $(this).text(); // 获取点击的页码或按钮文本
|
||||
|
|
||||
|
// 如果点击的是省略号，则不执行任何操作
|
||||
|
if (pageNumber === "...") { |
||||
|
event.preventDefault(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 根据点击的按钮，调用selectPage函数更新当前页码
|
||||
|
if (pageNumber === "<") { |
||||
|
if (currentPage < 2) { |
||||
|
return |
||||
|
} |
||||
|
selectPage(currentPage - 1); |
||||
|
} else if (pageNumber === ">") { |
||||
|
// if(currentPage <2){
|
||||
|
// return
|
||||
|
// }
|
||||
|
selectPage(currentPage + 1); |
||||
|
} else { |
||||
|
selectPage(parseInt(pageNumber)); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化分页条，总页数为20，默认显示第一页
|
||||
|
$("#pagination").html(createPagination(currentPage, totalPages)); |
||||
|
} |
||||
|
// 上一页
|
||||
|
$('#prev-page').click(function () { |
||||
|
if (currentPage > 1) { |
||||
|
currentPage--; |
||||
|
getRenderData(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 下一页
|
||||
|
$('#next-page').click(function () { |
||||
|
if (currentPage < totalPages) { |
||||
|
currentPage++; |
||||
|
getRenderData(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 跳转到指定页
|
||||
|
$('#go-to-page').click(function () { |
||||
|
const page = parseInt($('#jump-to-page').val()); |
||||
|
if (page >= 1 && page <= totalPages) { |
||||
|
currentPage = page; |
||||
|
getRenderData(); |
||||
|
} else { |
||||
|
alert(`请输入有效的页码（1-${totalPages}）`); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
let currentRow = null; |
||||
|
|
||||
|
// 显示操作图标
|
||||
|
$('tr').hover( |
||||
|
function () { |
||||
|
$(this).find('.action-icon').show(); |
||||
|
}, |
||||
|
function () { |
||||
|
$(this).find('.action-icon').hide(); |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
// 点击编辑图标
|
||||
|
$('#tbody-wrap').on('click','.action-icon',function () { |
||||
|
const row = $(this).closest('tr'); |
||||
|
currentRow = row; |
||||
|
const cell = row.find('td').eq(1); // 编辑第2列数据
|
||||
|
const currentValue = cell.text(); |
||||
|
console.log($('#editPopover').width(),'-----offset'); |
||||
|
$('#editInput').val(currentValue); |
||||
|
$('#editPopover').css({ |
||||
|
top: row.offset().top - $('#editPopover').height() - row.height(), |
||||
|
left: cell.offset().left - Math.ceil($('#editPopover').width() /2) |
||||
|
}).show(); |
||||
|
}); |
||||
|
|
||||
|
// 确认修改
|
||||
|
$('#confirmBtn').click(function () { |
||||
|
const newValue = $('#editInput').val(); |
||||
|
if (newValue && currentRow) { |
||||
|
currentRow.find('td').eq(0).text(newValue); |
||||
|
$('#editPopover').hide(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 取消修改
|
||||
|
$('#cancelBtn').click(function () { |
||||
|
$('#editPopover').hide(); |
||||
|
}); |
||||
|
|
||||
|
// Switch 开关切换
|
||||
|
$('.switch input').change(function () { |
||||
|
const row = $(this).closest('tr'); |
||||
|
const isChecked = $(this).is(':checked'); |
||||
|
const status = isChecked ? 'Active' : 'Inactive'; |
||||
|
row.find('td').eq(2).text(status); // 更新状态列
|
||||
|
}); |
||||
|
|
||||
|
$('.addNewBtn').click(function () { |
||||
|
$('.addChildNumWrap, .modal-overlay').fadeIn(); |
||||
|
// setTimeout(()=>{
|
||||
|
// $('.addChildNumWrap, .modal-overlay').fadeOut();
|
||||
|
// },3000)
|
||||
|
}); |
||||
|
$('.cancelBtn').click(function(){ |
||||
|
$('.addChildNumWrap, .modal-overlay').fadeOut(); |
||||
|
}) |
||||
|
$('.confirmBtn').click(function(){ |
||||
|
$('.addChildNumWrap, .modal-overlay').fadeOut(); |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,113 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>知识库</title> |
||||
|
<link rel="stylesheet" href="../../css/common.css?v={$smarty.const.CSS_JS_VERSION}"> |
||||
|
<link rel="stylesheet" href="../../css/subCount.css?v={$smarty.const.CSS_JS_VERSION}"> |
||||
|
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
||||
|
<script src="../../js/jquery-3.6.0.min.js"></script> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="subCount-page"> |
||||
|
{include file="include/header.html"} |
||||
|
<div class="subCount-main-content"> |
||||
|
<div class="subCount-main"> |
||||
|
<div class="tab-list flex"> |
||||
|
<b>子账号管理</b> |
||||
|
<button class="addNewBtn"> |
||||
|
<img src="../../images/add.svg" alt="">新增自子账号 |
||||
|
</button> |
||||
|
</div> |
||||
|
<table id="dataTable"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>账号昵称</th> |
||||
|
<th>姓名</th> |
||||
|
<th>添加时间</th> |
||||
|
<th>启用状态</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody id="tbody-wrap"> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
|
||||
|
<div id="editPopover" class="popover"> |
||||
|
<div> |
||||
|
<span>备注</span> |
||||
|
<input type="text" id="editInput" placeholder="Enter new value"> |
||||
|
</div> |
||||
|
<div class="flex" style="justify-content: flex-end;"> |
||||
|
<button id="cancelBtn">取消</button> |
||||
|
<button id="confirmBtn">确定</button> |
||||
|
</div> |
||||
|
<!-- <img src="../../images/appendIcon.png" alt=""> --> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- 分页控件 --> |
||||
|
<div class="pagination hide"> |
||||
|
<img id="prev-page" src="../../images/prev.svg" alt=""> |
||||
|
<ul id="page-numbers"></ul> |
||||
|
<img id="next-page" src="../../images/next.svg" alt=""> |
||||
|
<div class="input-page"> |
||||
|
<span>前往</span> |
||||
|
<input type="number" id="jump-to-page" min="1" placeholder="页码"> |
||||
|
<span>页</span> |
||||
|
</div> |
||||
|
<button id="go-to-page">跳转</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal-overlay"></div> |
||||
|
|
||||
|
<div class="addChildNumWrap"> |
||||
|
<h3>新增子账号</h3> |
||||
|
<div id="get_url" class="hide">{$smarty.get.url}</div> |
||||
|
<!-- <div id="login_container" class="qrcode"> |
||||
|
{literal} |
||||
|
<script> |
||||
|
var obj = new WxLogin({ |
||||
|
id: "login_container", |
||||
|
appid: {/literal}"{$smarty.const.WEIXIN_OPEN_APPID}"{literal}, |
||||
|
scope: "snsapi_login", |
||||
|
redirect_uri: encodeURIComponent("http://www.yizherenxin.cn/callback/wxlogin"), |
||||
|
state: "knowledge_login"+'-'+encodeURIComponent($('#get_url').html()), |
||||
|
style: "black", |
||||
|
href:'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4OHB4O2JvcmRlcjpub25lO21hcmdpbi10b3A6MHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAxODhweDtkaXNwbGF5Om5vbmU7fQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9IAo=' |
||||
|
}); |
||||
|
</script> |
||||
|
{/literal} |
||||
|
</div> --> |
||||
|
<img class="temImg" src="../../images/userTem.png" alt=""> |
||||
|
<div class="code-filter column hide"> |
||||
|
<img src="../../images/step_success.png" alt=""> |
||||
|
<span>{$_user_info.nickname}，扫码成功</span> |
||||
|
</div> |
||||
|
<p class="flex" style="text-align: center;"> |
||||
|
<img src="../../images/weixin.svg" alt=""> |
||||
|
微信扫码，绑定子账号 |
||||
|
</p> |
||||
|
<div class="name column hide"> |
||||
|
<div class="name-top"> |
||||
|
<img src="../../images/user.svg" alt=""> |
||||
|
姓名 |
||||
|
</div> |
||||
|
<input class="name-input" type="text" placeholder="可备注真实姓名"> |
||||
|
</div> |
||||
|
<div class="btnGroups flex"> |
||||
|
<button class="button button-normal cancelBtn">取消</button> |
||||
|
<button class="button button-primary confirmBtn hide">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- {include file="include/footer.html"} --> |
||||
|
</div> |
||||
|
</body> |
||||
|
<script src="../../js/subCount.js?v={$smarty.const.CSS_JS_VERSION}"></script> |
||||
|
|
||||
|
</html> |
||||
Loading…
Reference in new issue