diff --git a/view/css/common.css b/view/css/common.css index c8db343..8950fe5 100644 --- a/view/css/common.css +++ b/view/css/common.css @@ -61,4 +61,116 @@ p{ .leftSideFooterNew p a{ color: #9E9E9E; text-decoration: none; -} \ No newline at end of file +} + + +/* 分页容器样式 */ +.pagination { + margin-top: 20px; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.pagination input { + width: 50px; + padding: 5px; + text-align: center; +} + +.pagActive { + background: #006AFF; + color: #fff; + border-radius: 4px; +} +#page-numbers { + display: flex; + flex-wrap: wrap; + list-style: none; + color: #8a8a8a; + padding: 0; + user-select: none; +} + +#page-numbers span { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + cursor: pointer; +} + +#page-numbers span { + margin-left: 10px; +} + +#page-numbers span:hover { + color: #006AFF; +} + +#page-numbers .pagActive:hover { + color: #fff; +} + +#next-page { + margin-left: 10px; + margin-right: 16px; +} + +.input-page span { + display: inline-block; +} +#jump-to-page{ + border:1px solid #DCDFE6; +} +#go-to-page{ + padding: 0; + width: 76px; + height: 32px; + margin-left: 16px; +} + +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; +} + + +.button { + display: flex; + justify-content: center; + align-items: center; + /* padding: 7px 22px; */ + width: 76px; + height: 32px; + border-radius: 3px; + background: #FFFFFF; + box-sizing: border-box; + letter-spacing: 0.08em; + border: 1px solid #DFE2E6; + margin-left: 20px; + color: #23242B; + cursor: pointer; +} +button:hover { + opacity: .8; +} + +.button-primary { + background: #006AFF; + color: #FFFFFF; + border: none; +} + +.button-danger { + background: #cc0303; + color: #FFFFFF; + border: none; +} diff --git a/view/css/subCount.css b/view/css/subCount.css new file mode 100644 index 0000000..86e463f --- /dev/null +++ b/view/css/subCount.css @@ -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; +} \ No newline at end of file diff --git a/view/images/step_success.png b/view/images/step_success.png new file mode 100644 index 0000000..8caf0d9 Binary files /dev/null and b/view/images/step_success.png differ diff --git a/view/images/user.svg b/view/images/user.svg new file mode 100644 index 0000000..aa11bcb --- /dev/null +++ b/view/images/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/view/images/userTem.png b/view/images/userTem.png new file mode 100644 index 0000000..dcc5eec Binary files /dev/null and b/view/images/userTem.png differ diff --git a/view/images/weixin.svg b/view/images/weixin.svg new file mode 100644 index 0000000..3c7f055 --- /dev/null +++ b/view/images/weixin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/view/js/subCount.js b/view/js/subCount.js new file mode 100644 index 0000000..78aff5c --- /dev/null +++ b/view/js/subCount.js @@ -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(`${i}`); + } + } else { + // 总页数大于 7 时，显示部分页码并用省略号代替 + if (currentPage <= 4) { + // 前 5 页 + 省略号 + 最后一页 + for (let i = 1; i <= 5; i++) { + pageNumbers.append(`${i}`); + } + pageNumbers.append('...'); + pageNumbers.append(`${totalPages}`); + } else if (currentPage >= totalPages - 3) { + // 第一页 + 省略号 + 最后 5 页 + pageNumbers.append('1'); + pageNumbers.append('...'); + for (let i = totalPages - 4; i <= totalPages; i++) { + pageNumbers.append(`${i}`); + } + } else { + // 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页 + pageNumbers.append('1'); + pageNumbers.append('...'); + for (let i = currentPage - 2; i <= currentPage + 2; i++) { + pageNumbers.append(`${i}`); + } + pageNumbers.append('...'); + pageNumbers.append(`${totalPages}`); + } + } + + // 绑定页码点击事件 + 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 += ` + ${item.alias} + ${item.name} + + ${item.date} + + + + + ` + $('#tbody-wrap').html(html) + }) + + renderPagination() + + } +// 当文档加载完成后执行以下函数 +function renderList() { + function createPagination(currentPage, totalPages) { + var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码 + + // 如果当前页不是第一页，则生成一个“上一页”按钮 + // if (currentPage > 1) { + paginationHtml += "
  • <
    • "; + // } + + // 始终显示第一页的页码 + paginationHtml += generatePageNumberHtml(1, currentPage); + + // 如果总页数大于1页，则继续生成分页条的其余部分 + if (totalPages > 1) { + // 如果当前页码大于3，则在第一页和当前页之间添加省略号 + if (currentPage > 3) { + paginationHtml += "
  • ...
    • "; + } + // 遍历当前页附近的页码，并生成对应的分页按钮 + 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 += "
  • ...
    • "; + } + } + + // 始终显示最后一页的页码 + paginationHtml += generatePageNumberHtml(totalPages, currentPage); + + // 如果当前页不是最后一页，则生成一个“下一页”按钮 + if (currentPage < totalPages) { + paginationHtml += "
  • >
    • "; + } + + // 返回生成的分页条HTML字符串 + return paginationHtml; + } + // 创建分页条的函数 + + // 生成单个页码按钮的HTML的函数 + function generatePageNumberHtml(pageNumber, currentPage) { + // 返回一个格式化后的HTML字符串，包含激活状态的判断 + return ( + '
  • ' + + pageNumber + + "
    • " + ); + } + + // 选择页码的函数 + 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(); + }) +}) \ No newline at end of file diff --git a/view/templates/index/subCount.html b/view/templates/index/subCount.html new file mode 100644 index 0000000..5bc508c --- /dev/null +++ b/view/templates/index/subCount.html @@ -0,0 +1,113 @@ + + + + + + + 知识库 + + + + + + + + + +
    + {include file="include/header.html"} +
    +
    +
    + 子账号管理 + +
    + + + + + + + + + + + +
    账号昵称姓名添加时间启用状态
    + +
    +
    + 备注 + +
    +
    + + +
    + +
    + + + + +
    +
    +
    + +
    +

    新增子账号

    +
    {$smarty.get.url}
    + + +
    + + {$_user_info.nickname}，扫码成功 +
    +

    + + 微信扫码，绑定子账号 +

    +
    +
    + + 姓名 +
    + +
    +
    + + +
    +
    + +
    + + + + \ No newline at end of file