123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- {extend name="public/layout"}
- {block name="body"}
- <style>
- .layui-form-item .layui-input-inline {
- float: left;
- width: 190px;
- margin-right: 10px;
- }
- .layui-input-inline {
- display: inline-block;
- vertical-align: middle;
- }
- .upload-img {
- border: 1px dashed #e2e2e2;
- height: 100px;
- width: 100px;
- }
- .upload-img .area {
- margin-top: 40px;
- text-align: center;
- }
- .upload-img .area i {
- font-size: 50px;
- color: #009688;
- }
- </style>
- <body>
- <div class="layui-fluid">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md12">
- <div class="layui-card">
- <div class="layui-card-body">
- <form class="layui-form" id="admin" enctype="multipart/form-data">
- <div class="layui-form-item " id="name1">
- <div class="layui-form-item ">
- <label class="layui-form-label" for="value1">客服名称:</label>
- <div class="layui-input-block" style="width:200px;">
- <input type="text" name="value" required lay-verify="required" id="value1"
- placeholder="请输入系统客服名称" autocomplete="off" class="layui-input">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">客服头像:</label>
- <div class="layui-input-inline">
- <div class="upload-img" id="img1">
- <div class="area">
- <i class="layui-icon"></i>
- </div>
- </div>
- </div>
- <!--<div class="layui-form-mid layui-word-aux">
- <button type="button" class="layui-btn add" id="1" >
- <i class="layui-icon"></i>
- </button>
- </div>-->
- </div>
- </div>
- <div class="layui-form-item">
- <div class="layui-input-block">
- <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
- {/block}
- {block name="js"}
- <script>
- var addurl = '{:url("broad/waistcoat_add")}';
- layui.use(['form', 'upload', 'layedit'], function () {
- var $ = layui.jquery
- , form = layui.form
- , layedit = layui.layedit
- , upload = layui.upload;
- var textarea;
- form.on("submit(admin)", function (obj) {
- if($(obj.elem).hasClass('layui-btn-disabled')) return false;
- $(obj.elem).addClass('layui-btn-disabled');
- var formData = new FormData(obj.form);
- $.ajax({
- url:addurl,
- type: 'POST',
- data: formData,
- dataType: 'json',
- processData: false,
- contentType: false,
- success: function (resp) {
- var res = JSON.parse(resp);
- if (res.code === 0) {
- layer.msg(res.msg, {anim: 0}, function () {
- parent.t.reload();
- var index = parent.layer.getFrameIndex(window.name);
- parent.layer.close(index);
- });
- } else {
- layer.msg(res.msg, {anim: 6});
- $(obj.elem).removeClass('layui-btn-disabled');
- }
- }});
- return false;
- });
- //多个上传
- /*$('.add').click(function(){
- var num = this.id;
- num ++;
- var name = '#name' + num;
- $(name).show();
- $(this).hide();
- var value = '#value' + num;
- $(value).attr('lay-verify','required');
- });*/
- upload.render({
- elem: '#img1',
- accept: 'images',
- exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
- auto: false,
- field: 'picture',
- size: 2 * 1024,
- choose: function(obj){
- file=obj.pushFile();
- obj.preview(function(index, file, result){
- $('#img1').html('<img src="' + result + '" style="height: 100%;width:100%;">');
- });
- }
- });
- });
- </script>
- {/block}
|