670 lines
44 KiB
HTML
670 lines
44 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;}
|
|
#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;}
|
|
</style>
|
|
|
|
<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>
|
|
<hr class="layui-bg-gray">
|
|
<!-- 信息层 平板版 -->
|
|
<div id="content" class="content -for-pad layui-row layui-col-space10" style="padding: 0 10px;">
|
|
<div class="layui-col-lg8 layui-col-md8 layui-col-sm8 layui-col-xs6 layui-col-xxs12">
|
|
<div id="pic" style="position: relative;">
|
|
<div id="show-for-pad" class="-show" watermark></div>
|
|
<div class="-choose" style="position: absolute; line-height: 50px; left: 0; bottom: 0; text-align: left;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="info" class="layui-col-lg4 layui-col-md4 layui-col-sm4 layui-col-xs6 layui-col-xxs12">
|
|
<div id="gz" class="layui-row"><div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12"><div class="layui-col-lg6" style="color:#00A1F8; font-weight: bold;"><i class="layui-icon layui-icon-tips" style="display: inline-block; vertical-align: middle; margin-right: 5px;"></i><span class="text" style="display: inline-block; vertical-align: middle;"></span></div></div></div>
|
|
<div id="yph" class="layui-row layui-col-space10"><span class="title layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">圆牌号</span><span class="text layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8"></span></div>
|
|
<div id="kh" class="layui-row layui-col-space10"><span class="title layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">款号</span><span class="text layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8"></span></div>
|
|
<div id="price" class="layui-row layui-col-space10"><span class="title layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">价格</span><span class="text layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8"></span></div>
|
|
<div id="ksm" class="layui-row layui-col-space10"><span class="title layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">款式名</span><span class="text layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8"></span></div>
|
|
<div id="zds"></div>
|
|
<div id="remark" class="layui-row layui-col-space10"><span class="title layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">备注</span><span class="text layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8"></span></div>
|
|
<hr class="layui-bg-gray">
|
|
<div id="xj">
|
|
<span style="display: inline-block; vertical-align: middle; color: #9b9b9b;">我的评分</span>
|
|
<span id="xj-item" style="display: inline-block; vertical-align: middle;"></span>
|
|
</div>
|
|
<div id="pjwz" style="margin: 10px 0;"></div>
|
|
<div id="ds"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 信息层 手机版 #1 -->
|
|
<div id="content" class="content -for-phone layui-row layui-col-space10" style="padding: 0 10px; display: none;">
|
|
<div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 layui-col-xxs12">
|
|
<div id="pic" style="position: relative;">
|
|
<div id="show-for-phone" class="-show" watermark></div>
|
|
<div class="-choose" style="position: absolute; line-height: 50px; left: 0; bottom: 0; text-align: left;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 layui-col-xxs12">
|
|
<div id="xj">
|
|
<span style="display: inline-block; vertical-align: middle; color: #9b9b9b;">我的评分</span>
|
|
<span id="xj-item" style="display: inline-block; vertical-align: middle;"></span>
|
|
</div>
|
|
<div id="pjwz" style="margin: 10px 0;"></div>
|
|
</div>
|
|
</div>
|
|
<hr class="layui-bg-gray">
|
|
<!-- 订单详细 -->
|
|
<table id="dds" style="width: 96%; margin: auto;"></table>
|
|
<!-- 信息层 手机版 #2 -->
|
|
<div id="content" class="content -for-phone layui-row layui-col-space10" style="padding: 0 10px; display: none;">
|
|
<hr class="layui-bg-gray" style="padding: 0;">
|
|
<div id="info" class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 layui-col-xxs12">
|
|
<div id="gz" class="layui-row"><div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12"><div class="layui-col-lg6" style="color:#00A1F8; font-weight: bold;"><i class="layui-icon layui-icon-tips" style="display: inline-block; vertical-align: middle; margin-right: 5px;"></i><span class="text" style="display: inline-block; vertical-align: middle;"></span></div></div></div>
|
|
<div id="yph" class="layui-row layui-col-space10"><span class="title layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">圆牌号</span><span class="text layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6"></span></div>
|
|
<div id="kh" class="layui-row layui-col-space10"><span class="title layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">款号</span><span class="text layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6"></span></div>
|
|
<div id="price" class="layui-row layui-col-space10"><span class="title layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">价格</span><span class="text layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6"></span></div>
|
|
<div id="ksm" class="layui-row layui-col-space10"><span class="title layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">款式名</span><span class="text layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6"></span></div>
|
|
<div id="zds"></div>
|
|
<div id="remark" class="layui-row layui-col-space10"><span class="title layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">备注</span><span class="text layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6"></span></div>
|
|
<hr class="layui-bg-gray">
|
|
<div id="ds"></div>
|
|
</div>
|
|
</div>
|
|
<hr class="layui-bg-gray">
|
|
<!-- </form> -->
|
|
<!-- 细节图 -->
|
|
<div class="xjs-belonging" style="text-align: left; padding: 0 10px;">细节图</div>
|
|
<div id="xjs" class="xjs-belonging layui-row" style="padding: 0 10px;"></div>
|
|
<hr class="xjs-belonging layui-bg-gray">
|
|
<!-- 相关搭配款 -->
|
|
<div class="dpks-belonging" style="text-align: left; padding: 0 10px;">相关搭配款</div>
|
|
<div id="dpks" class="dpks-belonging layui-row" style="padding: 0 10px;"></div>
|
|
<hr class="dpks-belonging layui-bg-gray">
|
|
<!-- 相关搭配 -->
|
|
<div class="dps-belonging" style="text-align: left; padding: 0 10px;">相关搭配</div>
|
|
<div id="dps" class="dps-belonging layui-row" style="padding: 0 10px;"></div>
|
|
<hr class="dps-belonging layui-bg-gray">
|
|
<!-- 相关陈列 -->
|
|
<div class="cls-belonging" style="text-align: left; padding: 0 10px;">相关陈列</div>
|
|
<div id="cls" class="cls-belonging layui-row" style="padding: 0 10px;"></div>
|
|
<hr class="cls-belonging layui-bg-gray">
|
|
<!-- 相关橱窗 -->
|
|
<div class="ccs-belonging" style="text-align: left; padding: 0 10px;">相关橱窗</div>
|
|
<div id="ccs" class="ccs-belonging layui-row" style="padding: 0 10px;"></div>
|
|
<hr class="ccs-belonging layui-bg-gray">
|
|
|
|
</div>
|
|
<!-- end pcki-page -->
|
|
<script>
|
|
var is_mobile="n"
|
|
,dk_data = {} // 单款全局数据
|
|
,isPadOrPhone = "pad" // 判断客户端属于平板还是手机
|
|
|
|
layui.config({
|
|
base: './layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['index', 'user','element'], function(){
|
|
var $ = layui.$
|
|
,setter = layui.setter
|
|
,admin = layui.admin
|
|
,form = layui.form
|
|
,element = layui.element
|
|
|
|
if (get_url_param("khid") == "") layui.layer.msg("款号id错误！")
|
|
else $.ajax(
|
|
{
|
|
url:"./?_m=dk&_a=single_qj&khid="+get_url_param("khid"),
|
|
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])
|
|
|
|
if (window.parent.innerWidth >= 600) isPadOrPhone = "pad"
|
|
else isPadOrPhone = "phone"
|
|
|
|
if (isPadOrPhone == "pad") {
|
|
$(".content.-for-pad").show()
|
|
$(".content.-for-phone").hide()
|
|
} else if (isPadOrPhone == "phone") {
|
|
$(".content.-for-pad").hide()
|
|
$(".content.-for-phone").show()
|
|
}
|
|
|
|
// safari中iframe内的页面宽度会莫名其妙多一点出来，此处强制将本页宽度修正
|
|
$(".pcki-page").width($(self.frameElement).parents(".layui-layer-iframe").width())
|
|
// 修复iphone端，点击按钮时自动滚到页面顶部以及附带的其他一些问题
|
|
$(".pcki-page").height($(self.frameElement).parents(".layui-layer-iframe").height())
|
|
|
|
dk_data = json_data
|
|
// dds_data = json_data.dds
|
|
//------------上一款
|
|
if (json_data.prev != "") {
|
|
$("#btn-prev").attr("href", "dk_single_qj.htm?khid="+json_data.prev)
|
|
} else {
|
|
$("#btn-prev").attr("href", "javascript:layui.layer.msg('已经是第一款了。')")
|
|
}
|
|
//------------下一款
|
|
if (json_data.next != "") {
|
|
$("#btn-next").attr("href", "dk_single_qj.htm?khid="+json_data.next)
|
|
} else {
|
|
$("#btn-next").attr("href", "javascript:layui.layer.msg('已经是最后一款了。')")
|
|
}
|
|
//------------展示图片与短视频
|
|
var temp_pic_n = 0
|
|
// json_data.vurl = "http://47.114.132.88/1.mp4"
|
|
// 修改短视频后
|
|
for (var n = 0; n < json_data.pics.length; n++, temp_pic_n++) {
|
|
var pic = json_data.pics[n]
|
|
$(".content #pic .-show").append("<img class='-target' src='"+pic.pic_big+"' data-original='"+pic.pic_big+"' style='"+(n == 0 && n == temp_pic_n ? "" : "display: none; ")+"width: "+pic.pic_big_w+"px; height: "+pic.pic_big_h+"px; max-width: 300px; max-height: 400px;' watermark>")
|
|
$(".content #pic .-choose").append("<a index='"+(temp_pic_n+1)+"' class='-item' style='width: 30px; height: 42px; line-height: 42px; margin: 1px; display: inline-block; border: solid 1px "+(n == 0 && n == temp_pic_n ? "#F04122" : "#9b9b9b")+"; text-align: center; cursor: pointer; vertical-align: middle;'><img src='"+pic.pic+"' style='width: "+pic.pic_w+"px; height: "+pic.pic_h+"px; max-width: 30px; max-height: 40px;' watermark></a>")
|
|
}
|
|
if (json_data.vurl) {
|
|
$(".content #pic .-show").append("<video controls='controls' class='-target' style='max-width: 280px; max-height: 340px; margin-top: 10px;'></video>")
|
|
$(".content #pic .-choose").append("<a index='"+(temp_pic_n+1)+"' class='-item' style='width: 30px; height: 42px; line-height: 42px; margin: 1px; display: inline-block; text-align: center; cursor: pointer; vertical-align: middle;'><i class='layui-icon layui-icon-play' style='width: 30px;'></i></a>")
|
|
temp_pic_n++
|
|
}
|
|
if (json_data.bs_kh_dj == "word" && json_data.kh_dj) {
|
|
$(".content #pic").append("<span style='position: absolute; top: 8px; right: 8px; width: 18px; word-wrap: break-word; background-color: #F06054; color: white; padding: 4px 2px; border-radius: 4px; z-index: 9; line-height: 20px;'>"+json_data.kh_dj+"</span>")
|
|
} else if (json_data.bs_kh_dj == "pic" && json_data.kh_dj) {
|
|
$(".content #pic").append("<img src='../attachments/"+json_data.kh_dj+".png' style='position: absolute; top: 8px; right: 8px;' watermark>")
|
|
}
|
|
$(".content #pic").css({boxShadow: "1px 1px 10px 3px #d0d0d0", width: "300px", height: "400px", lineHeight: "400px"})
|
|
new Viewer(document.getElementById("show-for-"+isPadOrPhone), {
|
|
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
|
|
})
|
|
}
|
|
})
|
|
//------------信息
|
|
if (json_data.gz) {
|
|
var gzs = json_data.gz.split("|")
|
|
for (var gi = 0; gi < gzs.length; gi++) {
|
|
if (gi != 0) $(".content #gz .text").append("<br>")
|
|
$(".content #gz .text").append(gzs[gi])
|
|
}
|
|
} else {
|
|
$(".content #gz").css("display", "none")
|
|
}
|
|
$(".content #yph .text").text(json_data.xh)
|
|
$(".content #kh .text").text(json_data.kh)
|
|
// 2021.07.01：某些条件隐藏价格
|
|
if (json_data.is_gg == 'y' || (json_data.is_xd_clothes == "y" && json_data.child_sizegroup_id === json_data.size_group_id)) {
|
|
$("#content #price").hide()
|
|
} else {
|
|
$("#content #price .text").text(json_data.price.replace(/<br>/g, ';').replace(/;\s*$/, ""))
|
|
}
|
|
$(".content #ksm .text").text(json_data.ksm)
|
|
for (var i = 0; i < json_data.zds.length; i++) {
|
|
var zd = json_data.zds[i]
|
|
if (isPadOrPhone == "pad") {
|
|
$(".content #zds").append("<div id='zd-"+zd.no+"' class='layui-row layui-col-space10'><span class='title layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4'>"+zd.title+"</span><span class='text layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8'>"+zd.value+"</span></div>")
|
|
} else if (isPadOrPhone == "phone") {
|
|
$(".content #zds").append("<div id='zd-"+zd.no+"' class='layui-row layui-col-space10'><span class='title layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6'>"+zd.title+"</span><span class='text layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6'>"+zd.value+"</span></div>")
|
|
}
|
|
}
|
|
$(".content.-for-"+isPadOrPhone+" #remark .text").text(json_data.dkremark)
|
|
//------------星级
|
|
$(".content.-for-"+isPadOrPhone+" #xj #xj-item").html('<div id="div_pj_'+json_data.khid+'_icon_big">'+get_pj_icon(json_data.xj,json_data.khid,"big","y")+'</div>')
|
|
//------------文字评价
|
|
$(".content.-for-"+isPadOrPhone+" #pjwz").append('<div id="remark_'+json_data.khid+'" class="div_input_remark"><textarea id="input_remark_'+json_data.khid+'" placeholder="请输入评价文字" autocomplete="off" class="layui-input" style="width: 80%; min-height: 100px; margin: auto; padding: 10px;" onfocus="pj_remark_focus('+json_data.khid+')" onblur="pj_remark_blur('+json_data.khid+',\''+json_data.pjwz+'\')">'+json_data.pjwz+'</textarea></div>')
|
|
$(".content.-for-"+isPadOrPhone+" #pjwz").append('<div id="div_save_remark_'+json_data.khid+'" class="div_save_remark" style="display:none;"><a class="layui-btn layui-btn-sm button_save_remark" id="button_save_remark_'+json_data.khid+'" onclick="save_pj_remark('+json_data.khid+',\''+json_data.pjwz+'\')" style="background-color: #F04122;">保存文字</botton></div>')
|
|
$(".content.-for-"+isPadOrPhone+" #pjwz").append('<div class="div_button_del_pj" style="'+(json_data.xj > 0 || json_data.pjwz != "" ? "block" : "display:none; ")+'padding: 4px;" id="div_button_del_pj_'+json_data.khid+'"><a id="button_del_pj_'+json_data.khid+'" class="layui-btn layui-btn-sm button_del_pj layui-btn-primary" onclick="del_pj('+json_data.khid+')" style="border-color: #F04122; color: #F04122;">删除评价</botton></div>')
|
|
//------------ds
|
|
if (json_data.ds_body && json_data.ds_body.length > 0) {
|
|
var ds_elem = "<table border='1' style='width: 100%; border: solid 1px #eee;'>"
|
|
ds_elem += "<tr>"
|
|
for (var i = 0; i < json_data.ds_header.length; i++) {
|
|
ds_elem += "<td>"+json_data.ds_header[i].v+"</td>"
|
|
}
|
|
ds_elem += "</tr>"
|
|
for (var j = 0; j < json_data.ds_body.length; j++) {
|
|
var ds_v = json_data.ds_body[j].v
|
|
ds_elem += "<tr>"
|
|
for (var k = 0; k < ds_v.length; k++) {
|
|
ds_elem += "<td>"+ds_v[k].v+"</td>"
|
|
}
|
|
ds_elem += "</tr>"
|
|
}
|
|
ds_elem += "</table>"
|
|
$(".content #ds").append(ds_elem)
|
|
}
|
|
//------------订单详细，尺码表
|
|
//--------表头
|
|
var dd_header = "<tr class='dd-header'>"
|
|
,col_count = 0 // 列数
|
|
,cm_front_count = 0 // 尺码前格数
|
|
dd_header += "<td dd-w='3'>颜色</td>"
|
|
col_count += 3
|
|
cm_front_count++
|
|
if (json_data.is_ggk != "n") {
|
|
dd_header += "<td dd-w='1'>规格</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
if (json_data.is_ggk == "y") {
|
|
for (var i = 0; i < json_data.arr_gg_zd.length; i++) {
|
|
dd_header += "<td dd-w='1'>"+json_data.arr_gg_zd[i].title+"</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
}
|
|
if (json_data.show_gg_zxs == "y") {
|
|
dd_header += "<td dd-w='1'>"+json_data.translate_dhbs+"</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
}
|
|
}
|
|
} else if (json_data.size_group_id == json_data.bx_sizegroup_id) {
|
|
dd_header += "<td dd-w='1'>杯型</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
} else if (json_data.size_group_id == json_data.child_sizegroup_id) {
|
|
dd_header += "<td dd-w='1'>款型</td>"
|
|
col_count++
|
|
cm_front_count++
|
|
}
|
|
for (var i = 0; i < json_data.cmz.length; i++) {
|
|
dd_header += "<td dd-w='1'>"+json_data.cmz[i].title+"</td>"
|
|
col_count++
|
|
}
|
|
dd_header += "<td dd-w='1'>小计</td>"
|
|
col_count++
|
|
dd_header += "<td dd-w='1'></td>" // 下单按钮
|
|
col_count++
|
|
dd_header += "</tr>"
|
|
$("#dds").append(dd_header)
|
|
$("#dds .dd-header td").each(function() {
|
|
$(this).width(100/col_count*parseInt($(this).attr("dd-w"))+"%") // 调整格宽
|
|
})
|
|
//--------表身
|
|
var same_color_flag = 0 // 同色行标志，>0：同色
|
|
,dd_col_total = []
|
|
for (var i = 0; i < json_data.dds.length; i++) {
|
|
var dd = json_data.dds[i] // 行数据
|
|
,dd_body_row = "<tr class='dd-row'>" // 行文本
|
|
,cm_number = 0 // 尺码位数，用于dd_col_total定位
|
|
if (same_color_flag == 0) $("#dds").append("<tr><td colspan='"+col_count+"'><hr class='layui-bg-gray'></td></tr>") // 分割线
|
|
for (var j = 0; j < dd.dt.length; j++) {
|
|
var dtl = dd.dt[j]
|
|
switch(dtl.no) {
|
|
case "1": // 颜色格，规格等
|
|
if (j==0) { // 颜色格
|
|
if (same_color_flag == 0) {
|
|
dd_body_row += "<td rowspan='"+(parseInt(dd.ggs) ? parseInt(dd.ggs) : 1)+"'>"+(dd.ka != "y" ? "<span id='"+dtl.id+"' style='display: inline-block;'>"+dtl.value+"</span>" : "<span id='"+dtl.id+"' style='display: inline-block; color: #F04122;'><s class='del-color'>"+dtl.value+"</s></span>")+(dd.link_ds==""?"":" <a href='toPage("+dd.link_ds+")' style='display: inline-block;'>进入搭配款</a>")+"</td>"
|
|
same_color_flag = dd.ggs - 1 >=0 ? dd.ggs - 1 : 0
|
|
} else {
|
|
same_color_flag--
|
|
break
|
|
}
|
|
} else { // 规格等其他
|
|
if (cm_front_count <= j && j < json_data.cmz.length + cm_front_count) { // 如果 j 在尺码范围内，则
|
|
dd_body_row += "<td><span id='"+dtl.id+"'>"+dtl.value+"</span></td>"
|
|
cm_number++
|
|
}
|
|
else {
|
|
dd_body_row += "<td><span id='"+dtl.id+"'>"+dtl.value+"</span></td>"
|
|
}
|
|
}
|
|
break
|
|
case "2": // 手数格
|
|
// dd_body_row += "<td class='pct-ckinput-wrapper'><input type='number' id='"+dtl.id+"' name='"+dtl.id+"' class='dd-sh layui-input' style='text-align: center;' pct-change='changeSh(self)' pct-save='saveOrder()'></td>"
|
|
break
|
|
case "3": // 尺码格
|
|
dd_body_row += "<td>"+dtl.value+"</td>"
|
|
dd_col_total[cm_number] = dd_col_total[cm_number] ? (dd_col_total[cm_number] + parseInt(dtl.value ? dtl.value : "0")) : parseInt(dtl.value ? dtl.value : "0")
|
|
cm_number++
|
|
break
|
|
case "4": // 小计格
|
|
dd_body_row += "<td><span id='"+dtl.id+"' class='dd-row-total'>"+dtl.value+"</span></td>"
|
|
break
|
|
case "100": // 下单格
|
|
dd_body_row += "<td><a href='javascript:openQjXd(\""+dtl.khid+"\",\""+dtl.color+"\",\""+dtl.bx+"\")' class='layui-btn' style='background-color: #F04122; margin-right: 10px;'>下单</a></td>"
|
|
break
|
|
}
|
|
}
|
|
dd_body_row += "</tr>"
|
|
$("#dds").append(dd_body_row)
|
|
}
|
|
$('.del-color').on('click', function(){ // 设定删除款tip
|
|
layer.tips('已删除', this); //在元素的事件回调体中，follow直接赋予this即可
|
|
})
|
|
//--------表尾
|
|
$("#dds").append("<tr><td colspan='"+col_count+"'><hr class='layui-bg-gray'></td></tr>") // 分割线
|
|
var dd_all_total = 0
|
|
dd_footer = "<tr class='dd-footer'><td colspan='"+cm_front_count+"' style='text-align: right;'>合计</td>"
|
|
for (var k = 0; k < json_data.cmz.length; k++) {
|
|
var col_total = dd_col_total[k] ? dd_col_total[k] : 0
|
|
dd_footer += "<td><span class='dd-col-total'>"+col_total+"</span></td>"
|
|
dd_all_total += col_total
|
|
}
|
|
dd_footer += "<td><span class='dd-all-total'>"+dd_all_total+"</span></td></tr>"
|
|
$("#dds").append(dd_footer)
|
|
const min_width = Math.min(window.innerWidth, window.innerHeight) // 横竖屏转换时的最小宽度
|
|
//------------细节图
|
|
var xj_max_h = 0, xj_max_w = 0
|
|
if (json_data.xjs.length == 0) $(".xjs-belonging").css("display", "none")
|
|
else {
|
|
for (var i = 0; i < json_data.xjs.length; i++) {
|
|
var xj = json_data.xjs[i]
|
|
,html = ""
|
|
html += "<div class='-outer' style='display: inline-block; width: 20%; float: left; margin: 10px 0;><div class='-inner' style='border: 1px solid #ccc; width: "+(parseInt(xj.pic_w ? xj.pic_w : "0")+10)+"px; display: block; margin: auto; padding: 0 5px;'>"
|
|
html += "<div style='height: 130px; line-height: 130px;'><img src='"+xj.pic+"' style='width: "+xj.pic_w+"px; height: "+xj.pic_h+"px; margin: 5px 0;' watermark></div>"
|
|
html += "<div class='-title' style='word-wrap: break-word;'>"+xj.title+"</div>"
|
|
html += "</div></div>"
|
|
var elem = $(html)
|
|
$("#xjs").append(elem)
|
|
var xj_h = 130 + elem.find(".-title").height()
|
|
// var xj_h = parseInt(xj.pic_h ? xj.pic_h : '0') + elem.find(".-title").height() + 10
|
|
,xj_w = parseInt(xj.pic_w ? xj.pic_w : "0") + 20
|
|
xj_max_h = xj_max_h < xj_h ? xj_h : xj_max_h
|
|
xj_max_w = xj_max_w < xj_w ? xj_w : xj_max_w
|
|
}
|
|
|
|
var xj_width_percentage = "" // outer宽度占比
|
|
if (xj_max_w * 6 < min_width) xj_width_percentage = "16.66%"
|
|
else if (xj_max_w * 5 < min_width) xj_width_percentage = "20%"
|
|
else if (xj_max_w * 4 < min_width) xj_width_percentage = "25%"
|
|
else xj_width_percentage = "33%"
|
|
$("#xjs .-outer").width(xj_width_percentage)
|
|
|
|
$("#xjs .-outer").height(xj_max_h)
|
|
new Viewer(document.getElementById("xjs"), {
|
|
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
|
|
})
|
|
}
|
|
})
|
|
}
|
|
//------------相关搭配款
|
|
var dpk_max_h = 0, dpk_max_w = 0
|
|
if (json_data.dpks.length == 0) $(".dpks-belonging").css("display", "none")
|
|
else {
|
|
for (var i = 0; i < json_data.dpks.length; i++) {
|
|
var dpk = json_data.dpks[i]
|
|
,html = ""
|
|
html += "<div class='-outer' style='display: inline-block; width: 25%; float: left; margin: 10px 0;'><a class='-inner' href='javascript: openThePage(\""+json_data.face+"\", \"dk\", \"khid\", "+dpk.id+");' style='border: 1px solid #ccc; width: "+(parseInt(dpk.pic_w ? dpk.pic_w : "0")+10)+"px; display: block; margin: auto; padding: 0 5px;'>"
|
|
html += "<div style='height: 130px; line-height: 130px;'><img src='"+dpk.pic+"' style='width: "+dpk.pic_w+"px; height: "+dpk.pic_h+"px; margin: 5px 0;' watermark></div>"
|
|
html += "<div class='-title' style='word-wrap: break-word;'>"+dpk.title+"</div>"
|
|
html += "</a></div>"
|
|
var elem = $(html)
|
|
$("#dpks").append(elem)
|
|
var dpk_h = 130 + elem.find(".-title").height()
|
|
// var dpk_h = parseInt(dpk.pic_h ? dpk.pic_h : '0') + elem.find(".-title").height() + 10
|
|
,dpk_w = parseInt(dpk.pic_w ? dpk.pic_w : "0") + 20
|
|
dpk_max_h = dpk_max_h < dpk_h ? dpk_h : dpk_max_h
|
|
dpk_max_w = dpk_max_w < dpk_w ? dpk_w : dpk_max_w
|
|
}
|
|
|
|
var dpk_width_percentage = "" // outer宽度占比
|
|
if (dpk_max_w * 6 < min_width) dpk_width_percentage = "16.66%"
|
|
else if (dpk_max_w * 5 < min_width) dpk_width_percentage = "20%"
|
|
else if (dpk_max_w * 4 < min_width) dpk_width_percentage = "25%"
|
|
else dpk_width_percentage = "33%"
|
|
$("#dpk .-outer").width(dpk_width_percentage)
|
|
|
|
$("#dpks .-outer").height(dpk_max_h)
|
|
}
|
|
//------------相关搭配
|
|
var dp_max_h = 0, dp_max_w = 0
|
|
if (json_data.dps.length == 0) $(".dps-belonging").css("display", "none")
|
|
else {
|
|
for (var i = 0; i < json_data.dps.length; i++) {
|
|
var dp = json_data.dps[i]
|
|
,html = ""
|
|
html += "<div class='-outer' style='display: inline-block; width: 25%; float: left; margin: 10px 0;'><a class='-inner' href='javascript: openThePage(\""+json_data.face+"\", \"dp\", \"zsh\", "+dp.zsh+");' style='border: 1px solid #ccc; width: "+(parseInt(dp.pic_w ? dp.pic_w : "0")+10)+"px; display: block; margin: auto; padding: 0 5px;'>"
|
|
html += "<div style='height: 130px; line-height: 130px;'><img src='"+dp.pic+"' style='width: "+dp.pic_w+"px; height: "+dp.pic_h+"px; margin: 5px 0;' watermark></div>"
|
|
html += "<div class='-title' style='word-wrap: break-word;'>"+dp.title+"</div>"
|
|
html += "</a></div>"
|
|
var elem = $(html)
|
|
$("#dps").append(elem)
|
|
var dp_h = 130 + elem.find(".-title").height()
|
|
// var dp_h = parseInt(dp.pic_h ? dp.pic_h : '0') + elem.find(".-title").height() + 10
|
|
,dp_w = parseInt(dp.pic_w ? dp.pic_w : "0") + 20
|
|
dp_max_h = dp_max_h < dp_h ? dp_h : dp_max_h
|
|
dp_max_w = dp_max_w < dp_w ? dp_w : dp_max_w
|
|
}
|
|
var dp_width_percentage = "" // outer宽度占比
|
|
if (dp_max_w * 6 < min_width) dp_width_percentage = "16.66%"
|
|
else if (dp_max_w * 5 < min_width) dp_width_percentage = "20%"
|
|
else if (dp_max_w * 4 < min_width) dp_width_percentage = "25%"
|
|
else dp_width_percentage = "33.33%"
|
|
$("#dps .-outer").width(dp_width_percentage)
|
|
|
|
$("#dps .-outer").height(dp_max_h)
|
|
}
|
|
//------------相关陈列
|
|
var cl_max_h = 0, cl_max_w = 0
|
|
if (json_data.cls.length == 0) $(".cls-belonging").css("display", "none")
|
|
else {
|
|
for (var i = 0; i < json_data.cls.length; i++) {
|
|
var cl = json_data.cls[i]
|
|
,html = ""
|
|
html += "<div class='-outer' style='display: inline-block; width: 25%; float: left; margin: 10px 0;'><a class='-inner' href='javascript: openThePage(\"\", \"cl\", \"zsh\", "+cl.zsh+");' style='border: 1px solid #ccc; width: "+(parseInt(cl.pic_w ? cl.pic_w : "0")+10)+"px; display: block; margin: auto; padding: 0 5px;'>"
|
|
html += "<div style='height: 130px; line-height: 130px;'><img src='"+cl.pic+"' style='width: "+cl.pic_w+"px; height: "+cl.pic_h+"px; margin: 5px 0;' watermark></div>"
|
|
html += "<div class='-title' style='word-wrap: break-word;'>"+cl.title+"</div>"
|
|
html += "</a></div>"
|
|
var elem = $(html)
|
|
$("#cls").append(elem)
|
|
var cl_h = 130 + elem.find(".-title").height()
|
|
// var cl_h = parseInt(cl.pic_h ? cl.pic_h : '0') + elem.find(".-title").height() + 10
|
|
,cl_w = parseInt(cl.pic_w ? cl.pic_w : "0") + 20
|
|
cl_max_h = Math.max(cl.pic_h, cl_h)
|
|
cl_max_w = cl_max_w < cl_w ? cl_w : cl_max_w
|
|
}
|
|
|
|
var cl_width_percentage = "" // outer宽度占比
|
|
if (cl_max_w * 6 < min_width) cl_width_percentage = "16.66%"
|
|
else if (cl_max_w * 5 < min_width) cl_width_percentage = "20%"
|
|
else if (cl_max_w * 4 < min_width) cl_width_percentage = "25%"
|
|
else cl_width_percentage = "33.33%"
|
|
$("#cls .-outer").width(cl_width_percentage)
|
|
$("#cls .-outer").height(cl_max_h)
|
|
}
|
|
//------------相关橱窗
|
|
var cc_max_h = 0, cc_max_w = 0
|
|
if (json_data.ccs.length == 0) $(".ccs-belonging").css("display", "none")
|
|
else {
|
|
for (var i = 0; i < json_data.ccs.length; i++) {
|
|
var cc = json_data.ccs[i]
|
|
,html = ""
|
|
html += "<div class='-outer' style='display: inline-block; width: 25%; float: left; margin: 10px 0;'><a class='-inner' href='javascript: openThePage(\"\", \"cc\", \"zsh\", "+cc.zsh+");' style='border: 1px solid #ccc; width: "+(parseInt(cc.pic_w ? cc.pic_w : "0")+10)+"px; display: block; margin: auto; padding: 0 5px;'>"
|
|
html += "<div style='height: 130px; line-height: 130px;'><img src='"+cc.pic+"' style='width: "+cc.pic_w+"px; height: "+cc.pic_h+"px; margin: 5px 0;' watermark></div>"
|
|
html += "<div class='-title' style='word-wrap: break-word;'>"+cc.title+"</div>"
|
|
html += "</a></div>"
|
|
var elem = $(html)
|
|
$("#ccs").append(elem)
|
|
var cc_h = 130 + elem.find(".-title").height()
|
|
// var cc_h = parseInt(cc.pic_h ? cc.pic_h : '0') + elem.find(".-title").height() + 10
|
|
,cc_w = parseInt(cc.pic_w ? cc.pic_w : "0") + 20
|
|
cc_max_h = cc_max_h < cc_h ? cc_h : cc_max_h
|
|
cc_max_w = cc_max_w < cc_w ? cc_w : cc_max_w
|
|
}
|
|
|
|
var cc_width_percentage = "" // outer宽度占比
|
|
if (cc_max_w * 6 < min_width) cc_width_percentage = "16.66%"
|
|
else if (cc_max_w * 5 < min_width) cc_width_percentage = "20%"
|
|
else if (cc_max_w * 4 < min_width) cc_width_percentage = "25%"
|
|
else cc_width_percentage = "33.33%"
|
|
$("#ccs .-outer").width(cc_width_percentage)
|
|
|
|
$("#ccs .-outer").height(cc_max_h)
|
|
}
|
|
|
|
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("与服务器通信失败！") }
|
|
}
|
|
);
|
|
|
|
// 选择图片展示
|
|
$(document).on("click", "#pic .-choose .-item", function(index) {
|
|
$("#pic .-choose .-item").css("border-color", "#9B9B9B")
|
|
$(this).css("border-color", "#F04122")
|
|
$("#pic .-show img").css("display", "none")
|
|
var elem = $("#pic .-show img:nth-child("+$(this).attr("index")+")")
|
|
if (elem[0].nodeName === 'VIDEO' && !elem.attr('src')) elem.attr('src', dk_data.vurl)
|
|
elem.show(500)
|
|
})
|
|
|
|
// 搜索，款号，圆牌号
|
|
$("#btn-search").click(function() {
|
|
if (!$("#s-title input").val().replace(/ /g, "")) return true
|
|
var url="./?_m=dk&_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 = "dk_single_qj.htm?khid="+res_jsondata.khid
|
|
} 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="dk_single_qj?khid='+msgl.khid+'" 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";
|
|
});
|
|
// 屏幕旋转时重置部分元素的方位与尺寸
|
|
$(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'
|
|
})
|
|
})
|
|
var window_name = window.name
|
|
$(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 openQjXd(khid, color, bx) {
|
|
layui.use('layer', function(){
|
|
var layer = parent.layer;
|
|
var index = layer.open({
|
|
type: 2,
|
|
title: '',
|
|
name: 'dk_single_qj_xd',
|
|
id: 'dk_single_qj_xd',
|
|
content: "dk_single_qj_xd.htm?khid="+khid+"&color="+color+"&bx="+bx+"&s_dpdj=_ALL_",
|
|
offset: 'b',
|
|
closeBtn: 0,
|
|
anim: 2
|
|
})
|
|
layer.full(index);
|
|
})
|
|
}
|
|
function update_yd(khid) {
|
|
location.reload()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |