733 lines
27 KiB
HTML
733 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="renderer" content="webkit">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>历史畅销款-智订宝-e订通</title>
|
||
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
|
||
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
|
||
<link rel="stylesheet" href="index.css">
|
||
<style>
|
||
@media screen {
|
||
/* 历史畅销款 lscxk */
|
||
#lscxk .detail .single>div { width: 90%; }
|
||
}
|
||
@media screen and (max-width: 600px) {
|
||
/* 通用 */
|
||
.layui-nav .layui-nav-item a { padding: 0 8px;}
|
||
/* 历史畅销款 lscxk */
|
||
#lscxk .detail .single>div { width: 90%; }
|
||
}
|
||
.page-box { display: flex; transform: translateX(0); }
|
||
.page { width: 100%; flex-shrink: 0; }
|
||
.header { padding: 16px; padding-top: 0; height: 38px; display: block; }
|
||
.menus>a { font-size: 18px; margin: 8px; display: inline-block; cursor: pointer; }
|
||
.menus>a.show-this { cursor: auto; color: #00A1F8; position: relative; }
|
||
.menus>a.show-this:after { content: "\e625"; position: absolute; top: 18px; left: 0; right: 0; }
|
||
.hidden-items { display: none; }
|
||
|
||
/* 历史畅销款 */
|
||
#lscxk { overflow-x: hidden; }
|
||
#lscxk .detail { width: 100%; display: flex; transform: translateX(-100%); }
|
||
#lscxk .detail .single { width: 100%; flex-shrink: 0; }
|
||
#lscxk .detail .single .floor-1 { margin: 16px auto; }
|
||
#lscxk .detail .single .floor-1>div>div { margin: 4px auto; }
|
||
#lscxk .detail .single .floor-1>div>div .title { display: inline-block; }
|
||
#lscxk .detail .single .floor-1>div>div .title.letter-spacing { letter-spacing: 0.5em; }
|
||
#lscxk .detail .single .floor-1>div>div .content { display: inline-block; width: 40%; }
|
||
#lscxk .detail .single .floor-1>div>div input { text-align: center; padding-left: 0; border-radius: 8px; }
|
||
#lscxk .detail .single .floor-2>div { display: inline-block; vertical-align: middle; }
|
||
#lscxk .detail .single .floor-2>div>div { margin: 8px auto; }
|
||
#lscxk .detail .single .floor-3 { margin: 16px auto; }
|
||
#lscxk .detail .single .floor-3>div>div { margin-top: 8px; }
|
||
#lscxk .detail .single .floor-3>div>div input { text-align: center; padding-left: 0; border-radius: 8px; width: 80px;
|
||
display: inline-block; }
|
||
#lscxk .detail .single .floor-3>div>div input:not(:last-child) { margin-right: 16px; }
|
||
/* end 历史畅销款 */
|
||
|
||
/* 动画 */
|
||
@keyframes move-to-left
|
||
{
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(0%); }
|
||
}
|
||
@-webkit-keyframes move-to-left /* Safari 与 Chrome */
|
||
{
|
||
0% { transform: translateX(-100%);}
|
||
100% { transform: translateX(0%); }
|
||
}
|
||
@keyframes with-lscxk-move-to-right
|
||
{
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(-200%); }
|
||
}
|
||
@-webkit-keyframes with-lscxk-move-to-right /* Safari 与 Chrome */
|
||
{
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(-200%); }
|
||
}
|
||
@keyframes with-lxdhfa-move-to-right
|
||
{
|
||
0% { transform: translateX(0%); }
|
||
100% { transform: translateX(-100%); }
|
||
}
|
||
@-webkit-keyframes with-lxdhfa-move-to-right /* Safari 与 Chrome */
|
||
{
|
||
0% { transform: translateX(0%); }
|
||
100% { transform: translateX(-100%); }
|
||
}
|
||
.animation-move-to-left {
|
||
animation: move-to-left 1s;
|
||
-webkit-animation: move-to-left 1s;
|
||
}
|
||
.animation-with-lscxk-move-to-right {
|
||
animation: with-lscxk-move-to-right 1s;
|
||
-webkit-animation: with-lscxk-move-to-right 1s;
|
||
}
|
||
.animation-with-lxdhfa-move-to-right {
|
||
animation: with-lxdhfa-move-to-right 1s;
|
||
-webkit-animation: with-lxdhfa-move-to-right 1s;
|
||
}
|
||
/* end 滑动动画 */
|
||
</style>
|
||
<script src="layuiadmin/layui/layui.js"></script>
|
||
<script src="js/function.js"></script>
|
||
<!-- echart -->
|
||
<script src="js/echarts.common.min.js"></script>
|
||
<!-- universal -->
|
||
<script src="js/universal/universal.js"></script>
|
||
<link rel="stylesheet" href="js/universal/universal.css">
|
||
<!-- viewer js -->
|
||
<script src="js/viewer/viewer.min.js"></script>
|
||
<link rel="stylesheet" href="js/viewer/viewer.min.css">
|
||
<link rel="stylesheet" href="css/general.css">
|
||
</head>
|
||
|
||
<body style="overflow-x: hidden;">
|
||
|
||
<div style="overflow-x: hidden;"><div class="page-box">
|
||
<!-- 历史畅销款 -->
|
||
<div id="lscxk" class="page">
|
||
<div class="g-top-title-bar">
|
||
<div class="-title" style="padding: 0 10px;">历史畅销款</div>
|
||
<div class="-btn-close" onclick="u_close_this_div();"><img src="images/close.png" width=30 height=30 border=0></div>
|
||
</div>
|
||
<div class="header layui-form">
|
||
<div style="float: left; height: 38px; line-height: 38px;"><a href="javascript: toPageDetailWithLscxk('prev')" class="btn-prev" style="cursor: pointer;">◀︎ 上一款</a></div>
|
||
<div style="float: right; height: 38px; line-height: 38px;"><a href="javascript: toPageDetailWithLscxk('next')" class="btn-next" style="cursor: pointer;">下一款 ▶︎</a></div>
|
||
</div>
|
||
<div class="detail">
|
||
<div class="single prev"></div>
|
||
<div class="single current"></div>
|
||
<div class="single next"></div>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
<div class="hidden-items">
|
||
<input id="uid" value="">
|
||
<input id="face" value="">
|
||
</div>
|
||
<script>
|
||
|
||
{ // 历史畅销款相关变量
|
||
var original_lscxk_detail_offset_left
|
||
,touchmoving = false
|
||
}
|
||
{ // 水印相关
|
||
var watermark_data = {
|
||
is_sy: "y"
|
||
,username: "这是水印"
|
||
}
|
||
}
|
||
{ // 图表
|
||
var echartObj
|
||
,echartsData = {}
|
||
}
|
||
{
|
||
var $
|
||
}
|
||
|
||
layui.config({
|
||
base: './layuiadmin/'
|
||
}).extend({
|
||
index: 'lib/index'
|
||
}).use(['index', 'user','element'], function(){
|
||
$ = layui.$
|
||
const admin = layui.admin
|
||
,form = layui.form
|
||
,element = layui.element
|
||
|
||
$.ajax({
|
||
url:"./?_m=zdb&_a=init",
|
||
contentType: "application/json",
|
||
method: 'POST',
|
||
success: function (res) {
|
||
var json_data=$.parseJSON(res);
|
||
|
||
//alert(json_data.ver);
|
||
if(json_data.code==0){
|
||
//------------------本页返回的错误信息
|
||
layer.msg(json_data.msg);
|
||
}else if(json_data.code==1){
|
||
//------------------系统错误
|
||
var msg=json_data.msg;
|
||
var url1="error.htm?msg="+json_data.msg+"&btn_title="+json_data.btn_title+"&btn_url="+json_data.btn_url;
|
||
var obj1=window.parent.parent?window.parent.parent:window.parent;
|
||
obj1.location.href=url1;
|
||
}else if(json_data.code==2){
|
||
//------------------重新登录
|
||
url1="login.htm?error_msg="+json_data.msg;
|
||
var obj1=window.parent.parent?window.parent.parent:window.parent;
|
||
obj1.location.href=url1;
|
||
}else{
|
||
//------------------填充内容
|
||
console.log(["初始", json_data])
|
||
|
||
// 强制body保持一定宽度，临时使用
|
||
// $("body").width($("#LAY_app_body", top.document).width())
|
||
|
||
$("#uid").val(json_data.uid)
|
||
$("#face").val(json_data.face)
|
||
|
||
watermark_data = {
|
||
is_sy: json_data.is_sy
|
||
,username: json_data.username
|
||
}
|
||
|
||
fillPageDetailWithLscxk()
|
||
}
|
||
}
|
||
,beforeSend: function() { u_start_loading() }
|
||
,complete: function() { u_stop_loading() }
|
||
,error: function () { layui.layer.msg("与服务器通信失败！") }
|
||
}) // end ajax
|
||
|
||
$("#LAY_app_body", top.document).resize(function() {
|
||
$("body").width($(this).width())
|
||
})
|
||
$(window).on("orientationchange",function(){
|
||
$(self.frameElement).parents(".layui-layer-iframe").css({
|
||
"width": "100%",
|
||
"height": "100%",
|
||
"top": "0",
|
||
"left": "0"
|
||
})
|
||
})
|
||
|
||
//---------- 历史畅销款
|
||
var lscxk_detail_elem = $("#lscxk .detail")[0]
|
||
lscxk_detail_elem.addEventListener("animationend",function(e){ // 点击下一款、上一款产生的动画
|
||
if ($(this).hasClass("animation-move-to-left")) {
|
||
loadNewLscxkWithPrev()
|
||
} else if ($(this).hasClass("animation-with-lscxk-move-to-right")) {
|
||
loadNewLscxkWithNext()
|
||
}
|
||
$(this).removeClass("animation-move-to-left animation-with-lscxk-move-to-right")
|
||
})
|
||
|
||
// 鼠标拖动
|
||
lscxk_detail_elem.addEventListener('mousedown', function(event) {
|
||
event.preventDefault()
|
||
// console.log("down: ", event)
|
||
this.addEventListener('mousemove', moveDetailWithLscxk, true)
|
||
}, true)
|
||
lscxk_detail_elem.addEventListener('mouseup', function(event) {
|
||
// console.log("up: ", event)
|
||
this.removeEventListener("mousemove", moveDetailWithLscxk, true)
|
||
animateWithAfterMove1()
|
||
}, true)
|
||
// end 鼠标拖动
|
||
|
||
// 手指拖动
|
||
$(document).on("touchstart", lscxk_detail_elem, function(event) { // 用于辅助 lscxk_detail_elem 启用touchstart，如果在此处直接操作touchstart，会调用两次
|
||
// event.preventDefault() // 会在iOS9上出bug
|
||
})
|
||
lscxk_detail_elem.addEventListener("touchstart", function(event) {
|
||
if (!touchmoving) {
|
||
touchmoving = true
|
||
// console.log("touchstart", event)
|
||
if (event.targetTouches.length == 1) {
|
||
original_lscxk_detail_offset_left = event.pageX
|
||
this.addEventListener('touchmove', touchMoveDetailWithLscxk, true)
|
||
}
|
||
}
|
||
})
|
||
lscxk_detail_elem.addEventListener("touchend", function(event) {
|
||
// console.log("touch end: ", event)
|
||
this.removeEventListener("touchmove", touchMoveDetailWithLscxk, true)
|
||
touchmoving = false
|
||
animateWithAfterMove1()
|
||
})
|
||
// end 手指拖动
|
||
//---------- end 历史畅销款
|
||
}) // end layui
|
||
|
||
// 通用
|
||
// 无图片
|
||
function noImg(node) {
|
||
node.setAttribute("onerror", "")
|
||
node.src = "images/no_pic.png"
|
||
if (node.getAttribute("data-original")) node.setAttribute("data-original", "images/no_pic.png")
|
||
}
|
||
// end 无图片
|
||
// 移动时序动画
|
||
function universalMoveAnimate(duration, draw, timing, beforeAnimation, complete) {
|
||
// https://zh.javascript.info/js-animation
|
||
var start = performance.now()
|
||
if (beforeAnimation) beforeAnimation()
|
||
requestAnimationFrame(function universalMoveAnimate(time) {
|
||
var timeFraction = (time - start) / duration;
|
||
if (timeFraction > 1) timeFraction = 1;
|
||
|
||
var progress = timing(timeFraction)
|
||
|
||
draw(progress);
|
||
|
||
if (timeFraction < 1) {
|
||
requestAnimationFrame(universalMoveAnimate);
|
||
} else {
|
||
complete()
|
||
}
|
||
})
|
||
}
|
||
|
||
// end 通用
|
||
// 历史畅销款
|
||
function fillPageDetailWithLscxk(complete_params) {
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
$.ajax({
|
||
url:"./?_m=zdb&_a=get_lscxk",
|
||
contentType: "application/json",
|
||
method: 'POST',
|
||
success: function (res) {
|
||
var json_data=$.parseJSON(res);
|
||
console.log("历史畅销款，初始or重置", json_data)
|
||
|
||
if (json_data.cxk_list.length < 1 || json_data.cxk_list[0].id === "-1") $("#lscxk .btn-prev").attr("href", "javascript: void(0);").addClass("layui-disabled")
|
||
else $("#lscxk .btn-prev").attr("href", "javascript: toPageDetailWithLscxk('prev');").removeClass("layui-disabled")
|
||
|
||
if (json_data.cxk_list.length < 3 || json_data.cxk_list[2].id === "-1") $("#lscxk .btn-next").attr("href", "javascript: void(0);").addClass("layui-disabled")
|
||
else $("#lscxk .btn-next").attr("href", "javascript: toPageDetailWithLscxk('next');").removeClass("layui-disabled")
|
||
|
||
var cxk0 = json_data.cxk_list[0]
|
||
initDetailWithSingleLscxk(cxk0, $("#lscxk .detail .single.prev"))
|
||
echartsData[cxk0.id] = cxk0.mouthlist
|
||
|
||
var cxk1 = json_data.cxk_list[1]
|
||
initDetailWithSingleLscxk(cxk1, $("#lscxk .detail .single.current"))
|
||
echartsData[cxk1.id] = cxk1.mouthlist
|
||
|
||
var cxk2 = json_data.cxk_list[2]
|
||
initDetailWithSingleLscxk(cxk2, $("#lscxk .detail .single.next"))
|
||
echartsData[cxk2.id] = cxk2.mouthlist
|
||
|
||
if(complete_params && complete_params.complete) complete_params.complete(complete_params.index)
|
||
|
||
setCurrentEchart(cxk1.id)
|
||
}
|
||
,beforeSend: function() { u_start_loading() }
|
||
,complete: function() { u_stop_loading() }
|
||
,error: function () { layui.layer.msg("与服务器通信失败！") }
|
||
})
|
||
})
|
||
}
|
||
function initDetailWithSingleLscxk(item_list, single_elem){
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
single_elem.attr("data-id", item_list.id).html("")
|
||
var elem_html = ''
|
||
if (item_list.id != "-1") {
|
||
var maxMonth = ''
|
||
for (var i = 0; i < item_list.mouthlist.length; i++) {
|
||
var crt = item_list.mouthlist[i]
|
||
if (crt.val == item_list.mouthmax) {
|
||
maxMonth = crt.title
|
||
break
|
||
}
|
||
}
|
||
|
||
elem_html += '\
|
||
<div class="floor-1 layui-row">\
|
||
<div class="layui-col-xs6 layui-col-sm6" style="margin-top: 16px;">\
|
||
<div style="margin-bottom: 22px;">\
|
||
<div class="title" style="width: 60px; font-size: 20px; text-align: left;">名次</div><div class="content"><input class="layui-input" value="'+item_list.ph+'" readonly></div>\
|
||
</div>\
|
||
<div>\
|
||
<div class="title" style="width: 60px; font-size: 20px; text-align: left;">品名</div><div class="content"><input class="layui-input" value="'+item_list.pl+'" readonly></div>\
|
||
</div>\
|
||
</div>\
|
||
<div class="layui-col-xs6 layui-col-sm6">\
|
||
<div>\
|
||
<div class="title letter-spacing" style="width: 100px; font-size: 20px; text-align: left;">销售额</div><div class="content"><input class="layui-input" value="'+item_list.xsje+'" readonly></div>\
|
||
</div>\
|
||
<div>\
|
||
<div class="title letter-spacing" style="width: 100px; font-size: 20px; text-align: left;">销售量</div><div class="content"><input class="layui-input" value="'+item_list.xszl+'" readonly></div>\
|
||
</div>\
|
||
<div>\
|
||
<div class="title" style="width: 100px; font-size: 20px; text-align: left;">零售均价</div><div class="content"><input class="layui-input" value="'+item_list.price+'" readonly></div>\
|
||
</div>\
|
||
</div>\
|
||
</div>\
|
||
'
|
||
|
||
elem_html += '\
|
||
<div class="floor-2">\
|
||
<div><img src="../attachments/zdb/ls/'+item_list.kh+'.jpg" onerror="noImg(this)" data-original="../attachments/zdb/ls/'+item_list.kh+'.jpg" style="max-width: 100%;" watermark></div>\
|
||
</div>\
|
||
'
|
||
|
||
elem_html += '\
|
||
<div class="floor-3 layui-row">\
|
||
<div class="layui-col-xs6" style="height: 200px;">\
|
||
<div style="margin-top: 63px;">\
|
||
<div style="font-size: 20px;">零售核心月份</div>\
|
||
<div style="margin-top: 16px;"><input class="layui-input" value="'+maxMonth+'" readonly><input class="layui-input" value="'+item_list.mouthmax+'"% readonly></div>\
|
||
</div>\
|
||
</div>\
|
||
<div class="layui-col-xs6">\
|
||
<div>\
|
||
<div style="display: inline-block; vertical-align: middle; width: 28px; font-size: 20px;">零售曲线图</div>\
|
||
<div style="display: inline-block; vertical-align: middle;"><div class="echart" style="width: 200px; height: 200px;"></div></div>\
|
||
</div>\
|
||
</div>\
|
||
</div>\
|
||
'
|
||
}
|
||
single_elem.html(elem_html)
|
||
|
||
USetWatermark({
|
||
el: single_elem,
|
||
is_sy: watermark_data.is_sy
|
||
,text: watermark_data.username
|
||
})
|
||
new Viewer(single_elem[0], {
|
||
url: 'data-original'
|
||
,toolbar: false
|
||
,title: false
|
||
,rotatable: false
|
||
,backdrop: false // 点击非图片层关闭
|
||
,viewed: function(event) {
|
||
USetWatermark({
|
||
el: $(event.detail.image),
|
||
is_sy: watermark_data.is_sy,
|
||
text: watermark_data.username,
|
||
font_size: 64
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
function fillDetailWithSingleLscxk(lsid, direction) {
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
$.ajax({
|
||
url:"./?_m=zdb&_a=get_lscxk_id&lsid="+lsid+"&direction="+direction,
|
||
contentType: "application/json",
|
||
method: 'POST',
|
||
success: function (res) {
|
||
var json_data = $.parseJSON(res);
|
||
console.log('fill detail', json_data)
|
||
var data2 = json_data.cxk_detail[0]
|
||
,elem_html = ''
|
||
if(data2.id == "-1"){
|
||
$("#lscxk .btn-"+direction).attr("href", "javascript: void(0);").addClass("layui-disabled")
|
||
} else {
|
||
var maxMonth = ''
|
||
for (var i = 0; i < data2.mouthlist.length; i++) {
|
||
var crt = data2.mouthlist[i]
|
||
if (crt.val == data2.mouthmax) {
|
||
maxMonth = crt.title
|
||
break
|
||
}
|
||
}
|
||
elem_html += '\
|
||
<div class="floor-1 layui-row">\
|
||
<div class="layui-col-xs6 layui-col-sm6" style="margin-top: 16px;">\
|
||
<div style="margin-bottom: 22px;">\
|
||
<div class="title" style="width: 60px; font-size: 20px; text-align: left;">名次</div><div class="content"><input class="layui-input" value="'+data2.ph+'" readonly></div>\
|
||
</div>\
|
||
<div>\
|
||
<div class="title" style="width: 60px; font-size: 20px; text-align: left;">品名</div><div class="content"><input class="layui-input" value="'+data2.pl+'" readonly></div>\
|
||
</div>\
|
||
</div>\
|
||
<div class="layui-col-xs6 layui-col-sm6">\
|
||
<div>\
|
||
<div class="title letter-spacing" style="width: 100px; font-size: 20px; text-align: left;">销售额</div><div class="content"><input class="layui-input" value="'+data2.xsje+'" readonly></div>\
|
||
</div>\
|
||
<div>\
|
||
<div class="title letter-spacing" style="width: 100px; font-size: 20px; text-align: left;">销售量</div><div class="content"><input class="layui-input" value="'+data2.xszl+'" readonly></div>\
|
||
</div>\
|
||
<div>\
|
||
<div class="title" style="width: 100px; font-size: 20px; text-align: left;">零售均价</div><div class="content"><input class="layui-input" value="'+data2.price+'" readonly></div>\
|
||
</div>\
|
||
</div>\
|
||
</div>\
|
||
'
|
||
|
||
elem_html += '\
|
||
<div class="floor-2">\
|
||
<div><img src="../attachments/zdb/ls/'+data2.kh+'.jpg" onerror="noImg(this)" data-original="../attachments/zdb/ls/'+data2.kh+'.jpg" watermark></div>\
|
||
</div>\
|
||
'
|
||
|
||
elem_html += '\
|
||
<div class="floor-3 layui-row">\
|
||
<div class="layui-col-xs6" style="height: 200px;">\
|
||
<div style="margin-top: 63px;">\
|
||
<div style="font-size: 20px;">零售核心月份</div>\
|
||
<div style="margin-top: 16px;"><input class="layui-input" value="'+maxMonth+'" readonly><input class="layui-input" value="'+data2.mouthmax+'" readonly></div>\
|
||
</div>\
|
||
</div>\
|
||
<div class="layui-col-xs6">\
|
||
<div>\
|
||
<div style="display: inline-block; vertical-align: middle; width: 28px; font-size: 20px;">零售曲线图</div>\
|
||
<div style="display: inline-block; vertical-align: middle;"><div class="echart" style="width: 200px; height: 200px;"></div></div>\
|
||
</div>\
|
||
</div>\
|
||
</div>\
|
||
'
|
||
}
|
||
$("#lscxk .detail .single."+direction).html(elem_html).attr("data-id", data2.id)
|
||
|
||
echartsData[data2.id] = data2.mouthlist
|
||
|
||
USetWatermark({
|
||
el: $("#lscxk .detail .single."+direction+" img[watermark]"),
|
||
is_sy: watermark_data.is_sy
|
||
,text: watermark_data.username
|
||
})
|
||
}
|
||
,error: function () { layui.layer.msg("与服务器通信失败！") }
|
||
})
|
||
|
||
})
|
||
}
|
||
// end fillDetailWithSingleLscxk
|
||
// 下一款、上一款
|
||
function toPageDetailWithLscxk(direction) {
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
if (direction == "prev") {
|
||
$("#lscxk .detail").addClass("animation-move-to-left")
|
||
} else if (direction == "next") {
|
||
$("#lscxk .detail").addClass("animation-with-lscxk-move-to-right")
|
||
}
|
||
})
|
||
}
|
||
function loadNewLscxkWithPrev() {
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
const prev_id = $("#lscxk .detail .single.prev").attr("data-id")
|
||
,current_id = $("#lscxk .detail .single.current").attr("data-id")
|
||
// $("#lscxk .detail .single").last().remove()
|
||
$("#lscxk .detail .single.next").html($("#lscxk .detail .single.current").html()).attr("data-id", current_id)
|
||
$("#lscxk .detail .single.current").html($("#lscxk .detail .single.prev").html()).attr("data-id", prev_id)
|
||
$("#lscxk .detail").css("transform", "")
|
||
$("#lscxk .btn-next").attr("href", "javascript: toPageDetailWithLscxk('next')").removeClass("layui-disabled")
|
||
fillDetailWithSingleLscxk(prev_id, 'prev')
|
||
new Viewer($("#lscxk .detail .single.current .floor-2 img")[0], {
|
||
url: 'data-original'
|
||
,toolbar: false
|
||
,title: false
|
||
,rotatable: false
|
||
,backdrop: false // 点击非图片层关闭
|
||
,viewed: function(event) {
|
||
USetWatermark({
|
||
el: $(event.detail.image),
|
||
is_sy: watermark_data.is_sy,
|
||
text: watermark_data.username,
|
||
font_size: 64
|
||
})
|
||
}
|
||
})
|
||
setCurrentEchart(prev_id)
|
||
})
|
||
}
|
||
function loadNewLscxkWithNext() {
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
const next_id = $("#lscxk .detail .single.next").attr("data-id")
|
||
,current_id = $("#lscxk .detail .single.current").attr("data-id")
|
||
// $("#lscxk .detail .single").first().remove()
|
||
$("#lscxk .detail .single.prev").html($("#lscxk .detail .single.current").html()).attr("data-id", current_id)
|
||
$("#lscxk .detail .single.current").html($("#lscxk .detail .single.next").html()).attr("data-id", next_id)
|
||
$("#lscxk .detail").css("transform", "")
|
||
$("#lscxk .btn-prev").attr("href", "javascript: toPageDetailWithLscxk('prev')").removeClass("layui-disabled")
|
||
fillDetailWithSingleLscxk(next_id, 'next')
|
||
new Viewer($("#lscxk .detail .single.current .floor-2 img")[0], {
|
||
url: 'data-original'
|
||
,toolbar: false
|
||
,title: false
|
||
,rotatable: false
|
||
,backdrop: false // 点击非图片层关闭
|
||
,viewed: function(event) {
|
||
USetWatermark({
|
||
el: $(event.detail.image),
|
||
is_sy: watermark_data.is_sy,
|
||
text: watermark_data.username,
|
||
font_size: 64
|
||
})
|
||
}
|
||
})
|
||
setCurrentEchart(next_id)
|
||
})
|
||
}
|
||
// 鼠标拖动：移动中
|
||
function moveDetailWithLscxk() {
|
||
event.preventDefault()
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
const current_tarnsform = $("#lscxk .detail").css("transform")
|
||
,current_translate_x = parseInt(current_tarnsform.slice(7, current_tarnsform.length - 1).split(', ')[4])
|
||
,translate_x = current_translate_x + event.movementX
|
||
|
||
$("#lscxk .detail").css("transform", "translateX("+translate_x+"px)")
|
||
// console.log("move: ", event)
|
||
})
|
||
}
|
||
// 手指拖动：移动中
|
||
function touchMoveDetailWithLscxk() {
|
||
event.preventDefault()
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
const current_page_x = event.pageX
|
||
,difference = current_page_x - original_lscxk_detail_offset_left
|
||
,current_tarnsform = $("#lscxk .detail").css("transform")
|
||
var translate_x = window.innerWidth*-1 + difference
|
||
$("#lscxk .detail").css("transform", "translateX("+translate_x+"px)")
|
||
// console.log("touch move: ", event)
|
||
touchmoving = true
|
||
})
|
||
}
|
||
// 拖动后归位动画
|
||
function animateWithAfterMove1() {
|
||
layui.use("jquery", function() {
|
||
const $ = layui.jquery
|
||
|
||
const current_tarnsform = $("#lscxk .detail").css("transform")
|
||
//------ 如果上一款/下一款不存在（data-id===-1），则由动画回到当前款
|
||
,prev_data_id = $("#lscxk .detail .single:first-child").attr("data-id")
|
||
,next_data_id = $("#lscxk .detail .single:last-child").attr("data-id")
|
||
,current_translate_x = parseInt(current_tarnsform.slice(7, current_tarnsform.length - 1).split(', ')[4])
|
||
,fff = 1 / 4 // 当拖动距离超过页面宽度的fff时，进行归位动画时就会进入下一款/上一款
|
||
,displacement = (function(current_translate_x) {
|
||
// console.log(current_translate_x, -1*window.innerWidth, -1 * (1 - fff) * window.innerWidth, -1 * (1 + fff) * window.innerWidth)
|
||
if (prev_data_id != "-1" && current_translate_x > -1 * (1 - fff) * window.innerWidth) {
|
||
return current_translate_x - 0 * window.innerWidth
|
||
} else if (next_data_id != "-1" && current_translate_x < -1 * (1 + fff) * window.innerWidth) {
|
||
return current_translate_x - -2 * window.innerWidth
|
||
} else {
|
||
return current_translate_x - -1 * window.innerWidth
|
||
}
|
||
})(current_translate_x)
|
||
universalMoveAnimate({
|
||
duration: 500,
|
||
timing: function(timeFraction) {
|
||
return timeFraction;
|
||
},
|
||
draw: function(progress) {
|
||
$("#lscxk .detail").css("transform", "translateX("+(current_translate_x-displacement*progress)+"px)")
|
||
},
|
||
complete: function() {
|
||
const new_transform = $("#lscxk .detail").css("transform")
|
||
,new_translate_x = parseInt(new_transform.slice(7, new_transform.length - 1).split(', ')[4])
|
||
if (new_translate_x == 0) {
|
||
loadNewLscxkWithPrev()
|
||
} else if (new_translate_x == window.innerWidth * -2) {
|
||
loadNewLscxkWithNext()
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
// end 拖动后归位动画
|
||
// end 历史畅销款
|
||
|
||
// 设置当前页的图表
|
||
function setCurrentEchart(id) {
|
||
// 柱状图
|
||
// 图表: 柱状图
|
||
var xAxis = []
|
||
,series = []
|
||
,currentEchartData = echartsData[id]
|
||
for (var i = 0; i < currentEchartData.length; i++) {
|
||
xAxis.push(currentEchartData[i].title)
|
||
series.push(currentEchartData[i].val)
|
||
}
|
||
// 绘制图表
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var echartElem = $('.single.current .echart')[0]
|
||
if (echartElem) {
|
||
if (echartObj) echartObj.dispose() // 摧毁旧实例
|
||
echartObj = echarts.init(echartElem); // 公共静态变量
|
||
|
||
// 指定图表的配置项和数据
|
||
const option = {
|
||
title: {
|
||
text: ''
|
||
},
|
||
color: ['#376FF6'],
|
||
tooltip: {
|
||
formatter: function(parm) {
|
||
return parm.seriesName+parm.name+": "+parm.data
|
||
}
|
||
},
|
||
legend: {},
|
||
xAxis: {
|
||
data: xAxis,
|
||
axisLine: {show: false},
|
||
axisTick: {show: false},
|
||
splitLine:{show:false},
|
||
boundaryGap: false,
|
||
},
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: false,
|
||
textStyle: {
|
||
fontSize: 16
|
||
},
|
||
},
|
||
axisLine: {show: false},
|
||
splitLine:{ show:false} ,
|
||
axisTick:{ //y轴刻度线
|
||
show:false
|
||
},
|
||
}],
|
||
series: {
|
||
name: "",
|
||
type: "bar",
|
||
data: series,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: function(param) {
|
||
return param.value+"%"
|
||
}
|
||
}
|
||
}
|
||
} // 在柱形上显示数值
|
||
}
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
echartObj.setOption(option);
|
||
}
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |