msd.jsp 11 KB

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