evaluation.blade.php 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>layuiAdmin 网站用户</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. <style>
  12. .layui-form-radio > i {
  13. margin-right: 8px !important;
  14. }
  15. .layui-form-radio {
  16. margin-right: 20px !important;
  17. }
  18. .layui-form-radioed > .lay-skin-tag {
  19. color: #fff !important;
  20. background-color: #16b777 !important;
  21. border-radius: 100px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="layui-fluid">
  27. <div class="layui-card">
  28. <div class="layui-card-body" style="margin-bottom: 30px;">
  29. <div class="layui-btn-container">
  30. <button class="layui-btn layui-btn-sm abbb" id="langButton">
  31. <span style="display: inline-block;width: 45px;">中文</span>
  32. <i class="layui-icon layui-icon-down layui-font-12"></i>
  33. </button>
  34. </div>
  35. <table id="table" lay-filter="table"></table>
  36. </div>
  37. </div>
  38. </div>
  39. <script type="text/html" id="toolbar">
  40. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  41. </script>
  42. <script src="/layuiadmin/layui/layui.js"></script>
  43. <script>
  44. layui.config({
  45. base: '/layuiadmin/'
  46. }).extend({
  47. index: 'lib/index'
  48. }).use(['index', 'table', 'dropdown'], function () {
  49. const $ = layui.$, table = layui.table, dropdown = layui.dropdown, layer = layui.layer;
  50. let lang = 'zh';
  51. table.on('edit(table)', function (obj) {
  52. let data = obj.data;
  53. let value = obj.value;
  54. if (value.replace(/\s/g, '') === '') {
  55. layer.tips('值不能为空', this, {tips: 1});
  56. return obj.reedit();
  57. }
  58. let lang = aTable.config.where.lang;
  59. $.ajax({
  60. url: "{{ route('user.setData') }}",
  61. method: "post",
  62. headers: {
  63. 'X-CSRF-TOKEN': "{{ csrf_token() }}",
  64. },
  65. data: {
  66. lang, data
  67. },
  68. success(res) {
  69. if (res.code !== 0) {
  70. layer.alert(res.msg);
  71. }
  72. }
  73. });
  74. });
  75. table.on('tool(table)', (obj) => {
  76. let event = obj.event, data = obj.data;
  77. switch (event) {
  78. case "edit":
  79. location.href = `/user/evaluation/edit?id=${data.id}&lang=${lang}`;
  80. break;
  81. case 'cover':
  82. layer.photos({
  83. toolbar: false,
  84. photos: {
  85. title: "封面",
  86. id: data.id,
  87. start: 0,
  88. data: [{
  89. "alt": `封面${data.id}`,
  90. "pid": data.id,
  91. "src": data.cover,
  92. "thumb": data.cover,
  93. }]
  94. }
  95. });
  96. break;
  97. case "show":
  98. case "skip":
  99. $.ajax({
  100. url: "{{ route('user.setData') }}",
  101. method: "post",
  102. headers: {
  103. 'X-CSRF-TOKEN': "{{ csrf_token() }}",
  104. },
  105. data: {
  106. id: data.id,
  107. [event]: data[event] ? 0 : 1,
  108. },
  109. success(res) {
  110. if (res.code === 0) {
  111. obj.update({
  112. [event]: data[event] ? 0 : 1,
  113. }, true);
  114. } else {
  115. layer.alert(res.msg);
  116. }
  117. }
  118. });
  119. break;
  120. }
  121. });
  122. table.on('toolbar(table)', (obj) => {
  123. var id = obj.config.id;
  124. var checkStatus = table.checkStatus(id);
  125. var data = checkStatus.data;
  126. layer.alert(layui.util.escape(JSON.stringify(data)));
  127. });
  128. let aTable = table.render({
  129. elem: '#table',
  130. url: "{{url('user/data')}}",
  131. defaultContextmenu: false,
  132. where: {lang: 'zh'},
  133. cols: [[
  134. {field: "name", title: '采集项', width: 100, templet: nameForZh,},
  135. {
  136. field: "cover", title: '封面', width: 100, templet(d) {
  137. if (d.cover === '') return '';
  138. return `<img lay-event="cover" lay-tips="查看大图" style="height: 30px;object-fit: contain;border: 1px solid rgba(0,0,0,.3);margin-right: 3px; width: 48px;object-fit: cover;" src="${d.cover}" />`;
  139. }
  140. },
  141. {field: "title", title: '标题', maxWidth: 250},
  142. {field: 'subTitle', title: '指引语',},
  143. // {title: "内容", templet: content, width: 200},
  144. {
  145. title: "是否必填", width: 100, templet: (d) => {
  146. return (!d.skip) ?
  147. `<i lay-event="skip" style="cursor: pointer;font-size: 20px;color:#16BAAA;" class="layui-icon layui-icon-ok"/>`
  148. :
  149. `<i lay-event="skip" style="cursor: pointer;font-size: 20px;color: #FF5722;" class="layui-icon layui-icon-close"/>`;
  150. }
  151. },
  152. // {
  153. // title: '是否开启', width: 100, templet: (d) => {
  154. // return (!d.show) ?
  155. // `<i lay-event="show" style="cursor: pointer;font-size: 20px;color: #FF5722;" class="layui-icon layui-icon-close"/>`
  156. // :
  157. // `<i lay-event="show" style="cursor: pointer;font-size: 20px;color:#16BAAA;" class="layui-icon layui-icon-ok"/>`;
  158. // }
  159. // },
  160. {title: '操作', width: 100, toolbar: '#toolbar'}
  161. ]],
  162. page: false,
  163. done: function (a) {
  164. dropdown.render({
  165. elem: '.abbb',
  166. data: [{id: 'zh', title: '中文'}, {id: 'en', title: 'English'}],
  167. click: function (obj) {
  168. this.elem.find('span').text(obj.title);
  169. lang = obj.id;
  170. if (lang !== aTable.config.where.lang) {
  171. aTable.config.where.lang = lang;
  172. aTable.reloadData({where: {lang: obj.id}});
  173. }
  174. }
  175. });
  176. },
  177. });
  178. function nameForZh(d) {
  179. let zh = {
  180. name: '姓名',
  181. sex: '性别',
  182. birthday: '生日',
  183. city: '家庭地址',
  184. occupation: '职业',
  185. income: '年收入',
  186. declaration: '恋爱宣言',
  187. phone: '手机号',
  188. tags: '标签',
  189. line: '社交账号',
  190. video: '视频'
  191. };
  192. return zh[d.name];
  193. }
  194. function content(d) {
  195. switch (d.type) {
  196. case "longText":
  197. case 'text':
  198. case "phone":
  199. case "date":
  200. return `<input class="layui-input" readonly>`;
  201. case 'radio':
  202. case "checkbox":
  203. return radio(d);
  204. case 'address':
  205. if (aTable.config.where.lang === 'zh') {
  206. return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">选择</a>`;
  207. } else {
  208. return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">Choose</a>`;
  209. }
  210. case 'image':
  211. if (aTable.config.where.lang === 'zh') {
  212. return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">上传</a>`;
  213. } else {
  214. return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">Upload</a>`;
  215. }
  216. default:
  217. return "";
  218. }
  219. }
  220. function radio(data) {
  221. let title = data.title;
  222. data = data.data;
  223. let msg = '';
  224. for (let i = 0; i < data.length; i++) {
  225. msg += `<input disabled `;
  226. if (i === 0) msg += 'checked';
  227. msg += ` type="radio" name="${title}" value="${data[i]}" title="${data[i]}">`;
  228. }
  229. return msg;
  230. }
  231. });
  232. </script>
  233. </body>
  234. </html>