add.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. {extend name="app/shop/view/base.html"/}
  2. {block name="resources"}
  3. <style>
  4. .discount { display: flex; justify-content: space-between; height: 34px; line-height: 34px; padding: 5px 15px; background-color: #F6FBFD; border: 1px dashed #BCE8F1; }
  5. .manjian-rule {}
  6. .manjian-rule .level-head{display: flex;justify-content: space-between;background: #eee;padding: 0 10px;margin-bottom: 15px;}
  7. .manjian-rule .title { color: #454545;font-weight: 600; }
  8. .manjian-rule .wrap .layui-form-label { width: 140px; }
  9. .manjian-rule .wrap .layui-form-label + .layui-input-block { margin-left: 140px }
  10. .manjian-rule .wrap .layui-form-checkbox[lay-skin=primary] {margin-top: 0}
  11. .manjian-rule .wrap .discount-cont {padding-left: 28px;min-height: 36px}
  12. .manjian-rule .discount-item .word-aux {margin-left: 0}
  13. .layui-form-item .layui-input-inline.end-time{float: none;}
  14. .layui-table-body{max-height: 480px !important;}
  15. .goods-title{display: flex;align-items: center;}
  16. .goods-title .goods-img{display: flex;align-items: center;justify-content: center;width: 55px;height: 55px;margin-right: 5px;}
  17. .goods-title .goods-img img{max-height: 100%;max-width: 100%;}
  18. .goods-title .goods-name{flex: 1;line-height: 1.6;}
  19. .select-coupon-layer .layui-layer-content{ overflow-y: scroll!important; }
  20. .goods-item{height: 325px;overflow: hidden;display: block;overflow-y: auto;}
  21. .table-title-name{width: 100px ; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;margin-right: 135px!important;}
  22. .coupon-end-time{padding-right: 63px !important;}
  23. .word-aux{margin-left: 200px;margin-top: 0}
  24. .goods_num {padding-left: 20px;}
  25. </style>
  26. {/block}
  27. {block name="main"}
  28. <div class="layui-form form-wrap">
  29. <div class="layui-form-item">
  30. <label class="layui-form-label"><span class="required">*</span>活动名称:</label>
  31. <div class="layui-input-block">
  32. <input type="text" name="manjian_name" lay-verify="required|len" class="layui-input len-long" autocomplete="off" maxlength="40">
  33. </div>
  34. <div class="word-aux">
  35. <p>活动名称最多为25个字符</p>
  36. </div>
  37. </div>
  38. <div class="layui-form-item">
  39. <label class="layui-form-label"><span class="required">*</span>活动时间:</label>
  40. <div class="layui-inline">
  41. <div class="layui-input-inline len-mid">
  42. <input type="text" class="layui-input" name="start_time" lay-verify="required" id="start_time" autocomplete="off" readonly>
  43. <i class=" iconrili iconfont calendar"></i>
  44. </div>
  45. <span class="layui-form-mid">-</span>
  46. <div class="layui-input-inline len-mid end-time">
  47. <input type="text" class="layui-input" name="end_time" lay-verify="required|time" id="end_time" autocomplete="off" readonly>
  48. <i class=" iconrili iconfont calendar"></i>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="layui-form-item">
  53. <label class="layui-form-label"><span class="required">*</span>条件类型:</label>
  54. <div class="layui-input-block">
  55. <input type="radio" name="type" lay-filter="type" value="0" title="满N元" checked>
  56. <input type="radio" name="type" lay-filter="type" value="1" title="满N件">
  57. </div>
  58. </div>
  59. <div class="layui-form-item">
  60. <div class="layui-form manjian-rule">
  61. <div class="layui-form-item">
  62. <label class="layui-form-label"><span class="required">*</span>优惠设置:</label>
  63. <div class="layui-input-block discount-level">
  64. <div class="level-item">
  65. <div class="level-head">
  66. <label class="title">活动层级1:</label>
  67. </div>
  68. <div class="wrap">
  69. <div class="condition">
  70. <label class="layui-form-label"><span class="required">*</span>优惠门槛:</label>
  71. <div class="layui-input-block">
  72. <div class="type-0">
  73. <div class="layui-form-mid">满</div>
  74. <div class="layui-input-inline len-short">
  75. <input type="number" name="money" value="" lay-verify="manjian_money" placeholder="" autocomplete="off" class="layui-input len-short">
  76. </div>
  77. <div class="layui-form-mid">元</div>
  78. </div>
  79. <div class="type-1 layui-hide">
  80. <div class="layui-form-mid">满</div>
  81. <div class="layui-input-inline len-short">
  82. <input type="number" name="num" value="" lay-verify="manjian_num" placeholder="" autocomplete="off" class="layui-input len-short">
  83. </div>
  84. <div class="layui-form-mid">件</div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="content">
  89. <label class="layui-form-label"><span class="required">*</span>优惠内容:</label>
  90. <div class="layui-input-block">
  91. <div class="discount-item discount-money">
  92. <div>
  93. <input type="checkbox" name="discount_type" value="discount_money" class="input-checkbox" lay-skin="primary"><span>订单金额优惠</span>
  94. </div>
  95. <div class="discount-cont layui-hide">
  96. <div class="layui-form-mid">减</div>
  97. <div class="layui-input-inline len-short">
  98. <input type="number" value="" placeholder="" autocomplete="off" class="layui-input len-short">
  99. </div>
  100. <div class="layui-form-mid">元</div>
  101. </div>
  102. </div>
  103. <div class="discount-item">
  104. <div>
  105. <input type="checkbox" name="" value="free_shipping" class="input-checkbox" lay-skin="primary"><span>包邮</span>
  106. </div>
  107. <div class="word-aux" >
  108. <p>仅参与该活动的商品包邮,非整单包邮</p>
  109. </div>
  110. </div>
  111. <div class="discount-item point">
  112. <div>
  113. <input type="checkbox" name="discount_type" value="point" class="input-checkbox" lay-skin="primary"><span>送积分</span>
  114. </div>
  115. <div class="discount-cont layui-hide">
  116. <div class="layui-form-mid">送</div>
  117. <div class="layui-input-inline len-short">
  118. <input type="number" name="" value="" placeholder="" autocomplete="off" class="layui-input len-short">
  119. </div>
  120. <div class="layui-form-mid">积分</div>
  121. </div>
  122. </div>
  123. <div class="discount-item coupon">
  124. <div>
  125. <input type="checkbox" name="discount_type" value="coupon" class="input-checkbox" lay-skin="primary"><span>送优惠券</span>
  126. </div>
  127. <div class="discount-cont layui-hide">
  128. <div><a href="javascript:;" class="text-color select-coupon">选择优惠券</a></div>
  129. <div class="word-aux">
  130. <p>请确认优惠券数量是否充足,优惠券数量不足将导致赠送失败</p>
  131. </div>
  132. <div>
  133. <table class="layui-table" lay-skin="nob">
  134. <colgroup>
  135. <col width="30%">
  136. <col width="30%">
  137. <col width="20%">
  138. <col width="20%">
  139. </colgroup>
  140. <thead>
  141. <tr>
  142. <th>优惠券</th>
  143. <th>优惠内容</th>
  144. <th>赠券数 <i title="每人每次参加该活动赠送的优惠券数量" class="iconfont iconwenhao1"></i> </th>
  145. <th style="text-align:center;">操作</th>
  146. </tr>
  147. </thead>
  148. <tbody></tbody>
  149. </table>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. <label class="layui-form-label"></label>
  159. <div class="layui-input-block">
  160. <button class="layui-btn" onclick="addDiscountLevel()">添加活动层级</button>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. <div class="layui-form-item">
  166. <label class="layui-form-label"><span class="required">*</span>活动商品:</label>
  167. <div class="layui-input-block">
  168. <input type="radio" name="manjian_type" lay-filter="manjian_type" value="1" title="全部商品参与" checked>
  169. <input type="radio" name="manjian_type" lay-filter="manjian_type" value="2" title="指定商品参与">
  170. </div>
  171. </div>
  172. <div class="layui-form-item goods_list" style="display:none">
  173. <label class="layui-form-label"></label>
  174. <div class="layui-input-block">
  175. <table id="selected_goods_list"></table>
  176. <button class="layui-btn" onclick="addGoods()">选择商品</button> <span class="goods_num">已选商品(<span id="goods_num" class="text-color">0</span>)</span>
  177. </div>
  178. </div>
  179. <input type="hidden" name="goods_ids" lay-verify="goods_num">
  180. <div class="layui-form-item">
  181. <label class="layui-form-label">备注:</label>
  182. <div class="layui-input-block">
  183. <textarea name="remark" class="layui-textarea len-long" maxlength="150"></textarea>
  184. </div>
  185. </div>
  186. <div class="form-row">
  187. <button class="layui-btn" lay-submit lay-filter="save">提交</button>
  188. <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
  189. </div>
  190. </div>
  191. <!-- 操作 -->
  192. <script type="text/html" id="operation">
  193. <div class="table-btn">
  194. <a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
  195. </div>
  196. </script>
  197. {/block}
  198. {block name="script"}
  199. <script type="text/javascript" src="MANJIAN_JS/add.js"></script>
  200. <!-- 优惠券 -->
  201. <script type="text/html" id="couponList">
  202. <div class="coupon-box">
  203. <div class="single-filter-box">
  204. <div class="layui-form">
  205. <div class="layui-input-inline">
  206. <input type="text" name="coupon_name" placeholder="请输优惠券名称" class="layui-input">
  207. <button type="button" class="layui-btn layui-btn-primary" lay-filter="coupon-search" lay-submit>
  208. <i class="layui-icon">&#xe615;</i>
  209. </button>
  210. </div>
  211. </div>
  212. </div>
  213. <div class="gods-box">
  214. <table class="layui-table" lay-skin="line" lay-size="lg">
  215. <colgroup>
  216. <col width="8%">
  217. <col width="50%">
  218. <col width="15%">
  219. <col width="27%">
  220. </colgroup>
  221. <thead>
  222. <tr>
  223. <th class="check-box">
  224. <div class="layui-form">
  225. <input type="checkbox" name="" lay-filter="selectAll" lay-skin="primary">
  226. </div>
  227. </th>
  228. <th class="layui-elip">优惠券名称</th>
  229. <th class="layui-elip">优惠金额/折扣</th>
  230. <th class="layui-elip">结束时间</th>
  231. </tr>
  232. </thead>
  233. </table>
  234. <table class="layui-table" id="goods" lay-skin="line" lay-size="lg">
  235. <!-- <colgroup>
  236. <col width="8%">
  237. <col width="50%">
  238. <col width="15%">
  239. <col width="27%">
  240. </colgroup> -->
  241. <tbody class="goods-item">
  242. {foreach $coupon_list.data as $coupon_list_k => $coupon_list_v}
  243. <tr>
  244. <td class="check-box">
  245. <div class="layui-form">
  246. {{# var a = {$coupon_list_v.coupon_type_id} }}
  247. {{# if($.inArray(a.toString(), d.coupon_id) != -1){ }}
  248. <input type="checkbox" name="" lay-filter="select{$coupon_list_k}" lay-skin="primary" checked>
  249. {{# }else{ }}
  250. <input type="checkbox" name="" lay-filter="select{$coupon_list_k}" lay-skin="primary">
  251. {{# } }}
  252. <input type="hidden" id="coupon_id" value="{$coupon_list_v.coupon_type_id}">
  253. </div>
  254. </td>
  255. <td>
  256. <div class="table-title">
  257. <div class="title-pic">
  258. {if condition="$coupon_list_v.image"}
  259. <img src="{:img($coupon_list_v.image)}">
  260. {else/}
  261. <img src="__ROOT__/public/uniapp/game/coupon.png">
  262. {/if}
  263. </div>
  264. <div class="title-content table-title-name">
  265. <p class="multi-line-hiding">{$coupon_list_v.coupon_name}</p>
  266. </div>
  267. </div>
  268. </td>
  269. {if $coupon_list_v.type == 'reward'}
  270. <td class="layui-elip coupon-money">{$coupon_list_v.money}元</td>
  271. {else/}
  272. <td class="layui-elip coupon-money">{$coupon_list_v.discount}折</td>
  273. {/if}
  274. {if $coupon_list_v.validity_type == 0}
  275. <td class="layui-elip coupon-end-time">{:time_to_date($coupon_list_v.end_time)}</td>
  276. {elseif $coupon_list_v.validity_type == 1}
  277. <td class="layui-elip coupon-end-time">领取之日起{$coupon_list_v.fixed_term}天有效</td>
  278. {else/}
  279. <td class="layui-elip coupon-end-time">长期有效</td>
  280. {/if}
  281. <input type="hidden" name="at_least" value="{$coupon_list_v.at_least}">
  282. <input type="hidden" name="type" value="{$coupon_list_v.type}">
  283. <input type="hidden" name="discount" value="{$coupon_list_v.discount}">
  284. <input type="hidden" name="money" value="{$coupon_list_v.money}">
  285. </tr>
  286. {/foreach}
  287. </tbody>
  288. </table>
  289. </div>
  290. <button class="layui-btn" onclick="couponSelected()">确定</button>
  291. </div>
  292. </script>
  293. <!-- 优惠券 -->
  294. <script type="text/html" id="couponListsearch">
  295. <div class="coupon-box">
  296. <div class="single-filter-box">
  297. <div class="layui-form">
  298. <div class="layui-input-inline">
  299. <input type="text" name="coupon_name" placeholder="请输优惠券名称" class="layui-input">
  300. <button type="button" class="layui-btn layui-btn-primary" lay-filter="coupon-search" lay-submit>
  301. <i class="layui-icon">&#xe615;</i>
  302. </button>
  303. </div>
  304. </div>
  305. </div>
  306. <div class="gods-box">
  307. <table class="layui-table" lay-skin="line" lay-size="lg">
  308. <colgroup>
  309. <col width="8%">
  310. <col width="50%">
  311. <col width="15%">
  312. <col width="27%">
  313. </colgroup>
  314. <thead>
  315. <tr>
  316. <th class="check-box">
  317. <div class="layui-form">
  318. <input type="checkbox" name="" lay-filter="selectAll" lay-skin="primary">
  319. </div>
  320. </th>
  321. <th class="layui-elip">优惠券名称</th>
  322. <th class="layui-elip">优惠金额/折扣</th>
  323. <th class="layui-elip">结束时间</th>
  324. </tr>
  325. </thead>
  326. </table>
  327. <table class="layui-table" id="goods" lay-skin="line" lay-size="lg">
  328. <!-- <colgroup>
  329. <col width="8%">
  330. <col width="50%">
  331. <col width="15%">
  332. <col width="27%">
  333. </colgroup> -->
  334. <tbody class="goods-item">
  335. {{# layui.each(d.list, function(index, item){ }}
  336. <tr>
  337. <td class="check-box">
  338. <div class="layui-form">
  339. {{# var a = item.coupon_type_id }}
  340. {{# if($.inArray(a.toString(), d.coupon_id) != -1){ }}
  341. <input type="checkbox" name="" lay-filter="select{{item.index}}" lay-skin="primary" checked>
  342. {{# }else{ }}
  343. <input type="checkbox" name="" lay-filter="select{{item.index}}" lay-skin="primary">
  344. {{# } }}
  345. <input type="hidden" id="coupon_id" value="{{item.coupon_type_id}}">
  346. </div>
  347. </td>
  348. <td>
  349. <div class="table-title">
  350. <div class="title-pic">
  351. {{#if(item.image) { }}
  352. <img src="{{item.image}}">
  353. {{# }else{ }}
  354. <img src="__ROOT__/public/uniapp/game/coupon.png">
  355. {{# } }}
  356. </div>
  357. <div class="title-content table-title-name">
  358. <p class="multi-line-hiding">{{item.coupon_name}}</p>
  359. </div>
  360. </div>
  361. </td>
  362. {{#if(item.type == 'reward') { }}
  363. <td class="layui-elip coupon-money">{{item.money}}元</td>
  364. {{# }else{ }}
  365. <td class="layui-elip coupon-money">{{item.discount}}折</td>
  366. {{# } }}
  367. {{#if(item.validity_type == 0) { }}
  368. <td class="layui-elip coupon-end-time">{{layui.util.toDateString(item.end_time * 1000,'yyyy-MM-dd HH:mm:ss')}}</td>
  369. {{# }else{ }}
  370. <td class="layui-elip coupon-end-time">领取之日起{{item.fixed_term}}天有效</td>
  371. {{# } }}
  372. <input type="hidden" name="at_least" value="{{item.at_least}}">
  373. <input type="hidden" name="type" value="{{item.type}}">
  374. <input type="hidden" name="discount" value="{{item.discount}}">
  375. <input type="hidden" name="money" value="{{item.money}}">
  376. </tr>
  377. {{# }); }}
  378. </tbody>
  379. </table>
  380. </div>
  381. <button class="layui-btn" onclick="couponSelected()">确定</button>
  382. </div>
  383. </script>
  384. <!-- 优惠券-名称 -->
  385. <script type="text/html" id="couponName">
  386. <div class="table-tuwen-box">
  387. <div class="font-box">
  388. <p class="multi-line-hiding">{{d.coupon_name}}</p>
  389. </div>
  390. </div>
  391. </script>
  392. <!-- 优惠券-操作 -->
  393. <script type="text/html" id="couponOperation">
  394. {{# var select_coupon_list = ','+coupon_list+','}}
  395. {{# if(select_coupon_list.indexOf(','+d.coupon_type_id+',') != -1){ }}
  396. <p title="该优惠券已参加">已添加</p>
  397. {{# }else{ }}
  398. <a class="layui-btn" lay-event="add">添加</a>
  399. {{# } }}
  400. </script>
  401. <!-- 批量操作 -->
  402. <script type="text/html" id="batchOperation">
  403. <button class="layui-btn layui-btn-primary" lay-event="add">批量添加</button>
  404. </script>
  405. <script type="text/html" id="addCoupon">
  406. {{# for(var i = 0; i < d.length; i++){ }}
  407. <tr data-coupon="{{ d[i].coupon_type_id }}">
  408. <td>{{d[i].coupon_name}}</td>
  409. {{# if(d[i].at_least > 0){}}
  410. <td>满{{d[i].at_least}}{{d[i].type == 'discount' ? '打'+ d[i].discount +'折' : '减' + d[i].money}}</td>
  411. {{#} else {}}
  412. <td>无门槛,{{d[i].type == 'discount' ? '打'+ d[i].discount +'折' : '减' + d[i].money}}</td>
  413. {{#}}}
  414. <td><input type="number" name="number" value="1" class="layui-input len-short" lay-verify="coupon_num"></td>
  415. <td style="text-align:center;">
  416. <a href="javascript:;" onClick="deleteCoupon(this, {{i}})" className="text-color">删除</a>
  417. </td>
  418. </tr>
  419. {{# } }}
  420. </script>
  421. <script type="text/javascript">
  422. layui.use(['carousel'], function() {
  423. var carousel = layui.carousel;
  424. carousel.render({
  425. elem: '#carousel'
  426. ,width: '100%' //设置容器宽度
  427. ,arrow: 'always' //始终显示箭头
  428. });
  429. })
  430. </script>
  431. {/block}