Fichiers
quote_price/src/main/webapp/views/product/metal.jsp
T
2025-09-10 16:56:49 +08:00

613 lignes
29 KiB
Plaintext
Brut Annotations Historique

Ce fichier contient des caractères Unicode ambigus.
Ce fichier contient des caractères Unicode qui peuvent être confondus avec d'autres caractères. Si vous pensez que c'est intentionnel, vous pouvez ignorer cet avertissement. Utilisez le bouton Échappe pour les dévoiler.
<%@ 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">
<%@include file="/views/common.jsp" %>
</head>
<!-- 金属标 -->
<style>
#sehu_number .layui-form-select .layui-edge {
right: 0;
}
.tjselect .layui-form-select .layui-edge {
right: 20px;
}
</style>
<body>
<div class="big_box">
<div class="left_div">
<h1 class="h1">金属标</h1> <span style="color:red;font-weight:700;"></span>
<hr>
<form class="layui-form">
<input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="金属标">
<p>
产品种类
</p>
<div class="layui-form-item">
<input type="radio" lay-filter="kind" name="kind" value="金属标" title="金属标">
<input type="radio" lay-filter="kind" name="kind" value="UV转印贴" title="UV转印贴">
</div>
<div class="metal">
<p>
颜色
</p>
<div class="layui-form-item">
<select id="color" lay-filter="color" class="select">
<option value="金色">金色</option>
<option value="银色">银色</option>
<option value="蓝色">蓝色</option>
<option value="绿色">绿色</option>
<option value="红色">红色</option>
<option value="黑色">黑色</option>
<option value="橙色">橙色</option>
<option value="紫色">紫色</option>
<option value="玫红色">玫红色</option>
<option value="玫瑰金色">玫瑰金色</option>
</select>
</div>
<p>
印色
</p>
<div class="layui-form-item">
<input type="radio" name="craftMo" lay-filter="craftMo" value="单色" title="单色" checked="checked">
<input type="radio" name="craftMo" lay-filter="craftMo" value="双色" title="双色">
<input type="radio" name="craftMo" lay-filter="craftMo" value="彩色(三色)" title="彩色(三色)">
<input type="radio" name="craftMo" lay-filter="craftMo" value="彩色(四色)" title="彩色(四色)">
</div>
<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>
<span style="color:red;font-weight:700;">金属标尺寸不能超过29*19 cm</span>
<p>
数量(个)
</p>
<div class="layui-form-item">
<input type="text" placeholder="请输入整数" autocomplete="off" name="count" class="layui-input"
id="count1">
</div>
</div>
<div class="UVSticker" style="display:none" id="UVSticker">
<p>
尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽</span>
</p>
<div class="layui-form-item">
<input type="text" placeholder="格式:长*宽" name="size" id="UVSize" class="layui-input"
autocomplete="off">
</div>
<%-- <span style="color:red;font-weight:700;">UV转印贴尺寸不能超过500*58cm,加工艺不能超过42*28.5cm</span>--%>
<span style="color:red;font-weight:700;">UV转印贴尺寸不能超过500*58cm</span>
<p>
数量(个)
</p>
<!-- <div class="count">
<div class="layui-form-item">
<select name="count" class="select">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<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 class="layui-form-item">
<input type="text" name="count" id="count" placeholder="请输入整数" class="layui-input"
autocomplete="off">
</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>
<div class="layui-form-item" id="ui_des" style="display:none;">
<p>
设计内容
</p>
<select name="desType" lay-filter="desType" id="desType" class="select" lay-search>
<option value=""></option>
<option value="1">改序号</option>
<option value="2">改名字</option>
<option value="3">改二维码</option>
<option value="4">改图片</option>
<option value="5">改内容模板相同</option>
<option value="6" selected>改内容模板完全不同</option>
</select>
</div>
<p>
客户旺旺
</p>
<div class="layui-form-item">
<input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang"
class="layui-input">
</div>
<div class="UVSticker" style="display:none">
<p>
工艺
</p>
<div class="layui-form-item">
<input type="radio" name="craftQie" calss="moqie" value="模切" lay-skin="primary" title="模切"
checked="checked">
</div>
<div class="layui-input-block">
烫金工艺:
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="烫金" title="烫金"
class="craftZhuan">
<div class="layui-inline tjselect" style="width:60px; display:none">
<select name="craft" class="layui-select" lay-filter="tjselect" disabled>
<option value="烫金">烫金</option>
<option value="烫银">烫银</option>
<option value="烫蓝">烫蓝</option>
<option value="烫红">烫红</option>
<option value="烫黑">烫黑</option>
<option value="镭射银">镭射银</option>
<option value="镭射金">镭射金</option>
<option value="玫瑰金">玫瑰金</option>
</select>
</div>
<div class="layui-input-block">
配件:
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="刮板" title="刮板"
class="craftZhuan">
<div class="layui-inline" id="guaban" style="width: 80px;display: none">
<div style="display:flex;align-items: center">
<span style="flex-shrink: 0">数量:</span>
<input type="text" name="pcount" class="layui-input layui-inline" value="1">
</div>
</div>
</div>
<div class="layui-input-block">
其他工艺:
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="专金" title="专金"
class="craftZhuan">
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="专银" title="专银"
class="craftZhuan">
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="印刷+烫金" title="印刷+烫金"
class="craftZhuan">
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="印刷+烫银" title="印刷+烫银"
class="craftZhuan">
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="双面贴" title="双面贴"
class="craftZhuan">
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="烫画" title="烫画"
class="craftZhuan">
<input type="checkbox" name="craft" lay-filter="craftZhuan" value="冷转印" title="冷转印"
class="craftZhuan">
<span id="sehu_number" style="display:none">
<span>色数:</span>
<div class="layui-inline" style="width:60px;">
<select name="co_number" class="select">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</span>
</div>
</div>
</div>
<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" style="margin-left:50px;">
<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;
$("#number").on("input", function (e) {
var number = e.delegateTarget.value;
var kind = $("input[name='kind']:checked").val();
if (kind == "UV转印贴" && number > 1) {
// $("#ui_des").show();
} else {
$("#ui_des").hide();
}
});
function getProductImage() {
var html = " ";
var remark = " ";
let craft = $("input[name='craft']:checked").val();
let craftMo = $("input[name='craftMo']:checked").val();
let data = {
proTypeValue: $('input[name="kind"]:checked').val()
}
if (data.proTypeValue == '金属标' && (craftMo == '双色' || craftMo == '彩色(三色)')) {
data.craftValue = craftMo;
}
if (data.proTypeValue == 'UV转印贴') {
data.craftValue = craft;
}
if (craft == "烫金") {
data.craftValue = $(".tjselect option:selected").val();
}
// 清空轮播图
$("#carousel").empty();
$("#remark").empty();
$.ajax({
url: "${pageContext.request.contextPath}/getImgs",
type: "GET",
data,
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[0].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
});
}
}
});
}
//建造实例
ins = carousel.render({});
form.on("select(tjselect)", function (data) {
getProductImage()
})
form.on("radio(craftMo)", function (data) {
getProductImage()
})
form.on('radio(kind)', function (kindData) {
getProductImage()
$("#ui_des").hide();
$("input[name='craft'][value='烫金']").prop("checked", false);
$(".tjselect").hide();
$(".tjselect select").prop("disabled", true);
if (kindData.value == "金属标") {
// 切换为品种单选框
$(".metal").show();
$(".metal").find(":input").attr("disabled", false);
$(".UVSticker").hide();
$(".UVSticker").find(":input").attr("disabled", true);
$(".diyCount").hide();
$(".count").hide();
$(".diyCount").find(":input").attr("disabled", true);
$(".count").find(":input").attr("disabled", true);
} else {
// 少数量、专版打印的时候,切换为品种下拉框
$(".UVSticker").show();
$(".UVSticker input").attr("disabled", false);
$(".count").show();
$(".count").find(":input").attr("disabled", false);
$(".metal").hide();
$(".metal").find(":input").attr("disabled", true);
if ($("#number").val() > 1) {
// $("#ui_des").show();
}
}
form.render();//必须写
})
// 自定义数量
/* form.on('checkbox(switchCount)', function(data) {
if(data.elem.checked){
$(".diyCount").show();
$(".count").hide();
$(".diyCount").find(":input").attr("disabled", false);
$(".count").find(":input").attr("disabled", true);
} else {
$(".count").show();
$(".diyCount").hide();
$(".count").find(":input").attr("disabled", false);
$(".diyCount").find(":input").attr("disabled", true);
// 恢复标准数量的时候会被禁用,加这个解决
form.render();
}
}) */
form.on('checkbox(craftZhuan)', function (data) {
// 专金专银只能选一个
let craft_list = [];
$("input:checkbox[name='craft']:checked").each(function (i) {
if (!$(this).is(':disabled')) {
craft_list.push($(this).val());
}
});
if (craft_list.indexOf("刮板") > -1 && (craft_list.indexOf("烫画") > -1 || craft_list.indexOf("冷转印") > -1)) {
$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
$(data.elem).prop("checked", false);
layer.msg('[烫画,冷转印]不能选择刮板配件!', {offset: ['300px', '300px']}, {icon: 5});
return false;
}
let most = 1;
if (craft_list.indexOf("刮板") > -1) {
most = 2;
$("#guaban").show();
} else {
$("#guaban").hide();
}
var craftZhuan = $(".craftZhuan:checked").length;
if (craftZhuan > most) {
$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
$(data.elem).prop("checked", false);
layer.msg('[专金 - 专银]不能同时选择!', {offset: ['300px', '300px']}, {icon: 5});
return false;
}
if (craft_list.indexOf("烫金") > -1) {
$(".tjselect").show();
$(".tjselect select").prop("disabled", false);
} else {
$(".tjselect").hide();
$(".tjselect select").prop("disabled", true);
}
if (data.value == "冷转印") {
if ($(data.elem).is(":checked")) {
$("#sehu_number").show();
} else {
$("#sehu_number").hide();
}
}
form.render();//必须写
getProductImage()
})
// 点击计算,计算价格
form.on('submit(acount_btn)', function (data) {
var kind = $('input[name="kind"]:checked').val()
var number = $("#number").val();
var craftMo = $("input[name='craftMo']:checked").val();
if (kind == '金属标') {
var size = $("#size").val();
var color = $("#color").val();
} else {
var size = $("#UVSize").val();
var craftMo = $('input[name="craftMo"]:checked').val();
var craftShua = [];
$("input:checkbox[name='craft']:checked").each(function (i) {
if (!$(this).is(':disabled')) {
if ($(this).val() == "烫金") {
craftShua.push($(".tjselect select option:selected").val());
} else if ($(this).val() == "刮板") {
let co_count = $("input[name='pcount']").val();
craftShua.push($(this).val() + co_count + "个");
} else {
craftShua.push($(this).val());
}
}
});
}
if (!kind) {
layer.msg("请选择产品种类!", {offset: ['300px', '300px']}, function () {
});
return false;
}
if (!size) {
layer.msg("请填写尺寸!", {offset: ['300px', '300px']}, function () {
});
return false;
}
// 选中‘自定义数量’
/* if($('input[name="switchCount"]:checked').length != 0){
if ($("#count").val() > 10) {
layer.msg("自定义数量只能填写十以内的整数",{offset:['300px','300px']},function(){});
return false;
}
} */
if (kind == '金属标') {
if ((size.split("*")[0] > 29 || size.split("*")[1] > 19) && (size.split("*")[0] > 19 || size.split("*")[1] > 29)) {
layer.msg("【金属标】尺寸不能超过29*19 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
} else {
if ((size.split("*")[0] > 500 || size.split("*")[1] > 58) && (size.split("*")[0] > 58 || size.split("*")[1] > 500)) {
layer.msg("【UV转印贴】尺寸不能超过500*58 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
if (craftShua.length > 0 && craftShua.includes("冷转印") && (size.split("*")[0] > 20 || size.split("*")[1] > 27) && (size.split("*")[0] > 27 || size.split("*")[1] > 20)) {
layer.msg("【UV转印贴】冷转印工艺尺寸不能超过20*27 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
if (craftShua.length > 0 && craftShua.includes("烫画") && (size.split("*")[0] > 100 || size.split("*")[1] > 57) && (size.split("*")[0] > 57 || size.split("*")[1] > 100)) {
layer.msg("【UV转印贴】烫画工艺尺寸不能超过100*57 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
if (craftShua.length > 0 && !craftShua.includes("双面贴") && !craftShua.includes("烫画") && !craftShua.includes("冷转印") && !$("input[name='craft'][value='刮板']")[0].checked && (size.split("*")[0] > 42 || size.split("*")[1] > 28.5) && (size.split("*")[0] > 28.5 || size.split("*")[1] > 42)) {
layer.msg("【UV转印贴】带工艺尺寸不能超过42*28.5 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
if (craftShua.length > 0 && craftShua.includes("冷转印") && (size.split("*")[0] < 0.3 || size.split("*")[1] < 0.3)) {
layer.msg("【UV转印贴】冷转印工艺尺寸不能小于0.3*0.3 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
if (craftShua.length > 0 && craftShua.includes("烫画") && (size.split("*")[0] < 0.3 || size.split("*")[1] < 0.3)) {
layer.msg("【UV转印贴】烫画工艺尺寸不能小于0.3*0.3 cm", {offset: ['300px', '300px']}, function () {
});
return false;
}
}
$.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 == '金属标') {
var span_result = '金属标 - ' + color + ' - ' + size + '厘米 -' + craftMo + '-(同款内容)\n';
if (number > 1) {
for (let i = 0; i < data.length; i++) {
span_result += number + '款 各' + data[i].count + "个,共" + data[i].price + "元" + '\n'
data[i].number = number;
}
} else {
for (let i = 0; i < data.length; i++) {
span_result += number + '款 ' + data[i].count + "个,共" + data[i].price + "元" + '\n'
data[i].number = number;
}
}
} else {
if (craftShua.includes("冷转印")) {
let co_count = $("select[name='co_number'] option:selected").val();
craftShua.push(co_count + "色数");
}
craftShua = craftShua.filter(item => item !== null && item != "");
var span_result = 'UV转印贴 - ' + craftShua.join(" - ") + ' - ' + size + '厘米 -(同款内容) - ' + [data[0].msg] + '\n';
if (number > 1) {
// let numberType = $("#desType option:selected").text();
span_result += "款数:" + number + "\n";
for (let i = 0; i < data.length; i++) {
span_result += number + '款 各' + data[i].count + "个,共" + data[i].price + "元" + '\n'
data[i].number = number;
data[i].kindLabel = 'UV转印贴'
}
} else {
for (let i = 0; i < data.length; i++) {
span_result += number + '款 ' + data[i].count + "个,共" + data[i].price + "元" + '\n'
data[i].number = number;
data[i].kindLabel = 'UV转印贴'
}
}
}
span_result += '包邮,免费设计呢~(偏远地区需补邮费)'
$("#span_result").val(span_result);
var craft = "";
var count = "";
var kindValue = "";
if ($("#UVSticker").css("display") == "none") {
count = $("#count1").val();
kindValue = color;
} else {
count = $("#count").val();
craft = "模切";
craft += craftShua;
}
getRemark(kind, size, count + "张", kindValue, number, craft, "");
//计算完自动复制文本
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: '21%',
align: "center",
title: '重量(kg'
}
]],
done: function () {
}
});
}
});
return false;
});
});
</script>
</html>