|
@@ -1,4 +1,15 @@
|
|
|
+import "../css/eventPlanning.css"
|
|
|
+
|
|
|
window.onload = function () {
|
|
|
+ let value = ''
|
|
|
+ let totalCount = '' // 总数据条数
|
|
|
+ let pageNo = 1 // 页码
|
|
|
+ let pageSize = 10 // 一页多少条数据
|
|
|
+ let selected = 1 // 当前选中按钮的序号
|
|
|
+ let pagenum = '' // 有多少页数据
|
|
|
+ let btnstart = 3 // 可移动按钮组开始序号
|
|
|
+ let btnend = btnstart + 6 // 可移动按钮组结束序号
|
|
|
+ let buer = null
|
|
|
$.ajax({
|
|
|
method: "get",
|
|
|
dataType: "json",
|
|
@@ -12,219 +23,311 @@ window.onload = function () {
|
|
|
if (data.error && data.error.length) {
|
|
|
alert("数据加载失败,请刷新页面");
|
|
|
} else {
|
|
|
+ totalCount = data.data.totalCount
|
|
|
+ pagenum = Math.ceil(totalCount / pageSize)
|
|
|
+
|
|
|
+ // 渲染新闻列表
|
|
|
$.each(data.data.list, function (index, item) {
|
|
|
- console.log(index, item);
|
|
|
// 新闻列表
|
|
|
- let part = `<li>
|
|
|
- <a href="javascript:;">
|
|
|
+ let part = `<li id="${item.id}">
|
|
|
<div class="newslist_img"><img src="${globalConfig.avatarUploadHost + item.pictureUrl}" alt=""></div>
|
|
|
<div class="newslist_content">
|
|
|
<h6 class="title">${item.title}</h6>
|
|
|
<div class="date">${item.createTimes}</div>
|
|
|
<p class="content">${item.content}</p>
|
|
|
</div>
|
|
|
- </a>
|
|
|
</li>`
|
|
|
- $(".app .newslist").prepend(part)
|
|
|
- $(".app .newslist li .newslist_img").css({
|
|
|
- "float": "left",
|
|
|
- "width": "345px",
|
|
|
- "height": "200px"
|
|
|
+ $(".app .newslist").append(part)
|
|
|
+ })
|
|
|
+
|
|
|
+ let paging = ` <div class="page_ctrl">
|
|
|
+ <span class="page_total">共 ${pagenum} 页</span>
|
|
|
+ <button class="prev_page"><</button>
|
|
|
+ <div class="btns"></div>
|
|
|
+ <button class="next_page">></button>
|
|
|
+ <span class="page_total">到第</span>
|
|
|
+ <input class="input_page_num" type="text">
|
|
|
+ <span class="page_total">页</span>
|
|
|
+ <button class="determine">确定</button>
|
|
|
+ </div>`
|
|
|
+ $(".app .page_1").html(paging) // 插入html片段
|
|
|
+ pagebtns() // 生成可移动按钮
|
|
|
+ select() // 给按钮添加点击事件
|
|
|
+ $(".determine").click(function () {
|
|
|
+ if ($(".input_page_num").val() < 1 || $(".input_page_num").val() > pagenum) return
|
|
|
+ selected = $(".input_page_num").val()
|
|
|
+ $(".input_page_num").val("")
|
|
|
+ jump()
|
|
|
+ })
|
|
|
+ // 点击左边按钮
|
|
|
+ $(".prev_page").click(function () {
|
|
|
+ if (selected == 1) return
|
|
|
+ selected--
|
|
|
+ if (selected > 4 && pagenum > 9 && selected < pagenum - 4) {
|
|
|
+ if ($(".more").length < 1) {
|
|
|
+ $(".btns").after('<span class="more">...</span>')
|
|
|
+ }
|
|
|
+ $(".btn").remove()
|
|
|
+ if (buer) {
|
|
|
+ btnstart--
|
|
|
+ btnend--
|
|
|
+ buer = false
|
|
|
+ }
|
|
|
+ for (let i = btnstart; i <= btnend; i++) {
|
|
|
+ let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
|
|
|
+ $(".btns").append(pagebtn)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (selected > 5 && selected < pagenum - 3) {
|
|
|
+ --btnstart
|
|
|
+ --btnend
|
|
|
+ }
|
|
|
+ if (selected == 4) {
|
|
|
+ btnstart = 3
|
|
|
+ btnend = btnstart + 6
|
|
|
+ }
|
|
|
+ if (selected == 5) {
|
|
|
+ $(".beforemore").remove()
|
|
|
+ }
|
|
|
+ select()
|
|
|
+ request()
|
|
|
+ bidden()
|
|
|
+ $(".pagebtn").css({
|
|
|
+ "background": "#fff",
|
|
|
+ "color": "#999"
|
|
|
})
|
|
|
- $(".app .newslist li .newslist_img img").css({
|
|
|
- "width": "345px",
|
|
|
- "height": "200px"
|
|
|
+ $(`.pagebtn[index="${selected}"]`).css({
|
|
|
+ "background": "#1296DB",
|
|
|
+ "color": "#fff"
|
|
|
})
|
|
|
- $(".app .newslist li .newslist_content").css({
|
|
|
- "float": "left",
|
|
|
- "width": "735px",
|
|
|
- "margin-left": "70px",
|
|
|
- "height": "200px"
|
|
|
+ })
|
|
|
+ // 点击右边按钮
|
|
|
+ $(".next_page").click(function () {
|
|
|
+ if (selected == pagenum) return
|
|
|
+ selected++
|
|
|
+ if (selected > 5 && pagenum > 9 && selected < pagenum - 3) {
|
|
|
+ if ($(".beforemore").length < 1) {
|
|
|
+ $(".btns").before('<span class="beforemore">...</span>')
|
|
|
+ }
|
|
|
+ $(".btn").remove()
|
|
|
+ if (buer) {
|
|
|
+ console.log(123);
|
|
|
+ btnstart++
|
|
|
+ btnend++
|
|
|
+ buer = false
|
|
|
+ }
|
|
|
+ for (let i = btnstart; i <= btnend; i++) {
|
|
|
+ let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
|
|
|
+ $(".btns").append(pagebtn)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (selected > 5 && selected < pagenum - 4) {
|
|
|
+ btnstart++
|
|
|
+ btnend++
|
|
|
+ }
|
|
|
+ if (selected == pagenum - 4) {
|
|
|
+ $(".more").remove()
|
|
|
+ }
|
|
|
+ select()
|
|
|
+ request()
|
|
|
+ bidden()
|
|
|
+ $(".pagebtn").css({
|
|
|
+ "background": "#fff",
|
|
|
+ "color": "#999"
|
|
|
+ })
|
|
|
+ $(`.pagebtn[index="${selected}"]`).css({
|
|
|
+ "background": "#1296DB",
|
|
|
+ "color": "#fff"
|
|
|
})
|
|
|
- $(".app .newslist li .newslist_content .title").css({
|
|
|
- "color": "#333",
|
|
|
- "font-size": "24px"
|
|
|
+ })
|
|
|
+ // 生成按钮组
|
|
|
+ function pagebtns() {
|
|
|
+ if (pagenum <= 9) {
|
|
|
+ $(".prev_page").after(`<button class="pagebtn" index="1">1</button>`)
|
|
|
+ pagebtn(pagenum)
|
|
|
+ } else {
|
|
|
+ $(".prev_page").after(`<button class="pagebtn" index="1">1</button>`)
|
|
|
+ pagebtn(8)
|
|
|
+ $(".next_page:last").before(`<span class="more">...<span>`)
|
|
|
+ $(".next_page").before(`<button class="pagebtn" index="${pagenum}">${pagenum}</button>`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 生成按钮组
|
|
|
+ function pagebtn(pagenum) {
|
|
|
+ for (let i = 2; i <= pagenum; i++) {
|
|
|
+ let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
|
|
|
+ $(".btns").append(pagebtn)
|
|
|
+ $(".pagebtn:first").css({
|
|
|
+ "background": "#1296DB",
|
|
|
+ "color": "white"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 点击按钮组
|
|
|
+ function select() {
|
|
|
+ $(".pagebtn").click(function () {
|
|
|
+ selected = $(this).attr("index")
|
|
|
+ console.log("woanle");
|
|
|
+ jump()
|
|
|
+ $(".pagebtn").css({
|
|
|
+ "background": "#fff",
|
|
|
+ "color": "#999"
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ "background": "#1296DB",
|
|
|
+ "color": "white"
|
|
|
+ })
|
|
|
})
|
|
|
- $(".app .newslist li .newslist_content .date").css({
|
|
|
- "color": "#666",
|
|
|
- "font-size": "17px",
|
|
|
- "margin": "12px 0"
|
|
|
+ }
|
|
|
+
|
|
|
+ function jump() {
|
|
|
+ if (selected > 5 && pagenum > 9 && selected < pagenum - 4) {
|
|
|
+ if ($(".more").length < 1) {
|
|
|
+ $(".btns").after('<span class="more">...</span>')
|
|
|
+ }
|
|
|
+ if ($(".beforemore").length < 1) {
|
|
|
+ $(".btns").before('<span class="beforemore">...</span>')
|
|
|
+ }
|
|
|
+ $(".btn").remove()
|
|
|
+ for (let i = selected - 3; i <= Number(selected) + 3; i++) {
|
|
|
+ let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
|
|
|
+ $(".btns").append(pagebtn)
|
|
|
+ }
|
|
|
+ btnstart = Number(selected) - 3
|
|
|
+ btnend = Number(selected) + 3
|
|
|
+ buer = true
|
|
|
+ select()
|
|
|
+ } else if (selected < 6) {
|
|
|
+ $(".beforemore").remove()
|
|
|
+ btnstart = 2
|
|
|
+ btnend = btnstart + 6
|
|
|
+ $(".btn").remove()
|
|
|
+ for (let i = btnstart; i <= btnend; i++) {
|
|
|
+ let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
|
|
|
+ $(".btns").append(pagebtn)
|
|
|
+ }
|
|
|
+ select()
|
|
|
+ } else if (selected > pagenum - 5) {
|
|
|
+ $(".more").remove()
|
|
|
+ btnend = pagenum - 1
|
|
|
+ btnstart = btnend - 6
|
|
|
+ $(".btn").remove()
|
|
|
+ for (let i = btnstart; i <= btnend; i++) {
|
|
|
+ let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
|
|
|
+ $(".btns").append(pagebtn)
|
|
|
+ }
|
|
|
+ select()
|
|
|
+ }
|
|
|
+ console.log(btnend, btnstart);
|
|
|
+ request()
|
|
|
+ select()
|
|
|
+ bidden()
|
|
|
+ $(".pagebtn").css({
|
|
|
+ "background": "#fff",
|
|
|
+ "color": "#999"
|
|
|
})
|
|
|
- $(".app .newslist li .newslist_content .content").css({
|
|
|
- "color": "#666",
|
|
|
- "display": "-webkit-box",
|
|
|
- "-webkit-box-orient": "vertical",
|
|
|
- "-webkit-line-clamp": "6",
|
|
|
- "overflow": "hidden"
|
|
|
+ $(`.pagebtn[index="${selected}"]`).css({
|
|
|
+ "background": "#1296DB",
|
|
|
+ "color": "#fff"
|
|
|
})
|
|
|
- $(".app .newslist li").css({
|
|
|
- "width": "1250px",
|
|
|
- "height": "272px",
|
|
|
- "padding": "36px 50px",
|
|
|
- "transition": "all .36s ease",
|
|
|
- "position": "relative",
|
|
|
- "top": "0",
|
|
|
- "left": "0"
|
|
|
+ }
|
|
|
+
|
|
|
+ function request() {
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ url: "/open/getEventPlanningList",
|
|
|
+ data: {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNo: selected
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ $(".newslist").empty()
|
|
|
+ // 渲染新闻列表
|
|
|
+ $.each(data.data.list, function (index, item) {
|
|
|
+ // 新闻列表
|
|
|
+ let part = `<li id="${item.id}">
|
|
|
+ <div class="newslist_img"><img src="${globalConfig.avatarUploadHost + item.pictureUrl}" alt=""></div>
|
|
|
+ <div class="newslist_content">
|
|
|
+ <h6 class="title">${item.title}</h6>
|
|
|
+ <div class="date">${item.createTimes}</div>
|
|
|
+ <p class="content">${item.content}</p>
|
|
|
+ </div>
|
|
|
+ </li>`
|
|
|
+ $(".app .newslist").append(part)
|
|
|
+ $(`.pagebtn[index="${selected}"]`).css({
|
|
|
+ "background": "#1296DB",
|
|
|
+ "color": "#fff"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ $(".newslist li").click(function () {
|
|
|
+ let id = $(this).attr("id")
|
|
|
+ window.location.pathname = `/eventPlanning/${id}`
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
+ }
|
|
|
+
|
|
|
+ $(".newslist li").click(function () {
|
|
|
+ let id = $(this).attr("id")
|
|
|
+ window.location.pathname = `/eventPlanning/${id}`
|
|
|
})
|
|
|
|
|
|
- // 页码
|
|
|
- let page = `<div class="page_ctrl">
|
|
|
- <span class="page_total">共 ${Math.ceil(data.data.totalCount/10)} 页</span>
|
|
|
- <button class="prev_page"><</button>
|
|
|
- <button class="">></button>
|
|
|
- <span class="page_total">到第</span>
|
|
|
- <input class="input_page_num" type="text">
|
|
|
- <span class="page_total">页</span>
|
|
|
- <button>确定</button>
|
|
|
- </div>`
|
|
|
- let pagebtn =
|
|
|
+ function bidden() {
|
|
|
+ if (selected == 1) {
|
|
|
+ $(".prev_page").css({
|
|
|
+ "cursor": "default",
|
|
|
+ "opacity": ".7",
|
|
|
+ "background-color": "#eee",
|
|
|
+ "color": "#616161",
|
|
|
+ "border": "1px solid #999999"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $(".prev_page").css({
|
|
|
+ "background-color": "#fff",
|
|
|
+ "color": "#999",
|
|
|
+ "cursor": "pointer",
|
|
|
+ "border": "0"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (selected == pagenum) {
|
|
|
+ $(".next_page").css({
|
|
|
+ "cursor": "default",
|
|
|
+ "opacity": ".7",
|
|
|
+ "background-color": "#eee",
|
|
|
+ "color": "#616161",
|
|
|
+ "border": "1px solid #999999"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $(".next_page").css({
|
|
|
+ "background-color": "#fff",
|
|
|
+ "color": "#999",
|
|
|
+ "cursor": "pointer",
|
|
|
+ "border": "0"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- $(".app .page_1").prepend(page)
|
|
|
- $(".app .page_1").css({"margin": "40px 0"})
|
|
|
- $(".app .page_1 .page_ctrl").css({
|
|
|
- "text-align": "center",
|
|
|
- "margin": "10px auto",
|
|
|
- "box-sizing": "border-box"
|
|
|
+ $(".technology_login").click(function () {
|
|
|
+ let loginTxt = $('.head_login')[0];
|
|
|
+ if (loginTxt && ($(loginTxt).text()) == '登录') {
|
|
|
+ $('.head_login').click();
|
|
|
+ window.location.hash = 'jump';
|
|
|
+ $(".login").css({"display" : "block"})
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ if (window.adminData && window.adminData.mobile) {
|
|
|
+ msg('账号不正确,请退出重新登入。')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ window.location.href = globalConfig.context + '/user/account/index.html#/demand';
|
|
|
+ }
|
|
|
})
|
|
|
- $(".app .page_1 .page_ctrl .page_total").css({
|
|
|
- "font-size" : "15px",
|
|
|
- "color": "#999"
|
|
|
+
|
|
|
+ $(".login_close").click(function(){
|
|
|
+ $(".login").css({"display" : "none"})
|
|
|
})
|
|
|
- $(".app .page_1 .page_ctrl .prev_page").css({
|
|
|
- "cursor": "default",
|
|
|
- "opacity": ".7",
|
|
|
- "background": "#eee",
|
|
|
- "color": "#616161",
|
|
|
- "border": "1px solid #999999"
|
|
|
- })
|
|
|
- $(".app .page_ctrl button,.app .input_page_num").css({
|
|
|
- "font-size": "12px",
|
|
|
- "width": "32px",
|
|
|
- "height": "32px",
|
|
|
- "line-height": "32px",
|
|
|
- "background": "#ffffff",
|
|
|
- "border-radius": "25px",
|
|
|
- "color": "#999999",
|
|
|
- "cursor": "pointer",
|
|
|
- "outline": "none",
|
|
|
- "text-align": "center",
|
|
|
- "margin": "0 6px",
|
|
|
- "margin-bottom": "16px",
|
|
|
- "border" : "1px solid #000"
|
|
|
- })
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// function page_ctrl(data_obj) {
|
|
|
-// //分页元素
|
|
|
-// var obj_box = (data_obj.obj_box !== undefined) ? data_obj.obj_box : function() { return; };
|
|
|
-// //总共数据条数
|
|
|
-// var total_item = (data_obj.total_item !== undefined) ? parseInt(data_obj.total_item) : 0;
|
|
|
-// //每页显示数据条数
|
|
|
-// var per_num = (data_obj.per_num !== undefined) ? parseInt(data_obj.per_num) : 5;
|
|
|
-// //当前页数
|
|
|
-// var current_page = (data_obj.current_page !== undefined) ? parseInt(data_obj.current_page) : 1;
|
|
|
-// //总页数
|
|
|
-// var total_page = Math.ceil(total_item / per_num);
|
|
|
-// // if (total_page < 2) { return; }
|
|
|
-// //插入放数据的div
|
|
|
-// $(obj_box).html('<div class="page_content"></div>');
|
|
|
-
|
|
|
-// //插入放页码的div
|
|
|
-// $(obj_box).html('<div class="page_ctrl"></div>');
|
|
|
-
|
|
|
-// $('.page_activitiesPage').css({display:'none'}); //首次进入隐藏翻页组件
|
|
|
-
|
|
|
-// function page_even() {
|
|
|
-// //只能传达数字
|
|
|
-// var regPos = /^\d+$/;
|
|
|
-// //如果当前页数不是数字
|
|
|
-// if (regPos.test(current_page)) {
|
|
|
-// current_page = current_page < 1 ? 1 : (current_page > total_page ? total_page : current_page);
|
|
|
-// } else {
|
|
|
-// current_page = 1;
|
|
|
-// }
|
|
|
-// //调用 回调函数
|
|
|
-// data_obj.change_content(per_num, current_page);
|
|
|
-// var inp_val = (current_page == total_page) ? 1 : current_page;
|
|
|
-// //分页div前半部分
|
|
|
-// var append_html = '<span class="page_total">共 ' + total_page + ' 页</span><button class="iconfont icon-xiangzuo prev_page"></button>';
|
|
|
-// //页码数量
|
|
|
-// for (var i = 0; i < total_page - 1; i++) {
|
|
|
-// if (total_page > 8 && current_page > 6 && i < current_page - 3) {
|
|
|
-// if (i < 2) {
|
|
|
-// append_html += '<button class="page_num">' + (i + 1) + '</button>';
|
|
|
-// } else if (i == 2) {
|
|
|
-// append_html += '<span class="page_dot">...</span>';
|
|
|
-// }
|
|
|
-// } else if (total_page > 8 && current_page < total_page - 3 && i > current_page + 1) {
|
|
|
-// if (current_page > 6 && i == current_page + 2) {
|
|
|
-// append_html += '<span class="page_dot">...</span>';
|
|
|
-// } else if (current_page < 7) {
|
|
|
-// if (i < 8) {
|
|
|
-// append_html += '<button class="page_num">' + (i + 1) + '</button>';
|
|
|
-// } else if (i == 8) {
|
|
|
-// append_html += '<span class="page_dot">...</span>';
|
|
|
-// }
|
|
|
-// }
|
|
|
-// } else {
|
|
|
-// if (i == current_page - 1) {
|
|
|
-// append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
|
|
|
-// } else {
|
|
|
-// append_html += '<button class="page_num">' + (i + 1) + '</button>';
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-// //生成最后一页
|
|
|
-// if (current_page == total_page) {
|
|
|
-// append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
|
|
|
-// } else {
|
|
|
-// append_html += '<button class="page_num">' + (i + 1) + '</button>';
|
|
|
-// }
|
|
|
-// //分页div后半部分
|
|
|
-// append_html += '<button class="iconfont icon-xiangyou next_page"></button><span class="page_total">到第</span><input class="input_page_num" type="text" ><span class="page_text">页</span><button class="to_page_num">确定</button>';
|
|
|
-// $(obj_box).children('.page_ctrl').append(append_html);
|
|
|
-// //左右分页按钮监控
|
|
|
-// if (current_page == 1) {
|
|
|
-// $(obj_box + ' .page_ctrl .prev_page').attr('disabled', 'disabled').addClass('btn_dis');
|
|
|
-// } else {
|
|
|
-// $(obj_box + ' .page_ctrl .prev_page').removeAttr('disabled').removeClass('btn_dis');
|
|
|
-// }
|
|
|
-// if (current_page == total_page) {
|
|
|
-// $(obj_box + ' .page_ctrl .next_page').attr('disabled', 'disabled').addClass('btn_dis');
|
|
|
-// } else {
|
|
|
-// $(obj_box + ' .page_ctrl .next_page').removeAttr('disabled').removeClass('btn_dis');
|
|
|
-// }
|
|
|
-// };
|
|
|
-// page_even();
|
|
|
-// //给按钮绑定点击事件
|
|
|
-// $(obj_box + ' .page_ctrl').on('click', 'button', function() {
|
|
|
-// var that = $(this);
|
|
|
-// if (that.hasClass('prev_page')) {
|
|
|
-// if (current_page != 1) {
|
|
|
-// current_page--;
|
|
|
-// that.parent('.page_ctrl').html('');
|
|
|
-// page_even();
|
|
|
-// }
|
|
|
-// } else if (that.hasClass('next_page')) {
|
|
|
-// if (current_page != total_page) {
|
|
|
-// current_page++;
|
|
|
-// that.parent('.page_ctrl').html('');
|
|
|
-// page_even();
|
|
|
-// }
|
|
|
-// } else if (that.hasClass('page_num') && !that.hasClass('current_page')) {
|
|
|
-// current_page = parseInt(that.html());
|
|
|
-// that.parent('.page_ctrl').html('');
|
|
|
-// page_even();
|
|
|
-// } else if (that.hasClass('to_page_num')) {
|
|
|
-// current_page = parseInt(that.siblings('.input_page_num').val());
|
|
|
-// that.parent('.page_ctrl').html('');
|
|
|
-// page_even();
|
|
|
-// }
|
|
|
-// });
|
|
|
-// }
|
|
|
+}
|