1
0

lottery-cms-item.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="referrer" content="no-referrer"/>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  8. <meta http-equiv="pragma" content="no-cache">
  9. <meta http-equiv="cache-control" content="no-cache">
  10. <meta http-equiv="expires" content="0">
  11. <link rel="shortcut icon" href="/favicon.ico"/>
  12. <link rel="bookmark" href="/favicon.ico"/>
  13. <link href="/css/common/common.css" rel="stylesheet" type="text/css" />
  14. <link href="/css/admin/console.css" rel="stylesheet" type="text/css"/>
  15. <link href="/ref/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css" />
  16. <script src="/ref/layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
  17. <script src="/ref/jquery/jquery-3.4.1.js" type="text/javascript"></script>
  18. <script src="/js/common/common.js" type="text/javascript"></script>
  19. </head>
  20. <body style="overflow-x: hidden">
  21. <center>
  22. <div class="aiqr-container" style="margin-bottom: 0px; padding-top: 40px; width: calc(100% - 100px); margin-bottom: 20px">
  23. <div class="cms-manage-title">
  24. <div style="float: right">
  25. <input class="search-condition-elem" style="margin-top: 0px" id="search-name" placeholder="奖品名">
  26. <input class="search-condition-elem" style="margin-top: 0px" id="search-activityId" placeholder="活动id">
  27. <select class="search-condition-elem" style="margin-top: 0px" id="search-type">
  28. <option value="">全部状态</option>
  29. <option value="1">积分</option>
  30. <option value="2">实体商品</option>
  31. <option value="3">现金红包</option>
  32. </select>
  33. <button class="cms-bar-btn" id="add-lottery-item-btn" style="background-color: orangered; box-shadow: 0px 0px 5px #e56535;">新增奖品</button>
  34. </div>
  35. </div>
  36. <table class="account-apply-tab layui-table" id="search-result-tab">
  37. <thead>
  38. <tr>
  39. <th style="width: 50px">奖品编号</th>
  40. <th style="width: 120px">活动编号</th>
  41. <th style="width: 100px">奖品名</th>
  42. <th style="width: 100px">类型</th>
  43. <th style="width: 100px">icon</th>
  44. <th style="width: 100px">封面图</th>
  45. <th style="width: 70px">槽位</th>
  46. <th style="width: 70px">总库存</th>
  47. <th style="width: 95px">时间</th>
  48. </tr>
  49. </thead>
  50. <tbody>
  51. </tbody>
  52. </table>
  53. <div id="page"></div>
  54. <div style="clear: both"></div>
  55. </div>
  56. </center>
  57. </body>
  58. <script>
  59. var activityId = currentActivityId;
  60. if (activityId != '') {
  61. $("#search-activityId").val(activityId);
  62. }
  63. var firstSearch = true;
  64. var curr = 0, size = 10, total = 0;
  65. $("#add-lottery-item-btn").on('click', function () {
  66. addLotteryItem();
  67. })
  68. function addLotteryItem() {
  69. layer.open({
  70. type: 1,
  71. title: false,
  72. skin: 'layui-layer-demo', //样式类名
  73. closeBtn: 0, //不显示关闭按钮
  74. anim: 2,
  75. area: ['380px', '716px'],
  76. shadeClose: true, //开启遮罩关闭
  77. content: '<div class=\"popup-module-header-div\">' +
  78. '<p class=\"popup-module-title\">创建抽奖奖品</p>' +
  79. '<p class=\"popup-module-desc\">抽奖奖品必须8个额</p>' +
  80. '</div>' +
  81. '<div class=\"popup-module-core-div\">' +
  82. '<div class="popup-module-core-div-item">' +
  83. '<input class="popup-input-number" id="activity-id" placeholder="活动id" value="'+activityId+'">' +
  84. '</div>' +
  85. '<div class="popup-module-core-div-item">' +
  86. '<select class="popup-input-number" style="width: 100%; height: 100%; border: 0px" id="item-type">' +
  87. ' <option value="">类型</option>' +
  88. // ' <option value="1">猿气值</option>' +
  89. ' <option value="2">实体商品</option>' +
  90. ' <option value="3">现金红包</option>' +
  91. '</select>' +
  92. '</div>' +
  93. '<div class="popup-module-core-div-item">' +
  94. '<input class="popup-input-number" id="item-name" placeholder="奖品名称,如: 猿气值 X1">' +
  95. '</div>' +
  96. '<div class="popup-module-core-div-item">' +
  97. '<input class="popup-input-number" id="item-slot" placeholder="卡槽, 支持1 ~ 8">' +
  98. '</div>' +
  99. '<div class="popup-module-core-div-item">' +
  100. '<input class="popup-input-number" id="item-stock" placeholder="库存总量,大于0">' +
  101. '</div>' +
  102. '<div class="popup-module-core-div-item layui-upload" style="width: 50px; height: 50px" id="upload-item-icon">' +
  103. '<div style="width: 40px; border: 1px solid #f5f5f5; height: 50px; text-align: center; color: #c7c7c7; font-size: 20px; font-weight: 700; line-height: 100px">' +
  104. '<img style="position: absolute; left:0px; top:0px; width: 50px; height: 100%; border: 0px" id="item-icon">' +
  105. '</div>' +
  106. '</div>' +
  107. '<div class="popup-module-core-div-item layui-upload" style="width: 160px; height: 100px" id="upload-item-cover">' +
  108. '<div style="width: 160px; border: 1px solid #f5f5f5; height: 100px; text-align: center; color: #c7c7c7; font-size: 20px; font-weight: 700; line-height: 100px">' +
  109. '<img style="position: absolute; left:0px; top:0px; width: 100%; height: 100%; border: 0px" id="item-cover">' +
  110. '主图 <i class="layui-icon" style="font-size: 25px; margin-right: 20px;">&#xe60d;</i> ' +
  111. '</div>' +
  112. '</div>' +
  113. '<div class="popup-module-core-div-item" style=\"border: 0px\">' +
  114. '<button class=\"popup-btn\" onclick=\"updateLotteryItem($(\'#activity-id\').val(), $(\'#item-type\').val(), ' +
  115. '$(\'#item-name\').val(), $(\'#item-slot\').val(), $(\'#item-stock\').val(), $(\'#item-icon\').attr(\'src\'), $(\'#item-cover\').attr(\'src\'))\">创建奖品</button>' +
  116. '</div>' +
  117. '</div>' +
  118. '</div>'
  119. });
  120. layui.use(['upload'], function(){
  121. var $ = layui.jquery
  122. ,upload = layui.upload
  123. //常规使用 - 普通图片上传
  124. upload.render({
  125. elem: '#upload-item-cover'
  126. ,url: '/api/file/moment/upload' //改成您自己的上传接口
  127. ,accept: 'images'
  128. ,acceptMime: '*'
  129. ,done: function(res){
  130. if(!res.success){
  131. return layer.msg('上传失败');
  132. } else {
  133. $('#item-cover').attr('src', res.data.url);
  134. }
  135. }
  136. });
  137. });
  138. layui.use(['upload'], function(){
  139. var $ = layui.jquery
  140. ,upload = layui.upload
  141. //常规使用 - 普通图片上传
  142. upload.render({
  143. elem: '#upload-item-icon'
  144. ,url: '/api/file/chat/upload' //改成您自己的上传接口
  145. ,headers: {upload_path: "lottery"}
  146. ,accept: 'images'
  147. ,acceptMime: '*'
  148. ,done: function(res){
  149. if(!res.success){
  150. return layer.msg('上传失败');
  151. } else {
  152. $('#item-icon').attr('src', res.data.url);
  153. }
  154. }
  155. });
  156. });
  157. }
  158. function updateLotteryItem(activityId, type, name, slot, stock, icon, cover) {
  159. if (activityId == '') {
  160. layer.msg("活动id不能为空");
  161. return;
  162. }
  163. if (type == '') {
  164. layer.msg("类型不能为空");
  165. return;
  166. }
  167. if (name == '') {
  168. layer.msg("名称不能为空");
  169. return;
  170. }
  171. if (slot == '') {
  172. layer.msg("卡槽设置不能为空");
  173. return;
  174. }
  175. if (stock == '') {
  176. layer.msg("库存不能为空");
  177. return;
  178. }
  179. if (icon == '') {
  180. layer.msg("icon不能为空");
  181. return;
  182. }
  183. if (cover == '') {
  184. layer.msg("封面不能为空");
  185. return;
  186. }
  187. $.ajax({
  188. url: "/api/lottery/item/save",
  189. type: "post",
  190. dataType: "json",
  191. contentType: "application/json;charset=utf-8",
  192. data: "{\"activityId\":\""+activityId+"\",\"name\":\""+name+"\",\"icon\":\""+icon+"\",\"cover\":\""+cover+"\", \"stock\": "+stock+",\"slot\": "+slot+",\"type\": "+type+"}",
  193. success:function (data) {
  194. data = eval(data);
  195. if (data.success){
  196. layer.closeAll();
  197. layer.msg("操作成功");
  198. pageNo = 1;
  199. searchList();
  200. } else {
  201. layer.msg(data.msg);
  202. }
  203. },error:function () {
  204. layer.msg("服务端异常");
  205. }
  206. })
  207. }
  208. $("#search-list-btn").on('click', function() {
  209. curr = 1;
  210. searchList();
  211. })
  212. searchList();
  213. function searchList() {
  214. $("#search-result-tab").children("tbody").empty();
  215. $.ajax({
  216. url:"/api/lottery/item/page?name="+$("#search-name").val()+"&type="+$("#search-type").val()+"&pageNo="+(curr == 0 ? 1 : curr)+"&pageSize="+size+"&activityId="+$("#search-activityId").val(),
  217. type:"get",
  218. success:function (data) {
  219. data = eval(data);
  220. if (data.success){
  221. $.each(data.data, function (index, value) {
  222. var tr = "<tr>"+
  223. "<td>"+value.id+"</td>"+
  224. "<td>"+value.activityId+"</td>"+
  225. "<td>"+value.name+"</td>"+
  226. "<td>"+value.typeName+"</td>"+
  227. "<td><img style='height: 40px' src='"+value.icon+"'></td>"+
  228. "<td><img style='height: 40px' src='"+value.cover+"'></td>"+
  229. "<td>"+value.slot+"</td>"+
  230. "<td>"+value.stock+"</td>"+
  231. "<td>"+formatMsgTime(value.createTime)+"</td>"+
  232. "</tr>";
  233. if (!firstSearch) {
  234. $("#search-result-tab").children("tbody").append(tr);
  235. }
  236. })
  237. if (curr == 0 || data.total != total) {
  238. curr = 1;
  239. firstSearch = false;
  240. total = data.total;
  241. initPage();
  242. }
  243. } else {}
  244. },error:function () {}
  245. })
  246. }
  247. function initPage() {
  248. layui.use('laypage', function(){
  249. var laypage = layui.laypage;
  250. laypage.render({
  251. elem: 'page',
  252. count: total,
  253. limit: size,
  254. curr: curr,
  255. jump: function(obj){
  256. curr = obj.curr;
  257. searchList();
  258. }
  259. });
  260. })
  261. }
  262. </script>
  263. <style>
  264. .layui-laypage a, .layui-laypage span {
  265. display: inline-block;
  266. *display: inline;
  267. *zoom: 1;
  268. vertical-align: middle;
  269. padding: 3px 13px;
  270. height: 28px;
  271. line-height: 28px;
  272. margin: 0px 5px;
  273. border-radius: 4px;
  274. background-color: #fff;
  275. color: #4e6ef2;
  276. font-size: 14px;
  277. border: none;
  278. }
  279. .layui-laypage a:hover, .layui-laypage span:hover {
  280. background: #4e6ef2;
  281. color: #fff;
  282. }
  283. .layui-laypage .layui-laypage-curr .layui-laypage-em {
  284. position: absolute;
  285. left: -1px;
  286. top: -1px;
  287. padding: 1px;
  288. width: 100%;
  289. height: 100%;
  290. border-radius: 4px;
  291. background: #4e6ef2;
  292. color: #fff;
  293. font-weight: normal;
  294. }
  295. .layui-laypage-next, .layui-laypage-prev {
  296. border-radius: 4px;
  297. }
  298. .layui-laypage-default {
  299. float: right;
  300. }
  301. </style>
  302. </html>