redbag.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. {extend name="public/layout"}
  2. {block name="body"}
  3. <style>
  4. .show {
  5. float: right;
  6. }
  7. .show a {
  8. display: inline !important;
  9. }
  10. .show span {
  11. font-size:14px;
  12. }
  13. .layui-table thead tr,
  14. .layui-table-header {
  15. background-color: #D8E6F1 !important;
  16. }
  17. .btn-bg-blue {
  18. background-color: #249efb;
  19. border: none;
  20. }
  21. .layui-tab-title .layui-this {
  22. background-color: #249EFB;
  23. color: #fff;
  24. }
  25. .layui-tab-title .layui-this:after {
  26. border-bottom: none;
  27. border: none;
  28. }
  29. .layui-tab-title li {
  30. background-color: #F2F2F2;
  31. margin: 0px 5px;
  32. }
  33. .layui-btn-xs,.layui-btn-xs:hover {
  34. border: 1px solid #249EFB;
  35. background-color: #fff;
  36. color: #249EFB;
  37. padding: 0px 10px;
  38. }
  39. .layui-btn-danger,.layui-btn-danger:hover{
  40. color: #FF5722;
  41. background-color: #fff;
  42. border: 1px solid #FF5722;
  43. padding: 0px 10px;
  44. }
  45. .layui-btn-border,.layui-btn-border:hover {
  46. background-color: #fff;
  47. color: #249EFB;
  48. border: 1px solid #249EFB;
  49. }
  50. </style>
  51. <body>
  52. <div class="layui-fluid">
  53. <div class="layui-row layui-col-space15">
  54. <div class="layui-col-md12" style="background-color:#ffffff">
  55. <div class="tplay-body-div">
  56. <div class="layui-tab">
  57. <ul class="layui-tab-title">
  58. <!--<li>
  59. <a href="{:url('fission/live')}">直播裂变</a>
  60. </li>-->
  61. <li class="layui-this">
  62. 直播红包
  63. </li>
  64. <li>
  65. <a href="{:url('broad/answer')}">江湖答题</a>
  66. </li>
  67. <li>
  68. <a href="{:url('broad/fission')}">营销钱包</a>
  69. </li>
  70. <li class="show">
  71. <span class="layui-icon layui-icon-rmb" style="margin-right:3px;color:#9d8a0e;"></span>
  72. <span style="color:#9d8a0e;font-size:16px;margin-right:20px;">营销余额:¥{$money}</span>
  73. <a id='yue' title="充值" href="javascript:void(0)" style="margin-right:10px;"><span class="layui-btn layui-btn-warm layui-btn-sm">充值</span></a>
  74. <a href="{:url('broad/fission')}"><span class="layui-btn layui-btn-warm layui-btn-sm">营销钱包</span></a>
  75. </li>
  76. </ul>
  77. </div>
  78. <div class="layui-card-body">
  79. <div class="layui-form">
  80. <div class="layui-inline" style="height:38px;">
  81. <div class="layui-btn layui-btn-border" data-type="add" title="投放红包"><i class="layui-icon layui-icon-release"></i>投放红包</div>
  82. <span style="color:#afb1b6;margin-left: 15px;">派发红包可引导客户在提现时留下联系方式,您可在“我的客户”页面查看详情。</span>
  83. </div>
  84. <div class="layui-inline" style="float:right;margin-right: 100px;margin-left: 5px;">
  85. <button class="layui-btn layui-btn-primary btn-bg-blue" data-type="reload"><i class="layui-icon layui-icon-search layuiadmin-button-btn" style="color: #fff;"></i></button>
  86. </div>
  87. <div class="layui-inline" style="float:right;">
  88. <input type="text" class="layui-input" id="date" placeholder="开始日期 - 结束日期"
  89. autocomplete="off">
  90. </div>
  91. </div>
  92. <div class="layui-row">
  93. <table class="layui-hide" id="user" lay-filter="user"></table>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. {/block}
  101. {block name="js"}
  102. <script type="text/html" id="result">
  103. <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="useLog" title="领取记录">领取记录</a>
  104. </script>
  105. <script type="text/html" id="price">
  106. ¥{{d.price}}
  107. </script>
  108. <script type="text/html" id="numTpl">
  109. {{d.num}}个(¥{{ Math.round(parseFloat(d.price*d.num)*100)/100 }})
  110. </script>
  111. <script type="text/html" id="realNumTpl">
  112. {{d.realnum}}个(¥{{ Math.round(parseFloat(d.price*d.realnum)*100)/100 }})
  113. </script>
  114. <script type="text/html" id="status">
  115. {{#
  116. var addtime = Date.parse(d.addtime);
  117. }}
  118. {{# if(d.num == d.realnum){ }}
  119. 领取完毕
  120. {{# }else if(now-addtime < 30*60*1000){ }}
  121. <span style="color:red">发放中</span>
  122. {{# }else{ }}
  123. <a href="javascript:voie(0)" title="{{ d.num-d.realnum }}个红包未领取,已退还{{ Math.round(parseFloat(d.price*(d.num-d.realnum))*100)/100 }}元" style="color:#4d4dee">未领取部分退还</a>
  124. {{# } }}
  125. </script>
  126. <script>
  127. var indexurl = '{:url("broad/redbag")}';
  128. var addurl = '{:url("broad/redbagadd")}';
  129. var useLog = '{:url("broad/redbaglog")}';
  130. var now = (new Date()).getTime();
  131. var t;
  132. var updateMoney;
  133. layui.use(['table', 'form', 'laydate'], function () {
  134. var form = layui.form
  135. , table = layui.table
  136. , $ = layui.jquery
  137. , laydate = layui.laydate
  138. , active = {
  139. reload: function () {
  140. var date = $('#date');
  141. //执行重载
  142. table.reload('userTable', {
  143. page: {
  144. curr: 1 //重新从第 1 页开始
  145. }
  146. , where: {
  147. date: date.val()
  148. }
  149. });
  150. }
  151. , add: function () {
  152. layer.open({
  153. title: ['添加红包', 'color:#333333;background-color:#D8E6F1;'],
  154. type: 2,
  155. content: addurl,
  156. resize: false,
  157. area: ['560px', '350px'],
  158. });
  159. }, useLog: function () {
  160. var id = this.data.id;
  161. layer.open({
  162. title: ['用户领取记录', 'color:#333333;background-color:#D8E6F1;'],
  163. type: 2,
  164. content: useLog + '?id=' + id,
  165. resize: false,
  166. area: ['80%', '80%']
  167. });
  168. }
  169. };
  170. laydate.render({
  171. elem: '#date'
  172. , range: true
  173. });
  174. //展示已知数据
  175. t = table.render({
  176. elem: '#user'
  177. , url: indexurl
  178. , page: true
  179. , autoSort: true
  180. , cols: [[ //标题栏
  181. // {type: 'checkbox', fixed: 'left'}
  182. { type: 'numbers', title: '序号', fixed: 'left', width: 50 }
  183. , { field: 'addtime', title: '添加时间', sort: true }
  184. , { templet: '#price', title: '单包金额' }
  185. , { templet: '#numTpl', title: '计划数量(计划金额)' }
  186. , { templet: '#realNumTpl', title: '已领取数量(已领取金额)' }
  187. , { templet: '#status', title: '红包状态' }
  188. , { fixed: 'right', title: '操作', toolbar: '#result', width: 100 }
  189. ]]
  190. , id: 'userTable'
  191. });
  192. $('.layui-form .layui-btn').on('click', function () {
  193. var type = $(this).data('type');
  194. active[type] ? active[type].call(this) : '';
  195. });
  196. table.on('sort(user)', function (obj) {
  197. table.reload('userTable', {
  198. initSort: obj
  199. , where: obj
  200. });
  201. });
  202. table.on('toolbar(user)', function (obj) {
  203. var type = obj.event;
  204. active[type] ? active[type].call(this) : '';
  205. });
  206. table.on('tool(user)', function (obj) {
  207. var type = obj.event;
  208. active[type] ? active[type].call(obj) : '';
  209. });
  210. $('#yue').click(function () {
  211. layer.open({
  212. type: 1,
  213. shadeClose: true,
  214. closeBtn: 0,
  215. title: ['充值二维码', 'color:#333333;background-color:#D8E6F1;'],
  216. content: '<img src="{:url("broad/fission_qrcode")}" style="margin-left:20px;"/>'
  217. });
  218. });
  219. updateMoney=function(money){
  220. $('.show>span').html(money);
  221. }
  222. });
  223. </script>
  224. {/block}