会员角色管理，会员管理

会员角色管理效果：

添加角色：

会员管理效果：

会员编辑效果：

控制器代码：admins/controller/users.go

//角色列表
func UsersCateList(c *gin.Context)  {

    list := modes.UsersCateList(c)

    c.HTML(http.StatusOK,"users/users_cate_list.html",gin.H{
        "list":list,
        "count":len(list),
    })
}

//添加，编辑角色
func UsersCateAdd(c *gin.Context)  {

    types := modes.UsersType{}
    id,exist := c.GetQuery("id")
    if exist {
        idd,_ := strconv.Atoi(id)
        types = modes.UsersCateItem(idd)
    }

    c.HTML(http.StatusOK,"users/users_cate_add.html",gin.H{
        "cate":types,
    })
}

//保存角色
func UsersCateSave(c *gin.Context)  {
    res,msg := modes.UsersCateSave(c)
    if res!=true {
        c.JSON(http.StatusOK,gin.H{"code":400,"msg":msg})
    }else{
        c.JSON(http.StatusOK,gin.H{"code":0,"msg":msg})
    }
}

//删除角色
func UsersCateDel(c *gin.Context)  {
    res,msg := modes.UsersCateDel(c)
    if res!=true {
        c.JSON(http.StatusOK,gin.H{"code":400,"msg":msg})
    }else{
        c.JSON(http.StatusOK,gin.H{"code":0,"msg":msg})
    }
}

//会员列表
func UsersList(c *gin.Context)  {
    list := modes.UsersList(c)
    type_list := modes.UsersCateList(c)

    utype := c.Query("utype")
    utype_id,_ := strconv.Atoi(utype)

    c.HTML(http.StatusOK,"users/users_list.html",gin.H{
        "list":list,
        "count":len(list),
        "type_list":type_list,
        "utype":utype_id,
        "start_date":c.Query("start_date"),
        "end_date":c.Query("end_date"),
        "uid":c.Query("uid"),
        "username":c.Query("username"),
        "mobile":c.Query("mobile"),
    })
}

//添加角色
func UsersAdd(c *gin.Context)  {

    type_list := modes.UsersCateList(c)
    c.HTML(http.StatusOK,"users/users_add.html",gin.H{
        "type_list":type_list,
    })
}
//查看会员
func UsersInfo(c *gin.Context)  {
    var users modes.UsersL

    uid,_ := c.GetQuery("uid")
    uidd,_ := strconv.Atoi(uid)

    users = modes.UsersItem(uidd)

    c.HTML(http.StatusOK,"users/users_info.html",gin.H{
        "users":users,
    })
}
//编辑角色
func UsersEdit(c *gin.Context)  {
    var users modes.UsersL

    uid,_ := c.GetQuery("uid")
    uidd,_ := strconv.Atoi(uid)

    users = modes.UsersItem(uidd)
    type_list := modes.UsersCateList(c)

    c.HTML(http.StatusOK,"users/users_add.html",gin.H{
        "type_list":type_list,
        "users":users,
    })
}

//保存会员
func UsersSave(c *gin.Context)  {
    res,msg := modes.UsersSave(c)
    if res!=true {
        c.JSON(http.StatusOK,gin.H{"code":400,"msg":msg})
    }else{
        c.JSON(http.StatusOK,gin.H{"code":0,"msg":msg})
    }
}

//删除会员
func UsersDel(c *gin.Context)  {
    res,msg := modes.UsersDel(c)
    if res!=true {
        c.JSON(http.StatusOK,gin.H{"code":400,"msg":msg})
    }else{
        c.JSON(http.StatusOK,gin.H{"code":0,"msg":msg})
    }
}

模型：modes/UsersModel.go

type UsersType struct {
    Id int `form:"id"`
    TypeName string `form:"type_name"`
    TypeInfo string `form:"type_info"`
}
type Users struct {
    Uid int `form:"uid"`
    Username string `form:"username"`
    Passwd string `form:"passwd"`
    Mobile string `form:"mobile"`
    Uface string `form:"uface"`
    Utype int `form:"utype"`
    Uscore float64 `form:"uscore"`
    Ustatus int `form:"ustatus"`
    Uremark string `form:"uremark"`
    LastDatetime string `form:"last_datetime"`
    AddDatetime string `form:"add_datetime"`
}
type UsersL struct {
    Users
    TypeName string `form:"type_name"`
}
//角色列表
func UsersCateList(c *gin.Context) []UsersType {
    types := []UsersType{}
    DB.Model(UsersType{}).Find(&types)

    return types
}
//角色
func UsersCateItem(id int) UsersType {

    types := UsersType{}
    DB.Model(UsersType{}).Where("id=?",id).Find(&types)
    return types
}
//保存角色
func  UsersCateSave(c *gin.Context)  (bool,string){
    types := UsersType{}
    id,exist := c.GetPostForm("id")
    idd,_ := strconv.Atoi(id)
    c.ShouldBind(&types)
    if exist && idd >0{
        //修改角色

        res :=DB.Model(UsersType{}).Where("id=?",idd).Updates(&types)
        if res.Error != nil {
            return false,res.Error.Error()
        }else{
            return true,"修改成功"
        }
    }else{
        //新增角色
        res :=DB.Model(UsersType{}).Create(&types)
        if res.Error != nil {
            return false,res.Error.Error()
        }else{
            return true,"保存成功"
        }
    }
}

//删除角色
func  UsersCateDel(c *gin.Context) (bool,string) {
    id,exist := c.GetQuery("id")


    if exist {
        idd,_ := strconv.Atoi(id)
        //判断分类下是否有用户
        var count int64
        DB.Model(Users{}).Where("utype=?",idd).Count(&count)
        if count > 0 {
            count_str := strconv.Itoa(int(count))
            return false,"该分类下还有"+count_str+"用户，请先将分类下的用户移除后再删除分类"
        }else{
            res := DB.Where("id=?",idd).Delete(UsersType{})
            if res.Error!=nil {
                return false,res.Error.Error()
            }
            return true,"删除成功"
        }
    }
    return false,"删除失败"
}

//会员列表
func UsersList(c *gin.Context) []UsersL {
    users := []UsersL{}

    NewDb := DB
    if username,isExist := c.GetQuery("username");isExist == true{
        if strings.TrimSpace(username) != ""{
            NewDb = NewDb.Where("username like ?","%"+username+"%")
        }
    }
    if uid,isExist := c.GetQuery("uid");isExist == true{
        if strings.TrimSpace(uid) != ""{
            NewDb = NewDb.Where("uid = ?",uid)
        }
    }

    if mobile,isExist := c.GetQuery("mobile");isExist == true{
        if strings.TrimSpace(mobile) != ""{
            NewDb = NewDb.Where("mobile = ?",mobile)
        }
    }

    if utype,isExist := c.GetQuery("utype");isExist == true{
        if strings.TrimSpace(utype) != ""{
            NewDb = NewDb.Where("utype = ?",utype)
        }
    }

    if ustatus,isExist := c.GetQuery("ustatus");isExist == true{
        if strings.TrimSpace(ustatus) != ""{
            NewDb = NewDb.Where("ustatus = ?",ustatus)
        }
    }

    if start_date,isExist := c.GetQuery("start_date");isExist == true{
        if strings.TrimSpace(start_date) != "" {
            start_date = start_date + " 00:00:00"
            NewDb = NewDb.Where("add_datetime > ?", start_date)
        }
    }
    if end_date,isExist := c.GetQuery("end_date");isExist == true{
        if strings.TrimSpace(end_date) != "" {
            end_date = end_date+" 23:59:59"
            NewDb = NewDb.Where("add_datetime <= ?",end_date)
        }
    }
    //连表查询
    res := NewDb.Model(Users{}).Select("users.*","users_type.type_name").
        Order("users.uid DESC").
        Joins("join users_type on users.utype = users_type.id").Find(&users)

    if res.Error != nil {
        return users
    }
    return users
}

//用户详情
func UsersItem(uid int) UsersL {
    users := UsersL{}
    DB.Model(Users{}).Select("users.*","users_type.type_name").
        Joins("join users_type on users.utype = users_type.id").
        Where("users.uid=?",uid).Find(&users)

    return users
}
//用户详情
func UsersItemByName(username string) (bool,Users) {
    users := Users{}
    res := DB.Model(Users{}).Where("username=?",username).Find(&users)
    if res.Error != nil {
        return false,users
    }
    if users.Uid >0 {
        return true,users
    }
    return false,users
}
//保存用户信息
func  UsersSave(c *gin.Context)  (bool,string){
    users := Users{}
    id,exist := c.GetPostForm("uid")
    idd,_ := strconv.Atoi(id)
    c.ShouldBind(&users)

    users.LastDatetime = time.Now().Format(common.TimeTem)

    if exist && idd >0{
        //修改用户
        if strings.TrimSpace(users.Passwd)!="" {
            users.Passwd = common.MyMd5(users.Passwd)
        }
        res :=DB.Model(Users{}).Where("uid=?",idd).Updates(&users)
        if res.Error != nil {
            return false,res.Error.Error()
        }else{
            return true,"修改成功"
        }
    }else{
        //新增会员
        users.AddDatetime = time.Now().Format(common.TimeTem)
        users.Passwd = common.MyMd5(users.Passwd)

        res :=DB.Model(Users{}).Create(&users)
        if res.Error != nil {
            return false,res.Error.Error()
        }else{
            return true,"保存成功"
        }
    }
}

//删除角色
func  UsersDel(c *gin.Context) (bool,string) {
    id,exist := c.GetQuery("uid")

    if exist {
        idd,_ := strconv.Atoi(id)

        res := DB.Where("uid=?",idd).Delete(Users{})
        if res.Error!=nil {
            return false,res.Error.Error()
        }
        return true,"删除成功"
    }
    return false,"删除失败"
}

角色管理视图文件：views/users/users_cate_list.html

<div class="Hui-article">
        <article class="cl pd-20">
            <div class="cl pd-5 bg-1 bk-gray"> <span class="l">
                {{ $admin_uid := GetAdminId}}
                <a class="btn btn-primary radius" href="javascript:;"  {{if has_powa $admin_uid "/admin/users_cate_edit"}} style="display:none" {{end}} onclick="admin_role_add('添加角色','/admin/users_cate_add','800')"><i class="Hui-iconfont">&#xe600;</i> 添加角色</a> </span> <span class="r">共有数据：<strong>{{.count}}</strong> 条</span> </div>
            <div class="mt-10">
                <table class="table table-border table-bordered table-hover  table-bg  table-sort">
                    <thead>
                    <tr>
                        <th scope="col" colspan="5">用户角色管理</th>
                    </tr>
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" value="" name=""></th>
                        <th width="40">ID</th>
                        <th width="300">角色名称</th>
                        <th >角色说明</th>
                        <th width="100">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range $k,$v := .list }}
                    <tr class="text-c">
                        <td><input type="checkbox" value="" name=""></td>
                        <td>{{$v.Id}}</td>
                        <td>{{$v.TypeName}}</td>
                        <td>{{$v.TypeInfo}}</td>
                        <td class="f-14">
                            <a title="编辑" href="javascript:;" {{if has_powa $admin_uid "/admin/users_cate_edit"}} style="display:none" {{end}} onclick="admin_role_edit('编辑','/admin/users_cate_add',{{$v.Id}})" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
                            <a title="删除" href="javascript:;" {{if has_powa $admin_uid "/admin/users_cate_del"}} style="display:none" {{end}} onclick="admin_role_del(this,{{$v.Id}})" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
                    </tr>
                    {{end}}

                    </tbody>
                </table>
            </div>
        </article>
</div>

<script type="text/javascript">
    $('.table-sort').dataTable({
        "aaSorting": [[ 1, "desc" ]],//默认第几个排序
        "bStateSave": true,//状态保存
        "aoColumnDefs": [
            //{"bVisible": true, "aTargets": [ 3,4,5 ]} ,//控制列的隐藏显示
            {"orderable":false,"aTargets":[0,4]}// 不参与排序的列
        ]
    });

    /*管理员-角色-添加*/
    function admin_role_add(title,url,w,h){
        layer_show(title,url,w,h);
    }
    /*管理员-角色-编辑*/
    function admin_role_edit(title,url,id,w,h){
        layer_show(title,url+"?id="+id,w,h);
    }
    /*管理员-角色-删除*/
    function admin_role_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //此处请求后台程序，下方是成功后的前台处理……
            $.get("/admin/users_cate_del",{id:id},function (res){
                if (res.code == 0){
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                }else{
                    layer.msg("删除失败："+res.msg)
                }
            },"json")


        });
    }
</script>

添加角色视图文件：views/users/users_cate_add.html

<form action="/admin/users_cate_save" method="post" class="form form-horizontal" id="form-member-add">
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" value="{{.cate.TypeName}}" placeholder="" id="type_name" name="type_name">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3">角色说明：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" placeholder="请输入角色说明" value="{{.cate.TypeInfo}}" name="type_info" id="type_info">
      </div>
    </div>



    <div class="row cl">
      <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
        <input type="hidden" name="id" id="id" value="{{.cate.Id}}" />
        <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
      </div>
    </div>
  </form>

<script type="text/javascript">
  $(function(){
    $('.skin-minimal input').iCheck({
      checkboxClass: 'icheckbox-blue',
      radioClass: 'iradio-blue',
      increaseArea: '20%'
    });

    $("#form-member-add").validate({
      rules:{
        type_name:{
          required:true,
          minlength:2,
          maxlength:20
        },


      },
      onkeyup:false,
      focusCleanup:true,
      success:"valid",
      submitHandler:function(form){
        $(form).ajaxSubmit(function (data){
          if(data.code == 0){
            var index = parent.layer.getFrameIndex(window.name);
            parent.window.location.reload();
            parent.layer.close(index);
          }else{
            layer.alert(data.msg)
          }
        });
      }
    });
  });
</script>

会员管理视图文件：views/users/users_list.html

<article class="cl pd-20">

      <div class="text-c">
        <form name="postform" method="get" action="/admin/users_list">
        <span class="select-box inline">
            <select name="utype" class="select">
                <option value="">全部角色</option>
                {{range $k,$v := .type_list }}
                    <option value="{{$v.Id}}" {{if eq $v.Id $.utype}}selected{{end}} >{{$v.TypeName}}</option>
                {{end}}
            </select>
        </span>
        日期范围：
        <input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})" id="datemin" class="input-text Wdate" name="start_date" value="{{.start_date}}" style="width:120px;">
        -
        <input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemax" class="input-text Wdate" name="end_date" value="{{.end_date}}" style="width:120px;">

        <input type="text" class="input-text" style="width:100px" placeholder="UID"  name="uid" value="{{.uid}}">
        <input type="text" class="input-text" style="width:150px" placeholder="账号"  name="username" value="{{.username}}">
        <input type="text" class="input-text" style="width:150px" placeholder="手机号"  name="mobile" value="{{.mobile}}">

        <button type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
        </form>
      </div>
      <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l">
           <a href="javascript:;" {{if  has_powa $admin_uid "/admin/users_add"}} style="display:none" {{end}} onclick="member_add('添加会员','/admin/users_add','','510')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加会员</a>

       </span> <span class="r">共有数据：<strong>{{.count}}</strong> 条</span> </div>
      <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort">
          <thead>
          <tr class="text-c">
            <th width="25"><input type="checkbox" name="" value=""></th>
            <th width="80">UID</th>
            <th width="100">用户名</th>
            <th width="90">手机</th>
            <th width="100">角色</th>
            <th width="130">头像</th>
            <th width="100">积分</th>
            <th width="100">状态</th>
            <th >备注</th>
            <th width="130">最后访问时间</th>
            <th width="130">加入时间</th>
            <th width="100">操作</th>
          </tr>
          </thead>
          <tbody>
          {{range $k,$v := .list}}
          <tr class="text-c">
            <td><input type="checkbox" value="1" name=""></td>
            <td>{{$v.Uid}}</td>
            <td><u style="cursor:pointer" class="text-primary" onclick="member_show('{{$v.Username}}','/admin/users_show','{{$v.Uid}}','360','400')">{{$v.Username}}</u></td>
            <td>{{$v.Mobile}}</td>
            <td>{{$v.TypeName}}</td>
            <td><img src="{{$v.Uface}}" width="110" height="110"></td>
            <td >{{$v.Uscore}}</td>
            <td class="td-status">
              {{if eq $v.Ustatus 1}}<span class="label label-success radius">已启用</span>
              {{else if eq $v.Ustatus 2}}<span class="label label-warning radius">风控中</span>
              {{else if eq $v.Ustatus 3}}<span class="label label-danger radius">永久封禁</span>
              {{end}}
            </td>
            <td  class="text-l">{{$v.Uremark}}</td>
            <td>{{$v.LastDatetime}}</td>
            <td>{{$v.AddDatetime}}</td>

            <td class="td-manage">
              <a title="编辑" href="javascript:;" {{if  has_powa $admin_uid "/admin/users_edit"}} style="display:none" {{end}} onclick="member_edit('编辑','/admin/users_edit','{{$v.Uid}}','','510')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
              <a title="删除" href="javascript:;" {{if has_powa $admin_uid "/admin/users_del"}}style="display:none" {{end}}  onclick="member_del(this,'{{$v.Uid}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
          </tr>
          {{end}}

          </tbody>
        </table>
      </div>
</article>

<script type="text/javascript">
  $(function(){
    $('.table-sort').dataTable({
      "aaSorting": [[ 1, "desc" ]],//默认第几个排序
      "bStateSave": true,//状态保存
      "aoColumnDefs": [
        //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
        {"orderable":false,"aTargets":[0,8,9,11]}// 制定列不参与排序
      ]
    });
    $('.table-sort tbody').on( 'click', 'tr', function () {
      if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
      }
      else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
      }
    });
  });
  /*用户-添加*/
  function member_add(title,url,w,h){
    layer_show(title,url,w,h);
  }
  /*用户-查看*/
  function member_show(title,url,id,w,h){
    layer_show(title,url+"?uid="+id,w,h);
  }

  /*用户-编辑*/
  function member_edit(title,url,id,w,h){
    layer_show(title,url+"?uid="+id,w,h);
  }

  /*用户-删除*/
  function member_del(obj,id){


    layer.confirm('确认要删除吗？',function(index){

      $.ajax({
        type: 'GET',
        url: '/admin/users_del?uid='+id,
        dataType: 'json',
        success: function(data){
          if (data.code == 0){
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
          }else{
            layer.msg(data.msg);
          }
        },
        error:function(data) {
          console.log(data.msg);
        },
      });
    });
  }
</script>

会员编辑视图文件：views/users/users_edit.html

<article class="page-container">
    <form class="form form-horizontal" id="form-article-add" method="post" action="/admin/users_save">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>账号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{{.users.Username}}" placeholder="" id="username" name="username">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>新密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" placeholder="不修改请留空" name="passwd" id="newpassword">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" placeholder="不修改请留空" name="repasswd" id="new-password2">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>会员角色：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
                <select name="utype" class="select">
                    {{range $k,$v := .type_list}}
                        <option value="{{$v.Id}}" {{if eq $v.Id $.users.Utype}}selected{{end}}>{{$v.TypeName}}</option>
                    {{end}}
                </select>
                </span> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>手机号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{{.users.Mobile}}" placeholder="" id="mobile" name="mobile">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">头像：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <div id="fileList" class="uploader-list">
                        {{if .users.Uface}}
                        <div id="WU_FILE_0" class="item upload-state-success"><div class="pic-box"><img src="{{.users.Uface}}" style="height: 100px"></div><div class="info">{{.users.Uface}}</div><p class="state">已上传</p><div class="progress-box" style="display: none;"><span class="progress-bar radius"><span class="sr-only" style="width: 100%;"></span></span></div></div>
                        {{end}}

                    </div>
                    <div id="filePicker">选择图片</div>
                    <button id="btn-star" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>

                    <input type="hidden" name="uface" id="news_pic" value="{{.users.Uface}}">
                </div>
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">会员状态：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="ustatus" type="radio" id="ustatus-1" value="1" {{if eq .users.Ustatus 1 }}checked{{end}} {{if not .users.Ustatus}}checked{{end}}>
                    <label for="ustatus-1">正常</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="ustatus-2" name="ustatus" value="2" {{if eq .users.Ustatus 2 }}checked{{end}}>
                    <label for="ustatus-2">风控中</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="ustatus-3" name="ustatus" value="3" {{if eq .users.Ustatus 3 }}checked{{end}}>
                    <label for="ustatus-3">永久封禁</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">会员备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="uremark" cols="" rows="" class="textarea"  placeholder="说点什么..." onKeyUp="textarealength(this,200)">{{.users.Uremark}}</textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
            </div>
        </div>


        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <input type="hidden" name="uid" id="uid" value="{{.users.Uid}}">
                <button  class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 提交</button>
                <button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</article>
<script type="text/javascript">
    $(function(){

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });


        $list = $("#fileList"),
            $btn = $("#btn-star"),
            state = "pending",
            uploader;

        var uploader = WebUploader.create({
            auto: true,
            swf: '/static/h-ui.lib/webuploader/0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '/admin/fileupload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="item">' +
                    '<div class="pic-box"><img></div>'+
                    '<div class="info">' + file.name + '</div>' +
                    '<p class="state">等待上传...</p>'+
                    '</div>'
                ),
                $img = $li.find('img');
            $list.append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            //thumbnailWidth x thumbnailHeight 为 100 x 100

            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                //缩略图尺寸
                $img.attr( 'src', src );
            }, 100, 100 );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ,res) {

            $("#news_pic").val(res.img_url)

            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });
        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });
        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });



        $("#form-article-add").validate({
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    maxlength:20
                },
                mobile:{
                  required:true,
                  isMobile:true,
                },
                newpassword:{
                    required:true,
                    minlength:6,
                    maxlength:20
                },
                newpassword2:{
                    required:true,
                    minlength:6,
                    maxlength:20,
                    equalTo: "#newpassword"
                },
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){

                $(form).ajaxSubmit(function (data){
                    if(data.code == 0){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.window.location.reload();
                        parent.layer.close(index);
                    }else{
                        layer.alert(data.msg)
                    }
                });
            }
        });
    });
</script>

完结

posted @ 2023-04-24 22:10 yangphp 阅读(36) 评论(0) 编辑收藏举报

刷新页面返回顶部

随心的博客

好记性不如个烂笔头，随心记录！

随心的博客

好记性不如个烂笔头，多记录，多成长！

会员角色管理，会员管理

公告