368 lines
20 KiB
HTML
368 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>
|
|
.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;}
|
|
#dks td>div {padding: 1px;}
|
|
.kh_list-container {position: relative;}
|
|
.kh_list-container .kh_hide{display:none;min-width:100%;position:absolute;right:0px;bottom:23px;background:#f5f5f5;filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;}
|
|
.kh_list-container .kh_hide table {margin: auto;}
|
|
#dks .-body input { max-width: 80px; margin: auto;}
|
|
#dks .-body .layui-input { padding-left: 0px;}
|
|
</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">
|
|
<!-- viewer js -->
|
|
<script src="js/viewer/viewer.min.js"></script>
|
|
<link rel="stylesheet" href="js/viewer/viewer.min.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>
|
|
<!--头部 上下款 搜索-->
|
|
<div class="header">
|
|
<a id="btn-prev" class="-btn-into" style="position: absolute; top: 0; left: 20px;"><i class="layui-icon layui-icon-left"></i>上一组</a>
|
|
<div id="s-title" class="layui-input-inline" style="width: 20%; margin-right: 10px; max-width: 150px; min-width: 100px;"><input type="text" name="" placeholder="搭配号" class="layui-input" style="border-radius:10px 10px 10px 10px;"></div>
|
|
<a id="btn-search" class="layui-btn layui-input-inline" style="border-radius:10px 10px 10px 10px; background-color: #F04122; padding: 0 10px;">查询</a>
|
|
<a id="btn-next" class="-btn-into" style="position: absolute; top: 0; right: 20px;">下一组<i class="layui-icon layui-icon-right"></i></a>
|
|
</div>
|
|
<!-- 信息层 -->
|
|
<div id="content">
|
|
<div class="" style="margin-top: 20px; margin-bottom: 20px;">
|
|
<div id="pic" style="box-shadow: 1px 1px 10px 3px #d0d0d0; width: 300px; height: 400px; line-height: 400px;"></div>
|
|
</div>
|
|
<div style="margin: 5px 0;">
|
|
<div id="remark"></div>
|
|
</div>
|
|
</div>
|
|
<hr class="layui-bg-gray">
|
|
<!-- 单款详细 -->
|
|
<input id="dk-zsh" name="zsh" style="display: none;">
|
|
<input id="dk-uid" name="uid" style="display: none;">
|
|
<table id="dks" style="width: 96%; margin: auto;"></table>
|
|
<hr class="layui-bg-gray">
|
|
</div>
|
|
|
|
<script>
|
|
var is_mobile="n"
|
|
,dp_data // 全局数据
|
|
|
|
layui.config({
|
|
base: './layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['index', 'user','rate'], function(){
|
|
var $ = layui.$
|
|
,setter = layui.setter
|
|
,admin = layui.admin
|
|
,form = layui.form
|
|
,rate = layui.rate
|
|
|
|
var url="./?_m=dp&_a=single&zsh="+get_url_param("zsh");
|
|
$.ajax(
|
|
{
|
|
url:url,
|
|
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())
|
|
|
|
dp_data = json_data
|
|
//------------上一组
|
|
if (json_data.prev != "") {
|
|
$("#btn-prev").attr("href", "dp_single_qj.htm?zsh="+json_data.prev)
|
|
} else {
|
|
$("#btn-prev").attr("href", "javascript:layui.layer.msg('已经是第一组了。')")
|
|
}
|
|
//------------下一组
|
|
if (json_data.next != "") {
|
|
$("#btn-next").attr("href", "dp_single_qj.htm?zsh="+json_data.next)
|
|
} else {
|
|
$("#btn-next").attr("href", "javascript:layui.layer.msg('已经是最后一组了。')")
|
|
}
|
|
//------------展示图片
|
|
$("#content #pic").append("<img data-original='"+json_data.pic_big+"' src='"+json_data.pic_big+"' style='width: "+json_data.pic_big_w+"px; height: "+json_data.pic_big_h+"px; max-width: 300px; max-height: 400px;' watermark>")
|
|
new Viewer(document.getElementById("pic"), {
|
|
url: 'data-original'
|
|
,toolbar: false
|
|
,title: false
|
|
,rotatable: false
|
|
,backdrop: false // 点击非图片层关闭
|
|
,viewed: function(event) {
|
|
USetWatermark({
|
|
el: $(event.detail.image)
|
|
,is_sy: json_data.is_sy
|
|
,text: json_data.username
|
|
,font_size: 64
|
|
})
|
|
}
|
|
})
|
|
//------------说明
|
|
$("#content #remark").html(json_data.dp_remark)
|
|
//------------zsh
|
|
$("#dk-zsh").val(json_data.zsh)
|
|
//------------uid
|
|
$("#dk-uid").val(json_data.uid)
|
|
//------------单款详细
|
|
//--------表头
|
|
var dk_header = "<tr class='-header'>"
|
|
,col_count = 0 // 表头单元列列数（单元列：长度1的列），用于调整列宽
|
|
,cm_front_count = 0 // 尺码前列数，用于放置“合计”的位置
|
|
dk_header += "<td dk-w='3'>单款信息</td>"
|
|
col_count += 3
|
|
cm_front_count++
|
|
dk_header += "<td dk-w='1'>颜色</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
if (json_data.bx_sizegroup_id && json_data.bx_sizegroup_id != "0") {
|
|
dk_header += "<td dk-w='1'>杯型</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
} else if (json_data.child_sizegroup_id && json_data.child_sizegroup_id != "0") {
|
|
dk_header += "<td dk-w='1'>款型</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
}
|
|
if (json_data.have_ggk != "n") {
|
|
dk_header += "<td dk-w='1'>"+json_data.translate_gg+"</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
}
|
|
if (json_data.have_ggk == "y") {
|
|
dk_header += "<td dk-w='1'>"+json_data.translate_gg1+"</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
}
|
|
dk_header += "<td colspan='?' dk-w='5' class='-col-cm'>尺码</td>"
|
|
col_count += 5
|
|
dk_header += "<td dk-w='1'>小计</td>"
|
|
col_count++
|
|
dk_header += "</tr>"
|
|
$("#dks").append(dk_header)
|
|
$("#dks .-header td").each(function() {
|
|
$(this).width(100/col_count*parseInt($(this).attr("dk-w"))+"%") // 调整列宽
|
|
})
|
|
//--------表身
|
|
var same_color_flag = 0 // 同款行标志，>0：同款，用于有无规格时样式
|
|
,dk_all_total = 0 // 总合计
|
|
,max_cm_col_count = 0 // 最大尺码列数，用于规范尺码列数样式
|
|
for (var i = 0; i < json_data.dks.length; i++) {
|
|
var dk = json_data.dks[i] // 行数据
|
|
,dk_body_elem = "<tr class='-body'>" // 行文本
|
|
,current_cm_col_count = 0 // 当前行实际尺码列数
|
|
if (same_color_flag == 0) $("#dks").append("<tr class='-line'><td colspan='"+col_count+"'><hr class='layui-bg-gray'></td></tr>") // 单款分割线
|
|
for (var j = 0; j < dk.dd.length; j++) {
|
|
var ddl = dk.dd[j]
|
|
switch(ddl.no) {
|
|
case "1": // 单款信息格等
|
|
if (j==0) { // 单款信息格
|
|
if (same_color_flag == 0) {
|
|
dk_body_elem += "<td rowspan='"+dk.ggs+"' class='layui-row kh_list-container'>"
|
|
dk_body_elem += "<div class='layui-col-lg6 layui-col-md6 layui-col-sm6 layui-col-xs6 layui-col-xxs12' style=''><a href='dk_single"+(json_data.face == "2" ? "_qj" : "")+".htm?khid="+dk.khid+"'><div style='width: 100px; height: 100px; line-height: 100px;'>"
|
|
dk_body_elem += "<img src='"+dk.pic+"' style='max-width: 100px; max-height: 100px;' watermark>" // div1 > pic
|
|
if (json_data.bs_kh_dj == "word" && dk.kh_dj) {
|
|
dk_body_elem += "<span style='position: absolute; top: 0; left: 0; writing-mode: vertical-lr; background-color: #ff0000c7; color: white; padding: 4px 2px; border-radius: 2px; width: 20px; line-height: 20px;'>"+dk.kh_dj+"</span>"
|
|
} else if (json_data.bs_kh_dj == "pic" && dk.kh_dj) {
|
|
dk_body_elem += "<img src='../attachments/"+dk.kh_dj+".png' style='position: absolute; top: 0; left: 0;' watermark>"
|
|
}
|
|
dk_body_elem += "</div></a></div>"
|
|
dk_body_elem += "<div class='layui-col-lg6 layui-col-md6 layui-col-sm6 layui-col-xs6 layui-col-xxs12' style=''>" // div2
|
|
dk_body_elem += "<a href='dk_single.htm"+(json_data.face == "2" ? "_qj" : "")+"?khid="+dk.khid+"'><div id='"+ddl.id+"' style='"+dk.sty1+" display: inline-block;'>"+ddl.value+"</a></div>" // > info
|
|
|
|
//---- > xj_big
|
|
dk_body_elem += "<div id='kh_hide_"+dk.khid+"' class='kh_hide'>"
|
|
dk_body_elem += "<div id='div_pj_"+dk.khid+"_icon_big'>"+get_pj_icon(dk.xj,dk.khid,"big","y")+"</div>"
|
|
dk_body_elem += "<div class='div_button_del_pj' style='display:"+(dk.xj > 0 ? "" : "none")+"; padding: 1px;' id='div_button_del_pj_"+dk.khid+"'><button type='button' id='button_del_pj_"+dk.khid+"' class='layui-btn layui-btn-sm button_del_pj' onclick='del_pj("+dk.khid+")' style='background-color:#F04122;'>删除评价</button></div>"
|
|
dk_body_elem += "</div>"
|
|
//---- end > xj_big
|
|
dk_body_elem += "<div class='xj' id='div_pj_"+dk.khid+"_icon_mini' onclick='show_hide_kh_hide("+dk.khid+")' style='float: right;'>"+get_pj_icon(dk.xj,dk.khid,"mini","n")+"</div>" // > xj_mini
|
|
dk_body_elem += "</div>"
|
|
dk_body_elem += "</td>"
|
|
same_color_flag = dk.ggs - 1
|
|
} else {
|
|
same_color_flag--
|
|
break
|
|
}
|
|
} else { // 规格等其他
|
|
dk_body_elem += "<td><span id='"+ddl.id+"'>"+ddl.value+"</span></td>"
|
|
}
|
|
break
|
|
case "2": // 颜色格
|
|
var ggs = parseInt(dk.ggs ? dk.ggs : '0')
|
|
if (same_color_flag === ggs - 1) {
|
|
dk_body_elem += "<td rowspan='"+dk.ggs+"'>"+(dk.ka != "y" ? "<div style='height: 20px;'>"+ddl.value.replace("<br>", "")+"</div>" : "<div style='height: 20px; color: #F04122;'><s class='del-color'>"+ddl.value.replace("<br>", "")+"</s></div>")+"<div><a href='dk_single_qj_xd.htm?khid="+0+"&color="+0+"&bx="+0+"&s_dpdj=_ALL_' class='layui-btn layui-btn-sm' style='background-color: #F04122; margin-right: 10px;'>下单</a></div></td>"
|
|
}
|
|
break
|
|
case "3": // 尺码格
|
|
dk_body_elem += "<td class='-col-cm'><div>"+ddl.size+"</div><div style='height: 38px;'>"+ddl.value+"</div></td>"
|
|
max_cm_col_count = Math.max(max_cm_col_count, ++current_cm_col_count)
|
|
break
|
|
case "4":
|
|
break
|
|
case "5": // 小计格
|
|
dk_body_elem += "<td class='-row-total'><div style='height: 20px;'></div><div class='-value' style='height: 38px;'>"+ddl.value+"</div></td>"
|
|
dk_all_total += parseInt(ddl.value)
|
|
break
|
|
case "6":
|
|
break
|
|
case "9": // 空位尺码
|
|
dk_body_elem += '<td class="-col-cm"></td>'
|
|
break
|
|
}
|
|
}
|
|
dk_body_elem += "</tr>"
|
|
$("#dks").append(dk_body_elem)
|
|
}
|
|
$("#dks .-header .-col-cm").attr({"colspan": max_cm_col_count}) // 补全表头尺码的跨度
|
|
// $("#dks .-body").each(function() { // 补全表身尺码的列数
|
|
// var col_cm_count = $(this).find(".-col-cm").length
|
|
// for(var i = 0; i < max_cm_col_count - col_cm_count; i++) {
|
|
// $(this).find(".-row-total").before("<td class='-col-cm'></td>")
|
|
// }
|
|
// })
|
|
pInitCustomKeyboard({
|
|
pck_enabled: json_data.sys_ck_input,
|
|
pck_cypm: json_data.cypm,
|
|
pck_jpty: json_data.jpty,
|
|
pck_uid: json_data.uid,
|
|
pck_page: "dp"
|
|
}) // 键盘初始化
|
|
$('.del-color').on('click', function(){ // 设定删除款tip
|
|
layer.tips('已删除', this); //在元素的事件回调体中，follow直接赋予this即可
|
|
})
|
|
//--------表尾
|
|
$("#dks").append("<tr><td colspan='"+col_count+"'><hr class='layui-bg-gray'></td></tr>") // 分割线
|
|
var dk_footer = "<tr class='-footer'><td colspan='"+cm_front_count+"' style='text-align: right;'>合计</td>"
|
|
dk_footer += "<td colspan='"+max_cm_col_count+"'></td>"
|
|
dk_footer += "<td class='-all-total'>"+dk_all_total+"</td></tr>"
|
|
$("#dks").append(dk_footer)
|
|
//------------订单操作
|
|
if (json_data.face == "2") $("#dk-opt-box").css("display", "none")
|
|
|
|
// 添加水印
|
|
USetWatermark({
|
|
is_sy: json_data.is_sy
|
|
,text: json_data.username
|
|
})
|
|
}
|
|
}
|
|
,beforeSend: function() { u_start_loading() }
|
|
,complete: function() { u_stop_loading() }
|
|
,error: function () { layui.layer.msg("与服务器通信失败！") }
|
|
}
|
|
);
|
|
|
|
|
|
// 搜索
|
|
$("#btn-search").click(function() {
|
|
if (!$("#s-title input").val().replace(/ /g, "")) return true
|
|
var url="./?_m=dp&_a=single_qj&s_title="+$("#s-title input").val()
|
|
console.log(url)
|
|
$.ajax({
|
|
url: url
|
|
,method: "POST"
|
|
,success: function(res) {
|
|
var res_jsondata = $.parseJSON(res)
|
|
console.log(res_jsondata)
|
|
if (res_jsondata.code == 100) {
|
|
location.href = "dp_single_qj.htm?zsh="+res_jsondata.zsh
|
|
} else if (res_jsondata.code == 101) {
|
|
var content_html = "<div style='padding: 15px;'>找到以下符合条件的多项，请选择：</div>"
|
|
for (var i = 0; i < res_jsondata.msg.length; i++) {
|
|
var msgl = res_jsondata.msg[i]
|
|
content_html += '<a href="dp_single_qj.htm?zsh='+msgl.zsh+'" style="display: block; float: left; width: 60px; padding: 10px; color: blue; text-decoration: underline;">'+msgl.title+'</a>'
|
|
}
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: true
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'dp-location' //设定一个id，防止重复弹出
|
|
// ,btn: ['火速围观', '残忍拒绝']
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: content_html
|
|
})
|
|
} 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("与服务器通信失败！") }
|
|
})
|
|
})
|
|
|
|
if(admin.screen()<2)
|
|
is_mobile="y";
|
|
$(window).on('resize', function(){
|
|
//自动
|
|
if(admin.screen()<2)
|
|
is_mobile="y";
|
|
});
|
|
$(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())
|
|
// 将iframe的高度同步为其父元素.layui-layer-iframe的高度
|
|
$(this).find("[name="+window_name+"]").height($(this).height())
|
|
})
|
|
})
|
|
|
|
//显示，隐藏评价层
|
|
function show_hide_kh_hide(id){
|
|
layui.use('jquery', function(){
|
|
var $=layui.jquery;
|
|
$("#kh_hide_"+id).toggle(500);
|
|
});
|
|
}
|
|
function update_yd() {
|
|
location.reload()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |