orders.blade.php 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9. <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  10. <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
  11. </head>
  12. <body>
  13. <div class="layui-fluid">
  14. <div class="layui-card">
  15. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  16. <div class="layui-form-item">
  17. <div class="layui-inline">
  18. <label class="layui-form-label">姓名</label>
  19. <div class="layui-input-block">
  20. <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
  21. </div>
  22. </div>
  23. <div class="layui-inline">
  24. <label class="layui-form-label">邮箱</label>
  25. <div class="layui-input-block">
  26. <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input">
  27. </div>
  28. </div>
  29. <div class="layui-inline">
  30. <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
  31. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  32. </button>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="layui-card-body">
  37. <div style="padding-bottom: 10px;">
  38. <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. @verbatim
  44. <script type="text/html" id="user">
  45. <div style="height: 100%;display: flex;">
  46. <div style="height: 100%;">
  47. <img style="max-width: 100%;max-height: 100%;" src="{{d.user.avatar_url}}"/>
  48. </div>
  49. <div style="padding-left: 8px;">
  50. <span>{{d.user.username}}</span>
  51. </div>
  52. </div>
  53. </script>
  54. <script type="text/html" id="status">
  55. {{# if(d.status == 0 ){ }}
  56. <span>未支付</span>
  57. {{# } else { }}
  58. <span>已支付</span>
  59. {{# } }}
  60. </script>
  61. @endverbatim
  62. <script src="/layuiadmin/layui/layui.js"></script>
  63. <script src="/static/js/alpha_2.js"></script>
  64. <script>
  65. layui.config({
  66. base: '/layuiadmin/'
  67. }).extend({
  68. index: 'lib/index'
  69. }).use(['index', 'form', 'table', 'layer'], function () {
  70. const $ = layui.$, form = layui.form, table = layui.table, layer = layui.layer;
  71. let tableList = table.render({
  72. elem: '#LAY-user-manage',
  73. url: "{{url('wallet/getOrders')}}",
  74. // toolbar: true,
  75. // defaultToolbar: ['filter'],
  76. cols: [[
  77. {field: 'user', title: '用户', templet: "#user"},
  78. {field: 'order_no', title: '订单号'},
  79. {field: 'product_id', title: '产品ID'},
  80. {field: 'price', title: '价格'},
  81. {field: "wallet", title: "充值金额"},
  82. {field: "updated_at", title: '更新时间'},
  83. {field: "status", title: "状态", templet: "#status"},
  84. ]],
  85. page: true,
  86. limit: 50,
  87. limits: [50, 100, 200, 300],
  88. where: {lang: 'zh-CN'},
  89. height: 'full-137',
  90. text: {none: '无数据'},
  91. parseData(res) {
  92. return {
  93. code: res.data.code,
  94. msg: res.data.msg,
  95. count: res.data.count,
  96. data: res.data.data
  97. };
  98. }
  99. });
  100. table.on('tool(LAY-user-manage)', function (obj) {
  101. switch (obj.event) {
  102. case "buy":
  103. layer.prompt({
  104. title: "钱包余额充值",
  105. formType: 0,
  106. placeholder: '请输入要充值的金额'
  107. }, (value, index, elem) => {
  108. const priceRegex = /^\d+(\.\d{1,2})?$/;
  109. if (!priceRegex.test(value)) return false;
  110. if (parseInt(value) === 0) return false;
  111. $.ajax({
  112. url: "{{ route('user.buyWallet') }}",
  113. method: 'post',
  114. headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
  115. data: {userId: obj.data.id, wallet: value},
  116. success(res) {
  117. if (res.code === 0) {
  118. tableList.reloadData();
  119. layer.close(index);
  120. } else {
  121. layer.msg(res.msg);
  122. }
  123. }
  124. });
  125. });
  126. break;
  127. case "video":
  128. let src = obj.data.video;
  129. let deo = document.createElement('video');
  130. deo.src = src;
  131. deo.onloadedmetadata = function () {
  132. let videoWidth = deo.videoWidth;
  133. let videoHeight = deo.videoHeight;
  134. let maxWidth = 800;
  135. let maxHeight = 600;
  136. if (videoWidth > maxWidth) {
  137. let scale = maxWidth / videoWidth;
  138. videoWidth = maxWidth;
  139. videoHeight = videoHeight * scale;
  140. }
  141. if (videoHeight > maxHeight) {
  142. let scale = maxHeight / videoHeight;
  143. videoHeight = maxHeight;
  144. videoWidth = videoWidth * scale;
  145. }
  146. layer.open({
  147. type: 2,
  148. title: false,
  149. area: [`${videoWidth}px`, `${videoHeight}px`],
  150. shade: 0.8,
  151. closeBtn: 0,
  152. shadeClose: true,
  153. content: src, // video 地址
  154. });
  155. };
  156. break;
  157. case "mp4":
  158. let url = obj.data.photo[0];
  159. let video = document.createElement('video');
  160. video.src = url;
  161. video.onloadedmetadata = function () {
  162. let videoWidth = video.videoWidth;
  163. let videoHeight = video.videoHeight;
  164. let maxWidth = 800;
  165. let maxHeight = 600;
  166. if (videoWidth > maxWidth) {
  167. let scale = maxWidth / videoWidth;
  168. videoWidth = maxWidth;
  169. videoHeight = videoHeight * scale;
  170. }
  171. if (videoHeight > maxHeight) {
  172. let scale = maxHeight / videoHeight;
  173. videoHeight = maxHeight;
  174. videoWidth = videoWidth * scale;
  175. }
  176. layer.open({
  177. type: 2,
  178. title: false,
  179. area: [`${videoWidth}px`, `${videoHeight}px`],
  180. shade: 0.8,
  181. closeBtn: 0,
  182. shadeClose: true,
  183. content: url, // video 地址
  184. });
  185. };
  186. layer.msg('点击遮罩区域可关闭');
  187. break;
  188. case "img":
  189. let start = this.dataset.index - 1;
  190. let data = [];
  191. for (let i = 1; i < obj.data.photo.length; i++) {
  192. if (obj.data.photo[i]) {
  193. data.push({
  194. "alt": `个人自拍_${i}`,
  195. "pid": (i - 1),
  196. "src": obj.data.photo[i],
  197. "thumb": obj.data.photo[i],
  198. });
  199. }
  200. }
  201. layer.photos({
  202. toolbar: false,
  203. photos: {
  204. title: "个人自拍",
  205. id: obj.data.id,
  206. start: start,
  207. data: data
  208. }
  209. });
  210. break;
  211. }
  212. console.log(this.src);
  213. // console.log(obj)
  214. });
  215. form.on('submit(LAY-user-front-search)', function (data) {
  216. let field = data.field;
  217. table.reload('LAY-user-manage', {
  218. where: field
  219. });
  220. });
  221. });
  222. </script>
  223. </body>
  224. </html>