specialCard2.jsp 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8" %>
  3. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>Insert title here</title>
  9. <%@include file="/views/common.jsp" %>
  10. </head>
  11. <!-- 特种纸名片 -->
  12. <style>
  13. #tang_type .layui-form-select .layui-edge {
  14. right: 20px;
  15. }
  16. #dama .layui-form-select .layui-edge {
  17. right: 20px;
  18. }
  19. #ccolor_type .layui-form-select .layui-edge {
  20. right: 20px;
  21. }
  22. #leishe_type .layui-form-select .layui-edge {
  23. right: 20px;
  24. }
  25. </style>
  26. <body>
  27. <div class="big_box">
  28. <div class="left_div">
  29. <h1 class="h1">特种纸名片</h1>
  30. <hr>
  31. <form class="layui-form">
  32. <input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="特种纸名片">
  33. <p>材料</p>
  34. <div class="layui-form-item">
  35. <select name="kindValue" lay-filter="kindValueSelect" class="select kindValueSelect">
  36. <option value=""></option>
  37. <option value="岚蝶">岚蝶</option>
  38. <option value="皙贝">皙贝</option>
  39. <option value="琮纹">琮纹</option>
  40. <option value="睿狐">睿狐</option>
  41. <option value="溪雪">溪雪(珠光)</option>
  42. <%-- <option value="300克布纹纸">300克布纹纸</option>--%>
  43. <option value="玉蕊">玉蕊</option>
  44. <option value="金绒">金绒</option>
  45. <%-- <option value="300克灵感纸">300克灵感纸</option>--%>
  46. <option value="芳怡">芳怡(草香)</option>
  47. <%-- <option value="300克米黄漂金">300克米黄漂金</option>--%>
  48. <!--<option value="500克黑卡双面印金/银">500克黑卡双面印金/银</option>-->
  49. <%-- <option value="300克冰白纸彩色印刷">300克冰白纸彩色印刷</option>--%>
  50. <%-- <option value="触感咖啡330克印金/银">触感咖啡330克印金/银</option>--%>
  51. <%-- <option value="采石白色600克彩色印刷">采石白色600克彩色印刷</option>--%>
  52. <!--<option value="优质绵米色600克">优质绵米色600克</option>-->
  53. <option value="萱姿">萱姿(雅柔)</option>
  54. <%-- <option value="500克拉丝闪银">500克拉丝闪银卡</option>--%>
  55. <%-- <option value="500克拉丝闪金">500克拉丝闪金卡</option>--%>
  56. <option value="素芸">素芸</option>
  57. </select>
  58. </div>
  59. <div class="suyun" style="display: none">
  60. <p>材质</p>
  61. <div class="layui-form-item">
  62. <input type="radio" name="kind" lay-filter="kindSelect" title="500克" value="500克" checked/>
  63. <input type="radio" name="kind" lay-filter="kindSelect" title="300克" value="300克"/>
  64. </div>
  65. </div>
  66. <p>
  67. 尺寸(CM/厘米) <span style="font-size: 14px; color: red">输入格式: 长 * 宽</span>
  68. </p>
  69. <div class="layui-form-item" id="ui_size">
  70. <input type="text" name="size" placeholder="格式:长*宽"
  71. class="layui-input sizeSpecialCard" autocomplete="off">
  72. </div>
  73. <div id="ui_ls" style="display:none;">
  74. <input type="radio" name="ls_size" value="9*5.4" title="9*5.4cm" checked="checked">
  75. </div>
  76. <p>数量(张)
  77. <span class="cardCount" style="display:none"><input type="checkbox" class="switchCardCount"
  78. name="switchCardCount" lay-filter="switchCardCount"
  79. title="自定义数量"></span>
  80. </p>
  81. <div id="noCraft">
  82. <div class="diyCardCount" style="display: none">
  83. <div class="layui-form-item">
  84. <input type="text" name="count" id="cardCount" placeholder="请输入整数" class="layui-input"
  85. autocomplete="off">
  86. </div>
  87. </div>
  88. <div class="notDiyCardCount">
  89. <div class="layui-form-item">
  90. <select name="count" class="select" id="count1">
  91. <option value="200">200</option>
  92. <option value="500">500</option>
  93. <option value="1000">1000</option>
  94. <option value="2000">2000</option>
  95. <option value="5000">5000</option>
  96. <option value="10000">10000</option>
  97. </select>
  98. </div>
  99. </div>
  100. </div>
  101. <div id="hasCraft" style="display: none;">
  102. <div class="layui-form-item">
  103. <select name="count" class="select" id="count2">
  104. <option value="200">200</option>
  105. <option value="500">500</option>
  106. <option value="600">600</option>
  107. <option value="800">800</option>
  108. <option value="1000">1000</option>
  109. </select>
  110. </div>
  111. </div>
  112. <div id="ui_ls_count" style="display: none;">
  113. <div class="layui-form-item">
  114. <select name="count" class="select" id="count3">
  115. <option value="100">100</option>
  116. <option value="200">200</option>
  117. <option value="500">500</option>
  118. <option value="1000">1000</option>
  119. <option value="2000">2000</option>
  120. <option value="5000">5000</option>
  121. <option value="10000">10000</option>
  122. </select>
  123. </div>
  124. </div>
  125. <div id="ui_mk_count" style="display: none;">
  126. <div class="layui-form-item">
  127. <select name="count" class="select" id="count4">
  128. <option value="100">100</option>
  129. <option value="200">200</option>
  130. <option value="400">400</option>
  131. <option value="500">500</option>
  132. <option value="1000">1000</option>
  133. <option value="2000">2000</option>
  134. <option value="3000">3000</option>
  135. <option value="5000">5000</option>
  136. <option value="10000">10000</option>
  137. </select>
  138. </div>
  139. </div>
  140. <p>款数</p>
  141. <div class="layui-form-item">
  142. <input type="text" placeholder="请输入整数" autocomplete="off"
  143. name="number" value="1" id="number" class="layui-input"
  144. lay-verify="number">
  145. </div>
  146. <div class="layui-form-item" id="ui_des" style="display:none;">
  147. <p>
  148. 设计内容
  149. </p>
  150. <select name="p" lay-filter="desType" id="desType" class="select" lay-search>
  151. <option value=""></option>
  152. <option value="1">改序号</option>
  153. <option value="2">改名字</option>
  154. <option value="3">改二维码</option>
  155. <option value="4">改图片</option>
  156. <option value="5">改内容模板相同</option>
  157. <option value="6" selected>改内容模板完全不同</option>
  158. </select>
  159. </div>
  160. <p>
  161. 客户旺旺
  162. </p>
  163. <div class="layui-form-item">
  164. <input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang"
  165. class="layui-input">
  166. </div>
  167. <p>工艺</p>
  168. <div id="craft_layout">
  169. <input type="checkbox" name="craft" lay-filter="switch" id="dakong" value="打孔" title="打孔"
  170. class="niupikaNoMQCraft">
  171. <input type="checkbox" name="craft" lay-filter="switch" id="craft_mo" value="异形模切" title="异形模切"
  172. class="niupikaCraft ">
  173. <span class="newCraft">
  174. <input type="checkbox" name="craft" lay-filter="switch" id="craft_yuanjiao" value="圆角" title="圆角"
  175. class="noCraft">
  176. <input type="checkbox" name="craft" lay-filter="switch" id="craft_dianxian" value="打点线" title="打点线"
  177. class="">
  178. </span>
  179. <input type="checkbox" name="craft" lay-filter="switch" value="压痕" title="压痕">
  180. </div>
  181. <div id="mianka" style="display: none">
  182. <div id="ccolor_type" class="layui-inline" style="width: 180px;display: flex;align-items: center">
  183. <div style="flex-shrink: 0">纸张颜色:</div>
  184. <select name="craft" class="select">
  185. <option value="黑色" selected>黑色</option>
  186. <option value="军绿色">军绿色</option>
  187. <option value="砖红色">砖红色</option>
  188. <option value="深咖">深咖</option>
  189. <option value="浅棕色">浅棕色</option>
  190. <option value="白色">白色</option>
  191. </select>
  192. </div>
  193. <div class="layui-inline">
  194. 裁切方式:
  195. <input type="checkbox" name="craft" lay-filter="mianka" value="直角裁切" title="直角裁切" checked disabled>
  196. <input type="checkbox" name="craft" lay-filter="mianka" value="圆角" title="圆角" disabled>
  197. <input type="checkbox" name="craft" lay-filter="mianka" value="异形模切" title="异形模切" disabled>
  198. </div>
  199. <div class="layui-inline-block">
  200. 印面:
  201. <input type="checkbox" name="craft" lay-filter="mianka" value="单面" title="单面" checked disabled>
  202. <input type="checkbox" name="craft" lay-filter="mianka" value="双面" title="双面" disabled>
  203. </div>
  204. <div class="layui-inline">
  205. 特殊工艺:
  206. <input type="checkbox" name="craft" lay-filter="mianka" value="击凸" title="击凸" disabled>
  207. <input type="checkbox" name="craft" lay-filter="mianka" value="压凹" title="压凹" disabled>
  208. <div id="color_type" class="layui-inline" style="display: none;width: 200px">
  209. <select name="craft" class="select" disabled>
  210. <option value="无色" selected>无色</option>
  211. <option value="有色">有色</option>
  212. <option value="有色加凹凸">有色加激凸/有色加压凹</option>
  213. </select>
  214. </div>
  215. <input type="checkbox" name="craft" lay-filter="mianka" value="烫镭射银" title="烫镭射银" disabled>
  216. <div id="leishe_type" class="layui-inline" style="display: none;width: 200px">
  217. <select name="craft" class="select" disabled>
  218. <option value="单面烫镭射银" selected>单面烫镭射银</option>
  219. <option value="双面烫镭射银">双面烫镭射银
  220. <option>
  221. </select>
  222. </div>
  223. </div>
  224. </div>
  225. <br/>
  226. <input type="checkbox" name="craft" lay-filter="mianka" value="单面烫金" title="单面烫金">
  227. <input type="checkbox" name="craft" lay-filter="mianka" value="双面烫金" title="双面烫金">
  228. <div id="tang_type" class="layui-inline" style="display: none;width: 90px">
  229. <select name="craft" class="select" disabled>
  230. <option value="烫金" selected>烫金</option>
  231. <option value="烫银">烫银</option>
  232. <option value="烫蓝">烫蓝</option>
  233. <option value="烫绿">烫绿</option>
  234. <option value="烫紫">烫紫</option>
  235. <option value="烫玫瑰">烫玫瑰</option>
  236. </select>
  237. </div>
  238. <div class="layui-inline-block">
  239. 常见工艺:
  240. <input type="checkbox" name="craft" lay-filter="switch" value="打码" title="打码">
  241. <div id="dama" class="layui-inline" style="display: none;width: 90px">
  242. <select name="maxian" class="select">
  243. <option value="1" selected>1</option>
  244. <option value="2">2</option>
  245. </select>
  246. </div>
  247. <div id="baimo" class="layui-inline" style="display: none;width: 90px">
  248. <input type="checkbox" name="craft" lay-filter="mianka" value="白墨" title="白墨">
  249. </div>
  250. </div>
  251. <!--<input type="checkbox" name="craft" lay-filter="switch" value="烫金/" title="烫金" class="hasCraft ui_ls_craft">
  252. <input type="checkbox" name="craft" lay-filter="switch" value="击凸" title="击凸" class="hasCraft">
  253. <input type="checkbox" name="craft" lay-filter="switch" value="凹凸" title="凹凸" class="ui_ls_craft" disabled="disabled">
  254. <input type="checkbox" name="craft" lay-filter="switch" value="双面" title="双面" class="ui_ls_craft" disabled="disabled">-->
  255. <hr>
  256. <div class="layui-form-item">
  257. <button class="layui-btn" lay-submit="" lay-filter="acount_btn">计算</button>
  258. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  259. </div>
  260. <h2>计算结果-
  261. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult"
  262. onclick="copyResult()">点击复制
  263. </button>
  264. </h2>
  265. <div>
  266. <textarea rows="11" cols="75" id="span_result" readonly="readonly"></textarea>
  267. <%@include file="../acountExpressFee.jsp" %>
  268. </div>
  269. <!--<h2>下单备注-<button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult" onclick="copyBz()">点击复制</button></h2>
  270. <div>
  271. <textarea rows="5" cols="75" id="bz_result" readonly="readonly"></textarea>
  272. </div>-->
  273. <div>
  274. <table class="layui-hide" id="priceTable" lay-filter="priceTable"></table>
  275. </div>
  276. </form>
  277. </div>
  278. <div class="right_div">
  279. <div class="layui-carousel" id="test1">
  280. <div carousel-item id="carousel"></div>
  281. <br>
  282. <div id="remark" style="font-size:20px;color:red"></div>
  283. </div>
  284. </div>
  285. </div>
  286. </body>
  287. <%@include file="/views/copyResult.jsp" %>
  288. <script>
  289. setNumberOptions();
  290. function setNumberOptions() {
  291. let html = '';
  292. if (window.parent.system_isPdd) {
  293. html = `<option value=""></option>
  294. <option value="1">改序号</option>
  295. <option value="2">改名字</option>
  296. <option value="3">改二维码</option>
  297. <option value="4">改图片</option>
  298. <option value="5">改内容模板相同</option>
  299. <option value="6" selected>改内容模板完全不同</option>`;
  300. } else {
  301. html = `<option value=""></option>
  302. <option value="1">改序号</option>
  303. <option value="6" selected>改内容模板完全不同</option>`;
  304. }
  305. $("#desType").empty().append(html);
  306. }
  307. layui.use(['table', 'form', 'carousel'], function () {
  308. var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  309. var carousel = layui.carousel;
  310. var table = layui.table;
  311. let remark_html = ''
  312. //建造实例
  313. ins = carousel.render({});
  314. $("#number").on("input", function (e) {
  315. var number = e.delegateTarget.value;
  316. var kind = $("input[name='kind']:checked").val();
  317. if (number > 1) {
  318. $("#ui_des").show();
  319. } else {
  320. $("#ui_des").hide();
  321. }
  322. });
  323. form.on('select(kindValueSelect)', function (data) {
  324. // 轮播图
  325. var html = " ";
  326. var remark = " ";
  327. // 清空轮播图
  328. $("#carousel").empty();
  329. $("#remark").empty();
  330. $.ajax({
  331. url: "${pageContext.request.contextPath}/getImgs",
  332. type: "GET",
  333. data: {
  334. proTypeValue: "4",
  335. kindValue: "6",
  336. kind2Value: data.value
  337. },
  338. //dataType : "json",
  339. success: function (result) {
  340. for (let i = 0; i < result.length; i++) {
  341. // 只留一个remark
  342. remark = "";
  343. html += '<div><img style="width:' + result[0].imgWidth + 'px" src="' + result[i].imgUrl + '"></div>';
  344. remark += '<div><span>' + result[i].remark + '<span/></div>';
  345. }
  346. $("#carousel").append(html);
  347. // 如果没有说明,就不显示null
  348. if (remark.indexOf("null") < 0) {
  349. remark_html = remark;
  350. $("#remark").append(remark);
  351. }
  352. // 如果没有轮播图就隐藏
  353. if (result.length == 0) {
  354. document.getElementById("test1").style.display = "none"; //隐藏
  355. } else {
  356. document.getElementById("test1").style.display = "block"; //显示
  357. ins.reload({
  358. elem: '#test1',
  359. width: result[0].imgWidth, //设置容器宽度
  360. height: result[0].imgHeight
  361. });
  362. }
  363. }
  364. });
  365. $("#mianka").hide()
  366. $("#mianka input").attr("disabled", true);
  367. $("#craft_layout").show()
  368. $("#craft_layout input").attr("disabled", false);
  369. $(".suyun").hide();
  370. $(".suyun").find(":input").attr("disabled", true);
  371. if (data.value.length <= 4) {
  372. $("#noCraft").show();
  373. $("#hasCraft").hide();
  374. $("#noCraft").find(":input").attr("disabled", false);
  375. $("#hasCraft").find(":input").attr("disabled", true);
  376. $('.noCraft').removeAttr('disabled');
  377. $('.hasCraft').prop('disabled', 'disabled');
  378. if (data.value == '珠光纸') {
  379. $('input[class = switchCardCount]').prop('checked', false);
  380. // 默认禁用自定义的数量
  381. $(".diyCardCount").find(":input").attr("disabled", true);
  382. //【自定义数量】复选框
  383. $(".cardCount").show();
  384. $("#ui_ls").hide();
  385. $("#ui_size").show();
  386. $("#ui_ls").find(":input").attr("disabled", true);
  387. $("#ui_size").find(":input").attr("disabled", false);
  388. $('.ui_ls_craft').prop('disabled', 'disabled');
  389. $('.hasCraft').prop('disabled', 'disabled');
  390. $('.noCraft').removeAttr('disabled');
  391. $('.niupikaNoMQCraft').removeAttr('disabled');
  392. $("#ui_ls_count").hide();
  393. $("#ui_ls_count").find(":input").attr("disabled", true);
  394. $("#ui_mk_count").hide()
  395. $("#ui_mk_count").find(":input").attr("disabled", true);
  396. // 自定义少数量
  397. form.on('checkbox(switchCardCount)', function (data) {
  398. if (data.elem.checked) {
  399. $(".diyCardCount").show();
  400. $(".notDiyCardCount").hide();
  401. $(".diyCardCount").find(":input").attr("disabled", false);
  402. $(".notDiyCardCount").find(":input").attr("disabled", true);
  403. } else {
  404. $(".notDiyCardCount").show();
  405. $(".diyCardCount").hide();
  406. $(".notDiyCardCount").find(":input").attr("disabled", false);
  407. $(".diyCardCount").find(":input").attr("disabled", true);
  408. }
  409. form.render();
  410. })
  411. } else if (data.value == '拉丝闪银' || data.value == '拉丝闪金') {
  412. $("#ui_ls").show();
  413. $("#ui_size").hide();
  414. $("#ui_ls").find(":input").attr("disabled", false);
  415. $("#ui_size").find(":input").attr("disabled", true);
  416. $('.hasCraft').prop('disabled', 'disabled');
  417. $('.noCraft').prop('disabled', 'disabled');
  418. $(".niupikaNoMQCraft").prop('disabled', 'disabled');
  419. $('.ui_ls_craft').removeAttr('disabled');
  420. $("#ui_ls_count").show();
  421. $("#ui_ls_count").find(":input").attr("disabled", false);
  422. $("#ui_mk_count").hide()
  423. $("#ui_mk_count").find(":input").attr("disabled", true);
  424. $(".cardCount").hide();
  425. $(".notDiyCardCount").hide();
  426. $(".diyCardCount").hide();
  427. $(".notDiyCardCount").find(":input").attr("disabled", true);
  428. $(".diyCardCount").find(":input").attr("disabled", true);
  429. } else {
  430. //【自定义数量】复选框
  431. $(".cardCount").hide();
  432. $(".notDiyCardCount").show();
  433. $(".diyCardCount").hide();
  434. $(".notDiyCardCount").find(":input").attr("disabled", false);
  435. $(".diyCardCount").find(":input").attr("disabled", true);
  436. $("#ui_ls").hide();
  437. $("#ui_size").show();
  438. $("#ui_ls").find(":input").attr("disabled", true);
  439. $("#ui_size").find(":input").attr("disabled", false);
  440. $('.ui_ls_craft').prop('disabled', 'disabled');
  441. $('.hasCraft').prop('disabled', 'disabled');
  442. $('.noCraft').removeAttr('disabled');
  443. $('.niupikaNoMQCraft').removeAttr('disabled');
  444. $("#ui_ls_count").hide();
  445. $("#ui_ls_count").find(":input").attr("disabled", true);
  446. $("#ui_mk_count").hide()
  447. $("#ui_mk_count").find(":input").attr("disabled", true);
  448. }
  449. // 选中300克牛皮纸的时候,展示【异形模切】工艺,禁用【打孔】工艺
  450. // if (data.value == '金绒') {
  451. // $('.niupikaCraft').removeAttr('disabled');
  452. // } else {
  453. // $('.niupikaCraft').prop('disabled', 'disabled');
  454. // }
  455. form.render();
  456. } else {
  457. $("#hasCraft").show();
  458. $("#noCraft").hide();
  459. $("#hasCraft").find(":input").attr("disabled", false);
  460. $("#noCraft").find(":input").attr("disabled", true);
  461. $('.ui_ls_craft').prop('disabled', 'disabled');
  462. $('.hasCraft').removeAttr('disabled');
  463. $('.noCraft').prop('disabled', 'disabled');
  464. $('.niupikaNoMQCraft').removeAttr('disabled');
  465. $('.newCraft').removeAttr('disabled');
  466. $("#ui_ls").hide();
  467. $("#ui_size").show();
  468. $("#ui_ls").find(":input").attr("disabled", true);
  469. $("#ui_size").find(":input").attr("disabled", false);
  470. $("#ui_ls_count").hide();
  471. $("#ui_ls_count").find(":input").attr("disabled", true);
  472. $("#ui_mk_count").hide()
  473. $("#ui_mk_count").find(":input").attr("disabled", true);
  474. $(".newCraft").show();
  475. if (data.value == '金绒' || data.value == '500克拉丝闪银' || data.value == '500克拉丝闪金') {
  476. $(".newCraft").hide()
  477. $(".newCraft input[name='craft']").prop('checked', false);
  478. }
  479. }
  480. if (data.value == "素芸") {
  481. $("#craft_layout").hide()
  482. $("#craft_layout input").attr("disabled", true);
  483. $("#mianka").show()
  484. $("#mianka input").attr("disabled", false);
  485. $("#ui_mk_count").show()
  486. $("#ui_mk_count").find(":input").attr("disabled", false);
  487. $("#noCraft").hide()
  488. $("#noCraft").find(":input").attr("disabled", true);
  489. $("#hasCraft").hide()
  490. $("#hasCraft").find(":input").attr("disabled", true);
  491. $("#ui_ls_count").hide()
  492. $("#ui_ls_count").find(":input").attr("disabled", true);
  493. $(".suyun").show();
  494. $(".suyun").find(":input").attr("disabled", false);
  495. }
  496. $("#baimo").find(":input").attr("disabled", true);
  497. $("#baimo").hide();
  498. if (data.value == "金绒") {
  499. $("#baimo").find(":input").attr("disabled", false);
  500. $("#baimo").show();
  501. }
  502. form.render();
  503. })
  504. form.on("radio(kindSelect)", function (data) {
  505. let colorHtml = `<option value="黑色" selected>黑色</option>
  506. <option value="军绿色">军绿色</option>
  507. <option value="砖红色">砖红色</option>
  508. <option value="深咖">深咖</option>
  509. <option value="浅棕色">浅棕色</option>
  510. <option value="白色">白色</option>`;
  511. $("input[name='craft'][value='压凹']").prop("checked", false);
  512. $("#color_type").hide();
  513. $("#color_type").find("select").attr("disabled", true);
  514. if (data.value == "300克") {
  515. colorHtml = `<option value="白色">白色</option>`;
  516. }
  517. $("#ccolor_type select[name='craft']").empty();
  518. $("#ccolor_type select[name='craft']").append(colorHtml);
  519. form.render();
  520. })
  521. form.on("checkbox(mianka)", function (data) {
  522. let craft_list = [];
  523. let size = $(".sizeSpecialCard").val();
  524. let kindValueSelect = $(".kindValueSelect option:checked").text();
  525. let kindValue = $("input[name='kind']:checked").val();
  526. if (kindValueSelect != "500克拉丝闪银卡" && kindValueSelect != "500克拉丝闪金卡" && kindValueSelect != '素芸') {
  527. } else {
  528. size = $("input[name='ls_size']").val();
  529. }
  530. if (kindValueSelect == '素芸') {
  531. size = $("input[name='size']").val();
  532. }
  533. $("input[name='craft']:checked").each(function () {
  534. if (!$(this).is(':disabled')) {
  535. craft_list.push($(this).val());
  536. }
  537. }
  538. );
  539. const requiredCrafts = ["击凸", "压凹", "单面烫金", "双面烫金", "烫镭射银"];
  540. const allExist = requiredCrafts.filter(craft => craft_list.includes(craft));
  541. if (allExist.length > 1) {
  542. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  543. $(data.elem).prop("checked", false);
  544. layer.msg("击凸 - 压凹 - 单面烫金 - 双面烫金 - 烫镭射银不能同时选择", {offset: ['300px', '300px']}, function () {
  545. });
  546. return false;
  547. }
  548. const baimoCrafts = ["白墨", "单面烫金", "双面烫金"];
  549. const baimoExist = baimoCrafts.filter(craft => craft_list.includes(craft));
  550. if (baimoExist.length > 1) {
  551. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  552. $(data.elem).prop("checked", false);
  553. layer.msg("白墨 - 烫金不能同时选择", {offset: ['300px', '300px']}, function () {
  554. });
  555. return false;
  556. }
  557. const caiqie = ["圆角", "异形模切", "直角裁切"];
  558. const caiqieExist = caiqie.filter(craft => craft_list.includes(craft));
  559. if (caiqieExist.length > 1) {
  560. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  561. $(data.elem).prop("checked", false);
  562. layer.msg("裁切方式不能同时选择", {offset: ['300px', '300px']}, function () {
  563. });
  564. return false;
  565. }
  566. const yinmian = ["单面", "双面"];
  567. const yinmianExist = yinmian.filter(craft => craft_list.includes(craft));
  568. if (yinmianExist.length > 1) {
  569. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  570. $(data.elem).prop("checked", false);
  571. layer.msg("印面工艺不能同时选择", {offset: ['300px', '300px']}, function () {
  572. });
  573. return false;
  574. }
  575. if (craft_list.indexOf("打码") > -1 && craft_list.indexOf("异形模切") > -1) {
  576. if ((size.split("*")[0] < 9 || size.split("*")[1] < 5.4) && (size.split("*")[0] < 5.4 || size.split("*")[1] < 9)) {
  577. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  578. $(data.elem).prop("checked", false);
  579. layer.msg("9*5.4 打码 - 异形模切不能同时选择", {offset: ['300px', '300px']}, function () {
  580. });
  581. return false;
  582. }
  583. }
  584. // if (kindValue == "300克" && craft_list.indexOf("压凹") > -1) {
  585. // $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  586. // $(data.elem).prop("checked", false);
  587. // layer.msg("素芸300克无法选择压凹工艺", {offset: ['300px', '300px']}, function () {
  588. // });
  589. // return false;
  590. // }
  591. if (craft_list.indexOf("击凸") > -1 || craft_list.indexOf("压凹") > -1) {
  592. if (craft_list.indexOf("击凸") > -1) {
  593. $("#color_type select").empty().append(` <option value="无色" selected>无色</option>
  594. <option value="有色">有色</option>
  595. <option value="有色加激凸">有色加激凸</option>`)
  596. }
  597. if (craft_list.indexOf("压凹") > -1) {
  598. $("#color_type select").empty().append(` <option value="无色" selected>无色</option>
  599. <option value="有色">有色</option>
  600. <option value="有色加压凹">有色加压凹</option>`)
  601. }
  602. $("#color_type").show();
  603. $("#color_type").find("select").attr("disabled", false);
  604. } else {
  605. $("#color_type").hide();
  606. $("#color_type").find("select").attr("disabled", true);
  607. }
  608. if (craft_list.indexOf("双面烫金") > -1 || craft_list.indexOf("单面烫金") > -1) {
  609. $("#tang_type").show();
  610. $("#tang_type").find("select").attr("disabled", false);
  611. } else {
  612. $("#tang_type").hide();
  613. $("#tang_type").find("select").attr("disabled", true);
  614. }
  615. if (craft_list.indexOf("烫镭射银") > -1) {
  616. $("#leishe_type").show();
  617. $("#leishe_type").find("select").attr("disabled", false);
  618. } else {
  619. $("#leishe_type").hide();
  620. $("#leishe_type").find("select").attr("disabled", true);
  621. }
  622. form.render();
  623. })
  624. // 监听工艺
  625. form.on('checkbox(switch)', function (data) {
  626. // if (data.value == '异形模切') {
  627. // // 选中【异形模切】的时候,把【打孔】工艺禁用
  628. // if (data.elem.checked) {
  629. // $('.niupikaNoMQCraft').prop('disabled', 'disabled');
  630. // } else {
  631. // $('.niupikaNoMQCraft').removeAttr('disabled');
  632. // }
  633. // }
  634. let size = $(".sizeSpecialCard").val();
  635. let kindValueSelect = $(".kindValueSelect option:checked").text();
  636. if (kindValueSelect != "500克拉丝闪银卡" && kindValueSelect != "500克拉丝闪金卡" && kindValueSelect != '素芸') {
  637. } else {
  638. size = $("input[name='ls_size']").val();
  639. }
  640. if (kindValueSelect == '素芸') {
  641. size = $("input[name='size']").val();
  642. }
  643. let craft_list = [];
  644. $("input[name='craft']:checked").each(function () {
  645. if (!$(this).is(':disabled')) {
  646. craft_list.push($(this).val());
  647. }
  648. }
  649. );
  650. let kindValue = $("select[name='kindValue'] option:selected").val();
  651. if (craft_list.indexOf("打码") > -1 && craft_list.indexOf("异形模切") > -1) {
  652. if ((size.split("*")[0] < 9 || size.split("*")[1] < 5.4) && (size.split("*")[0] < 5.4 || size.split("*")[1] < 9)) {
  653. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  654. $(data.elem).prop("checked", false);
  655. layer.msg("9*5.4 打码 - 异形模切不能同时选择", {offset: ['300px', '300px']}, function () {
  656. });
  657. return false;
  658. }
  659. }
  660. if (craft_list.indexOf("压痕") > -1 && craft_list.indexOf("异形模切") > -1) {
  661. $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
  662. $(data.elem).prop("checked", false);
  663. layer.msg("压痕 - 异形模切不能同时选择", {offset: ['300px', '300px']}, function () {
  664. });
  665. return false;
  666. }
  667. if (kindValue != "素芸") {
  668. $("#dakong").removeAttr('disabled');
  669. $("#craft_mo").removeAttr('disabled');
  670. $(".newCraft").children().removeAttr('disabled');
  671. }
  672. if ($("#dakong")[0].checked || $("#craft_yuanjiao")[0].checked) {
  673. $("#craft_dianxian").prop('disabled', 'disabled');
  674. $("#craft_mo").prop('disabled', 'disabled');
  675. }
  676. if ($("#craft_dianxian")[0].checked) {
  677. $("#dakong").prop('disabled', 'disabled');
  678. $("#craft_yuanjiao").prop('disabled', 'disabled');
  679. $("#craft_mo").prop('disabled', 'disabled');
  680. }
  681. if ($("#craft_mo")[0].checked) {
  682. $("#dakong").prop('disabled', 'disabled');
  683. $("#craft_yuanjiao").prop('disabled', 'disabled');
  684. $("#craft_dianxian").prop('disabled', 'disabled');
  685. }
  686. if (craft_list.indexOf("打码") > -1) {
  687. $("#dama").show();
  688. $("#dama").find("select").attr("disabled", false);
  689. } else {
  690. $("#dama").hide();
  691. // $("#dama").find("select").attr("disabled", true);
  692. }
  693. form.render();
  694. setRemark()
  695. })
  696. function setRemark() {
  697. let craft_list = [];
  698. $("input[name='craft']:checked").not("disabled").each(function () {
  699. craft_list.push($(this).val());
  700. }
  701. );
  702. $("#remark").empty();
  703. let html = '';
  704. if (craft_list.indexOf('异形模切') == -1) {
  705. html = remark_html
  706. } else {
  707. html = remark_html
  708. html = html.replaceAll('2-3', '3-4');
  709. }
  710. $("#remark").append('<div><span>' + html + '<span/></div>');
  711. // 清空轮播图
  712. $("#carousel").empty();
  713. let data = {
  714. proTypeValue: "4",
  715. kindValue: "6"
  716. }
  717. if (craft_list.indexOf('异形模切') > -1) {
  718. data.craftValue = "异形模切"
  719. }
  720. if (craft_list.indexOf('打点线') > -1) {
  721. data.craftValue = "打点线"
  722. }
  723. if (craft_list.indexOf('圆角') > -1) {
  724. data.craftValue = "圆角"
  725. }
  726. if (craft_list.indexOf('打孔') > -1) {
  727. data.craftValue = "打孔"
  728. }
  729. html = ''
  730. $.ajax({
  731. url: "${pageContext.request.contextPath}/getImgs",
  732. type: "GET",
  733. data,
  734. //dataType : "json",
  735. success: function (result) {
  736. for (let i = 0; i < result.length; i++) {
  737. // 只留一个remark
  738. html += '<div><img style="width:' + result[0].imgWidth + 'px" src="' + result[i].imgUrl + '"></div>';
  739. }
  740. $("#carousel").append(html);
  741. // 如果没有说明,就不显示null
  742. // 如果没有轮播图就隐藏
  743. if (result.length == 0) {
  744. document.getElementById("test1").style.display = "none"; //隐藏
  745. } else {
  746. document.getElementById("test1").style.display = "block"; //显示
  747. ins.reload({
  748. elem: '#test1',
  749. width: result[0].imgWidth, //设置容器宽度
  750. height: result[0].imgHeight
  751. });
  752. }
  753. }
  754. });
  755. }
  756. // 点击计算,计算价格
  757. form.on('submit(acount_btn)', function (data) {
  758. if ($('input[name="switchCardCount"]:checked').length != 0) {
  759. if ($("#cardCount").val() > 200) {
  760. layer.msg("特种纸名片 - 珠光纸自定义数量最大不超过200", {offset: ['300px', '300px']}, function () {
  761. });
  762. return false;
  763. }
  764. }
  765. // 特种纸名片材料
  766. var kindValueSelect = $(".kindValueSelect option:checked").text();
  767. let kindValue = $("input[name='kind']:checked").val();
  768. var size = $(".sizeSpecialCard").val();
  769. var number = $("#number").val();
  770. if (kindValueSelect != "500克拉丝闪银卡" && kindValueSelect != "500克拉丝闪金卡" && kindValueSelect != '素芸') {
  771. if ((size.split("*")[0] < 5 || size.split("*")[1] < 4.5) && (size.split("*")[0] < 4.5 || size.split("*")[1] < 5)) {
  772. layer.msg("【特种纸名片】尺寸不能小于5*4.5 cm", {offset: ['300px', '300px']}, function () {
  773. });
  774. return false;
  775. }
  776. } else {
  777. size = $("input[name='ls_size']").val();
  778. }
  779. if (kindValueSelect == '素芸') {
  780. size = $("input[name='size']").val();
  781. }
  782. if ((size.split("*")[0] > 42 || size.split("*")[1] > 28.5) && (size.split("*")[0] > 28.5 || size.split("*")[1] > 42)) {
  783. layer.msg("【特种纸名片】尺寸不能大于42*28.5 cm", {offset: ['300px', '300px']}, function () {
  784. });
  785. return false;
  786. }
  787. if (kindValueSelect == '素芸') {
  788. if ((size.split("*")[0] < 3.5 || size.split("*")[1] < 3.5)) {
  789. layer.msg("【特种纸名片-素芸】尺寸不能小于3.5*3.5 cm", {offset: ['300px', '300px']}, function () {
  790. });
  791. return false;
  792. }
  793. if (kindValue == '500克') {
  794. if ((size.split("*")[0] > 21 || size.split("*")[1] > 15) && (size.split("*")[0] > 15 || size.split("*")[1] > 21)) {
  795. layer.msg("【特种纸名片-500克素芸】尺寸不能大于21*15 cm", {offset: ['300px', '300px']}, function () {
  796. });
  797. return false;
  798. }
  799. }
  800. if (kindValue == '300克') {
  801. if ((size.split("*")[0] > 10 || size.split("*")[1] > 15) && (size.split("*")[0] > 15 || size.split("*")[1] > 10)) {
  802. layer.msg("【特种纸名片-300克素芸】尺寸不能大于10*15 cm", {offset: ['300px', '300px']}, function () {
  803. });
  804. return false;
  805. }
  806. }
  807. }
  808. var arr = []
  809. let ma_num = $("select[name='maxian'] option:selected").val();
  810. let is_dama = false;
  811. let arrs = [];
  812. $("input:checkbox[name='craft']:checked").each(function (i) {
  813. if (!$(this).is(':disabled')) {
  814. arr.push($(this).val());
  815. if ($(this).val() != "双面覆哑膜") {
  816. if ($(this).val() == "单面烫金" || $(this).val() == "双面烫金") {
  817. let tangColor = $("#tang_type select[name='craft'] option:selected").val();
  818. arrs.push($(this).val().replace("烫金", "") + tangColor);
  819. } else if ($(this).val() == "烫镭射银") {
  820. let tangColor = $("#leishe_type select[name='craft'] option:selected").val();
  821. arrs.push(tangColor);
  822. } else if ($(this).val() == "打码") {
  823. is_dama = true;
  824. arrs.push($(this).val() + ma_num + "个");
  825. } else if ($(this).val() == "单面" || $(this).val() == "双面") {
  826. arrs.push($(this).val() + "印刷");
  827. } else if ($(this).val() == "压凹" || $(this).val() == "击凸") {
  828. arrs.push($("#color_type select option:selected").val() + $(this).val());
  829. } else {
  830. arrs.push($(this).val());
  831. }
  832. }
  833. }
  834. });
  835. if (is_dama) {
  836. if ((size.split("*")[0] < 9 || size.split("*")[1] < 5.4) && (size.split("*")[0] < 5.4 || size.split("*")[1] < 9)) {
  837. layer.msg("打码尺寸不能小于9*5.4 cm", {offset: ['300px', '300px']}, function () {
  838. });
  839. return false;
  840. }
  841. if (ma_num > 1) {
  842. if ((size.split("*")[0] < 13 || size.split("*")[1] < 4.5) && (size.split("*")[0] < 4.5 || size.split("*")[1] < 13)) {
  843. layer.msg("打码尺寸小于13*4.5 cm不能打多个码", {offset: ['300px', '300px']}, function () {
  844. });
  845. return false;
  846. }
  847. }
  848. }
  849. if (kindValueSelect == '素芸') {
  850. const caiqie = ["圆角", "异形模切", "直角裁切"];
  851. const caiqieExist = caiqie.filter(craft => arr.includes(craft));
  852. if (caiqieExist.length == 0) {
  853. layer.msg("素芸-请选择裁切工艺", {offset: ['300px', '300px']}, function () {
  854. });
  855. return false;
  856. }
  857. const yinmian = ["单面", "双面"];
  858. const yinmianExist = yinmian.filter(craft => arr.includes(craft));
  859. if (yinmianExist.length == 0) {
  860. layer.msg("素芸-请选择印面工艺", {offset: ['300px', '300px']}, function () {
  861. });
  862. return false;
  863. }
  864. let color = $("select[name='craft']:not(:disabled) option:selected").val()
  865. if (color) {
  866. arr.push(color);
  867. }
  868. }
  869. $.ajax({
  870. url: "${path}/getThanSum",
  871. type: "GET",
  872. data: $(".big_box form").serialize(),
  873. success: function (result) {
  874. if (result.code == 100) {
  875. layer.msg(result.msg, {offset: ['300px', '300px']}, function () {
  876. });
  877. return false;
  878. }
  879. var data = result.data.proList;
  880. arr = arrs;
  881. let kindValueSelectText = kindValueSelect;
  882. if (kindValueSelectText == "素芸") {
  883. kindValueSelectText = kindValue + kindValueSelectText;
  884. }
  885. var span_result = '特种纸名片' + "-" + kindValueSelectText + "-" + size
  886. + "厘米-(同款内容) \n" + "工艺 :" + arr + "\n"
  887. if (number > 1) {
  888. if (window.parent.system_isPdd) {
  889. let numberType = $("#desType option:selected").text();
  890. span_result += "款数:" + number + "-" + numberType + "\n";
  891. }
  892. for (let i = 0; i < data.length; i++) {
  893. span_result += number + '款 各' + data[i].count + "张,共" + data[i].price + "元" + '\n'
  894. data[i].number = number;
  895. }
  896. } else {
  897. for (let i = 0; i < data.length; i++) {
  898. span_result += number + '款 ' + data[i].count + "张,共" + data[i].price + "元" + '\n'
  899. data[i].number = number;
  900. }
  901. }
  902. span_result += '包邮,免费设计呢~(偏远地区需补邮费)'
  903. $("#span_result").val(span_result);
  904. var count = "";
  905. var display = $("#noCraft").css("display");
  906. var cardCount = [];
  907. $("input:checkbox[name='switchCardCount']:checked").each(function (i) {
  908. if (!$(this).is(':disabled')) {
  909. cardCount.push($(this).val());
  910. }
  911. });
  912. if (display != "none") {
  913. count = $("#count1 option:selected").text();
  914. if ($('.cardCount').css('display') != 'none') {
  915. if (cardCount[0] == "on") {
  916. count = $("#cardCount").val();
  917. }
  918. }
  919. } else {
  920. count = $("#count2 option:selected").text();
  921. }
  922. getRemark($("#proTypeValue").val(), size, count + "张", kindValueSelect, number, arr, "");
  923. //计算完自动复制文本
  924. var e = document.getElementById("span_result");//对象是content
  925. if (e.value != "") {
  926. e.select();//选择对象
  927. document.execCommand("Copy");//执行浏览器复制命令
  928. }
  929. //生成表格
  930. table.render({
  931. elem: '#priceTable',
  932. even: true, //隔行变色
  933. data: data, // 赋值已知数据
  934. width: 500,
  935. cols: [[
  936. {
  937. field: 'number',
  938. width: '12%',
  939. align: "center",
  940. title: '款数'
  941. }, {
  942. field: 'count',
  943. width: '16%',
  944. align: "center",
  945. title: '数量'
  946. }, {
  947. field: 'price',
  948. width: '16%',
  949. align: "center",
  950. title: '报价'
  951. }, {
  952. field: 'wangwang',
  953. align: "center",
  954. width: '16%',
  955. title: '折扣价'
  956. }, {
  957. field: 'wangwang',
  958. align: "center",
  959. width: '19%',
  960. title: '跳楼价'
  961. }, {
  962. field: 'weight',
  963. width: '25%',
  964. align: "center",
  965. title: '重量约(kg)'
  966. }
  967. ]],
  968. done: function () {
  969. }
  970. });
  971. }
  972. });
  973. return false;
  974. });
  975. });
  976. </script>
  977. </html>