This repository has been archived on 2026-06-20. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
EDT/iphone/zdb_lxdhfa.htm
wsh5485 7e47ce238b chore: 添加多个图片和资源文件
添加了管理后台所需的图片资源、Excel文件、安装程序以及设计相关的图片文件
2025-06-15 13:04:37 +08:00

509 lines
20 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 and (max-width: 600px) {
/* 通用 */
.layui-nav .layui-nav-item a { padding: 0 8px;}
}
.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; }
/* 理想订货方案 */
#lxdhfa .header { display: none; }
#lxdhfa .detail { font-size: 20px; }
#lxdhfa .detail .dhl { width: 100%; display: flex; }
#lxdhfa .detail .dhl .single { width: 100%; flex-shrink: 0; }
#lxdhfa .detail .dhl .single .title { width: 90%; margin: auto; }
#lxdhfa .detail .dhl .single .cl { margin: auto; width: 90%; }
#lxdhfa .detail .dhl .single .cl .img img { max-width: 400px; max-height: 300px; }
#lxdhfa .detail .dhl .single .cl .remark>span { display: block; margin: 16px; }
#lxdhfa .detail .dhl .single .dks { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; width: 90%; margin: auto; }
#lxdhfa .detail .dhl .single .dks>div { display: inline-block; vertical-align: top; margin-top: 16px; width: 50%; }
#lxdhfa .detail .dhl .single .dks .floor-1 { position: relative; }
#lxdhfa .detail .dhl .single .dks .floor-1 .img>a { display: block; cursor: pointer; }
#lxdhfa .detail .dhl .single .dks .floor-1 .ydjs { position: absolute; top: 0; left: 0; color: red; border: 1px solid red; padding: 2px; text-align: center; }
#lxdhfa .detail .dhl .single .dks .floor-2 { margin: 8px 0; }
#lxdhfa .detail .dhl .single .dks .floor-3>div { margin: 4px 0; display: block; height: 26px; }
#lxdhfa .detail .dhl .single .dks .floor-3 .text { color: red; border: 1px solid red; padding: 2px 4px; margin-left: 8px; }
/* 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="lxdhfa" 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="menus">
<a href="javascript: showLxdhfaDetail('zb')" class="zb layui-icon show-this">总表</a>
<a href="javascript: showLxdhfaDetail('dhl')" class="dhl layui-icon">订货量</a>
</div> -->
<div class="header">
<div style="float: left; height: 38px; line-height: 38px;"><a href="javascript: showDhl('prev')" class="btn-prev" style="cursor: pointer;">◀︎ 上一款</a></div>
<div style="float: right; height: 38px; line-height: 38px;"><a href="javascript: showDhl('next')" class="btn-next" style="cursor: pointer;">下一款 ▶︎</a></div>
</div>
<div class="detail">
<div class="zb"></div>
<div class="title"></div>
<div class="dhl"></div>
</div>
</div>
</div></div>
<div class="hidden-items">
<input id="uid" value="">
<input id="face" value="">
</div>
<script>
{ // 水印相关
watermark_data = {
is_sy: "y"
,username: "这里是水印"
}
}
{
var globalGanData = {}
,currentIndex = 0
}
{
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
}
showLxdhfaDetail('dhl')
}
}
,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())
})
//---------- 理想订货方案
var lxdhfa_dhl_elem = $("#lxdhfa .detail .dhl")[0]
lxdhfa_dhl_elem.addEventListener("animationend",function(e){ // 点击下一杆、上一杆产生的动画
if ($(this).hasClass("animation-move-to-left")) {
$(this).css("transform", "")
$(this).find(".single").last().remove()
} else if ($(this).hasClass("animation-with-lxdhfa-move-to-right")) {
$(this).find(".single").first().remove()
}
$(this).removeClass("animation-move-to-left animation-with-lxdhfa-move-to-right")
new Viewer($("#lxdhfa .detail .single .cl")[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
})
}
})
})
//---------- end 理想订货方案
$(window).on("orientationchange",function(){
$(self.frameElement).parents(".layui-layer-iframe").css({
"width": "100%",
"height": "100%",
"top": "0",
"left": "0"
})
})
// $(self.frameElement).parents(".layui-layer-iframe").on("resize", function() {
// // safari中iframe内的页面宽度会莫名其妙多一点出来,此处强制将本页宽度修正
// // $(".page-box").width($(self.frameElement).parents(".layui-layer-iframe").width())
// // 修复iphone端,点击按钮时自动滚到页面顶部以及附带的其他一些问题
// // $(".page-box").height($(self.frameElement).parents(".layui-layer-iframe").height())
// // 将iframe的高度同步为其父元素.layui-layer-iframe的高度
// var window_name = window.name
// // $(this).find("[name="+window_name+"]").height($(this).height())
// })
}) // 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 showLxdhfaDetail(menu, complete) {
layui.use(["jquery"], function() {
const $ = layui.jquery
if ($("#lxdhfa .menus ."+menu).hasClass("show-this")) return true
$("#lxdhfa .menus .show-this").removeClass("show-this")
$("#lxdhfa .menus ."+menu).addClass("show-this")
if (menu === "zb") {
showZb(complete)
$("#lxdhfa .detail .zb").show()
$("#lxdhfa .header").hide()
$("#lxdhfa .detail .dhl").hide()
} else if (menu === "dhl") {
showDhl('', complete)
$("#lxdhfa .detail .zb").hide()
$("#lxdhfa .header").show()
$("#lxdhfa .detail .dhl").show()
}
})
}
// 展示总表
function showZb(complete_params) {
if(complete_params && complete_params.complete) complete_params.complete(complete_params.index)
}
// end 展示总表
// 展示订货量
function showDhl(direction, complete_params) {
layui.use(["jquery", "table"], function() {
const $ = layui.jquery
direction = direction ? direction : ''
const zsh = $("#lxdhfa .detail .dhl").attr("data-zsh") ? $("#lxdhfa .detail .dhl").attr("data-zsh") : ''
if (!direction || (direction === 'prev' && currentIndex === 0) || (direction === 'next' && currentIndex === globalGanData.dks.length - 1) ) { // 获取新杆数据
$.ajax({
url: "./?_m=zdb&_a=lxdh&direction="+direction+"&zsh="+zsh
,success: function(res) {
const json_data = $.parseJSON(res)
console.log("订货量", json_data)
if (json_data.code === 0) {
layui.layer.msg(json_data.msg ? json_data.msg : "无法显示更多")
return true
}
if (json_data.cldata.zsh === "-1") {
layer.msg("没有更多了")
return
}
globalGanData = json_data.cldata
currentIndex = 0
fillContent({
pic: globalGanData.pic
,pic_w: globalGanData.pic_w
,pic_h: globalGanData.pic_h
,pic_remark: globalGanData.pic_remark
,zsh: globalGanData.zsh
}, globalGanData.dks[currentIndex], direction, complete_params)
}
,beforeSend: function() { u_start_loading() }
,complete: function() { u_stop_loading() }
})
} else { // 在当前杆下单款轮换
if (direction === 'prev') currentIndex--
else if (direction === 'next') currentIndex++
fillContent({
pic: globalGanData.pic
,pic_w: globalGanData.pic_w
,pic_h: globalGanData.pic_h
,pic_remark: globalGanData.pic_remark
,zsh: globalGanData.zsh
}, globalGanData.dks[currentIndex], direction, complete_params)
}
})
}
function openDksingle(khid) {
layui.use(['layer', 'jquery'], function(){
const layer = parent.layer
,$ = layui.jquery
const face = $("#face").val()
,url = face == '2' ? "dk_single_qj.htm" : "dk_single.htm"
layer.open({
type: 2,
title: '',
content: url+"?khid="+khid,
offset: 'b',
closeBtn: 0,
anim: 2
,success: function(layero, index) {
layer.full(index);
}
});
});
}
// end 展示订货量
// 已订更新
function update_yd(khid) {
layui.use(['jquery'], function(){
const $ = layui.jquery
const clienID = $("#uid").val()
,khcolor = $("#lxdhfa .detail .dhl .dks [data-khid="+khid+"] .floor-4 .color").val()
$.ajax({
url: "./?_m=zdb&_a=get_order_num&clienID="+clienID+"&khid="+khid+"&khcolor="+khcolor
,success: function(res) {
const json_data = $.parseJSON(res)
console.log("update yd", json_data)
if (json_data.code === "1") {
const ydjs = json_data.js
var ydjs_elem = $("#lxdhfa .detail .dhl .dks [data-khid="+khid+"] .floor-1 .ydjs")
if (ydjs) {
if (ydjs_elem.length < 1) $("#lxdhfa .detail .dhl .dks [data-khid="+khid+"] .floor-1").append('<div class="ydjs"><span>'+ydjs+'</span></div>')
else ydjs_elem.html('<span>'+ydjs+'</span>')
} else {
ydjs_elem.remove()
}
}
}
})
});
}
function fillContent(clData, dkData, direction, complete_params) {
console.log('fill content', clData, dkData)
$("#lxdhfa .detail .dhl").attr({"data-zsh": clData.zsh, "data-khid": dkData.khid})
if (direction === "prev") {
$("#lxdhfa .detail .dhl").prepend('<div class="single"></div>')
$("#lxdhfa .detail .dhl").css('transform', "translateX(-100%)")
} else if (direction === "next") {
$("#lxdhfa .detail .dhl").append('<div class="single"></div>')
} else {
$("#lxdhfa .detail .dhl").html('<div class="single"></div>')
}
var dhl_html = ''
dhl_html += '<div class="title">'
dhl_html += '<div style="display: inline-block; vertical-align: middle; margin-right: 48px;">'
dhl_html += '<div style="display: inline-block; vertical-align: middle; font-size: 12px; border-radius: 50%; border: 1px solid #ccc; width: 48px; height: 48px; line-height: 48px; margin-right: 8px;">'+dkData.khzd1+'</div><div style="display: inline-block; vertical-align: middle; font-size: 20px;">波段</div>'
dhl_html += '</div>'
dhl_html += '<div style="display: inline-block; vertical-align: middle; margin-right: 48px;">'
dhl_html += '<div style="font-size: 20px;">挂杆</div><div style="border-radius: 50%; border: 1px solid #ccc; width: 36px; height: 36px; line-height: 36px; margin-top: 8px;">'+clData.zsh+'</div>'
dhl_html += '</div>'
dhl_html += '<div style="display: inline-block; vertical-align: middle;">'
dhl_html += '<div><div style="display: inline-block; vertical-align: middle; font-size: 20px; width: 20px; margin-right: 8px;">系列</div><div style="display: inline-block; vertical-align: middle; border: 1px solid #ccc; padding: 4px 16px; border-radius: 8px;">'+dkData.khzd2+'</div></div>'
dhl_html += '<div style="margin-top: 8px;"><div style="display: inline-block; vertical-align: middle; font-size: 20px; width: 20px; margin-right: 8px;">主题</div><div style="display: inline-block; vertical-align: middle; border: 1px solid #ccc; padding: 4px 16px; border-radius: 8px;">'+dkData.khzd3+'</div></div>'
dhl_html += '</div>'
dhl_html += '</div>'
dhl_html += '<div class="cl">'
dhl_html += '<div class="img"><img src="'+clData.pic+'" onerror="noImg(this)" style="max-width: 100%; border-radius: 12px;" watermark></div>'
dhl_html += '<div class="remark"><span>'+clData.pic_remark+'</span></div>'
dhl_html += '</div>'
dhl_html += '<div class="dks">'
dhl_html += '<div>'
dhl_html += '<div>'
dhl_html += '<span style="margin-right: 16px; font-size: 20px;">推荐订货量</span><span style="border: 1px solid #ccc; padding: 4px 8px; border-radius: 8px; margin-right: 8px;">'+dkData.tjdhl+'</span><span style="margin-right: 8px;">~</span><span style="border: 1px solid #ccc; padding: 4px 8px; border-radius: 8px;">'+dkData.tjdhl1+'</span>'
dhl_html += '</div>'
dhl_html += '<div class="img" style="margin-top: 16px;">'
dhl_html += '<a href="javascript: openDksingle(\''+dkData.khid+'\')" style="display: block;"><img src="'+dkData.pic+'" onerror="noImg(this)" style="max-width: 100%;" watermark></a>'
dhl_html += '</div>'
dhl_html += '<div>'
dhl_html += '<span style="margin-right: 16px; font-size: 20px;">品名</span><span style="border: 1px solid #ccc; padding: 4px 16px; border-radius: 8px;">'+dkData.pl+'</span>'
dhl_html += '</div>'
dhl_html += '</div>'
dhl_html += '<div>'
dhl_html += '<div><span style="margin-right: 16px; font-size: 20px;">推荐贡献指数</span><span style="border: 1px solid #ccc; border-radius: 8px; padding: 4px 16px;">'+dkData.ycgxd+'</span></div>'
dhl_html += '<div style="margin-top: 16px; height: 286px; margin-bottom: 16px;">'
for (var i = 1; i <= 10; i++) {
if (dkData['zd'+i]) {
dhl_html += '<div style="display: inline-block; vertical-align: middle; width: 50%; float: left; margin-top: 16px;"><span style="border: 1px solid #ccc; border-radius: 8px; padding: 4px 16px; width: 68px; display: block; margin: auto;">'+dkData['zd'+i]+'</span></div>'
}
}
dhl_html += '</div>'
dhl_html += '</div>'
dhl_html += '</div>'
if (direction === "prev") {
$("#lxdhfa .detail .dhl .single").first().html(dhl_html)
$("#lxdhfa .detail .dhl").addClass("animation-move-to-left")
} else if (direction === "next") {
$("#lxdhfa .detail .dhl .single").last().html(dhl_html)
$("#lxdhfa .detail .dhl").addClass("animation-with-lxdhfa-move-to-right")
} else {
$("#lxdhfa .detail .dhl .single").html(dhl_html)
}
new Viewer($("#lxdhfa .detail .single .cl")[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
})
}
})
USetWatermark({
el: $("#lxdhfa"),
is_sy: watermark_data.is_sy,
text: watermark_data.username,
// mode: "outer"
})
if(complete_params && complete_params.complete) complete_params.complete(complete_params.index)
}
// end 理想订货方案
</script>
</body>
</html>