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

591 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>
<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">
<select name="kindValue" id="kindValue" lay-filter="kindValue" class="select" lay-search>
<option value=""></option>
<option value="水晶">水晶</option>
<option value="金箔木托">金箔木托</option>
<option value="银箔木托">银箔木托</option>
</select>
</div>
<p>
名称
</p>
<div class="layui-form-item">
<select name="kind1Value" id="kind1Value" lay-filter="kind1Value" class="select" lay-search>
<option value=""></option>
<option value="水晶">水晶</option>
<option value="金箔木托">金箔木托</option>
<option value="银箔木托">银箔木托</option>
</select>
</div>
<p>
尺寸(CM/厘米)<span id="size_tip" style="font-size:14px;color:red"></span>
</p>
<div class="layui-form-item">
<select name="size" id="size" lay-filter="size" class="select" lay-search>
<option value=""></option>
</select>
</div>
<p>
数量(个)
</p>
<div class="layui-form-item">
<input type="text" placeholder="请输入整数" autocomplete="off" name="count" class="layui-input" id="count">
</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>
<div class="medal">
<p>
颜色
</p>
<div class="layui-form-item">
<input type="radio" name="colors" lay-filter="colors" value="金箔" title="金箔" checked>
<input type="radio" name="colors" lay-filter="colors" value="银箔" title="银箔">
</div>
</div>
<p>
工艺
</p>
<div class="layui-form-item">
<span class="medal">
<input type="radio" name="inkjet" lay-filter="inkjet" value="彩色喷印" title="彩色喷印" checked>
<input type="radio" name="craft" lay-filter="switch" value="蝶边" title="蝶边">
<input type="radio" name="craft" lay-filter="switch" value="直边" title="直边" checked>
</span>
<span class="crystal">
<input type="radio" name="engrave" lay-filter="engrave" value="雕刻" title="雕刻" checked>
<input type="radio" name="color" lay-filter="colors" value="白色" title="白色" checked>
<input type="radio" name="color" lay-filter="colors" value="黑色" title="黑色">
<input type="radio" name="color" lay-filter="colors" value="蓝色" title="蓝色">
<input type="radio" name="color" lay-filter="colors" value="黄色" title="黄色">
<input type="radio" name="color" lay-filter="colors" value="红色" title="红色">
<input type="radio" name="color" lay-filter="colors" value="金色" title="金色">
</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>
<%@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 getImages() {
let kind1 = $("#kind1Value option:selected").val();
var html = " ";
var remark = " ";
// 清空轮播图
$("#carousel").empty();
$("#remark").empty();
$.ajax({
url: "${pageContext.request.contextPath}/getImgs",
type: "GET",
data: {
proTypeValue: $("#proTypeValue").val(),
kindValue: kind1,
},
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('checkbox(switch)', function (data) {
})
form.on('select(kindValue)', function (data) {
let text = data.value;
$("#size_tip").show()
$(".medal").show();
$(".medal input").attr("disabled", false);
$(".crystal").hide();
$(".crystal input").attr("disabled", true);
let html = `<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 (text == '水晶') {
$("#size_tip").hide()
$(".crystal").show();
$(".crystal input").attr("disabled", false);
$(".medal").hide();
$(".medal input").attr("disabled", true);
html = `<option value=""></option>
<option value="酸洗五角星">酸洗五角星</option>
<option value="炫彩刀片">炫彩刀片</option>
<option value="金色刀片">金色刀片</option>
<option value="尖角">尖角</option>
<option value="斜面6角星">斜面6角星</option>
<option value="八角">八角</option>
<option value="蓝色梦想">蓝色梦想</option>
<option value="蓝色三条线">蓝色三条线</option>
<option value="蓝色弯弯">蓝色弯弯</option>
<option value="斜面5角星">斜面5角星</option>
<option value="麦穗圆型">麦穗圆型</option>
<option value="酸洗凹面">酸洗凹面</option>
<option value="月牙">月牙</option>
<option value="大拇指">大拇指</option>
<option value="宝剑">宝剑</option>
<option value="蓝色五角星">蓝色五角星</option>
`;
}
$("#kind1Value").empty().append(html);
form.render();
});
form.on('select(kind1Value)', function (data) {
getImages();
let text = data.value;
let kind = $("#kindValue option:selected").val();
let html = `
<option value=""></option>
<option value="20*25">20*25cm</option>
<option value="24*31">24*31cm</option>
<option value="25*35">25*35cm</option>
<option value="30*40">30*40cm</option>
<option value="35*50">35*50cm</option>
<option value="40*60">40*60cm</option>
`;
if (kind == "水晶") {
if (text == "酸洗五角星") {
html = `<option value="280*10*80">280*10*80mm</option>`;
}
if (text == "炫彩刀片") {
html = `<option value="270*80*60">270*80*60mm</option>`;
}
if (text == "金色刀片") {
html = `<option value="280*10*80">280*10*80mm</option>`;
}
if (text == "尖角") {
html = `<option value="200*115*60">200*115*60mm</option>`;
}
if (text == "斜面6角星") {
html = `<option value="270*70*70">270*70*70mm</option>`;
}
if (text == "八角") {
html = `<option value="200*180*45">200*180*45mm</option>`;
}
if (text == "蓝色梦想") {
html = `<option value="280*110*80">280*110*80mm</option>`;
}
if (text == "蓝色三条线") {
html = `<option value="260*120*45">260*120*45mm</option>`;
}
if (text == "蓝色弯弯") {
html = `<option value="230*120*45">230*120*45mm</option>`;
}
if (text == "斜面5角星") {
html = `<option value="280*70*70">280*70*70mm</option>`;
}
if (text == "麦穗圆型") {
html = `<option value="180*150*40">180*150*40mm</option>`;
}
if (text == "酸洗凹面") {
html = `<option value="280*10*80">280*10*80mm</option>`;
}
if (text == "月牙") {
html = `<option value="180*170*45">180*170*45mm</option>`;
}
if (text == "大拇指") {
html = `<option value="280*70*70">280*70*70mm</option>`;
}
if (text == "宝剑") {
html = `<option value="255*80*60">255*80*60mm</option>`;
}
if (text == "蓝色五角星") {
html = `<option value="210*195*40">210*195*40mm</option>`;
}
} else {
if (text == "孚雕新树藤") {
html = `
<option value=""></option>
<option value="24*31">24*31cm</option>
<option value="25*35">25*35cm</option>
<option value="30*40">30*40cm</option>
<option value="35*50">35*50cm</option>
`;
}
if (text == "万里长城") {
html = `
<option value=""></option>
<option value="25*35">25*35cm</option>
<option value="30*40">30*40cm</option>
`;
}
}
$("#size").empty().append(html);
form.render();
});
form.on('select(size)', function (data) {
let kind = $("#kindValue option:selected").val();
let name = $("#kind1Value option:selected").val();
let size = data.value;
let text = "";
if (kind == "水晶") {
} else {
if (name == "树藤") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:11*16cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:15*22cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:14.5*24.5cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:18.5*28.5cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:24*39.5cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:28*48cm";
}
}
if (name == "角花") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:11.5*16.5cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:15*22cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:15*25cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:19*29cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:24*39.5cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:28*47cm";
}
}
if (name == "镭射") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:12*17cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:16.5*23.5cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:16.5*26cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:20.5*30.5cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:24.5*40cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:28.5*48cm";
}
}
if (name == "孚雕新树藤") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:12*17cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:13*20cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:13*22.5cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:16.5*26.5cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:20.5*34.5cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:28.5*48cm";
}
}
if (name == "万里长城") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:12*17cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:13*20cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:16*26cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:20*30cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:20.5*34.5cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:28.5*48cm";
}
}
if (name == "皇冠") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:12.5*18cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:17*24cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:17*27cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:22*32cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:26.5*41cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:30*50cm";
}
}
if (name == "纯金/银箔") {
if (size == '20*25') {
text = "木托尺寸:20*25cm、金箔尺寸:15*20cm、内容排版尺寸:15*20cm";
}
if (size == '24*31') {
text = "木托尺寸:24*31cm、金箔尺寸:20*27cm、内容排版尺寸:20*27cm";
}
if (size == '25*35') {
text = "木托尺寸:25*35cm、金箔尺寸:20*30cm、内容排版尺寸:20*30cm";
}
if (size == '30*40') {
text = "木托尺寸:30*40cm、金箔尺寸:25*35cm、内容排版尺寸:25*35cm";
}
if (size == '35*50') {
text = "木托尺寸:35*50cm、金箔尺寸:30*45cm、内容排版尺寸:30*45cm";
}
if (size == '40*60') {
text = "木托尺寸:40*60cm、金箔尺寸:35*55cm、内容排版尺寸:35*55cm";
}
}
$("#size_tip").text(text);
}
})
// 点击计算,计算价格
form.on('submit(acount_btn)', function (data) {
var number = $("#number").val();
var length = $("#size").val();
var width = $("#width option:selected").val();
var count = $("#count").val();
var kind = $("#kindValue option:selected").text();
var kind1 = $("#kind1Value option:selected").text();
var craft = $("input[name='craft']:checked").val();
var size = $("#size option:selected").text();
if (!count) {
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;
}
var data = result.data.proList;
let craftList = [];
$("input:radio[name='craft']:checked").each(function (i) {
// 没有被禁用的工艺加到arr中
if (!$(this).is(':disabled')) {
craftList.push($(this).val());
}
});
$("input:radio[name='inkjet']:checked").each(function (i) {
// 没有被禁用的工艺加到arr中
if (!$(this).is(':disabled')) {
craftList.push($(this).val());
}
});
$("input:radio[name='engrave']:checked").each(function (i) {
// 没有被禁用的工艺加到arr中
if (!$(this).is(':disabled')) {
craftList.push($(this).val());
}
});
$("input:radio[name='color']:checked").each(function (i) {
// 没有被禁用的工艺加到arr中
if (!$(this).is(':disabled')) {
craftList.push($(this).val());
}
});
$("input:radio[name='colors']:checked").each(function (i) {
// 没有被禁用的工艺加到arr中
if (!$(this).is(':disabled')) {
craftList.push($(this).val());
}
});
if (size.indexOf("cm") == -1) {
size += "mm";
}
var span_result = '奖牌 - ' + kind + '-' + kind1 + '-' + size + ' (同款内容)\n' + "工艺 :" + craftList.join('、') + "\n";
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 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>