<html>
 <head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>Setting Info</title> 
  <link rel="stylesheet" href="/mbtech/layui.css"> 
  <link rel="stylesheet" href="/mbtech/common.css"> 
  <style>
        .layui-panel-window {
            background: #FFFFFF !important;
            border-top: none
        }

        .layui-form-item {
            background: none;
            border-radius: 8px;
            border: 1px solid #CFD0D9;
            height: 50px;
            line-height: 50px;
        }

        .layui-input {
            background: none;
            color: #333333;
            font-weight: 400;
            border: none;
            height: 50px;
            line-height: 50px;
        }

        .login_btn {
            font-family: Arial, Arial;
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
            height: 44px;
            line-height: 44px;
        }
    </style> 
 </head> 
 <body class="common_body" style="background-image: url(/mbtech/common_bg.png);"> 
  <div class="common_header common_header_order" style="height: 120px"> 
   <a href="javascript:history.back(-1)" class="back position"> <p class="btn"><i class="layui-icon layui-icon-left layui-font-20"></i></p> Setting Info </a> 
  </div> 
  <div style="margin: 15px"> 
   <div style="background: #FFFFFF; border-radius: 16px;"> 
    <div class="layui-panel-window layui-font-16" style="border-radius: 8px;"> 
     <form class="layui-form" lay-filter="saveBankCardInfoForm"> 
      <input name="avatar" id="avatar" type="hidden" value="/public/uploads/user/avatar.png"> 
      <div class="demo-login-container"> 
       <div class="user-header" style="margin-top: 10px; display: flex; justify-content: flex-start"> 
        <div> 
         <img src="/mbtech/mb/avatar.png" style="width: 60px; height: 60px" class="layui-circle" id="upload_avatar">
         <input class="layui-upload-file" type="file" accept="image/*" name="file"> 
        </div> 
        <div style="padding-left: 10px; color: #155BCD"> 
         <h1 class="layui-font-16" style="color: #0751A0; margin-bottom: 10px;">Click to change the picture</h1> 
         <p>It is recommended to upload images larger than 100px 1:1</p> 
        </div> 
        <div style="clear: both"></div> 
       </div> 
       <div style="margin-top: 20px; margin-bottom: 7px; color: #155BCD; font-size: 18px;">
        Nickname
       </div> 
       <div class="layui-form-item"> 
        <input type="text" name="nickname" value="122634" lay-verify="required" placeholder="nickname" lay-reqtext="nickname" autocomplete="off" class="layui-input"> 
       </div> 
       <div style="margin-top: 20px; margin-bottom: 7px; color: #155BCD; font-size: 18px;">
        Email
       </div> 
       <div class="layui-form-item"> 
        <input type="text" name="email" value="" lay-verify="required" placeholder="email" lay-reqtext="email" autocomplete="off" class="layui-input"> 
       </div> 
       <div class="layui-form-item" style="border: none"> 
        <button class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-radius login_btn" lay-submit="" lay-filter="saveInfo"> Save Info </button> 
       </div> 
      </div> 
     </form> 
    </div> 
   </div> 
  </div> 
  <!-- Bottom Content - Start --> 
  <!--<a href="/help"  id="service" style="background:#ffffff">--> 
  <!--  <img src="/public/site/img/common/service.png" style="width: 40px;height: 40px">--> 
  <!--</a>--> 
  <!--<a href="/lottery"  id="lottery" class="animate__animated animate__fadeInUp" style=" position: fixed;   z-index:9999;   bottom: 200px;   left: 0px;">--> 
  <!--    <img src="/public/site/img/common/lottery.png" style="width: 40px;height: 40px">--> 
  <!--</a>--> 
  <!-- Bottom Content - End --> 
  <!-- Body Ending with layui --> 
  <script>
    layui.use(function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        // Regular usage - Normal image upload
        var uploadInst = upload.render({
            elem: '#upload_avatar',
            url: '/uploadPicture', // Change to your own upload interface 
            acceptMime: 'image/*',
            accept: 'jpg|png|gif|jpeg',
            data: { 'directory': 'avatar' },
            done: function(res){
                layer.msg(res.msg);
                // If the upload fails
                if(res.status == 1){
                    $('#avatar').val(res.result.path);
                    $('#upload_avatar').attr('src', res.result.show_path);
                }
            },
            error: function(){
                // Handle error
            }
        });
        // Submit event
        form.on('submit(saveInfo)', function(data){
            var data = data.field; // Get form field values
            $.post('/info', data, function(res) {
                layer.msg(res.msg);
                if(res.status == 1){
                    window.location.href = '/my';
                }
            });
            return false; // Prevent default form jump
        });
    });
</script> 
 </body>
</html>