prxhap34i
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

18

Browse Source
cp
cp 3 months ago
parent cd78156d77
commit 1e2f675d0c
1 changed files with 123 additions and 67 deletions
Show Stats Download Patch File Download Diff File

190
target/classes/front/front/pages/yisheng/register.html
Unescape View File

@ -2,172 +2,224 @@
<html>
<head>
<!-- 元数据定义 -->
<meta charset="utf-8"> <!-- 字符编码设置为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- 响应式视口设置 -->
<title>注册</title> <!-- 页面标题 -->
<!-- 设置字符编码为 UTF-8，确保页面能正确显示各种语言字符 -->
<meta charset="utf-8">
<!-- 响应式视口设置，让页面在不同设备上能自适应显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 页面标题，显示在浏览器标签栏 -->
<title>注册</title>
<!-- CSS样式表引入 -->
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"> <!-- 引入LayUI框架样式 -->
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/> <!-- 公共样式表 -->
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/> <!-- 登录相关样式 -->
<link rel="stylesheet" href="../../css/theme.css" /> <!-- 主题样式 -->
<!-- 引入 LayUI 框架样式，用于构建页面布局和组件 -->
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
<!-- 引入公共样式表，包含一些通用的样式设置 -->
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/>
<!-- 引入登录相关样式，可能包含注册页面的特定样式 -->
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
<!-- 引入主题样式，设置页面整体的视觉风格 -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 内联CSS样式 -->
<!-- 内联 CSS 样式 -->
<style type="text/css">
/* 注册页面主容器样式 */
/* 使用弹性布局，让内容在水平和垂直方向上都居中显示 */
.register {
display: flex; /* 弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%; /* 宽度100% */
height: 100%; /* 高度100% */
background-attachment: fixed; /* 背景固定 */
background-size: cover; /* 背景覆盖 */
background-position: center; /* 背景居中 */
background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); /* 背景图片 */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
/* 背景图片固定，不随页面滚动而移动 */
background-attachment: fixed;
/* 背景图片覆盖整个容器 */
background-size: cover;
/* 背景图片居中显示 */
background-position: center;
/* 设置背景图片 */
background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg);
}
/* 表单样式 */
/* 使用盒模型计算方式，包含内边距和边框 */
.register form {
box-sizing: border-box; /* 盒模型计算方式 */
min-height: 400px; /* 最小高度 */
display: flex; /* 弹性布局 */
flex-direction: column; /* 垂直排列 */
justify-content: center !important; /* 垂直居中 */
box-sizing: border-box;
/* 表单最小高度为 400px */
min-height: 400px;
display: flex;
/* 表单元素垂直排列 */
flex-direction: column;
/* 表单元素垂直居中 */
justify-content: center !important;
}
/* 标题和logo样式 */
/* 标题和 logo 样式 */
/* 标题文字居中显示 */
.register .title {
text-align: center; /* 文字居中 */
text-align: center;
}
/* 表单项样式 */
/* 使用弹性布局，让表单项内元素垂直居中 */
.register .form-item {
display: flex; /* 弹性布局 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 允许换行 */
box-sizing: border-box; /* 盒模型计算方式 */
display: flex;
align-items: center;
/* 表单项内元素允许换行 */
flex-wrap: wrap;
box-sizing: border-box;
}
/* 提交按钮样式 */
/* 提交按钮为块级元素 */
.register .btn-submit {
display: block; /* 块级元素 */
box-sizing: border-box; /* 盒模型计算方式 */
display: block;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- Vue.js应用容器 -->
<!-- Vue.js 应用容器 -->
<!-- 该容器为 Vue 实例的挂载点 -->
<div class="register" id="app">
<!-- 注册表单 -->
<!-- 使用 LayUI 表单，设置表单过滤器为 myForm -->
<form class="layui-form login-form" lay-filter="myForm">
<!-- 表单标题 -->
<p class="title">医生注册</p>
<!-- 医生工号输入框 -->
<!-- 设置输入框为必填项，输入提示为请输入医生工号 -->
<div class="form-item layui-form-text">
<input lay-verify="required" type="text" id="yishengUuidNumber" name="yishengUuidNumber" placeholder="请输入医生工号" class="layui-input">
</div>
<!-- 用户名输入框 -->
<!-- 设置输入框为必填项，输入提示为请输入账户 -->
<div class="form-item layui-form-text">
<input lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" class="layui-input">
</div>
<!-- 密码输入框 -->
<!-- 设置输入框为必填项，同时进行密码一致性验证，输入提示为请输入密码 -->
<div class="form-item layui-form-text">
<input lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" class="layui-input">
</div>
<!-- 确认密码输入框 -->
<!-- 设置输入框为必填项，同时进行密码一致性验证，输入提示为请重复输入密码 -->
<div class="form-item layui-form-text">
<input lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" class="layui-input">
</div>
<!-- 医生姓名输入框 -->
<!-- 设置输入框为必填项，输入提示为请输入医生名称 -->
<div class="form-item layui-form-text">
<input lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" class="layui-input">
</div>
<!-- 科室选择下拉框 -->
<div>
<!-- 初始选项为请选择科室 -->
<select name="yishengTypes" id="yishengTypes">
<option value="">请选择科室</option>
<!-- Vue动态渲染科室选项 -->
<!-- 使用 Vue 的 v-for 指令动态渲染科室选项 -->
<option v-for="(item,index) in yishengTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
</select>
</div>
<!-- 职位选择下拉框 -->
<div>
<!-- 初始选项为请选择职位 -->
<select name="zhiweiTypes" id="zhiweiTypes">
<option value="">请选择职位</option>
<!-- Vue动态渲染职位选项 -->
<!-- 使用 Vue 的 v-for 指令动态渲染职位选项 -->
<option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
</select>
</div>
<!-- 职称输入框 -->
<!-- 设置输入框为必填项，输入提示为请输入职称 -->
<div class="form-item layui-form-text">
<input lay-verify="required" type="text" id="yishengZhichneg" name="yishengZhichneg" placeholder="请输入职称" class="layui-input">
</div>
<!-- 联系方式输入框 -->
<!-- 设置输入框为必填项，同时进行手机号码格式验证，输入提示为请输入联系方式 -->
<div class="form-item layui-form-text">
<input lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" class="layui-input">
</div>
<!-- 挂号须知输入框 -->
<!-- 设置输入框为必填项，输入提示为请输入挂号须知 -->
<div class="form-item layui-form-text">
<input lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" class="layui-input">
</div>
<!-- 邮箱输入框 -->
<!-- 设置输入框为必填项，同时进行邮箱格式验证，输入提示为请输入邮箱 -->
<div class="form-item layui-form-text">
<input lay-verify="email|required" type="text" id="yishengEmail" name="yishengEmail" placeholder="请输入邮箱" class="layui-input">
</div>
<!-- 注册按钮 -->
<!-- 点击按钮提交表单，触发注册事件 -->
<button class="layui-btn" lay-submit lay-filter="register">注册</button>
<!-- 已有账号登录链接 -->
<!-- 点击链接跳转到登录页面 -->
<p class="txt"><a href="../login/login.html">已有账号登录</a></p>
</form>
</div>
<!-- JavaScript文件引入 -->
<script src="../../layui/layui.js"></script> <!-- LayUI框架 -->
<script src="../../js/vue.js"></script> <!-- Vue.js框架 -->
<script src="../../xznstatic/js/element.min.js"></script> <!-- Element UI组件库 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> <!-- Element UI样式 -->
<script src="../../js/config.js"></script> <!-- 组件配置信息 -->
<script src="../../modules/config.js"></script> <!-- 扩展插件配置 -->
<script src="../../js/utils.js"></script> <!-- 工具方法 -->
<script src="../../js/validate.js"></script> <!-- 校验工具类 -->
<!-- JavaScript 文件引入 -->
<!-- 引入 LayUI 框架 -->
<script src="../../layui/layui.js"></script>
<!-- 引入 Vue.js 框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入 Element UI 组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 引入组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 引入扩展插件配置 -->
<script src="../../modules/config.js"></script>
<!-- 引入工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 引入校验工具类 -->
<script src="../../js/validate.js"></script>
<script>
// 创建Vue实例
// 创建 Vue 实例
// 挂载到 id 为 app 的元素上
var vue = new Vue({
el: '#app', // 挂载到id为app的元素上
el: '#app',
data: {
yishengTypesList : [], // 科室类型列表
zhiweiTypesList : [], // 职位类型列表
// 科室类型列表，用于动态渲染科室下拉框选项
yishengTypesList : [],
// 职位类型列表，用于动态渲染职位下拉框选项
zhiweiTypesList : [],
},
updated: function() {
// 当Vue更新DOM后，重新渲染LayUI表单
// 当 Vue 更新 DOM 后，重新渲染 LayUI 表单，确保表单样式正确显示
layui.form.render(null, 'myForm');
},
});
// 使用LayUI模块
// 使用 LayUI 模块
layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
// 获取LayUI模块
var layer = layui.layer; // 弹层组件
var element = layui.element; // 元素组件
var carousel = layui.carousel; // 轮播组件
var form = layui.form; // 表单组件
var http = layui.http; // HTTP请求组件
var jquery = layui.jquery; // jQuery组件
// 获取 LayUI 模块
// 弹层组件，用于显示提示信息
var layer = layui.layer;
// 元素组件，用于操作页面元素
var element = layui.element;
// 轮播组件，这里未使用
var carousel = layui.carousel;
// 表单组件，用于处理表单相关操作
var form = layui.form;
// HTTP 请求组件，用于发送网络请求
var http = layui.http;
// jQuery 组件，用于操作 DOM 元素
var jquery = layui.jquery;
// 获取表名参数
var tablename = http.getParam('tablename');
@ -176,7 +228,7 @@
yishengTypesSelect();
// 初始化职位下拉框
zhiweiTypesSelect();
// 初始化日期选择器
// 初始化日期选择器，这里未实现具体逻辑
dateTimePick();
// 表单验证规则
@ -189,39 +241,43 @@
// 小数验证
double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/,
'最大整数位为6为,小数最大两位'
'最大整数位为 6 位，小数最大两位'
],
// 密码一致性验证1
// 密码一致性验证 1
password1: function(value, item) {
var password2 = jquery("#password2").val();
if(password2 && value != password2){
return '密码的两次密码不一致';
return '密码的两次输入不一致';
}
},
// 密码一致性验证2
// 密码一致性验证 2
password2: function(value, item) {
var password1 = jquery("#password1").val();
if(password1 && value != password1){
return '密码的两次密码不一致';
return '密码的两次输入不一致';
}
}
});
// 注册表单提交事件
form.on('submit(register)', function(data) {
data = data.field; // 获取表单数据
// 获取表单数据
data = data.field;
// 发送注册请求
http.requestJson(tablename + '/register', 'post', data, function(res) {
// 注册成功提示
layer.msg('注册成功', {
time: 2000, // 2秒后自动关闭
icon: 6 // 成功图标
// 2 秒后自动关闭提示框
time: 2000,
// 成功图标
icon: 6
}, function(){
// 跳转到登录页面
window.location.href = '../login/login.html';
});
});
return false; // 阻止表单默认提交
// 阻止表单默认提交
return false;
});
// 日期选择器初始化函数
@ -234,7 +290,7 @@
// 请求科室类型数据
http.request("dictionary/page?page=1&limit=100&dicCode=yisheng_types", "GET", {}, (res) => {
if(res.code == 0){
// 将数据存入Vue实例
// 将数据存入 Vue 实例
vue.yishengTypesList = res.data.list;
}
});
@ -245,7 +301,7 @@
// 请求职位类型数据
http.request("dictionary/page?page=1&limit=100&dicCode=zhiwei_types", "GET", {}, (res) => {
if(res.code == 0){
// 将数据存入Vue实例
// 将数据存入 Vue 实例
vue.zhiweiTypesList = res.data.list;
}
});

Write Preview
Loading…
Cancel
Save