special_select.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <?php $shoname_name = D('Home/Front')->get_config_by_name('shoname'); ?>
  6. <title><?php echo $shoname; ?></title>
  7. <link rel="shortcut icon" href="" />
  8. <meta name="renderer" content="webkit">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10. <meta name="viewport"
  11. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12. <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
  13. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  14. <!--[if lt IE 9]>
  15. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  16. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  17. <![endif]-->
  18. <link href="./resource/css/bootstrap.min.css?v=201903260001" rel="stylesheet">
  19. <!-- <link href="./resource/css/common.css?v=201903260001" rel="stylesheet"> -->
  20. <script type="text/javascript">
  21. window.sysinfo = {
  22. <?php if (!empty($_W['uniacid']) ){ ?>'uniacid': '{$_W['uniacid']}',<?php } ?>
  23. <?php if( !empty($_W['acid']) ){ ?>'acid': '{$_W['acid']}',<?php } ?>
  24. <?php if (!empty($_W['openid']) ) { ?>'openid': '{$_W['openid']}',<?php } ?>
  25. <?php if( !empty($_W['uid']) ) { ?>'uid': '{$_W['uid']}',<?php } ?>
  26. 'isfounder': <?php if (!empty($_W['isfounder']) ) { ?>1<?php }else{ ?>0<?php } ?>,
  27. 'siteroot': '{$_W['siteroot']}',
  28. 'siteurl': '{$_W['siteurl']}',
  29. 'attachurl': '{$_W['attachurl']}',
  30. 'attachurl_local': '{$_W['attachurl_local']}',
  31. 'attachurl_remote': '{$_W['attachurl_remote']}',
  32. 'module': {'url' : '<?php if( defined('MODULE_URL') ) { ?>{MODULE_URL}<?php } ?>', 'name' : '<?php if (defined('IN_MODULE') ) { ?>{IN_MODULE}<?php } ?>'},
  33. 'cookie': {'pre': ''},
  34. 'account': {:json_encode($_W['account'])},
  35. };
  36. </script>
  37. <script type="text/javascript" src="./resource/js/lib/jquery-1.11.1.min.js"></script>
  38. <script type="text/javascript" src="./resource/js/lib/bootstrap.min.js"></script>
  39. <script type="text/javascript" src="./resource/js/app/util.js?v=201903260001"></script>
  40. <script type="text/javascript" src="./resource/js/app/common.min.js?v=201903260001"></script>
  41. <script type="text/javascript" src="./resource/js/require.js?v=201903260001"></script>
  42. <script type="text/javascript" src="./resource/js/lib/jquery.nice-select.js?v=201903260001"></script>
  43. <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  44. <link href="/static/css/snailfish.css" rel="stylesheet">
  45. <script>
  46. var random = Math.random();
  47. document.write('<link href="/static/css/diy/shopdiy.css?v=' + random + '" rel="stylesheet" type="text/css"/>');
  48. </script>
  49. <style>
  50. body {
  51. min-width: none;
  52. background: #fff;
  53. }
  54. .ns-calendar {
  55. background: url("https://v4.niuteam.cn/public/static/img/ns_calendar.png") no-repeat center / 16px 16px;
  56. }
  57. .layui-logo {
  58. height: 100%;
  59. display: flex;
  60. align-items: center;
  61. }
  62. .layui-logo a {
  63. display: flex;
  64. justify-content: center;
  65. align-items: center;
  66. width: 200px;
  67. height: 50px;
  68. }
  69. .layui-logo a img {
  70. max-height: 100%;
  71. max-width: 100%;
  72. }
  73. .goods-preview .qrcode-wrap {
  74. max-width: 130px;
  75. max-height: 130px;
  76. overflow: hidden;
  77. }
  78. .goods-preview .qrcode-wrap input {
  79. margin-top: 30px;
  80. }
  81. @media only screen and (max-width: 1340px) {
  82. .layui-nav .layui-nav-item a {
  83. padding: 0 15px;
  84. }
  85. .layui-nav.ns-head-account .layui-nav-item a {
  86. padding: 0 20px;
  87. }
  88. }
  89. @media only screen and (max-width: 1200px) {
  90. .layui-nav .layui-nav-item a {
  91. padding: 0 10px;
  92. }
  93. .layui-nav.ns-head-account .layui-nav-item a {
  94. padding: 0 20px;
  95. }
  96. }
  97. @media only screen and (max-width: 920px) {
  98. .layui-nav .layui-nav-item a {
  99. padding: 0 5px;
  100. }
  101. .layui-nav.ns-head-account .layui-nav-item a {
  102. padding: 0 20px;
  103. }
  104. }
  105. @media only screen and (max-width: 1090px) {
  106. .ns-shop-ewm {
  107. display: none;
  108. }
  109. }
  110. .style_all {
  111. display: flex;
  112. margin: auto;
  113. }
  114. .styles {
  115. width: 48%;
  116. margin-right: 4%;
  117. }
  118. .styles:nth-child(2) {
  119. margin-right: 0;
  120. }
  121. .styles img {
  122. width: 100%;
  123. height: 200px;
  124. border: 2px #ccc solid;
  125. box-sizing: border-box;
  126. }
  127. .styles p {
  128. text-align: center;
  129. margin-top: 10px;
  130. }
  131. /* .layui-layer-content{padding-bottom:4px!important;} */
  132. </style>
  133. <style>
  134. .contraction {
  135. display: inline-block;
  136. margin-right: 5px;
  137. }
  138. .contraction span {
  139. cursor: pointer;
  140. display: inline-block;
  141. width: 17px;
  142. height: 17px;
  143. text-align: center;
  144. line-height: 14px;
  145. /* border: 1px solid #e9e9e9;*/
  146. user-select: none;
  147. /* background: #fff;*/
  148. }
  149. .sku-list {
  150. display: none;
  151. border-bottom: 1px solid #e6e6e6;
  152. }
  153. .sku-list td:nth-of-type(2) {
  154. display: flex;
  155. align-items: center;
  156. }
  157. .sku-list td {
  158. border-bottom: 0;
  159. padding: 5px 15px !important;
  160. }
  161. .select-goods .ns-screen .layui-colla-content {
  162. padding-left: 15px;
  163. }
  164. .select-goods {
  165. border-bottom: 1px solid #f2f2f2;
  166. height: 603px;
  167. }
  168. .select-goods .select-goods-left {
  169. width: 135px;
  170. margin: 20px;
  171. padding-right: 10px;
  172. border-right: 1px solid #f2f2f2;
  173. box-sizing: border-box;
  174. overflow-y: auto;
  175. }
  176. /* 滚动条整体部分*/
  177. .select-goods .select-goods-left::-webkit-scrollbar {
  178. width: 5px;
  179. background-color: #d0cdc7;
  180. }
  181. /* scroll轨道背景*/
  182. .select-goods .select-goods-left::-webkit-scrollbar-track {
  183. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  184. border-radius: 50%;
  185. background-color: #d0cdc7;
  186. }
  187. /* 滚动条中能上下移动的小块*/
  188. .select-goods .select-goods-left::-webkit-scrollbar-thumb {
  189. border-radius: 10px;
  190. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  191. background-color: #a09d9d;
  192. }
  193. .select-goods .select-goods-left dl {
  194. height: auto;
  195. overflow: hidden;
  196. }
  197. .select-goods .select-goods-left dt,
  198. .select-goods .select-goods-left dd {
  199. position: relative;
  200. height: 32px;
  201. font-size: 12px;
  202. line-height: 32px;
  203. cursor: pointer;
  204. }
  205. .select-goods .select-goods-left dt {
  206. padding-left: 13px;
  207. }
  208. .select-goods .select-goods-left dd {
  209. padding-left: 20px;
  210. }
  211. .select-goods .select-goods-left dt:after {
  212. content: '';
  213. position: absolute;
  214. border: 4px solid transparent;
  215. border-right-color: #333;
  216. border-bottom-color: #333;
  217. left: 0;
  218. top: 50%;
  219. transform: translateY(-50%);
  220. transition: all .3s;
  221. }
  222. .select-goods .select-goods-left dl.fold {
  223. height: 32px;
  224. }
  225. .select-goods .select-goods-left .fold dt:after {
  226. transform: translateY(-50%) rotate(-45deg);
  227. }
  228. .select-goods .select-goods-left .active {
  229. background-color: #f7f7f7;
  230. }
  231. .select-goods .select-goods-left .ns-text-color {
  232. background-color: transparent;
  233. }
  234. .select-goods .select-goods-right {
  235. padding-top: 20px;
  236. margin-right: 20px;
  237. margin-left: 20px;
  238. }
  239. .select-goods .select-goods-right .layui-table-body {
  240. height: 425px;
  241. }
  242. .select-goods .select-goods-right .ns-single-filter-box {
  243. padding: 0;
  244. }
  245. .select-goods .select-goods-right .ns-single-filter-box .layui-form {
  246. margin: inherit;
  247. }
  248. .select-goods .select-goods-right .ns-single-filter-box .layui-form div {
  249. margin: 0;
  250. }
  251. .select-goods .select-goods-classification {
  252. border: 0;
  253. }
  254. .select-goods .select-goods-classification .layui-colla-title {
  255. height: 32px;
  256. background-color: #fff;
  257. border: 0;
  258. line-height: 32px;
  259. font-size: 12px;
  260. padding-left: 15px;
  261. }
  262. .select-goods .select-goods-classification .layui-colla-title i {
  263. font-size: 0;
  264. }
  265. .select-goods .select-goods-classification .layui-colla-title.arrow.active:after {
  266. transform: rotate(0) translateY(-50%);
  267. }
  268. .select-goods .select-goods-classification .layui-colla-title.arrow:after {
  269. content: '';
  270. border: 4px solid #333;
  271. position: absolute;
  272. border-top-color: transparent !important;
  273. border-left-color: transparent !important;
  274. left: 3px;
  275. top: 50%;
  276. transition: all .3s;
  277. transform: rotate(-45deg) translateY(-50%);
  278. }
  279. .select-goods .select-goods-classification .layui-colla-content {
  280. padding: 0;
  281. font-size: 12px;
  282. border-top: 0;
  283. }
  284. .select-goods .select-goods-classification .layui-colla-item {
  285. border: 0;
  286. font-size: 12px;
  287. }
  288. .select-goods .select-goods-classification .classification-item {
  289. cursor: pointer;
  290. border: 0;
  291. font-size: 12px;
  292. }
  293. .select-goods .select-goods-classification .select-goods-classification .classification-item {
  294. padding-left: 26px;
  295. }
  296. .select-goods .select-goods-classification .select-goods-classification .classification-item.arrow:after {
  297. left: 15px;
  298. }
  299. .select-goods .select-goods-classification .select-goods-classification .layui-colla-content.classification-item {
  300. padding-left: 38px;
  301. }
  302. .select-goods .select-goods-classification .classification-item:hover {
  303. background-color: #f7f7f7;
  304. }
  305. .ns-single-filter-box {
  306. display: flex;
  307. justify-content: space-between;
  308. padding: 14px 0;
  309. padding: 14px 0;
  310. background-color: #fff;
  311. }
  312. .ns-single-filter-box .layui-form .layui-btn {
  313. border-color: #e6e6e6;
  314. padding: 0 10px;
  315. }
  316. .ns-single-filter-box .layui-form .layui-input + .layui-btn {
  317. height: 32px;
  318. line-height: 32px;
  319. position: absolute;
  320. right: 1px;
  321. top: 1px;
  322. border-width: 0;
  323. border-left-width: 1px;
  324. }
  325. .ns-table-title {
  326. display: flex;
  327. align-items: center;
  328. }
  329. .ns-table-title .ns-title-pic {
  330. flex-shrink: 0;
  331. display: inline-block;
  332. width: 50px;
  333. height: 50px;
  334. text-align: center;
  335. line-height: 50px;
  336. margin-left: 5px;
  337. }
  338. .ns-table-title .ns-title-pic img {
  339. max-width: 100%;
  340. max-height: 100%;
  341. }
  342. </style>
  343. </head>
  344. <body>
  345. <div class="select-goods">
  346. <div class="select-goods-right">
  347. <!-- 筛选面板 -->
  348. <div class="ns-single-filter-box">
  349. <div></div>
  350. <div class="layui-form">
  351. <div class="layui-input-inline">
  352. <input type="text" name="promotion_name" placeholder="请输入活动名称" autocomplete="off"
  353. class="layui-input">
  354. <button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
  355. <i class="layui-icon">&#xe615;</i>
  356. </button>
  357. </div>
  358. </div>
  359. </div>
  360. <!-- 列表 -->
  361. <table id="goods_list" lay-filter="goods_list"></table>
  362. </div>
  363. </div>
  364. <script src="/layuiadmin/layui/layui.js"></script>
  365. <script type="text/javascript">
  366. document.write('<script type="text/javascript" charset="utf-8" src="/static/js/diy/common.js?t="' + Math.random() + '><\/script>');
  367. </script>
  368. <script>
  369. layui.config({
  370. base: '/layuiadmin/' //静态资源所在路径
  371. }).extend({
  372. index: 'lib/index' //主入口模块
  373. }).use('index');
  374. layui.use(['layer', 'upload', 'element'], function () {});
  375. </script>
  376. <script type="text/html" id="checkbox">
  377. {{# if(d.selected){ }}
  378. <input type="checkbox" data-goods-id="{{d.id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox" checked>
  379. <input type="hidden" data-goods-id="{{d.id}}" name="old_goods_json" value='{:html_entity_decode($link)}' />
  380. {{# }else{ }}
  381. <input type="checkbox" data-goods-id="{{d.id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox">
  382. {{# } }}
  383. <input type="hidden" data-goods-id="{{d.id}}" name="goods_json" value='{{ JSON.stringify(d) }}' />
  384. </script>
  385. <!-- 专题信息 -->
  386. <script type="text/html" id="goods_info">
  387. <div class="ns-table-title">
  388. <div class="ns-title-pic" id="goods_img_{{d.id}}">
  389. <img layer-src src="{{d.image}}" />
  390. </div>
  391. <div class="ns-title-content">
  392. <a href="javascript:;" class="ns-multi-line-hiding ns-text-color" title="{{d.name}}">{{d.name}}</a>
  393. </div>
  394. </div>
  395. </script>
  396. <script>
  397. var select_id = "", //选中商品id
  398. select_list = "",
  399. disabled = "0", //不可选中
  400. goodsCols = [], //数据源
  401. filterData = {promotion_type: '',label_id: '',goods_name:''}, //筛选数据
  402. table, form,laytpl,element,
  403. goodsCols = [
  404. [
  405. {
  406. unresize: 'false',
  407. width: '8%',
  408. templet: '#checkbox'
  409. },
  410. {
  411. title: '活动名称',
  412. unresize: 'false',
  413. width: '92%',
  414. templet: '#goods_info'
  415. }
  416. ]
  417. ]
  418. $(function () {
  419. layui.use(['form','laytpl','element'], function () {
  420. form = layui.form;
  421. laytpl = layui.laytpl;
  422. element = layui.element;
  423. table = new Table({
  424. elem: '#goods_list',
  425. url: "{:U('Marketing/special_select')}",
  426. cols: goodsCols,
  427. callback : function (res) {
  428. // 更新商品复选框状态
  429. // for (var i=0;i<goodsIdArr.length;i++) {
  430. // var selected_goods = $("input[name='goods_checkbox'][data-goods-id='" + goodsIdArr[i] + "']");
  431. // if (selected_goods.length) {
  432. // $("input[name='goods_checkbox'][data-goods-id='" + goodsIdArr[i] + "']").prop("checked", true);
  433. // }
  434. // }
  435. form.render();
  436. }
  437. });
  438. /**
  439. * 监听搜索
  440. */
  441. form.on('submit(search)', function (data) {
  442. filterData.name = data.field.name;
  443. if (data.field.promotion_name) filterData.promotion_name = data.field.promotion_name;
  444. table.reload({
  445. page: {
  446. curr: 1
  447. },
  448. where: filterData
  449. });
  450. return false;
  451. });
  452. // 勾选商品
  453. form.on('checkbox(goods_checkbox)', function(data) {
  454. if (data.elem.checked){
  455. var goodsId = $("input[name='goods_checkbox']:checked").eq(0).attr("data-goods-id");
  456. value = $("input[name='goods_json'][data-goods-id = "+ goodsId +"]").val();
  457. old_value = $("input[name='old_goods_json'][data-goods-id = "+ goodsId +"]").val();
  458. if(old_value) select_list = old_value.toString();
  459. select_list = JSON.parse(value);
  460. $("input[name='goods_checkbox']:checked").prop("checked",false);
  461. $(data.elem).prop("checked",true);
  462. form.render();
  463. } else {
  464. select_list = "";
  465. }
  466. });
  467. });
  468. });
  469. function selectSpecial(callback) {
  470. var res = select_list;
  471. callback(res);
  472. }
  473. </script>
  474. </body>
  475. </html>