435 lines
14 KiB
HTML
435 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">
|
|
<script src="layuiadmin/layui/layui.js"></script>
|
|
<script src="js/function.js"></script>
|
|
<script>
|
|
function u_close_this_div(){
|
|
layui.use('layer', function(){
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(index);
|
|
});
|
|
}
|
|
</script>
|
|
<style>
|
|
/*自由搭配 样式*/
|
|
.dress_div{
|
|
position:absolute;top:58px;left:0px;
|
|
}
|
|
.dress_div_yc{
|
|
position:relative;border:1px solid #cccccc;float:left;margin:2px;text-align:center;
|
|
}
|
|
/* 顶部标题栏 */
|
|
.state_bar {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #eee;
|
|
margin-bottom: 10px;
|
|
}
|
|
.state_bar .text_title {
|
|
width: 100px;
|
|
float: left;
|
|
font-size: 16px;
|
|
}
|
|
.state_bar .btn_close {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
float: right;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
/* 顶部操作栏 */
|
|
</style>
|
|
|
|
</head>
|
|
<body style="background-color:#fff;">
|
|
<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>
|
|
<div class="layui-fluid" style="padding:0;">
|
|
<div class="layui-row" id="searh_zydp" style="margin-top:10px;">
|
|
<form method="post" name="form1" id="form1" class="layui-form">
|
|
<input type="hidden" name="_a" value="save" />
|
|
<input type="hidden" id="str_yc" name="str_yc" value="" />
|
|
<input type="hidden" id="zsh" name="zsh" value="" />
|
|
<input type="hidden" id="remark" name="remark" value="" />
|
|
<div class="layui-input-inline">搭配号</div>
|
|
<div class="layui-input-inline" id="divdph"><input type="text" class="layui-input" style="width:100px" id="dph" name="dph" value=""></div>
|
|
<div class="layui-input-inline"><a class="layui-btn layui-btn-normal" href="javascript:void(0);" lay-submit lay-filter="form1_submit">保 存</a></div>
|
|
</form>
|
|
</div><hr>
|
|
<div class="layui-row" id="content_zydp">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td width="280" height="420" id="div_mt"><div id="mt" style="z-index:1;"><img id="mtpic" src=""></div></td>
|
|
<td width="110" valign="top" align="center"><div><textarea name="text_remark" id="text_remark" rows="20" style="width:108px;" placeholder="文字说明"></textarea></div></td>
|
|
<td valign="top">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
<tr><td align="left"><img src="images/button_ycfz.png" width="110" height="30"></td></tr>
|
|
<tr><td align="left" id="div_yc"></td></tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div><hr>
|
|
<div class="layui-row" id="searh_zydp2">
|
|
<form action="./?_m=zydp&_a=kh_list" method="post" name="form2" id="form2" class="layui-form" onsubmit="return true;" target="kh_list_frame">
|
|
<div class="layui-input-inline" style="float:left;margin-left:5px;"><input class="layui-input" type="text" placeholder="圆牌号" style="width:100px" id="s_xh" name="s_xh" value="" /> </div>
|
|
<div class="layui-input-inline" style="float:left;margin-left:5px;" id="search_after"><input class="layui-input" type="text" placeholder="款号" style="width:100px" id="s_no" name="s_no" value="" /> </div>
|
|
<div class="layui-input-inline" style="float:left;margin-left:5px;"><input class="layui-btn" id="s_search" name="s_search" type="submit" value="搜索"></div>
|
|
<div class="layui-input-inline" style="float:left;margin-left:5px;line-height:38px;"><a class="layui-btn layui-btn-normal" href="javascript:void(0);" onclick="check_b('s_is_ordered');document.getElementById('form2').submit();" id="div_s_is_ordered">已订款</a><input type="hidden" id="s_is_ordered" name="s_is_ordered" value="n"></div>
|
|
</form>
|
|
<div>
|
|
<div class="layui-row" id="content_zydp_list" style="height:500px">
|
|
<iframe name="kh_list_frame" height="100%" scrolling="no" width="100%" frameborder="0" border="0" style="marging:0px;padding:0px;position: static;" src="./?_m=zydp&_a=kh_list"></iframe>
|
|
<div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var mt_pic="";
|
|
var str_yc="";
|
|
var pic_path_big="";
|
|
var pic_path_mini="";
|
|
var str_sp_dress_level="";
|
|
var tmpl_dp_my_pic_width="";
|
|
var tmpl_dp_my_pic_height="";
|
|
|
|
var is_mobile="n";
|
|
layui.config({
|
|
base: './layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['index','form','user','rate','element'], function(){
|
|
var $ = layui.$
|
|
,setter = layui.setter
|
|
,admin = layui.admin
|
|
,form = layui.form;
|
|
var rate = layui.rate;
|
|
var element = layui.element;
|
|
|
|
//取得url传递参数
|
|
var query_str=location.search.substring(1);
|
|
if(query_str)
|
|
query_str="&"+query_str;
|
|
var url="./?_m=zydp"+query_str;
|
|
$.ajax(
|
|
{
|
|
url:url,
|
|
contentType: "application/json",
|
|
method: 'POST',
|
|
success: function (res) {
|
|
var res=$.parseJSON(res);
|
|
$("#mtpic").attr('src',"../attachments/zydp/"+res.mt_pic);
|
|
//自定义选项
|
|
var html1="";
|
|
for(var i=0;i<res.select_zdy.length;i++){
|
|
html1+='<div class="layui-inline" style="width:100px;"><select name="'+res.select_zdy[i].no+'"><option value="">-'+res.select_zdy[i].title+'-</option>';
|
|
var op=res.select_zdy[i].op;
|
|
for(var j=0;j<op.length;j++){
|
|
html1+='<option value="'+op[j].no+'"';
|
|
if(op[j].no==res.select_zdy[i].value)
|
|
html1+='selected';
|
|
html1+='>'+op[j].title+'</option>';
|
|
}
|
|
html1+='</select></div>';
|
|
}
|
|
$("#divdph").after(html1);
|
|
//
|
|
var html1="";
|
|
for(var i=0;i<res.select_dz.length;i++){
|
|
html1+='<div class="layui-inline" style="float:left;margin-left:5px;width:100px;"><select name="'+res.select_dz[i].no+'"><option value="">-'+res.select_dz[i].title+'-</option>';
|
|
var op=res.select_dz[i].op;
|
|
for(var j=0;j<op.length;j++){
|
|
html1+='<option value="'+op[j].no+'"';
|
|
if(op[j].no==res.select_dz[i].value)
|
|
html1+='selected';
|
|
html1+='>'+op[j].title+'</option>';
|
|
}
|
|
html1+='</select></div>';
|
|
}
|
|
$("#search_after").after(html1);
|
|
$("#zsh").val(res.zsh);
|
|
$("#dph").val(res.dph);
|
|
$("#remark").val(res.remark);
|
|
$("#text_remark").val(res.remark);
|
|
$("#str_yc").val(res.str_yc);
|
|
form.render();
|
|
//全局赋值
|
|
mt_pic=res.mt_pic;
|
|
str_yc=res.str_yc;
|
|
pic_path_big=res.pic_path_big;
|
|
pic_path_mini=res.pic_path_mini;
|
|
str_sp_dress_level=res.str_sp_dress_level;
|
|
tmpl_dp_my_pic_width=res.tmpl_dp_my_pic_width;
|
|
tmpl_dp_my_pic_height=res.tmpl_dp_my_pic_height;
|
|
re_dress();
|
|
}
|
|
}
|
|
);
|
|
|
|
form.on("submit(form1_submit)",function(data){
|
|
if(str_yc){
|
|
document.getElementById("str_yc").value=str_yc;
|
|
document.getElementById("remark").value=document.getElementById("text_remark").value;
|
|
var data1 = $("#form1").serialize();
|
|
$.ajax(
|
|
{
|
|
url:"./?_m=zydp",
|
|
contentType: "application/json",
|
|
method: 'get',
|
|
data:data1,
|
|
success: function (res) {
|
|
var res=$.parseJSON(res);
|
|
if(res.cate=="saveback"){
|
|
parent.layui.layer.msg("保存成功!");
|
|
//parent.reload();
|
|
//location.href="zydp.htm";
|
|
parent.frames["layadmin-iframe"].location.reload();
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(index);
|
|
}
|
|
},
|
|
error: function () {
|
|
parent.layui.layer.msg("与服务器通信失败！");
|
|
}
|
|
});
|
|
return false;
|
|
}else{
|
|
parent.layui.layer.alert("没有任何数据！");
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
function check_b(n1){
|
|
var obj=document.getElementById(n1);
|
|
var obj1=document.getElementById("div_"+n1);
|
|
if(obj.value=="y"){
|
|
obj.value="n";
|
|
obj1.className="layui-btn layui-btn-normal";
|
|
}else{
|
|
obj.value="y";
|
|
obj1.className="layui-btn layui-btn-danger";
|
|
}
|
|
}
|
|
//穿上
|
|
function dress_up(l,pic,pic_prop,ks){
|
|
add_yc_str(l,pic,pic_prop,ks);
|
|
re_dress();
|
|
}
|
|
//脱掉
|
|
function dress_down(l){
|
|
del_yc_str(l);
|
|
re_dress();
|
|
}
|
|
//向里面移动一层
|
|
function dress_left(ind){
|
|
yd_yc_str(ind,"left");
|
|
re_dress();
|
|
}
|
|
//向外面移动一层
|
|
function dress_right(ind){
|
|
yd_yc_str(ind,"right");
|
|
re_dress();
|
|
}
|
|
//取得遮罩层
|
|
function get_zz_level(){
|
|
var arr_yc=str_yc.split(",");
|
|
var arr_sp_level=str_sp_dress_level.split(",");
|
|
var zz_level=0;
|
|
var arr_level=[];
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
arr_tmp=arr_yc[i].split("|");
|
|
if(in_array(arr_sp_level,arr_tmp[1])==-1)
|
|
arr_level[i]=arr_tmp[0];
|
|
}
|
|
if(arr_level.length>1)
|
|
zz_level=arr_level[arr_level.length-2];
|
|
return parseInt(zz_level);
|
|
}
|
|
//检查外面是否有衣服
|
|
function check_right_level(ind){
|
|
var r="n";
|
|
var arr_yc=str_yc.split(",");
|
|
var arr_ind=[];
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
arr_tmp=arr_yc[i].split("|");
|
|
arr_ind[i]=arr_tmp[0];
|
|
}
|
|
if(arr_ind[arr_ind.length-1]>ind)
|
|
r="y";
|
|
return r;
|
|
}
|
|
//检查里面是否有衣服
|
|
function check_left_level(ind){
|
|
var r="n";
|
|
if(ind>1)
|
|
r="y";
|
|
return r;
|
|
}
|
|
//
|
|
function re_dress(){
|
|
var obj_mt=document.getElementById("div_mt");
|
|
var obj_yc=document.getElementById("div_yc");
|
|
if(str_yc){
|
|
var arr_yc=str_yc.split(",");
|
|
var str_div_yc=str_div_mt=pic_big=pic_mini="";
|
|
var arr_tmp=[];
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
arr_tmp=arr_yc[i].split("|");
|
|
pic_big="../attachments/zydp/"+pic_path_big+"/"+arr_tmp[2]+".png";
|
|
pic_mini="../attachments/zydp/"+pic_path_mini+"/"+arr_tmp[2]+".jpg";
|
|
var divheight=parseInt(tmpl_dp_my_pic_height);
|
|
str_div_mt+="<div class=\"dress_div\" style=\"z-index:"+(arr_tmp[0]*10)+"\"><img src=\""+pic_big+"\"></div>";
|
|
str_div_yc+="<div class=\"dress_div_yc\" style=\"width:"+tmpl_dp_my_pic_width+"px;height:"+divheight+"px;\"><div><img src=\""+pic_mini+"\" "+arr_tmp[3]+"></div><div style=\"position:absolute;top:1px;left:65px;width:44px;height:80px;\"><a href=\"javascript:dress_down("+arr_tmp[1]+")\"><img src=\"images/button_yc_td.png\" width=\"44\" height=\"24\" border=0></a>";
|
|
//往里移动一层
|
|
if(check_left_level(arr_tmp[0])=="y")
|
|
str_div_yc+="<a href=\"javascript:dress_left("+arr_tmp[0]+")\"><img src=\"images/button_yc_left.png\" width=\"44\" height=\"24\" border=0></a>";
|
|
//往外移动一层
|
|
if(check_right_level(arr_tmp[0])=="y")
|
|
str_div_yc+="<a href=\"javascript:dress_right("+arr_tmp[0]+")\"><img src=\"images/button_yc_right.png\" width=\"44\" height=\"24\" border=0></a>";
|
|
str_div_yc+="</div></div>";
|
|
}
|
|
//加入遮罩层
|
|
var str_zz="";
|
|
var zz_level=get_zz_level();
|
|
var mt_zz_pic=get_mt_zz_pic();
|
|
if(zz_level>0)
|
|
str_zz="<div id=\"mt_zz\" class=\"dress_div\" style=\"z-index:"+(zz_level*10+1)+";\"><img src=\"../attachments/zydp/"+mt_zz_pic+"\"></div>";
|
|
obj_mt.innerHTML=str_zz+"<div id=\"mt\" style=\"z-index:1;\"><img src=\"../attachments/zydp/"+mt_pic+"\"></div>"+str_div_mt;
|
|
obj_yc.innerHTML=str_div_yc;
|
|
}else{
|
|
obj_mt.innerHTML="<div id=\"mt\" style=\"z-index:1;\"><img src=\"../attachments/zydp/"+mt_pic+"\"></div>";
|
|
obj_yc.innerHTML="";
|
|
}
|
|
}
|
|
//
|
|
function get_mt_zz_pic(){
|
|
var arr_tmp=mt_pic.split(".");
|
|
return arr_tmp[0]+"_zz."+arr_tmp[1];
|
|
}
|
|
//处理穿着变量，穿上
|
|
function add_yc_str(l,pic,pic_prop,ks){
|
|
if(str_yc!=""){
|
|
var arr_yc=str_yc.split(",");
|
|
str_yc="";
|
|
//替换
|
|
var arr_tmp=[];
|
|
var arr_level=[];
|
|
var is_th="n";
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
arr_tmp=arr_yc[i].split("|");
|
|
arr_level[i]=arr_tmp[1];
|
|
if(arr_tmp[1]==l){
|
|
str_yc+=arr_tmp[0]+"|"+arr_tmp[1]+"|"+pic+"|"+pic_prop+"|"+ks+",";
|
|
is_th="y";
|
|
}else{
|
|
str_yc+=arr_tmp[0]+"|"+arr_tmp[1]+"|"+arr_tmp[2]+"|"+arr_tmp[3]+"|"+arr_tmp[4]+",";
|
|
}
|
|
}
|
|
if(is_th=="n"){
|
|
//新增
|
|
arr_level.push(l);
|
|
arr_level.sort(function(a,b){return a>b?1:-1});
|
|
var add_index=0;
|
|
for(var i=0;i<arr_level.length;i++){
|
|
if(arr_level[i]==l)
|
|
add_index=i;
|
|
}
|
|
str_yc="";
|
|
var is_added="n";
|
|
var new_i=1;
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
arr_tmp=arr_yc[i].split("|");
|
|
if(i==add_index){
|
|
str_yc+=new_i+"|"+l+"|"+pic+"|"+pic_prop+"|"+ks+",";
|
|
is_added="y";
|
|
new_i++;
|
|
}
|
|
str_yc+=new_i+"|"+arr_tmp[1]+"|"+arr_tmp[2]+"|"+arr_tmp[3]+"|"+arr_tmp[4]+",";
|
|
new_i++;
|
|
}
|
|
if(is_added=="n"){
|
|
str_yc+=new_i+"|"+l+"|"+pic+"|"+pic_prop+"|"+ks+",";
|
|
}
|
|
}
|
|
//去掉尾部逗号
|
|
str_yc=str_yc.substring(0,str_yc.length-1);
|
|
}else{
|
|
str_yc="1|"+l+"|"+pic+"|"+pic_prop+"|"+ks;
|
|
}
|
|
}
|
|
//处理穿着变量，脱掉
|
|
function del_yc_str(l){
|
|
var arr_yc=str_yc.split(",");
|
|
str_yc="";
|
|
var new_i=1;
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
var arr_tmp=arr_yc[i].split("|");
|
|
if(arr_tmp[1]!=l){
|
|
str_yc+=new_i+"|"+arr_tmp[1]+"|"+arr_tmp[2]+"|"+arr_tmp[3]+"|"+arr_tmp[4]+",";
|
|
new_i++;
|
|
}
|
|
}
|
|
//去掉尾部逗号
|
|
if(str_yc)
|
|
str_yc=str_yc.substring(0,str_yc.length-1);
|
|
}
|
|
//处理穿着变量，向里面或者外面移动一层
|
|
function yd_yc_str(ind,di){
|
|
var arr_yc=str_yc.split(",");
|
|
var arr_level=[];
|
|
var arr_pic=[];
|
|
var arr_pic_prop=[];
|
|
var arr_dp_ks=[];
|
|
var this_index=0;
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
var arr_tmp=arr_yc[i].split("|");
|
|
arr_level[i]=arr_tmp[1];
|
|
arr_pic[i]=arr_tmp[2];
|
|
arr_pic_prop[i]=arr_tmp[3];
|
|
arr_dp_ks[i]=arr_tmp[4];
|
|
if(arr_tmp[0]==ind)
|
|
this_index=i;
|
|
}
|
|
if(di=="left")
|
|
var o_index=this_index-1;
|
|
else
|
|
var o_index=this_index+1;
|
|
str_yc="";
|
|
for(var i=0;i<arr_yc.length;i++){
|
|
var arr_tmp=arr_yc[i].split("|");
|
|
if(i==this_index){
|
|
str_yc+=arr_tmp[0]+"|"+arr_level[o_index]+"|"+arr_pic[o_index]+"|"+arr_pic_prop[o_index]+"|"+arr_dp_ks[o_index]+",";
|
|
}else if(i==o_index){
|
|
str_yc+=arr_tmp[0]+"|"+arr_level[this_index]+"|"+arr_pic[this_index]+"|"+arr_pic_prop[this_index]+"|"+arr_dp_ks[this_index]+",";
|
|
}else{
|
|
str_yc+=arr_tmp[0]+"|"+arr_tmp[1]+"|"+arr_tmp[2]+"|"+arr_tmp[3]+"|"+arr_tmp[4]+",";
|
|
}
|
|
}
|
|
//去掉尾部逗号
|
|
if(str_yc)
|
|
str_yc=str_yc.substring(0,str_yc.length-1);
|
|
}
|
|
//
|
|
function in_array(arr,v){
|
|
var r=-1;
|
|
for(var i=0;i<arr.length;i++){
|
|
if(arr[i]==v){
|
|
r=i;
|
|
break;
|
|
}
|
|
}
|
|
return r;
|
|
}
|
|
</script>
|
|
</html> |