goods.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. {extend name="public/layout"}
  2. {block name="body"}
  3. <style>
  4. .btn-bg-blue {
  5. background-color: #249efb;
  6. border: none;
  7. }
  8. .layui-table thead tr,
  9. .layui-table-header {
  10. background-color: #D8E6F1 !important;
  11. }
  12. .layui-tab-title .layui-this {
  13. background-color: #249EFB;
  14. color: #fff;
  15. }
  16. .layui-tab-title .layui-this:after {
  17. border-bottom: none;
  18. border: none;
  19. }
  20. .layui-tab-title li {
  21. background-color: #F2F2F2;
  22. margin: 0px 5px;
  23. }
  24. .layui-btn-xs,.layui-btn-xs:hover {
  25. border: 1px solid #249EFB;
  26. background-color: #fff;
  27. color: #249EFB;
  28. padding: 0px 10px;
  29. }
  30. .layui-btn-danger,.layui-btn-danger:hover{
  31. color: #FF5722;
  32. background-color: #fff;
  33. border: 1px solid #FF5722;
  34. padding: 0px 10px;
  35. }
  36. .layui-btn-border,.layui-btn-border:hover {
  37. background-color: #fff;
  38. color: #249EFB;
  39. border: 1px solid #249EFB;
  40. }
  41. </style>
  42. <body>
  43. <div class="layui-fluid">
  44. <div class="layui-row layui-col-space15">
  45. <div class="layui-col-md12" style="background-color:#ffffff">
  46. <div class="tplay-body-div">
  47. <div class="layui-tab">
  48. <ul class="layui-tab-title">
  49. <li style="margin-left: 0px;">
  50. <a href="{:url('broad/build')}">我要直播</a>
  51. </li>
  52. <li class="layui-this">
  53. 商品管理
  54. </li>
  55. <li>
  56. <a href="{:url('broad/course_setting')}">直播设置</a>
  57. </li>
  58. </ul>
  59. </div>
  60. <div class="layui-card-body">
  61. <div class="layui-form">
  62. <div class="layui-inline">
  63. <div class="layui-btn layui-btn-border" data-type="add" title="新建商品"><i class="layui-icon layui-icon-add-circle-fine"></i>新建商品</div>
  64. <span style="color:#afb1b6;margin-left: 15px;">当前页面点击上架,商品将展示在直播间选项卡内;通过在“直播控制台”点击激活按钮可推送至首页。</span>
  65. </div>
  66. <div class="layui-inline" style="float:right;margin-right: 100px;margin-left: 5px;">
  67. <button class="layui-btn layui-btn-primary btn-bg-blue" data-type="reload"><i
  68. class="layui-icon layui-icon-search layuiadmin-button-btn" style="color: #ffffff;"></i></button>
  69. </div>
  70. <div class="layui-inline" style="float:right;">
  71. <input class="layui-input" name="name" id="name" autocomplete="off" placeholder="查找商品名..">
  72. </div>
  73. </div>
  74. <div class="layui-row">
  75. <table class="layui-hide" id="user" lay-filter="user"></table>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. {/block}
  83. {block name="js"}
  84. <script type="text/html" id="queueTpl">
  85. <input type="text" name="moveupdown" value="{{d.id}}" >
  86. </script>
  87. <script id="picture" type="text/html">
  88. <img src="{{ d.picture }}?x-oss-process=image/resize,l_50" style="height: 30px;width: 30px" class="show">
  89. </script>
  90. <script type="text/html" id="switchTpl">
  91. <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="sexDemo" {{ d.status== 1 ? 'checked' : '' }}>
  92. </script>
  93. <script type="text/html" id="result">
  94. <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  95. </script>
  96. <script type="text/html" id="sale">
  97. <a href="javascript:void(0)" lay-event="edit_sale_num" style="color:blue;text-decoration:underline;">{{d.sale_num}}</a>
  98. </script>
  99. <script>
  100. var indexurl = '{:url("broad/goods")}';
  101. var addurl = '{:url("broad/goods_add")}'; //添加页面
  102. var editurl = '{:url("goods/edit")}'; //修改信息页面
  103. var delurl = '{:url("broad/goods_del")}'; //删除
  104. var authurl = '{:url("broad/goods_editStatus")}'; //商上下架修改
  105. var edit_sale_num = '{:url("broad/goods_edit_sale_num")}'; //修改销量
  106. var edit_queue_num = '{:url("broad/goods_edit_queue_num")}'; //修改排序数字
  107. var t;
  108. layui.use(['table'], function () {
  109. var form = layui.form
  110. , table = layui.table
  111. , $ = layui.jquery
  112. , active = {
  113. reload: function () {
  114. var name = $('#name');
  115. //执行重载
  116. table.reload('userTable', {
  117. page: {
  118. curr: 1 //重新从第 1 页开始
  119. }
  120. , where: {
  121. name: name.val()
  122. }
  123. });
  124. }
  125. , add: function () {
  126. layer.open({
  127. title: ['添加 (商品添加后无法修改,请仔细填写)', 'color:#333333;background-color:#D8E6F1;'],
  128. type: 2,
  129. content: addurl,
  130. resize: false,
  131. area: ['80%', '80%']
  132. });
  133. }
  134. , edit: function () {
  135. var id = this.data.id;
  136. layer.open({
  137. title: ['商品信息', 'color:#333333;background-color:#D8E6F1;'],
  138. type: 2,
  139. content: editurl + '?id=' + id,
  140. resize: false,
  141. area: ['80%', '80%']
  142. });
  143. }
  144. , edit_sale_num: function () {
  145. var id = this.data.id;
  146. var sale_num = this.data.sale_num;
  147. layer.prompt({ value: sale_num, title: ['修改销量', 'color:#333333;background-color:#D8E6F1;'], }, function (val, index) {
  148. var g = /^(0|\+?[1-9][0-9]*)$/;
  149. if (g.test(val) == false) {
  150. layer.msg('请输入正整数', { anim: 6 });
  151. return false;
  152. }
  153. $.post(edit_sale_num, { id: id, val: val }, function (rs) {
  154. var res = JSON.parse(rs);
  155. if (res.code == 0) {
  156. t.reload();
  157. layer.msg(res.msg, { anim: 0 });
  158. } else {
  159. layer.msg(res.msg, { anim: 6 });
  160. }
  161. });
  162. layer.close(index);
  163. });
  164. }
  165. , del: function () {
  166. var id = this.data.id;
  167. layer.confirm('确定删除该商品么?',{title: ['信息', 'color:#333333;background-color:#D8E6F1;']}, function () {
  168. $.post(delurl, { id: id }, function (rs) {
  169. var res = JSON.parse(rs);
  170. if (res.code == 0) {
  171. layer.msg(res.msg, { anim: 0 }, function () {
  172. t.reload();
  173. });
  174. } else {
  175. layer.msg(res.msg, { anim: 6 });
  176. }
  177. });
  178. });
  179. }
  180. };
  181. //展示已知数据
  182. t = table.render({
  183. elem: '#user'
  184. , url: indexurl
  185. , page: true
  186. , autoSort: true
  187. , cols: [[ //标题栏
  188. // {type: 'numbers', title: '序号', fixed: 'left', width: 50},
  189. { field: 'queue', title: '序号', fixed: 'left', width: 80, edit: 'number' }
  190. // ,{templet: '#radiocheck', title: '排序', width: 50}
  191. , { field: 'title', title: '商品名称' }
  192. , { field: 'shop_price', title: '店面价', width: 100, align: "center" }
  193. , { field: 'live_price', title: '直播价', width: 100, align: "center" }
  194. , { field: 'price', title: '商品定金', width: 100, align: "center" }
  195. , { field: 'stock', title: '库存数', width: 100, align: "center" }
  196. // , {field: 'brand', title: '商品品牌', width: 120}
  197. , { field: 'sale_num', title: '销量', width: 100, templet: '#sale', align: "center" }
  198. , { templet: '#picture', title: '缩略图', width: 80, align: "center" }
  199. , { field: 'status', title: '商品状态', width: 100, templet: '#switchTpl', align: "center" }
  200. , { field: 'addtime', title: '添加时间', width: 180, sort: true, align: "center" }
  201. , { fixed: 'right', title: '操作', toolbar: '#result', width: 100, align: "center" }
  202. ]]
  203. , id: 'userTable'
  204. });
  205. $('.layui-form .layui-btn').on('click', function () {
  206. var type = $(this).data('type');
  207. active[type] ? active[type].call(this) : '';
  208. });
  209. table.on('sort(user)', function (obj) {
  210. table.reload('userTable', {
  211. initSort: obj
  212. , where: obj
  213. });
  214. });
  215. table.on('toolbar(user)', function (obj) {
  216. var type = obj.event;
  217. active[type] ? active[type].call(this) : '';
  218. });
  219. table.on('tool(user)', function (obj) {
  220. var type = obj.event;
  221. active[type] ? active[type].call(obj) : '';
  222. });
  223. form.on('switch(sexDemo)', function (obj) {
  224. var id = obj.value;
  225. $.ajax({
  226. type: "post",
  227. url: authurl,
  228. data: { id: id },
  229. success: function (rs) {
  230. var res = JSON.parse(rs);
  231. layer.msg(res.msg);
  232. if (res.msg == '商品处于激活状态,不可下架') {
  233. table.reload('userTable');
  234. }
  235. },
  236. });
  237. });
  238. table.on('edit(user)', function (obj) {
  239. var value = obj.value //得到修改后的值
  240. var data = obj.data //得到所在行所有键值
  241. var field = obj.field; //得到字段
  242. $.post(edit_queue_num, { id: data.id, queue: value }, function (rs) {
  243. var res = JSON.parse(rs);
  244. if (res.code == 0) {
  245. layer.msg(res.msg, { anim: 0 }, function () {
  246. table.reload('userTable');
  247. });
  248. } else {
  249. layer.msg(res.msg, { anim: 6 });
  250. }
  251. });
  252. });
  253. });
  254. </script>
  255. {/block}