tablecolth.jsp 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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. <body>
  12. <div class="big_box">
  13. <div class="left_div">
  14. <h1 class="h1">桌布</h1> <span style="color:red;font-weight:700;"></span>
  15. <hr>
  16. <form class="layui-form">
  17. <input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="桌布"/>
  18. <p>
  19. 材质
  20. </p>
  21. <div class="layui-form-item">
  22. <select name="kindValue" id="kindValue" lay-filter="kindValue" class="select" lay-search>
  23. <option value="0">蓝底</option>
  24. <option value="1">白底</option>
  25. <option value="2">红底</option>
  26. </select>
  27. </div>
  28. <p>
  29. 尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽</span>
  30. </p>
  31. <div class="layui-form-item">
  32. <input type="text" placeholder="格式:长*宽" name="size" id="size" class="layui-input" autocomplete="off">
  33. </div>
  34. <p>
  35. 数量(个)
  36. </p>
  37. <div class="layui-form-item">
  38. <input type="text" placeholder="请输入整数" autocomplete="off" name="count" class="layui-input" id="count">
  39. </div>
  40. <p>
  41. 款数
  42. </p>
  43. <div class="layui-form-item">
  44. <input type="text" placeholder="请输入整数" autocomplete="off" name="number" id="number" value="1"
  45. class="layui-input" lay-verify="number">
  46. </div>
  47. <p>
  48. 客户旺旺
  49. </p>
  50. <div class="layui-form-item">
  51. <input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang"
  52. class="layui-input">
  53. </div>
  54. <p>
  55. 工艺
  56. </p>
  57. <div class="layui-form-item">
  58. <input type="radio" name="craft" value="" title="无" lay-filter="craft" checked>
  59. <input type="radio" name="craft" value="花边" title="花边" lay-filter="craft">
  60. <input type="radio" name="craft" value="直角" title="直角" lay-filter="craft">
  61. </div>
  62. <hr>
  63. <div class="layui-form-item">
  64. <button class="layui-btn" lay-submit="" lay-filter="acount_btn">计算</button>
  65. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  66. </div>
  67. <h2>计算结果-
  68. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult"
  69. onclick="copyResult()">点击复制
  70. </button>
  71. </h2>
  72. <div>
  73. <textarea rows="11" cols="75" id="span_result" readonly="readonly"></textarea>
  74. <%@include file="../acountExpressFee.jsp" %>
  75. </div>
  76. <!--<h2>下单备注-<button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult" onclick="copyBz()">点击复制</button></h2>
  77. <div>
  78. <textarea rows="5" cols="75" id="bz_result" readonly="readonly"></textarea>
  79. </div>-->
  80. <div>
  81. <table class="layui-hide" id="priceTable" lay-filter="priceTable"></table>
  82. </div>
  83. </form>
  84. </div>
  85. <div class="right_div" style="margin-left:50px;">
  86. <div class="layui-carousel" id="test1">
  87. <div carousel-item id="carousel"></div>
  88. <br>
  89. <div id="remark" style="font-size:20px;color:red"></div>
  90. </div>
  91. </div>
  92. </div>
  93. </body>
  94. <%@include file="/views/copyResult.jsp" %>
  95. <script>
  96. layui.use(['table', 'form', 'carousel'], function () {
  97. var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  98. var carousel = layui.carousel;
  99. var table = layui.table;
  100. //建造实例
  101. ins = carousel.render({});
  102. var html = " ";
  103. var remark = " ";
  104. // 清空轮播图
  105. $("#carousel").empty();
  106. $("#remark").empty();
  107. $.ajax({
  108. url: "${pageContext.request.contextPath}/getImgs",
  109. type: "GET",
  110. data: {
  111. proTypeValue: $("#proTypeValue").val(),
  112. },
  113. success: function (result) {
  114. for (let i = 0; i < result.length; i++) {
  115. // 只留一个remark
  116. remark = "";
  117. html += '<div><img style="width:' + result[0].imgWidth + 'px" src="' + result[i].imgUrl + '"></div>';
  118. remark += '<div><span>' + result[i].remark + '<span/></div>';
  119. }
  120. $("#carousel").append(html);
  121. // 如果没有说明,就不显示null
  122. if (remark.indexOf("null") < 0) {
  123. $("#remark").append(remark);
  124. }
  125. // 如果没有轮播图就隐藏
  126. if (result.length == 0) {
  127. document.getElementById("test1").style.display = "none"; //隐藏
  128. } else {
  129. document.getElementById("test1").style.display = "block"; //显示
  130. ins.reload({
  131. elem: '#test1',
  132. width: result[0].imgWidth, //设置容器宽度
  133. height: result[0].imgHeight
  134. });
  135. }
  136. }
  137. });
  138. // 点击计算,计算价格
  139. form.on('submit(acount_btn)', function (data) {
  140. var number = $("#number").val();
  141. var size = $("#size").val();
  142. var count = $("#count").val();
  143. var kind = $("#kindValue option:selected").text();
  144. var craft = $("input[name='craft']:checked").val();
  145. console.log(craft);
  146. if (!size) {
  147. layer.msg('请填写尺寸!', {offset: ['300px', '300px']}, function () {
  148. });
  149. return false;
  150. }
  151. if (!count) {
  152. layer.msg('请填写数量!', {offset: ['300px', '300px']}, function () {
  153. });
  154. return false;
  155. }
  156. if (size.split("*")[0] < 80 && size.split("*")[1] < 80) {
  157. layer.msg('最小尺寸80*80cm', {offset: ['300px', '300px']}, function () {
  158. });
  159. return false;
  160. }
  161. if (size.split("*")[0] > 200 || size.split("*")[1] > 200) {
  162. layer.msg('最大尺寸超过200*200cm需要拼接', {offset: ['300px', '300px']}, function () {
  163. });
  164. }
  165. $.ajax({
  166. url: "${path}/getThanSum",
  167. type: "GET",
  168. data: $(".big_box form").serialize(),
  169. success: function (result) {
  170. if (result.code == 100) {
  171. layer.msg(result.msg, {offset: ['300px', '300px']}, function () {
  172. });
  173. return false;
  174. }
  175. var data = result.data.proList;
  176. var span_result = '桌布 - ' + kind + '-' + size + ' CM (同款内容)\n';
  177. if (number > 1) {
  178. for (let i = 0; i < data.length; i++) {
  179. span_result += number + '款 各' + data[i].count + "个,共" + data[i].price + "元" + '\n'
  180. data[i].number = number;
  181. }
  182. } else {
  183. for (let i = 0; i < data.length; i++) {
  184. span_result += number + '款 ' + data[i].count + "个,共" + data[i].price + "元" + '\n'
  185. data[i].number = number;
  186. }
  187. }
  188. span_result += '包邮,免费设计呢~(偏远地区需补邮费)'
  189. $("#span_result").val(span_result);
  190. getRemark("桌布", size, count + "个", kind, number, "", "");
  191. //计算完自动复制文本
  192. var e = document.getElementById("span_result");//对象是content
  193. if (e.value != "") {
  194. e.select();//选择对象
  195. document.execCommand("Copy");//执行浏览器复制命令
  196. }
  197. //生成表格
  198. table.render({
  199. elem: '#priceTable',
  200. even: true, //隔行变色
  201. data: data, // 赋值已知数据
  202. width: 500,
  203. cols: [[
  204. {
  205. field: 'number',
  206. width: '12%',
  207. align: "center",
  208. title: '款数'
  209. }, {
  210. field: 'count',
  211. width: '16%',
  212. align: "center",
  213. title: '数量'
  214. }, {
  215. field: 'price',
  216. width: '16%',
  217. align: "center",
  218. title: '报价'
  219. }, {
  220. field: 'wangwang',
  221. align: "center",
  222. width: '16%',
  223. title: '折扣价'
  224. }, {
  225. field: 'wangwang',
  226. align: "center",
  227. width: '19%',
  228. title: '跳楼价'
  229. }, {
  230. field: 'weight',
  231. width: '21%',
  232. align: "center",
  233. title: '重量(kg)'
  234. }
  235. ]],
  236. done: function () {
  237. }
  238. });
  239. }
  240. });
  241. return false;
  242. });
  243. });
  244. </script>
  245. </html>