Files
quote_price/src/main/webapp/views/product/cupSet.jsp
T
2025-08-25 15:16:34 +08:00

615 lines
29 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@include file="/views/common.jsp" %>
</head>
<!-- 杯套 -->
<style>
</style>
<body>
<div class="big_box">
<div class="left_div">
<h1 class="h1">杯套</h1>
<hr>
<form class="layui-form">
<input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="10">
<p>
材质
</p>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="0"
title="白卡纸卡扣杯套300克(90-95口径通用)">
<!--<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="1" title="瓦楞纸杯套">-->
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="3"
title="300克手柄杯套(90-95口径通用)">
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="4"
title="300克异形手柄杯套(不限形状)">
<!--<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="2" title="异形杯套(不限形状)">-->
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="5"
title="铜版纸杯套300克">
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="6"
title="300克盲盒杯套">
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="7"
title="300克白卡三层瓦楞杯套">
<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="8"
title="300克单层白卡杯套(90-96口径通用)">
</div>
</div>
<div id="normal">
<p>
尺寸(mm)
</p>
<%-- <input type="radio" name="bkz_size" value="262*75mm" title="262*75mm" checked>--%>
<%-- <input type="radio" name="bkz_size" value="270*75mm" title="270*75mm">--%>
<input type="radio" name="bkz_size" value="272*78mm" title="272x78mm (高度6CM" checked>
<input type="radio" name="bkz_size" value="270*68mm" title="270x68mm (高度5CM">
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</div>
</div>
<div id="normal1">
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count1">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
</div>
<div id="normal3">
<p>
尺寸(cm)
</p>
<input type="radio" name="s" class="size" value="29*7cm" title="29*7cm" checked id="sSize">
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count2">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</div>
</div>
<div id="ui_kind5">
<p>
工艺
</p>
<div class="layui-form-item">
<input type="checkbox" name="craft" value="异形模切" title="异形模切" lay-filter="craft_btn" checked/>
<input type="checkbox" name="craft" value="单面覆膜" title="双面覆哑膜" lay-filter="craft_btn" checked/>
<input type="checkbox" name="craftTang" value="粘成品" title="粘成品" lay-filter="craft_btn"/>
</div>
<div class="diySize">
<p>
尺寸(cm)
</p>
<input type="text" name="size" placeholder="长*宽" id="diySize" class="layui-input">
</div>
<div class="fixWidth" style="display: none">
<p>
长幅
</p>
<div class="layui-form-item fixedSizeCoupon">
<select name="width" id="width" class="select">
<option value="26.4">264mm长幅(套常规500或700毫升98口径奶茶杯)</option>
<option value="24.7">247mm长幅(套常规500或700毫升90口径奶茶杯)</option>
<option value="26.1">261mm长幅(套常规500或700毫升95口径奶茶杯)</option>
</select>
</div>
<p>
宽尺寸(cm<span style="font-size:14px;color:red">输入格式: 宽</span>
</p>
<div class="layui-form-item">
<input type="text" name="length" id="ui_size" placeholder="" class="layui-input">
</div>
</div>
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count4">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</div>
</div>
<div id="alien">
<p>
尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽</span>
</p>
<div class="layui-form-item">
<input type="text" placeholder="格式:长*宽" name="size" id="size" class="layui-input"
autocomplete="off">
</div>
<p>
数量(个)
</p>
<div class="layui-form-item">
<input type="text" placeholder="请输入整数" autocomplete="off" name="count" class="layui-input"
id="count3">
</div>
</div>
<div id="ui_kind6">
<p>
尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽</span>
</p>
<div class="layui-form-item">
<input type="radio" name="mh_size" value="290*70" title="290*70mm(盲盒手柄杯套)" checked>
<input type="radio" name="mh_size" value="262*75" title="262*75mm(盲盒卡扣)" checked>
</div>
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count4">
<option value="5000">5000</option>
</select>
</div>
</div>
<div id="ui_kind7">
<p>
尺寸
</p>
<div class="layui-form-item">
<input type="radio" name="mh_size" value="277*70" title="277*70mm" checked>
</div>
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count5">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
<option value="6000">6000</option>
<option value="7000">7000</option>
<option value="8000">8000</option>
<option value="9000">9000</option>
<option value="10000">10000</option>
</select>
</div>
</div>
<div id="ui_kind8">
<p>
尺寸
</p>
<div class="layui-form-item">
<%-- <input type="radio" name="dc_size" value="262*76" title="262*76mm" checked>--%>
<input type="radio" name="dc_size" value="247*71" title="247*7190口径500-700ml" checked>
<input type="radio" name="dc_size" value="261*73" title="261*7395口径500-700ml">
<input type="radio" name="dc_size" value="262*76" title="262*7698口径500-700ml">
</div>
<p>
数量(个)
</p>
<div class="layui-form-item">
<select name="count" class="select" id="count6">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</div>
</div>
<p>
款数
</p>
<div class="layui-form-item">
<input type="text" placeholder="请输入整数" autocomplete="off" name="number" id="number" value="1"
class="layui-input" lay-verify="number">
</div>
<p>
客户旺旺
</p>
<div class="layui-form-item">
<input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang"
class="layui-input">
</div>
<hr>
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="acount_btn">计算</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
<h2>计算结果-
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult"
onclick="copyResult()">点击复制
</button>
</h2>
<div>
<textarea rows="11" cols="75" id="span_result" readonly="readonly"></textarea>
<%@include file="../acountExpressFee.jsp" %>
</div>
<!--<h2>下单备注-<button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult" onclick="copyBz()">点击复制</button></h2>
<div>
<textarea rows="5" cols="75" id="bz_result" readonly="readonly"></textarea>
</div>-->
<div>
<table class="layui-hide" id="priceTable" lay-filter="priceTable"></table>
</div>
</form>
</div>
<div class="right_div">
<div class="layui-carousel" id="test1">
<div carousel-item id="carousel"></div>
<br>
<div id="remark" style="font-size:20px;color:red"></div>
</div>
</div>
</div>
</body>
<%@include file="/views/copyResult.jsp" %>
<script>
layui.use(['table', 'form', 'carousel'], function () {
var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
var carousel = layui.carousel;
var table = layui.table;
//建造实例
ins = carousel.render({});
// 默认禁用异形杯套
$("#alien").hide()
$("#alien").find(":input").attr("disabled", true);
$("#normal1").hide()
$("#normal1").find(":input").attr("disabled", true);
$("#normal3").hide()
$("#normal3").find(":input").attr("disabled", true);
$("#ui_kind5").hide();
$("#ui_kind5").find(":input").attr("disabled", true);
$("#ui_kind6").hide();
$("#ui_kind6").find(":input").attr("disabled", true);
$("#ui_kind7").hide();
$("#ui_kind7").find(":input").attr("disabled", true);
$("#ui_kind8").hide();
$("#ui_kind8").find(":input").attr("disabled", true);
/* form.on('checkbox(switchSizeCoupon)', function(data) {
if(data.elem.checked){
$('.switchSizeCoupon').val("on")
$(".ui_zdy_size").show();
$(".ui_size").hide();
$(".ui_zdy_size").find(":input").attr("disabled", false);
$(".ui_size").find(":input").attr("disabled", true);
} else {
$('.switchSizeCoupon').val("off")
$(".ui_size").show();
$(".ui_zdy_size").hide();
$(".ui_size").find(":input").attr("disabled", false);
$(".ui_zdy_size").find(":input").attr("disabled", true);
// 恢复标准数量的时候会被禁用,加这个解决
form.render();
}
}); */
form.on("checkbox(craft_btn)", function (data) {
if (!data.elem.checked && (data.value == "异形模切" || data.value == "单面覆膜")) {
layer.msg("300克铜版纸模切覆膜工艺必选", {offset: ['300px', '300px']}, function () {
});
$("input[name='craft'][value='异形模切']").prop('checked', true);
form.render('checkbox');
return false;
}
$(".diySize").show();
$(".diySize").find(":input").attr("disabled", false);
$(".fixWidth").hide();
$(".fixWidth").find(":input").attr("disabled", true);
if ($("input[name='craftTang']").is(":checked")) {
$(".diySize").hide();
$(".diySize").find(":input").attr("disabled", true);
$(".fixWidth").show();
$(".fixWidth").find(":input").attr("disabled", false);
}
form.render();
})
form.on('radio(kindValue)', function (data) {
if (data.value == 0 || data.value == 2) {
$("#normal").show()
$("#normal").find(":input").attr("disabled", false);
} else {
$("#normal").hide()
$("#normal").find(":input").attr("disabled", true);
}
if (data.value == 1) {
$("#normal1").show()
$("#normal1").find(":input").attr("disabled", false);
} else {
$("#normal1").hide()
$("#normal1").find(":input").attr("disabled", true);
}
if (data.value == 3 || data.value == 4) {
$("#normal3").show()
$("#normal3").find(":input").attr("disabled", false);
} else {
$("#normal3").hide()
$("#normal3").find(":input").attr("disabled", true);
}
if (data.value == 5) {
$("#ui_kind5").show();
$("#ui_kind5").find(":input").attr("disabled", false);
} else {
$("#ui_kind5").hide();
$("#ui_kind5").find(":input").attr("disabled", true);
}
if (data.value == 6) {
$("#ui_kind6").show();
$("#ui_kind6").find(":input").attr("disabled", false);
} else {
$("#ui_kind6").hide();
$("#ui_kind6").find(":input").attr("disabled", true);
}
if (data.value == 7) {
$("#ui_kind7").show();
$("#ui_kind7").find(":input").attr("disabled", false);
} else {
$("#ui_kind7").hide();
$("#ui_kind7").find(":input").attr("disabled", true);
}
if (data.value == 8) {
$("#ui_kind8").show();
$("#ui_kind8").find(":input").attr("disabled", false);
} else {
$("#ui_kind8").hide();
$("#ui_kind8").find(":input").attr("disabled", true);
}
var html = " ";
var remark = " ";
// 清空轮播图
$("#carousel").empty();
$("#remark").empty();
if (1) {
$.ajax({
url: "${pageContext.request.contextPath}/getImgs",
type: "GET",
data: {
proTypeValue: $("#proTypeValue").val(),
kindValue: $('input[name="kindValue"]:checked').val()
},
//dataType : "json",
success: function (result) {
for (let i = 0; i < result.length; i++) {
// 只留一个remark
remark = "";
html += '<div><img style="width:' + result[0].imgWidth + 'px" src="' + result[i].imgUrl + '"></div>';
remark += '<div><span>' + result[i].remark + '<span/></div>';
}
$("#carousel").append(html);
// 如果没有说明,就不显示null
if (remark.indexOf("null") < 0) {
$("#remark").append(remark);
}
if (result.length == 0) {
document.getElementById("test1").style.display = "none"; //隐藏
} else {
document.getElementById("test1").style.display = "block"; //显示
ins.reload({
elem: '#test1',
width: result[0].imgWidth, //设置容器宽度
height: result[0].imgHeight
});
}
}
});
}
});
// 点击计算,计算价格
form.on('submit(acount_btn)', function (data) {
var kindData = {
0: "白卡纸杯套300克(90-95口径通用)",
1: "300克瓦楞纸杯套",
2: "300克异形杯套(不限形状)",
3: "300克手柄杯套(90-95口径通用)",
4: "300克异形手柄杯套(不限形状)",
5: "铜版纸杯套300克",
6: "300克盲盒杯套",
7: "300克白卡三层瓦楞杯套",
8: "300克单层白卡杯套(90-98口径通用)"
};
var kind = kindData[$('input[name="kindValue"]:checked').val()];
var number = $("#number").val();
var size = "";
if (kind == "300克手柄杯套(90-98口径通用)" || kind == "300克异形手柄杯套(不限形状)") {
size = $(".size").val();
} else if (kind == "铜版纸杯套300克") {
size = $("#ui_size").val();
}
$.ajax({
url: "${path}/getThanSum",
type: "GET",
data: $(".big_box form").serialize(),
success: function (result) {
if (result.code == 100) {
layer.msg(result.msg, {offset: ['300px', '300px']}, function () {
});
return false;
}
var data = result.data.proList;
if (kind == "300克异形杯套(不限形状)") {
var span_result = '杯套 - ' + kind + ' - ' + size + 'cm\n';
} else if (kind == "白卡纸杯套300克(90-95口径通用)") {
size = $("input[name='bkz_size']:checked").val();
var span_result = '杯套 - ' + kind + ' - ' + size + '\n';
} else if (kind == "300克白卡三层瓦楞杯套") {
var span_result = '杯套 - ' + kind + ' - 277*70 mm\n';
} else if (kind == "300克单层白卡杯套(90-98口径通用)") {
size = $("input[name='dc_size']:checked").attr("title");
var span_result = '杯套 - ' + kind + ' - ' + size + ' \n';
} else if (kind == "300克盲盒杯套") {
var k = "";
if ($("input[name='mh_size']:checked").val() == "290*70") {
k = kind + '(300克盲盒手柄杯套)';
} else {
k = kind + '(300克盲盒卡扣)';
}
var span_result = '杯套 - ' + k + ' - ' + $("input[name='mh_size']:checked").val() + 'mm\n';
} else if (kind == "铜版纸杯套300克") {
var arr = [];
$("input:checkbox[name='craft']:checked").each(function (i) {
if (!$(this).is(':disabled')) {
if ($(this).val() == "单面覆膜") {
arr.push("双面覆哑膜");
} else {
arr.push($(this).val());
}
}
});
if ($("input[name='craftTang']:checked").val() != null) {
arr.push($("input[name='craftTang']:checked").val());
}
let size = $("#diySize").val();
if ($("input[name='craftTang']").is(":checked")) {
size = $("select[name='width'] option:selected").val() + '*' + $("#ui_size").val()
}
var span_result = '杯套 - ' + kind + '-' + arr + ' - ' + size + 'cm\n';
} else {
var span_result = '杯套 - ' + kind + ' - ' + [size] + '\n';
//var span_result ='杯套 - ' + kind +'\n';
}
if (kind == "盲盒杯套") {
if (number > 1) {
span_result += number + '款 各5个内容' + data[0].count + "个,共" + data[0].price + "元" + "" + (data[i].price / number / data[i].count).toFixed(2) + '/个\n'
} else {
span_result += number + '款5个内容' + data[0].count + "个,共" + data[0].price + "元" + "" + (data[i].price / number / data[i].count).toFixed(2) + '/个\n'
}
} else {
if (number > 1) {
for (let i = 0; i < data.length; i++) {
span_result += number + '款 各' + data[i].count + "个,共" + data[i].price + "元" + "" + (data[i].price / number / data[i].count).toFixed(2) + '/个\n'
data[i].number = number;
}
} else {
for (let i = 0; i < data.length; i++) {
span_result += number + '款 ' + data[i].count + "个,共" + data[i].price + "元" + "" + (data[i].price / number / data[i].count).toFixed(2) + '/个\n'
data[i].number = number;
}
}
}
span_result += '包邮,免费设计呢~(偏远地区需补邮费)'
$("#span_result").val(span_result);
var count = $("select[name='count'] option:selected").val();
var size = "";
var type = $('input[name="kindValue"]:checked').val();
if (type == 0) {
size = $("input[name='bkz_size']").val();
count = $("#count").val();
} else if (type == 1) {
size = "125*55mm";
count = $("#count1 option:selected").val();
} else if (type == 5) {
size = $("#ui_size").val();
count = $("#count4 option:selected").val();
} else if (type == 7) {
size = $("input[mh_size]").val();
count = $("#count5 option:selected").val();
} else if (type == 8) {
size = $("input[dc_size]").val();
count = $("#count6 option:selected").val();
} else {
size = $("#sSize").val();
size = size.replace("cm", "");
count = $("#count2 option:selected").val();
}
//getRemark("杯套", size, count+"个", kind, number, "", "");
//计算完自动复制文本
var e = document.getElementById("span_result");//对象是content
if (e.value != "") {
e.select();//选择对象
document.execCommand("Copy");//执行浏览器复制命令
}
//生成表格
table.render({
elem: '#priceTable',
even: true, //隔行变色
data: data, // 赋值已知数据
width: 500,
cols: [[
{
field: 'number',
width: '12%',
align: "center",
title: '款数'
}, {
field: 'count',
width: '16%',
align: "center",
title: '数量'
}, {
field: 'price',
width: '16%',
align: "center",
title: '报价'
}, {
field: 'wangwang',
align: "center",
width: '16%',
title: '折扣价'
}, {
field: 'wangwang',
align: "center",
width: '19%',
title: '跳楼价'
}, {
field: 'weight',
width: '25%',
align: "center",
title: '重量约(kg'
}
]],
done: function () {
}
});
}
});
return false;
});
});
</script>
</html>