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

294 lines
9.4 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>
.layui-input{
display:inline-block;
}
</style>
<body>
<div class="big_box">
<div class="left_div">
<h1 class="h1">房卡套</h1> <span style="color:red;font-weight:700;"></span>
<hr class="layui-bg-red">
<form class="layui-form">
<div class="layui-input-block">
<input type="radio" name="k" class="k" lay-filter="k" value="0" title="常规卡套">
<!--<input type="radio" name="k" class="k" lay-filter="k" value="1" title="自定义卡套">-->
</div>
</form>
<form class="layui-form" id="roomCardForm">
<input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="7" >
<div class="cg" style="display: none">
<%@include file="roomCardCG.jsp"%>
</div>
<div class="zdy" style="display: none">
<%@include file="roomCardZDY.jsp"%>
</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>
<p>
工艺
</p>
<input type="checkbox" name="craft" class="tangjin" lay-filter="switch" value="单面局部烫金" title="单面局部烫金">
<hr>
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="acount_btn" id="queryCondBtn">计算</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="../acountExpressFeeTooWeight.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;
// 监听回车键,如果敲了回车,调用点击‘计算’
$(document).keydown(function (e) {
if (e.keyCode === 13) {
$("#queryCondBtn").trigger("click");
}
});
//建造实例
ins = carousel.render({});
// 选择是常规还是自定义
form.on('radio(k)', function(data){
// $("#roomCardForm")[0].reset();
var level = data.value;//被点击的radio的value值
// 常规
if(level == 0){
form.on('select(kindValue)', function (data){
var html = " ";
var remark = " ";
// 清空轮播图
$("#carousel").empty();
$("#remark").empty();
$.ajax({
url:"${pageContext.request.contextPath}/getImgs",
type:"GET",
data:{
proTypeValue : $("#proTypeValue").val(),
kindValue : $("#kindValue").val()
//$(".big_box form").serialize(),
},
//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
});
}
}
});
})
$(".cg").show();
$(".zdy").hide();
$(".zdy").find(":input").attr("disabled", true);
$(".cg").find(":input").attr("disabled", false);
}else{
$(".cg").hide();
$(".zdy").show();
$(".zdy").find(":input").attr("disabled", false);
$(".cg").find(":input").attr("disabled", true);
}
// 点击计算,计算价格
form.on('submit(acount_btn)', function(data) {
var number= $("#number").val();
// 自定义尺寸
if(level == 1){
var lengthSize = $(".lengthSize").val();
var widthSize = $(".widthSize").val();
var heightSize = $(".heightSize").val();
if(lengthSize == "" || widthSize == "" || heightSize == ""){
layer.msg("请填写正确的长宽高!",{offset:['300px','300px']},function(){});
return false;
}
var count =$("#count").val();
if(!count){
layer.msg('请输入数量!',{offset:['300px','300px']},function(){});
return false;
}
}
var arr = [];
$("input:checkbox[name='craft']:checked").each(function(i) {
// 没有被禁用的工艺加到arr中
if(!$(this).is(':disabled')){
arr.push($(this).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(level == 0){
var kindData={
0 :"对折式成品6.2*9.7CM",
1 :"直角口袋式成品6.2*9.5CM",
2 :"异形口袋式成品6.2*9.5CM"
};
var kind = kindData[$("#kindValue").val()];
var span_result ='房卡套 - ' + "250克白卡纸 - 单面覆哑膜" +'\n规格 :'+ kind +' -(同款内容)\n' + '工艺: ' + arr + '\n';
}else{
var kindData={
0 :"双面覆膜",
1 :"不覆膜"
};
var kind = kindData[$('input[name="kind2Value"]:checked').val()];
var size = "长" + lengthSize+ " 宽" + widthSize+ " 舌头" + heightSize
var span_result ='房卡套 - ' + "300克铜版纸 - " + kind +'\n规格 :'+ size +' CM -(同款内容)\n' + '工艺: ' + arr + '\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);
var size = "";
var count = "";
if(level == 0){
var index = kind.indexOf("品");
size = kind.substring(index+1, kind.length);
size = size.replace("CM", "");
count = $("#count1 option:selected").val();
}else{
size = lengthSize + "*" + widthSize + "*" + heightSize;
count = $("#count").val();
}
var craft = "单面覆哑膜" + arr;
getRemark("房卡套", size, count+"个", "250克白卡纸", 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>