2024-12-27 17:56:46 +08:00

643 lines
19 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

document.write("<script src='../../../js20/qfstatH5.js'></script>");
document.write("<script src='../../../js20/poster/posterShare.js'></script>");
// 以下参数根据需求进行配置
var BMListModeType = 2; // 版面列表显示类型。1:左侧弹出 2居中显示
var calendarMode = 1; //1传统日历 2列表日历需要配合自定义json日历数据
var ifMaxShowDate = false;//是否开启过滤日期开启true,关闭false
var MaxshowData = 10; //最多能看7天
var pageDirection = "horizontal"; // 版面图滑动 horizontal横向滚动vertical竖向滚动
var layoutStyle = "festival" //版面图样式 routine:常规, festival节日solemn庄严
var HaiBaoType = "multi"; //single:单版模板 multi:多版模式多版面时需要加载document.write("<script src='../../../js20/poster/posterShare.js'></script>"); @import url("../js20/poster/posterShare.css");
// 主程序
var month = getDate("month");//获取当前月份
$(function () {
$('body').css('opacity',1);
if (!DateMaxDiff(1)) {
alert("对不起,只能查看最新七天数据!");
location.href = "../../../paperindex.htm";
return;
}
// 模式2初始化年份日历
if (calendarMode == 2) {
initYearList();
}
//日历实例化
$('.form_date').datetimepicker({
pickerPosition: "top-right",
bootcssVer: 3,
format: "yyyy-mm-dd",
language: "zh-CN",
weekStart: 1,
autoclose: 1,
startView: 2,
minView: 2,
forceParse: 0,
viewSelect: "month",
initialDate: getDate("day"),
}).on("show", function (ev) {
console.log(month);
displayDate(month);
//$(".datetimepicker-days th.switch").addClass("disabled");
}).on('changeDate', function (ev) {
var date = new Date(ev.date.valueOf());
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month < 10 ? ("0" + month) : month;
var day = date.getDate();
day = day < 10 ? ("0" + day) : day;
var url = "#";
//var curDate = year+""+appendZero(month)+""+appendZero(day);
//if (curDate<=20191231){
// location.href = "https://epaper.guanhai.com.cn/qdrb/"+curDate;
//}
var isUseful = checkUrl(url);
if (isUseful) {
location.href = url;
}
hideAll();
//$('.mask').removeClass('active');
});
//导航栏日期显示
// $('body .datetimeBtn').text(getDate("day"));
// 底部按钮切换
$('.footerWrap').on('click', '.item', function () {
//$(this).toggleClass('active');
//$(this).parent('.item').siblings('.item').find('.text').removeClass('active');
$('.mask').toggleClass('active');
// 版面列表显示
var btn=$(this).children()[1];
if (btn.classList.contains('layoutBtn')) {
if (BMListModeType == 1) {
$('.layoutStyleOne').toggleClass('active');
} else if (BMListModeType == 2) {
$('.layoutStyleTwo').toggleClass('active');
$(".cancelBox").show()
}
}
// 版面文章目录显示
if (btn.classList.contains('articleBtn')) {
$('.articleList').toggleClass('active');
$(".cancelBox").show();
}
//日历显示
if (btn.classList.contains('datetimeBtn')) {
showDate();
}
// 跳转下载页面
if (btn.classList.contains('synthesis')) {
// window.location.href='synthesis.html';
// $('.mask').removeClass('active');
$('.synthPage').addClass('active');
synthBox();
}
//更多显示的弹层
if (btn.classList.contains('more')) {
$(this).siblings('.exareBox').toggleClass('active');
}
})
// 点击遮罩
$('.mask').on('click', function () {
hideAll();
})
// 点击取消按钮
$('.cancelBox').on('click', function () {
hideAll();
})
//监听切换月份
var i = 0;
$(".datetimepicker-days tbody").bind("DOMNodeInserted", function () {
if (i == 5) {
var date = $(".datetimepicker-days thead th.switch").text().split(" ");
console.log('2222222222222222',date)
switch (date[0]) {
case "一月":
month = date[1] + "-01";
break;
case "二月":
month = date[1] + "-02";
break;
case "三月":
month = date[1] + "-03";
break;
case "四月":
month = date[1] + "-04";
break;
case "五月":
month = date[1] + "-05";
break;
case "六月":
month = date[1] + "-06";
break;
case "七月":
month = date[1] + "-07";
break;
case "八月":
month = date[1] + "-08";
break;
case "九月":
month = date[1] + "-09";
break;
case "十月":
month = date[1] + "-10";
break;
case "十一月":
month = date[1] + "-11";
break;
case "十二月":
month = date[1] + "-12";
break;
}
console.log('111111111111',month)
displayDate(month);
i = -1;
}
i++;
});
//点击分享按钮
$('.synthesis').on('click', function () {
if(HaiBaoType=="single"){//单版分享
$('.mask').toggleClass('active');
$('.synthPage').addClass('active');
synthBox();
}else if (HaiBaoType=="multi"){ //多版分享
var poster = POSTER('paperImg').show('');
}
});
//关闭下载图片的弹层
$('.synthPage').on('click', '.closeBtn', function () {
$('.synthPage').html('');
$('.synthPage,.mask,.synthesis').removeClass('active');
});
})
// 日历相关设置
//显示日期
function showDate() {
if (calendarMode == 1) {
$('.form_date').datetimepicker('update');
$(".form_date").datetimepicker("show");
$(".cancelBox").show()
} else if (calendarMode == 2) {
$("#Datefour").animate({ bottom: "48" }, "normal");
}
}
//隐藏日期
function hideDate() {
if (calendarMode == 1) {
$(".form_date").val(getDate("day"));
$(".form_date").datetimepicker("hide");
} else if (calendarMode == 2) {
$("#Datefour").animate({ bottom: "-100%" }, "normal");
}
}
//获取当前页日期
function getDate(str) {
var activeDate = $('#activeDate').val();
console.log(activeDate);
activeDate = new Date(activeDate);
var initYear = activeDate.getFullYear();
var initMonth = activeDate.getMonth() + 1;
var initDay = activeDate.getDate();
// var url = location.href;
// var re = /(\d{4})\-(\d{2})\/(\d{2})/;
// var r = url.match(re);
//精确到日
if (str == "day") {
var date = initYear + "-" + initMonth + "-" + initDay;
//精确到月
} else if (str == "month") {
var date = initYear + "-" + initMonth;
}
console.log(date);
return date
}
//获取当前月份报纸xml数据
function getPaper(date) {
var myXmlUrl = `/public/static/data/${date}.json`;
var data = { 'day': [], 'url': [] };
$.ajax({
url: myXmlUrl,
type: 'GET',
dataType: 'xml',
async: false,
timeout: 1000,
error: function (xml) {
},
success: function (xml) {
var date = new Array();
var day = new Array();
var url = new Array();
$(xml).find("date").each(function () {
date.push($(this).text());
day.push(parseInt($(this).text().split("-")[2]))
});
$(xml).find("url").each(function () {
url.push($(this).text());
});
data = { "day": day, "url": url }
}
});
console.log('获取当前月份报纸xml数据:',date)
return data
}
//需要黑色显示的日期数组
function displayDate(date) {
console.log('需要黑色显示的日期数组:',date)
var data = getPaper(date);
var day = 1, count = 0, count2 = 0;
$(".datetimepicker-days .day").each(function (i) {
if (parseInt($(this).text()) > day) {
$(this).html("");
count++
} else {
day = parseInt($(this).text()) + 1;
if ((i > 20) && (parseInt($(this).text()) < 14)) {
$(this).html("").removeClass("active");
count2++;
}
}
});
if (count == 7) { $(".datetimepicker-days tr:eq(2)").hide(); }
if (count2 >= 7) { $(".datetimepicker-days tr:eq(7)").hide(); }
$(".datetimepicker-days .day").each(function () {
var index = data["day"].indexOf(parseInt($(this).text()))
if (index == -1) {
//var curDate = date.replace("-","")+appendZero(parseInt($(this).text()));
//if (curDate<=20191231){
// $(this).attr('url',"");
//}else{
$(this).addClass('old');
$(this).addClass('disabled');
//}
} else {
if (!ifMaxShowDate) {
$(this).attr('url', data["url"][index]);
} else {
var temp = date.split("-");
temp = temp[0] + "/" + temp[1] + "/" + parseInt($(this).text());
if (DateMaxDiff(2, temp)) {
$(this).attr('url', data["url"][index]);
} else {
$(this).addClass('old');
$(this).addClass('disabled');
}
}
}
});
}
function appendZero(n) {
return (("00" + n).substr(("00" + n).length - 2));
}
// 隐藏首页所有的弹层
function hideAll() {
$('.layoutList').removeClass('active');
$('.footerWrap .item .text').removeClass('active')
$('.mask').removeClass('active');
$('.articleList').removeClass('active');
$('.exareBox').removeClass('active')
hideDate();
$(".cancelBox").hide()
}
//检查链接是否有效
function checkUrl(url) {
isUseful = false;
$.ajax({
url: url,
type: 'GET',
async: false,
success: function (xml) {
isUseful = true;
}
});
return isUseful
}
//取版面的ID
function getCaption(obj) {
var index = obj.lastIndexOf("_");
obj = obj.substring(index + 1, obj.length);
obj=obj?obj.split('.')[0]:''
// console.log(obj);
return obj;
}
//下载弹层
function synthBox() {
var imgUrl = $('.thumbnail-left-left a img').attr('src') + '?=v1';
var date = window.location.href.match(/(\d{4})-(\d{2})\/(\d{2})/im)[0].replace("-", "年").replace("/", "月") + '日'; //日期
var week = getWeek(window.location.href.match(/(\d{4})-(\d{2})\/(\d{2})/im)[0].replace("/", "-")); //星期
// var html = '<div class="closeBtn"><i></i></div>' +
// '<div id="synthWrap">' +// <!-- 下载内容html -->
// '<img src = ' + imgUrl + ' class="synthPaper" alt=""/>' +
// '<div class="imgBottom"></div>' +
// '<div class="footer">' +
// '<div class="left"><img src="../../../image20/logo.png" alt=""/></div>' +
// '<div class="center">' +
// window.location.href.match(/(\d{4})-(\d{2})\/(\d{2})/im)[0].replace("-", ".").replace("/", ".") +
// '&nbsp;' +
// getWeek(window.location.href.match(/(\d{4})-(\d{2})\/(\d{2})/im)[0].replace("/", "-")) + '</div>' +
// '<div class="right" id="qrcode"></div>' +
// '</div>' +
// '</div>' +
// '<div class="tipsBtn"></div>' +//<!-- 保存提示按钮 -->
// '<div id="synthImg"><img src="" alt=""/></div>' +//<!-- 合成的图片 -->
// '<div class="synthmask"><img src="../../../image20/loading.gif" alt=""/></div>';//<!-- 加载中的蒙层 -->
var html = `
<div class="closeBtn"><i></i></div>
<div id="synthWrap">
<div class="synthHead">
<img src="../../../image20/logoSmall.png" alt=""/>
<div>${date}&nbsp;&nbsp;&nbsp;${week}</div>
</div>
<img src = '${imgUrl}' class="synthPaper" alt=""/>
<div class="footer">
<div class="left">
<img src="../../../image20/logoBig.png" alt=""/>
</div>
<div class="right">
<div class="text">
<div>识别二维码</div>
<div>查看该版内容</div>
</div>
<div class="qr">
<img src="" id="qcImg"/>
</div>
</div>
</div>
</div>
<div id="synthImg"><img src="" alt=""/></div>
<div class="saveTipsBtn">点击图片,长按分享给好友</div>
<div class="synthmask"><img src="../../../image20/loading.gif" alt=""/></div>
<div id="qrcode" style="visibility:hidden;"></div>
`
$('.synthPage').append(html);
var url = window.location.href;
var index = url.substring(0, url.lastIndexOf('/') + 1);
$('body').find('#qrcode').qrcode({
render: 'canvas',
width: 180,
height: 180,
// margin: '0 auto',
text: url
});
document.getElementById('qcImg').src = document.querySelector('canvas').toDataURL("image/webp");
synthesisImgLoad();
$('.tipsBtn').unbind("touchstart");
$('.tipsBtn').unbind("touchend");
$('.tipsBtn').bind("touchstart", function () {
$(this).hide();
});
$('.tipsBtn').bind("touchend", function () {
$(this).show();
});
}
//判断图片是否加载完成
function synthesisImgLoad() {
var img = $('.synthPage .synthPaper');
if (img && img.length != 0) {
if (img[0].complete) {
var synBoxH = $('#synthWrap').height();
var imgH = $('#synthWrap').height() - 100;
$('#synthWrap>img.synthPaper').css('max-height', imgH + 'px');
$('#qrcode').hide()
synthesisImg();
} else {
setTimeout(function () { synthesisImgLoad() }, 300);
}
} else {
setTimeout(function () { synthesisImgLoad() }, 300);
}
}
//生成图片
function synthesisImg() {
//clearInterval(synthesisImgLoad)
var canvas = document.createElement('canvas') // 创建一个canvas节点
var shareContent = document.getElementById('synthWrap') // 需要截图的包裹的原生的DOM 对象
var width = shareContent.offsetWidth // 获取dom 宽度
var height = shareContent.offsetHeight // 获取dom 高度
var scale = 2 // 定义任意放大倍数 支持小数
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
var rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
html2canvas(document.getElementById('synthWrap'), {
x: rect.left, // 绘制的dom元素相对于视口的位置
y: rect.top,
width: width, // dom 原始宽度
height: height,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
// x: 0,
// y: 0,
useCORS: true, // 开启跨域
dpi: window.devicePixelRatio * 2,
scale: scale, // 添加的scale 参数
}).then((canvas) => {
var context = canvas.getContext('2d')
//关闭抗锯齿
context.mozImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
$('#synthImg img').attr('src', canvas.toDataURL());
$('#synthWrap').hide();
$('#synthImg').show();
$('.synthPage .synthmask').hide();
})
}
//星期日期计算
function getWeek(timedat) { //timedat参数格式 "2018-09-11"
let t = new Date(timedat);
let week;
if (t.getDay() === 0) week = "星期日";
if (t.getDay() === 1) week = "星期一";
if (t.getDay() === 2) week = "星期二";
if (t.getDay() === 3) week = "星期三";
if (t.getDay() === 4) week = "星期四";
if (t.getDay() === 5) week = "星期五";
if (t.getDay() === 6) week = "星期六";
return week;
};
//判断当前时间和报纸刊期之间的时间差。 如在MaxshowData天内返回true,否则返回false
// type=1,忽略dtStartStr日期根据浏览器地址获取;type=2根据前一个参数格式(YYYY/MM/DD)
function DateMaxDiff(type, dtStartStr) {
if (!ifMaxShowDate) { return true; }
var maxinterval = MaxshowData;//允许看的天数
var re = /(\d{4})-(\d{2})\/(\d{2})/i;
var sUrl = location.href;
var r = sUrl.match(re);
var dtEnd = new Date();
var dtStart;
if (type == 1) {
if (r) {
dtStart = new Date(r[1] + "/" + r[2] + "/" + r[3]);
} else {
dtStart = new Date();
}
} else if (type == 2) {
dtStart = new Date(dtStartStr);
if (isNaN(dtStart)) dtStart = new Date();
}
var date3 = dtEnd.getTime() - dtStart.getTime(); //时间差的毫秒数
var days = Math.floor(date3 / (24 * 3600 * 1000));//计算出相差天数
if ((days) >= maxinterval) {
return false;
} else {
return true;
}
}
//日历牌替换====================
function initYearList() {//加载年份
var html = "";
html += " <div id='Datefour'>";
html += " <div class='year'>";
html += " <a href='#' class='prev'></a>";
html += " <p id='paperYear'></p>";
html += " <a href='#' class='next'></a>";
html += " </div>";
html += " <ul class='clearfix'>";
html += " </ul>";
html += " </div>";
$("body").append(html);
var url = location.href;
var re = /\/(\d{4})-(\d{2})\/(\d{2})\/node_(\d+).htm/im;
var r = url.match(re);
getYearList(r[1], r[1] + "-" + r[2] + "-" + r[3]);//按年份显示导航
}
//获取当前月份报纸xml数据
function getYearList(year, curDate) {//按年份显示导航
$("#Datefour p").html("<span onclick=\"showYearList(" + year + ",'" + curDate + "');\"><img src='../../../image20/calenderSmall.png' border=0 />" + year + "年</span>");//显示年份
var myXmlUrl = "../../../paperXml/yearList.js?time=" + new Date().getTime();
var curIndex = -1, css = "", len, perYear = 0, nextYear = 0;
$.getJSON(myXmlUrl, function (json) {
//解析列表
$.each(json, function (i, item) {
if (item.active == 1) {
if (year == item.yearNo) { curIndex = i; }
if (curIndex == -1) { perYear = item.yearNo; }
if (curIndex + 1 == i) { nextYear = item.yearNo; }
}
});
len = json.length - 1;
// 往左事件
if (perYear > 0) {
//$("#Datefour .prev span").css("color","#04C");//年份左导航箭头颜色
$("#Datefour .prev").css("background-image", "url('../../../image20/left-1.png')");
$("#Datefour .prev").attr("href", "javascript:getYearList(" + perYear + ",'" + curDate + "')");//年份左导航箭头颜
} else {
//$("#Datefour .prev span").css("color","#eee");//年份左导航箭头颜
$("#Datefour .prev").css("background-image", "url('../../../image20/left-2.png')");
$("#Datefour .prev").attr("href", "javascript:void();");//年份左导航箭头颜
}
// 往右事件
if (len != curIndex) {
$//("#Datefour .next span").css("color","#04C");//年份左导航箭头颜色
$("#Datefour .next").css("background-image", "url('../../../image20/right-1.png')");
$("#Datefour .next").attr("href", "javascript:getYearList(" + nextYear + ",'" + curDate + "')");//年份左导航箭头颜
} else {
//$("#Datefour .next span").css("color","#eee");//年份左导航箭头颜
$("#Datefour .next").css("background-image", "url('../../../image20/right-2.png')");
$("#Datefour .next").attr("href", "javascript:void();");//年份左导航箭头颜
}
});
getDateList(year, curDate);//按当前页面年份加载对应期次数据
}
function showYearList(perYear, curDate) {//显示年份列表
var myXmlUrl = "../../../paperXml/yearList.js?time=" + new Date().getTime();
$('#Datefour ul').empty();
$(".prev,.next").hide();
var liCss;
$.getJSON(myXmlUrl, function (json) {
$.each(json, function (i, item) {
if (item.active == 1) {
liCss = " style='color:#000;'";
$('#Datefour ul').append("<li style='width:25%'><a href=\"javascript:getYearList(" + item.yearNo + ",'" + curDate + "');\"" + liCss + " >" + item.yearNo + "年</a></li>");
} else {
liCss = " style='color:gray;'";
$('#Datefour ul').append("<li style='width:25%'><a href='javascript:void(0);'" + liCss + " >" + item.yearNo + "年</a></li>");
}
});
});
}
function getDateList(year, curDate) {//按当前页面年份加载对应期次数据
var myXmlUrl = "../../../paperXml/" + year + "_paperList.js";
var xmlDate, paperUrl, liCss;
$('#Datefour ul').empty();
$(".prev,.next").show();
var xmlDate, paperUrl, liCss;
$.getJSON(myXmlUrl, function (json) {
$.each(json, function (i, item) {
xmlDate = item.date;
paperUrl = "../../" + xmlDate.split("-")[0] + "-" + xmlDate.split("-")[1] + "/" + xmlDate.split("-")[2] + "/node_1.htm";
liCss = " style='" + (item.active == 1 ? "background-color:#eee;" : "") + (curDate == item.date ? "color:#F00;" : "") + "'";
//console.log(liCss);
$('#Datefour ul').append("<li><a href='" + paperUrl + "' " + liCss + " >" + item.name + "</a></li>");
});
});
}
//获取url中"?"符后的字串
function getURLParams() {
let url = decodeURI(window.location.href); //获取url中"?"符后的字串
let theRequest = {};
if (url.lastIndexOf("?") !== -1) {
let str = url.substr(url.lastIndexOf("?") + 1);
//let str = substr(url,instr(url,"?",-1)+1);
let strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest;
};