123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>layuiAdmin 网站用户</title>
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
- <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
- </head>
- <body>
- <div class="layui-fluid">
- <div class="layui-card">
- <div class="layui-form layui-card-header layuiadmin-card-header-auto">
- <div class="layui-form-item">
- <div class="layui-inline">
- <label class="layui-form-label">商品类型</label>
- <div class="layui-input-block">
- <select name="type" lay-filter="type">
- <option value="0">普通区</option>
- <option value="1">金币区</option>
- <option value="2">至尊区</option>
- </select>
- </div>
- </div>
- <div class="layui-inline">
- <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
- <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
- </button>
- </div>
- </div>
- </div>
- <div class="layui-card-body">
- <div class="layui-hide" style="padding-bottom: 10px;">
- <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
- </div>
- <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
- </div>
- </div>
- </div>
- @verbatim
- <script type="text/html" id="cover">
- <div style="width: 26px;height:26px;display: inline-block;text-align: center;">
- <img src="{{ d.cover}}" style="max-height: 100%;max-width: 100%;cursor: pointer;" lay-event="cover"/>
- </div>
- <span>{{d.goods_name}}</span>
- </script>
- <script type="text/html" id="toolbar">
- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
- <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del">删除</a>
- </script>
- <script type="text/html" id="status">
- <input lay-event="status" type="checkbox" name="status" value="{{ d.id }}" title="上架|下架" lay-skin="switch" lay-filter="status" {{ d.status == 1 ? "checked" : "" }}>
- </script>
- <script type="text/html" id="head-toolbar">
- <div class="layui-table-tool-temp">
- <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
- </div>
- </script>
- @endverbatim
- <script src="/layuiadmin/layui/layui.js"></script>
- <script>
- layui.config({
- base: '/layuiadmin/'
- }).extend({
- index: 'lib/index'
- }).use(['index', 'form', 'table', 'layer'], function () {
- const $ = layui.$, form = layui.form, table = layui.table, layer = layui.layer;
- form.on('switch(status)', function (obj) {
- let name = this.name;
- let data = {
- id: this.value,
- [name]: obj.elem.checked ? 1 : 0
- };
- $.ajax({
- url: "{{ route('goods.setStatus') }}",
- method: "post",
- headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
- data,
- success(res) {
- if (res.code !== 0) {
- layer.msg(res.msg);
- tableList.reloadData();
- }
- }
- });
- });
- form.on('select(type)', function (data) {
- tableList.reloadData({
- where: {type: data.value}
- });
- });
- var count = 0, active = {
- add() {
- if (count >= 12) return layer.alert('最多不超过12个选项');
- layer.open({
- type: 2,
- title: '添加奖品',
- content: "{{ route('goods.edit') }}",
- resize: false,
- area: ['350px', '360px'],
- btn: ['确定', '取消'],
- success(layero, index, that) {
- let iframe = layero.find('iframe')[0];
- let iframeWindow = iframe.contentWindow;
- iframeWindow.layui.form.val('form', {
- type: tableList.config.where.type,
- });
- },
- end() {
- tableList.reloadData();
- },
- yes: function (index, layero) {
- //点击确认触发 iframe 内容中的按钮提交
- var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
- submit.click();
- }
- });
- }
- };
- table.on('toolbar(LAY-user-manage)', function (obj) {
- let type = obj.event;
- active[type] ? active[type].call(this) : '';
- });
- // $('.layui-btn.layuiadmin-btn-list').on('click', function () {
- // var type = $(this).data('type');
- // active[type] ? active[type].call(this) : '';
- // });
- let tableList = table.render({
- elem: '#LAY-user-manage',
- url: "{{url('goods/getList')}}",
- // toolbar: true,
- toolbar: '#head-toolbar',
- defaultToolbar: [],
- cols: [[
- {field: 'cover', title: '商品', templet: "#cover"},
- {field: 'rank', title: '排序', width: 100, edit: "text",},
- {field: 'probability', title: '权重', width: 100, edit: 'text'},
- {field: 'stock', title: '库存', hide: true},
- {
- field: 'is_prize', title: '中奖', width: 100, templet(d) {
- if (d.is_prize === 0) {
- return "否";
- } else {
- return "是";
- }
- }
- },
- {title: "状态", width: 100, templet: "#status"},
- {title: '操作', width: 200, toolbar: '#toolbar'}
- ]],
- page: true,
- limit: 50,
- limits: [50, 100, 200, 300],
- where: {lang: 'zh-CN', type: 0},
- height: 'full-130',
- text: {none: '无数据'},
- parseData(res) {
- count = res.data.count;
- return {
- code: res.data.code,
- msg: res.data.msg,
- count: res.data.count,
- data: res.data.data
- };
- }
- });
- table.on('edit(LAY-user-manage)', function (obj) {
- var value = obj.value;
- var data = obj.data; // 得到所在行所有键值
- let test = /^(0|[1-9]\d*)$/;
- switch (obj.field) {
- case "rank":
- test = /^(0|[1-9]\d*)$/;
- if (!test.test(value)) {
- layer.tips('请输入正确的数值', this, {tips: 1});
- return obj.reedit();
- }
- if (value > 1000) {
- layer.tips('最大1000', this, {tips: 1});
- return obj.reedit();
- }
- $.ajax({
- url: "{{ route('goods.setRank') }}",
- method: "post",
- headers: {
- 'X-CSRF-TOKEN': "{{ csrf_token() }}",
- },
- data: {
- id: data.id,
- rank: value
- },
- success(res) {
- if (res.code !== 0) {
- layer.alert(res.msg);
- return obj.reedit();
- } else {
- tableList.reloadData();
- }
- }
- });
- break;
- case "probability":
- test = /^(0|[1-9]\d*)$/;
- if (!test.test(value)) {
- layer.tips('请输入正确的数值', this, {tips: 1});
- return obj.reedit();
- }
- if (value > 1000) {
- layer.tips('最大1000', this, {tips: 1});
- return obj.reedit();
- }
- $.ajax({
- url: "{{ route('goods.setProbability') }}",
- method: "post",
- headers: {
- 'X-CSRF-TOKEN': "{{ csrf_token() }}",
- },
- data: {
- id: data.id,
- probability: value
- },
- success(res) {
- if (res.code !== 0) {
- layer.alert(res.msg);
- return obj.reedit();
- }
- }
- });
- break;
- }
- });
- table.on('tool(LAY-user-manage)', function (obj) {
- switch (obj.event) {
- case 'cover':
- layer.photos({
- toolbar: false,
- photos: {
- title: "奖品图片",
- id: obj.data.id,
- start: 0,
- data: [{
- "alt": obj.data.goods_name,
- "pid": obj.data.id,
- "src": obj.data.cover,
- "thumb": obj.data.cover
- }]
- }
- });
- break;
- case "del":
- layer.alert('删除?', function (index) {
- $.ajax({
- url: "{{ route('goods.del') }}",
- method: 'post',
- data: {id: obj.data.id},
- headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
- success(res) {
- if (res.code === 0) {
- layer.close(index);
- tableList.reloadData();
- } else {
- layer.msg(res.msg);
- }
- }
- });
- });
- break;
- case "edit":
- layer.open({
- type: 2,
- title: '编辑奖品',
- content: "{{ route('goods.edit') }}",
- resize: false,
- area: ['350px', '360px'],
- btn: ['确定', '取消'],
- success(layero, index, that) {
- let iframe = layero.find('iframe')[0];
- layero.find('iframe').contents().find("#cover").attr('src', obj.data.cover);
- let iframeWindow = iframe.contentWindow;
- iframeWindow.layui.form.val('form', {
- type: obj.data.type,
- id: obj.data.id,
- goodsName: obj.data.goods_name,
- probability: obj.data.probability,
- cover: obj.data.cover
- });
- if (obj.data.is_prize === 1) {
- iframeWindow.layui.form.val('form', {
- isPrize: true
- });
- }
- },
- end() {
- tableList.reloadData();
- },
- yes: function (index, layero) {
- //点击确认触发 iframe 内容中的按钮提交
- var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
- submit.click();
- }
- });
- break;
- case "video":
- let src = obj.data.video;
- let deo = document.createElement('video');
- deo.src = src;
- deo.onloadedmetadata = function () {
- let videoWidth = deo.videoWidth;
- let videoHeight = deo.videoHeight;
- let maxWidth = 800;
- let maxHeight = 600;
- if (videoWidth > maxWidth) {
- let scale = maxWidth / videoWidth;
- videoWidth = maxWidth;
- videoHeight = videoHeight * scale;
- }
- if (videoHeight > maxHeight) {
- let scale = maxHeight / videoHeight;
- videoHeight = maxHeight;
- videoWidth = videoWidth * scale;
- }
- layer.open({
- type: 2,
- title: false,
- area: [`${videoWidth}px`, `${videoHeight}px`],
- shade: 0.8,
- closeBtn: 0,
- shadeClose: true,
- content: src, // video 地址
- });
- };
- break;
- case "mp4":
- let url = obj.data.photo[0];
- let video = document.createElement('video');
- video.src = url;
- video.onloadedmetadata = function () {
- let videoWidth = video.videoWidth;
- let videoHeight = video.videoHeight;
- let maxWidth = 800;
- let maxHeight = 600;
- if (videoWidth > maxWidth) {
- let scale = maxWidth / videoWidth;
- videoWidth = maxWidth;
- videoHeight = videoHeight * scale;
- }
- if (videoHeight > maxHeight) {
- let scale = maxHeight / videoHeight;
- videoHeight = maxHeight;
- videoWidth = videoWidth * scale;
- }
- layer.open({
- type: 2,
- title: false,
- area: [`${videoWidth}px`, `${videoHeight}px`],
- shade: 0.8,
- closeBtn: 0,
- shadeClose: true,
- content: url, // video 地址
- });
- };
- layer.msg('点击遮罩区域可关闭');
- break;
- case "img":
- let start = this.dataset.index - 1;
- let data = [];
- for (let i = 1; i < obj.data.photo.length; i++) {
- if (obj.data.photo[i]) {
- data.push({
- "alt": `个人自拍_${i}`,
- "pid": (i - 1),
- "src": obj.data.photo[i],
- "thumb": obj.data.photo[i],
- });
- }
- }
- layer.photos({
- toolbar: false,
- photos: {
- title: "个人自拍",
- id: obj.data.id,
- start: start,
- data: data
- }
- });
- break;
- }
- // console.log(this.src);
- // console.log(obj)
- });
- form.on('submit(LAY-user-front-search)', function (data) {
- let where = data.field;
- tableList.reloadData({where});
- });
- });
- </script>
- </body>
- </html>
|