324 lines
14 KiB
HTML
324 lines
14 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>
|
||
/* 监听body点击冒泡，iOS没有该属性无法监听 */
|
||
body { cursor:pointer }
|
||
.pcki-page {overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
|
||
#content #info .title{color: #9b9b9b; text-align: right;}
|
||
#content #info .text{font-weight: bold; text-align: left;}
|
||
#dds td { padding: 1px; }
|
||
#dds .dd-row input { max-width: 80px; margin: auto; }
|
||
.div_input_remark {margin-bottom: 10px;}
|
||
.div_save_remark {width:80px; padding:4px; display: inline-block;}
|
||
.div_button_del_pj {padding: 4px; display: inline-block;}
|
||
#layui-layer-dpm-show .layui-form-radio {margin: 0;}
|
||
#layui-layer-dpm-show .layui-layer-btn {display: none;}
|
||
</style>
|
||
<!-- 引入 -->
|
||
|
||
<!-- jquery -->
|
||
<script src="js/jquery.min.js"></script>
|
||
|
||
<script src="layuiadmin/layui/layui.js"></script>
|
||
<script src="js/function.js"></script>
|
||
<!-- universal -->
|
||
<script src="js/universal/universal.js"></script>
|
||
<link rel="stylesheet" href="js/universal/universal.css">
|
||
<!-- p_custom_keyboard js -->
|
||
<script src="js/p_custom_keyboard/p_custom_keyboard.js"></script>
|
||
<link rel="stylesheet" href="js/p_custom_keyboard/p_custom_keyboard.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="pcki-page">
|
||
<div class="state_bar">
|
||
<div class="text_title">我的计划</div>
|
||
<div class="btn_close" onclick="u_close_this_div();"><img src="images/close.png" width=30 height=30 border=0></div>
|
||
</div>
|
||
|
||
<form class="layui-form">
|
||
<div style="margin: 10px auto; text-align: left; padding: 0 10px;">
|
||
<span style="display: inline-block; vertical-align: middle; margin-left: 10px;">预计本次货品分</span>
|
||
<span style="display: inline-block; vertical-align: middle; width: 50px;"><input id="plan-number" type="number" name="plan_number"class="layui-input" style="height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px;" readonly="readonly"></span>
|
||
<span style="display: inline-block; vertical-align: middle;">次上市</span>
|
||
<span style="display: inline-block; vertical-align: middle;"><button type="button" id="btn_sub_select" class="layui-btn" style="background-color:#262428;">添加计划</button></span>
|
||
</div>
|
||
|
||
<div id="plans">
|
||
|
||
</div>
|
||
|
||
<div>
|
||
<button lay-submit lay-filter="plan-submit" class="layui-btn layui-btn-sm" style="background-color: #F04122; margin: 10px auto; width: 75px;">完成</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
/*var plans = [
|
||
{no: "1", date: "2019年08月26日", color_number: 15}
|
||
,{no: "2", date: "2019年08月26日", color_number: 15}
|
||
]*/
|
||
var global_plan_sliders = {}
|
||
,global_last_no = 0
|
||
,slider_max = 1
|
||
|
||
|
||
layui.config({
|
||
base: './layuiadmin/'
|
||
}).extend({
|
||
index: 'lib/index'
|
||
}).use(['index', 'user','element', 'table', 'slider'], function(){
|
||
var $ = layui.$
|
||
,setter = layui.setter
|
||
,admin = layui.admin
|
||
,form = layui.form
|
||
,slider = layui.slider
|
||
|
||
$.ajax(
|
||
{
|
||
url:"./?_m=spdh&_a=wdjh",
|
||
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])
|
||
// safari中iframe内的页面宽度会莫名其妙多一点出来，此处强制将本页宽度修正
|
||
$(".pcki-page").width($(self.frameElement).parents(".layui-layer-iframe").width())
|
||
// 修复iphone端，点击按钮时自动滚到页面顶部以及附带的其他一些问题
|
||
$(".pcki-page").height($(self.frameElement).parents(".layui-layer-iframe").height())
|
||
|
||
$("#plan-number").val(json_data.pcsl)
|
||
var plans = json_data.plan
|
||
slider_max = json_data.slider_max
|
||
// setPlans(plans)
|
||
for (var i = 0; i < plans.length; i++) {
|
||
setPlan(plans[i])
|
||
}
|
||
}
|
||
}
|
||
,beforeSend: function() { u_start_loading() }
|
||
,complete: function() { u_stop_loading() }
|
||
,error: function () { layui.layer.msg("与服务器通信失败！") }
|
||
}
|
||
)
|
||
$("#btn_sub_select").click(function(){
|
||
setPlan({no: "", date: "", color_number: 1})
|
||
$("#plan-number").val(parseInt($("#plan-number").val() ? $("#plan-number").val() : "0")+1)
|
||
})
|
||
|
||
form.on('submit(plan-submit)', function(data) {
|
||
var str="";
|
||
$("#plans .dd-row").each(function(row_i) {
|
||
str+=$(this).find(".planid").val()
|
||
str+="_"
|
||
str+=$(this).find(".-laydate").val()
|
||
str+="_"
|
||
str+=$(this).find(".kss").val()
|
||
str+="|"
|
||
})
|
||
console.log(str)
|
||
var url="./?_m=spdh&_a=wdjh_save&data="+str;
|
||
$.ajax({
|
||
url: url
|
||
,method: "POST"
|
||
,success: function(res) {
|
||
var res_jsondata = $.parseJSON(res)
|
||
console.log(["反馈", res_jsondata])
|
||
if (res_jsondata.code == 101) {
|
||
if (res_jsondata.msg) layui.layer.msg(res_jsondata.msg)
|
||
else layui.layer.msg("操作成功。")
|
||
// 所有iframe都应该统一为main.htm的一级子iframe
|
||
$("iframe", top.document).each(function(index) {
|
||
if ($(this).attr("name") != window.name && typeof $(this)[0].contentWindow.update_reload == "function")
|
||
$(this)[0].contentWindow.update_reload()
|
||
})
|
||
u_close_this_div()
|
||
} else {
|
||
if (res_jsondata.msg) layui.layer.msg(res_jsondata.msg)
|
||
else layui.layer.msg("操作失败！")
|
||
}
|
||
}
|
||
,beforeSend: function() { u_start_loading() }
|
||
,complete: function() { u_stop_loading() }
|
||
, error: function() { layui.layer.msg("与服务器通信失败！") }
|
||
})
|
||
return false
|
||
})
|
||
$("#plans .-laydate").on("input",function(e){
|
||
//获取input输入的值
|
||
console.log(e.delegateTarget.value);
|
||
});
|
||
|
||
// 屏幕旋转时重置部分元素的方位与尺寸
|
||
$(window).resize(function() {
|
||
$("#layui-layer-dpm-show").css({
|
||
top: ((window.innerHeight - 250) / 2)+'px',
|
||
left: (window.innerWidth*0.05)+'px',
|
||
width: (window.innerWidth*0.9)+'px'
|
||
})
|
||
})
|
||
$(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内的页面宽度会莫名其妙多一点出来，此处强制将本页宽度修正
|
||
$(".pcki-page").width($(self.frameElement).parents(".layui-layer-iframe").width())
|
||
// 修复iphone端，点击按钮时自动滚到页面顶部以及附带的其他一些问题
|
||
$(".pcki-page").height($(self.frameElement).parents(".layui-layer-iframe").height())
|
||
})
|
||
|
||
if(admin.screen()<2)
|
||
is_mobile="y";
|
||
$(window).on('resize', function(){
|
||
//自动
|
||
if(admin.screen()<2)
|
||
is_mobile="y"
|
||
})
|
||
|
||
}) // end layui
|
||
|
||
function setPlan(plan) {
|
||
layui.use(['slider', 'laydate'], function() {
|
||
var $ = layui.$
|
||
,slider = layui.slider
|
||
,laydate = layui.laydate
|
||
|
||
global_last_no += 1
|
||
var plan_elem = ""
|
||
|
||
plan_elem += '<div id="plan-'+global_last_no+'" class="dd-row" style="margin: 10px auto; text-align: left; padding: 0 10px;">'
|
||
plan_elem += '<span style="display: inline-block; vertical-align: middle;"><input type="hidden" class="planid" value="'+plan.id+'"></span>'
|
||
plan_elem += '<span style="display: inline-block; vertical-align: middle; width: 130px; margin-left: 10px;"><input type="text" name="plan_'+global_last_no+'_date" id="plan_'+global_last_no+'_date" class="layui-input -laydate" readonly="readonly" style="height: 30px; line-height: 30px; text-align: center; padding-right: 10px;"></span>'
|
||
plan_elem += '<span style="display: inline-block; vertical-align: middle; middle; margin: auto 10px;">计划上</span>'
|
||
plan_elem += '<span class="-slider" name="plan_'+global_last_no+'_color_number" style="display: inline-block; vertical-align: middle; width: 300px;"></span>'
|
||
plan_elem += '<span class="-input" style="display: inline-block; vertical-align: middle; width: 50px; margin-left: 12px;"><input type="number" name="plan_'+global_last_no+'_color_number" class="layui-input kss"></span>'
|
||
plan_elem += '<span style="display: inline-block; vertical-align: middle; middle; margin: auto 10px;">款色</span>'
|
||
plan_elem += '<span style="display: inline-block; vertical-align: middle; middle; margin: auto 10px;"><a href="javascript: deletePlan('+global_last_no+');" class="layui-btn layui-btn-primary layui-btn-sm" style="border-color: #F04122; color: #F04122;">删除该计划</a></span>'
|
||
plan_elem += '</div>'
|
||
|
||
$("#plans").append(plan_elem)
|
||
|
||
var date = plan.date.split("-")
|
||
laydate.render({
|
||
elem: "#plan-"+global_last_no+" .-laydate"
|
||
,format: 'yyyy-MM-dd'
|
||
,value: plan.date
|
||
,showBottom: false
|
||
})
|
||
var plan_slider = slider.render({ // 初始化slide
|
||
elem: "#plan-"+global_last_no+" .-slider"
|
||
,min: 1
|
||
,max: slider_max
|
||
// ,input: true
|
||
,step: 1
|
||
,value: parseInt(plan.color_number ? plan.color_number : "1")
|
||
,theme: "#F04122"
|
||
,change: function(value){
|
||
$(this.elem).parents(".dd-row").find(".-input input").val(value)
|
||
}
|
||
})
|
||
global_plan_sliders[global_last_no] = plan_slider
|
||
|
||
$("#plan-"+global_last_no+" .-input input").val(plan.color_number)
|
||
|
||
var obj = $("#plan-"+global_last_no+" .-slider .layui-slider .layui-slider-wrap")[0]
|
||
obj.addEventListener('touchmove', function(event) {
|
||
// 如果这个元素的位置内只有一个手指的话
|
||
if (event.targetTouches.length == 1) {
|
||
event.preventDefault();// 阻止浏览器默认事件，重要
|
||
var touch = event.targetTouches[0];
|
||
// 把元素放在手指所在的位置
|
||
|
||
var left = touch.pageX - $(this).parent().offset().left
|
||
,slider_width = $(this).parent().width()
|
||
|
||
if (left < 0) left = 0
|
||
else if (left > slider_width) left = slider_width
|
||
|
||
var rate = left / slider_width
|
||
,value = parseInt(rate * (slider_max - 1)) // value = rate * (max - min)
|
||
,no = parseInt($(this).parents(".dd-row").attr("id").split("-")[1])
|
||
,plan_slider = global_plan_sliders[no]
|
||
plan_slider.setValue(value)
|
||
}
|
||
}, false)
|
||
|
||
$("#plan-"+global_last_no+" .-input input").change(function() {
|
||
var no = parseInt($(this).parents(".dd-row").attr("id").split("-")[1])
|
||
,value = parseInt($(this).val()) - 1
|
||
if (value < 0) value = 0
|
||
global_plan_sliders[no].setValue(value)
|
||
})
|
||
})
|
||
}
|
||
function deletePlan(no) {
|
||
var plan_id = $("#plan-"+no+" .planid").val()
|
||
if(plan_id != "undefined"){
|
||
if (confirm("删除该计划将会清除对应计划选择的款，是否删除？")) {
|
||
var url="./?_m=spdh&_a=wdjh_del&id="+plan_id;
|
||
$.ajax({
|
||
url: url
|
||
,method: "POST"
|
||
,success: function(res) {
|
||
var res_jsondata = $.parseJSON(res)
|
||
console.log(["反馈", res_jsondata])
|
||
if (res_jsondata.code == 101) {
|
||
if (res_jsondata.msg) layui.layer.msg(res_jsondata.msg)
|
||
else layui.layer.msg("操作成功。")
|
||
|
||
} else {
|
||
if (res_jsondata.msg) layui.layer.msg(res_jsondata.msg)
|
||
else layui.layer.msg("操作失败！")
|
||
}
|
||
}
|
||
,beforeSend: function() { u_start_loading() }
|
||
,complete: function() { u_stop_loading() }
|
||
, error: function() { layui.layer.msg("与服务器通信失败！") }
|
||
})
|
||
$("#plan-number").val(parseInt($("#plan-number").val() ? $("#plan-number").val() : "0") - 1)
|
||
$("#plan-"+no).remove()
|
||
delete global_plan_sliders[no]
|
||
}
|
||
}else{
|
||
$("#plan-number").val(parseInt($("#plan-number").val() ? $("#plan-number").val() : "0") - 1)
|
||
$("#plan-"+no).remove()
|
||
delete global_plan_sliders[no]
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |