Files
quote_price/src/main/webapp/views/product/clothes.jsp
T
2025-02-20 15:14:38 +08:00

603 lines
28 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>
#craft_draw .layui-form-select .layui-edge {
right: 17%;
}
</style>
<body>
<div class="big_box">
<div class="left_div">
<h1 class="h2">定制衫</h1> <span style="color:red;font-weight:700;"></span>
<hr>
<form class="layui-form">
<input type="hidden" name="proTypeValue" class="layui-input" value="定制衫">
<input type="hidden" id="proTypeValue" value="定制衫">
<p>
型号
</p>
<div class="layui-form-item">
<input type="radio" name="kindValue" lay-filter="kindValue" value="YP" title="YP 1902"
lay-skin="primary" checked>
<input type="radio" name="kindValue" lay-filter="kindValue" value="XW" title="XW 601#"
lay-skin="primary">
<input type="radio" name="kindValue" lay-filter="kindValue" value="EP" title="EP 2803"
lay-skin="primary">
<input type="radio" name="kindValue" lay-filter="kindValue" value="ZT" title="ZT 901#"
lay-skin="primary">
</div>
<p>
材质
</p>
<div class="layui-form-item">
<select name="kind1Value" id="kind1Value" lay-filter="kind1Value" class="select">
<option value="圆领速干">圆领速干</option>
</select>
</div>
<p>
款式
</p>
<div class="layui-form-item">
<input type="radio" name="styles" lay-filter="styles" value="成人款" title="成人款"
lay-skin="primary" checked>
<input type="radio" name="styles" lay-filter="styles" value="儿童款" title="儿童款"
lay-skin="primary">
</div>
<p>
尺码
</p>
<div class="layui-form-item">
<select id="size" lay-filter="size" class="select">
<option value="S" selected>S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
<option value="5XL">5XL</option>
</select>
</div>
<p>
颜色
</p>
<div class="layui-form-item">
<select id="color" lay-filter="color" class="select">
<option value="宝蓝" selected>宝蓝</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="text" placeholder="请输入整数" autocomplete="off" name="count" id="count" class="layui-input"
lay-verify="number">
</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>
工艺<span style="font-size:14px;color:red">印花最大尺寸32*40CM</span>
</p>
<div class="layui-input-block">
<input type="checkbox" name="craft" lay-filter="switch" value="烫画" title="烫画">
<span id="craft_draw" style="display: none;align-items: center">
<div class="layui-form-item" style="align-items: center;display: flex">
<span style="flex-shrink: 0">位置:</span>
<select name="po_number" class="select" lay-verify="po_number" lay-filter="po_number">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="layui-form-item" style="align-items: center;display: flex">
<span>尺寸1</span>
<select name="size" class="select">
<option value="10*10">10*10CM内</option>
<option value="15*15">15*15CM内</option>
<option value="15*20">15*20CM内</option>
<option value="25*15">25*15CM内</option>
<option value="20*20">20*20CM内</option>
<option value="25*25">25*25CM内</option>
<option value="30*30">30*30CM内</option>
<option value="30*40">30*40CM内</option>
</select>
</div>
<div id="po_num_item"></div>
</span>
<input type="checkbox" name="craft" lay-filter="switch" value="丝印" title="丝印">
<span id="craft_print" style="display: none;align-items: center">
<div style="width: 150px;align-items: center;display: flex">
<span style="flex-shrink: 0">位置:</span>
<input type="text" placeholder="请输入整数" autocomplete="off" name="po_number" class="layui-input"
lay-verify="number" value="1" disabled></div>
<div style="width: 150px;align-items: center;display: flex">
<span style="flex-shrink: 0">颜色:</span>
<input type="text" placeholder="请输入整数" autocomplete="off" name="co_number" class="layui-input"
lay-verify="number" value="1" disabled></div>
</span>
</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>
<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>
<script src="../../js/carousel.js" charset="utf-8"></script>
<%@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({});
function getProductImage(craft) {
$("#carousel").empty();
$("#remark").empty();
let data = {proTypeValue: "定制衫"}
let remark = "";
let html = "";
let kindValue = $("input[name='kindValue']:checked").val();
let styles = $("input[name='styles']:checked").val();
data.kindValue = kindValue;
data.kind2Value = styles;
$.ajax({
url: "${pageContext.request.contextPath}/getImgs",
type: "GET",
data,
//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[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
});
}
}
});
}
form.on("select(po_number)", (data) => {
let html = ``
if (data.value > 1) {
for (let i = 1; i < data.value; i++) {
html += `<div class="layui-form-item" style="align-items: center;display: flex">
<span>尺寸` + parseInt(i + 1) + `</span>
<select name="size" class="select">
<option value="10*10">10*10CM内</option>
<option value="15*15">15*15CM内</option>
<option value="15*20">15*20CM内</option>
<option value="25*15">25*15CM内</option>
<option value="20*20">20*20CM内</option>
<option value="25*25">25*25CM内</option>
<option value="30*30">30*30CM内</option>
<option value="30*40">30*40CM内</option>
</select>
</div>`
}
$("#po_num_item").empty().append(html);
}
form.render();
})
form.on("radio(styles)", (data) => {
let kindValue = $("input[name='kindValue']:checked").val();
setHtml(kindValue, data.value)
form.render();
getProductImage()
});
form.on("radio(kindValue)", (data) => {
$("input[name='styles'][value='成人款']").prop("checked", true);
$("input[name='styles'][value='儿童款']").prop("disabled", false);
setHtml(data.value, '成人款')
if (data.value == "EP") {
$("input[name='styles'][value='儿童款']").prop("disabled", true);
}
if (data.value == "ZT") {
$("input[name='styles'][value='儿童款']").prop("disabled", true);
}
form.render();
getProductImage()
})
function setHtml(kind, styles) {
if (kind == 'XW') {
if (styles == '成人款') {
$("#kind1Value").empty();
$("#kind1Value").append(`<option value="圆领棉质">圆领棉质</option>`);
$("#size").empty();
$("#size").append(`<option value="S" selected>S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
<option value="5XL">5XL</option>`
);
$("#color").empty();
$("#color").append(`<option value="砖红" selected>砖红</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>
<option value="酒红">酒红</option>
<option value="卡其色">卡其色</option>
<option value="天蓝色">天蓝色</option>
<option value="铁灰">铁灰</option>
<option value="红色">红色</option>
<option value="黑色">黑色</option>
<option value="浅灰色">浅灰色</option>
<option value="绿色">绿色</option>`
);
}
if (styles == '儿童款') {
$("#size").empty();
$("#size").append(`<option value="100" selected>100</option>
<option value="110">110</option>
<option value="120">120</option>
<option value="130">130</option>
<option value="140">140</option>
<option value="150">150</option>`
);
$("#color").empty();
$("#color").append(`<option value="黑色" selected>黑色</option>
<option value="白色">白色</option>
<option value="粉色">粉色</option>
<option value="大红色">大红色</option>`
);
}
}
if (kind == 'YP') {
if (styles == '成人款') {
$("#kind1Value").empty();
$("#kind1Value").append(`<option value="圆领速干">圆领速干</option>`);
$("#size").empty();
$("#size").append(`<option value="S" selected>S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
<option value="5XL">5XL</option>`);
$("#color").empty();
$("#color").append(`<option value="宝蓝" selected>宝蓝</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>`);
}
if (styles == '儿童款') {
$("#size").empty();
$("#size").append(`<option value="100" selected>100</option>
<option value="110">110</option>
<option value="120">120</option>
<option value="130">130</option>
<option value="140">140</option>
<option value="150">150</option>`
);
$("#color").empty();
$("#color").append(`<option value="砖红" selected>砖红</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>
<option value="酒红">酒红</option>
<option value="卡其色">卡其色</option>
<option value="天蓝色">天蓝色</option>
<option value="铁灰">铁灰</option>
<option value="红色">红色</option>
<option value="黑色">黑色</option>
<option value="浅灰色">浅灰色</option>
<option value="绿色">绿色</option>`);
}
}
if (kind == 'EP') {
if (styles == '成人款') {
$("#kind1Value").empty();
$("#kind1Value").append(`<option value="polo速干">polo速干</option>`);
$("#size").empty();
$("#size").append(`<option value="S" selected>S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
<option value="5XL">5XL</option>`);
$("#color").empty();
$("#color").append(`<option value="孔蓝色" selected>孔蓝色</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>
<option value="黄色">黄色</option>`);
}
if (styles == '儿童款') {
}
}
if (kind == 'ZT') {
if (styles == '成人款') {
$("#kind1Value").empty();
$("#kind1Value").append(`<option value="popl棉质">popl棉质</option>`);
$("#size").empty();
$("#size").append(`<option value="S" selected>S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>`);
$("#color").empty();
$("#color").append(`<option value="黑色" selected>黑色</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>
<option value="黄色">黄色</option>
<option value="草绿色">草绿色</option>`);
}
if (styles == '儿童款') {
}
}
}
form.on("checkbox(switch)", (data) => {
let arr = []
if ($("input[name='craft']:checked").length > 1) {
$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
$(data.elem).prop("checked", false);
layer.msg('烫画-丝印不能同时选择!', {offset: ['300px', '300px']}, function () {
});
return false;
}
if (data.value == '烫画') {
if (data.elem.checked) {
$("#craft_draw").css("display", "flex");
$("#craft_draw input").prop("disabled", false);
$("#craft_draw select").prop("disabled", false);
} else {
$("#craft_draw").css("display", "none");
$("#craft_draw input").prop("disabled", true);
$("#craft_draw select").prop("disabled", true);
}
}
if (data.value == '丝印') {
if (data.elem.checked) {
$("#craft_print").css("display", "flex");
$("#craft_print input").prop("disabled", false);
} else {
$("#craft_print").css("display", "none");
$("#craft_print input").prop("disabled", true);
}
}
})
// 点击计算,计算价格
form.on('submit(acount_btn)', function (data) {
let size = $("select[name='size'] option:selected").val();
let count = $("#count").val();
let craft = $("input[name='craft']:checked").val();
if (!craft) {
layer.msg('工艺必须选择!', {offset: ['300px', '300px']}, function () {
});
return false;
}
if (!count) {
layer.msg('请输入数量!', {offset: ['300px', '300px']}, function () {
});
return false;
}
if (craft?.indexOf("烫画") > -1) {
let t_po_number = $("#craft_draw select[name='po_number'] option:selected").val();
if (!size) {
layer.msg('请输入尺寸!', {offset: ['300px', '300px']}, function () {
});
return false;
}
if (!t_po_number) {
layer.msg('请输入位置数量!', {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;
}
let kind_value = {
"YP": "YP 1902",
"XW": "XW 601#",
"EP": "EP 2803",
"ZT": "ZT 901#",
}
let arr = [];
let data = result.data.proList;
let kind = $("input[name='kindValue']:checked").val();
let styles = $("input[name='styles']:checked").val();
let po_number = $("input[name='po_number']").val();
let co_number = $("input[name='co_number']").val();
let kind1Value = $("select[name='kind1Value'] option:selected").val();
let cSize = $("#size").val();
let cColor = $("#color").val();
let number = $("#number").val();
if (craft?.indexOf("烫画") > -1) {
po_number = $("select[name='po_number'] option:selected").val();
}
if (craft?.indexOf("丝印") > -1) {
po_number = $("input[name='po_number']").val();
}
$("input[name='craft']:checked").each(function () {
if (!$(this).is("disabled")) {
arr.push($(this).val())
}
})
let span_result = kind_value[kind] + styles + '-' + kind1Value + '-' + cSize + '-' + cColor + '-(同款内容)\n工艺 :' + arr.join(",") + '\n'
if (craft?.indexOf("烫画") > -1) {
span_result += "烫画规格:" + size + "CM" + ",位置:" + po_number + "\n"
}
if (craft?.indexOf("丝印") > -1) {
span_result += "位置:" + po_number + "" + "颜色:" + co_number + "\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;
}
}
span_result += '包邮,免费设计呢~(偏远地区需补邮费)'
$("#span_result").val(span_result);
getRemark($("#proTypeValue").val(), size, count, kind, number, arr, "");
//计算完自动复制文本
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: 'weight',
width: '21%',
align: "center",
title: '重量(kg'
}
]],
done: function () {
}
});
}
});
return false;
});
});
</script>
</html>