119 lines
6.0 KiB
HTML
119 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>个人信息 - 车主信息查询系统</title>
|
|
<!-- 引入Layui CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
|
|
<!-- 引入Font Awesome -->
|
|
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
|
<!-- 引入自定义CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
|
|
|
|
<!-- 引入Layui JS -->
|
|
<script src="{{ url_for('static', filename='layui.js') }}"></script>
|
|
<script>
|
|
layui.use(['layer', 'form', 'element'], function(){
|
|
var layer = layui.layer;
|
|
var form = layui.form;
|
|
var element = layui.element;
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- 引入统一的顶部导航栏 -->
|
|
{% include 'header.html' %}
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="content-container">
|
|
<div class="content-wrapper">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa fa-user"></i> 个人信息
|
|
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
|
|
<i class="fa fa-arrow-left"></i> 返回主页面
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- 消息提示区域 -->
|
|
{% if error %}
|
|
<div class="layui-bg-red message-box">
|
|
<i class="fa fa-exclamation-circle"></i> {{ error }}
|
|
</div>
|
|
{% endif %}
|
|
{% if success %}
|
|
<div class="layui-bg-green message-box">
|
|
<i class="fa fa-check-circle"></i> {{ success }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
|
|
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
|
<i class="fa fa-user" style="font-size: 40px; color: #009688;"></i>
|
|
</div>
|
|
<p style="color: #666;">请查看并更新您的个人信息</p>
|
|
</div>
|
|
|
|
<!-- 表单 -->
|
|
<form class="layui-form" id="userProfileForm" method="POST" style="max-width: 500px; margin: 0 auto;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">用户名</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="profile_username" value="{{ user.username }}" class="layui-input" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">姓名</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="profile_name" name="name" value="{{ user.name }}" class="layui-input" placeholder="请输入姓名" lay-verify="required">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">联系电话</label>
|
|
<div class="layui-input-block">
|
|
<input type="tel" id="profile_phone" name="phone" value="{{ user.phone }}" class="layui-input" placeholder="请输入联系电话" lay-verify="required|phone">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">部门名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="profile_department" name="department" value="{{ user.department }}" class="layui-input" placeholder="请输入部门名称" lay-verify="required">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn" lay-submit>保存修改</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
{% include 'footer.html' %}
|
|
|
|
<script>
|
|
layui.use(['form', 'element'], function(){
|
|
var form = layui.form;
|
|
var element = layui.element;
|
|
|
|
// 表单验证
|
|
form.verify({
|
|
phone: [
|
|
/^1\d{10}$/,
|
|
'请输入正确的手机号'
|
|
]
|
|
});
|
|
|
|
// 表单提交
|
|
form.on('submit(userProfileForm)', function(data){
|
|
// 表单数据会自动提交，这里可以添加额外的验证逻辑
|
|
return true;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |