From 2f2af14520e83eedb54f1f4a29b33fd96e7c6597 Mon Sep 17 00:00:00 2001
From: bobi <bobi1234@foxmail.com>
Date: Wed, 26 Jun 2019 15:59:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/member/user-center.html | 158 +++++++++++++++++++++++++++++++++-
 1 file changed, 155 insertions(+), 3 deletions(-)
diff --git a/pages/member/user-center.html b/pages/member/user-center.html
index 23ec991..bd692f8 100644
--- a/pages/member/user-center.html
+++ b/pages/member/user-center.html
@@ -1,10 +1,162 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
-    <title>user-center</title>
+    <title>个人中心</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="../../css/okadmin.css">
 </head>
 <body>
-    <h1>user-center</h1>
+<div class="ok-body">
+    <!--面包屑导航区域-->
+    <div class="ok-body-breadcrumb">
+        <span class="layui-breadcrumb">
+            <a><cite>首页</cite></a>
+            <a><cite>顶部导航</cite></a>
+            <a><cite>个人中心</cite></a>
+        </span>
+        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
+            <i class="layui-icon layui-icon-refresh"></i>
+        </a>
+    </div>
+	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
+		<legend>设置我的资料</legend>
+	</fieldset>
+	<!--form表单-->
+	<form class="layui-form ok-form" lay-filter="filter">
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">用户名</label>
+	        <div class="layui-input-inline">
+	            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verify="required" value="bobi" readonly="readonly">
+	        </div>
+			<div class="layui-form-mid layui-word-aux">用户名不可进行修改</div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">真实姓名</label>
+	        <div class="layui-input-inline">
+	            <input type="text" name="reallyName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" lay-verify="required">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">手机号码</label>
+	        <div class="layui-input-inline">
+	            <input type="text" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input" lay-verify="phone">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">邮箱</label>
+	        <div class="layui-input-inline">
+	            <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" lay-verify="email">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">密码</label>
+	        <div class="layui-input-inline">
+	            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">出生日期</label>
+	        <div class="layui-input-inline">
+	            <input type="text" name="birthday" placeholder="请选择出生日期" autocomplete="off" class="layui-input" id="birthday" lay-verify="birthdayVerify">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">角色</label>
+	        <div class="layui-input-inline">
+	            <select name="role">
+	                <option value="0">管理员</option>
+	                <option value="1">普通用户</option>
+	            </select>
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">兴趣</label>
+	        <div class="layui-input-block">
+	            <input type="checkbox" name="like[write]" value="1" title="写作">
+	            <input type="checkbox" name="like[read]" value="2" title="阅读">
+	            <input type="checkbox" name="like[run]" value="3" title="运动">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">状态</label>
+	        <div class="layui-input-inline">
+	            <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" checked value="0">
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <label class="layui-form-label">性别</label>
+	        <div class="layui-input-inline">
+	            <input type="radio" name="sex" value="0" title="男">
+	            <input type="radio" name="sex" value="1" title="女" checked>
+	        </div>
+	    </div>
+		<div class="layui-form-item">
+		    <label class="layui-form-label">头像</label>
+		    <div class="layui-input-inline">
+				<input type="password" name="password" placeholder="请输入头像地址" autocomplete="off" class="layui-input" lay-verify="required">
+		    </div>
+			<button type="button" class="layui-btn" id="upload">
+				<i class="layui-icon">&#xe67c;</i>上传图片
+			</button>
+			<div class="layui-inline layui-word-aux">图片最大为100KB</div>
+		</div>
+	    <div class="layui-form-item layui-form-text">
+	        <label class="layui-form-label">备注</label>
+	        <div class="layui-input-block">
+	            <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
+	        </div>
+	    </div>
+	    <div class="layui-form-item">
+	        <div class="layui-input-block">
+	            <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
+	            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+	        </div>
+	    </div>
+	</form>
+</div>
+<!--js逻辑-->
+<script src="../../lib/layui/layui.js"></script>
+<script>
+    layui.use(["element", "form", "laydate", "upload", "util", "okLayer", "okUtils"], function () {
+        var form = layui.form;
+        var laydate = layui.laydate;
+		var upload = layui.upload;
+        var util = layui.util;
+        var okLayer = layui.okLayer;
+        var okUtils = layui.okUtils;
+
+        util.fixbar({});
+		
+		laydate.render({elem: "#birthday", type: "datetime"});
+
+		upload.render({
+			elem: "#upload",
+			url: "/file/upload",
+			done: function(res){
+			  console.log("上传完毕回调");
+			},
+			error: function(){
+			  console.log("请求异常回调");
+			}
+		});
+		
+		form.verify({
+		    birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
+		});
+		
+		form.on("submit(edit)", function (data) {
+		    okUtils.ajax(okUtils.mockApi.user.edit, "put", data.field).done(function (response) {
+		        console.log(response)
+		        okLayer.msg.greenTick("编辑成功", function () {
+		            parent.layer.close(parent.layer.getFrameIndex(window.name));
+		        });
+		    }).fail(function (error) {
+		        console.log(error)
+		    });
+		    return false;
+		});
+    });
+</script>
 </body>
 </html>
