|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<!-- 设置页面字符编码为UTF-8，确保支持中文及特殊字符 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 配置视口，实现响应式布局，禁止用户手动缩放 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<!-- 页面标题 -->
|
|
|
<title>挂号添加</title>
|
|
|
<!-- 引入Bootstrap样式（地图插件依赖） -->
|
|
|
<link rel="stylesheet" href="../../css/bootstrap.min.css"/>
|
|
|
<!-- 引入layui框架基础样式 -->
|
|
|
<link rel="stylesheet" href="../../layui/css/layui.css">
|
|
|
<!-- 引入自定义全局样式 -->
|
|
|
<link rel="stylesheet" href="../../css/style.css"/>
|
|
|
<!-- 引入主题颜色样式 -->
|
|
|
<link rel="stylesheet" href="../../css/theme.css"/>
|
|
|
<!-- 引入公共样式文件 -->
|
|
|
<link rel="stylesheet" href="../../css/common.css"/>
|
|
|
|
|
|
<!-- 自定义页面样式 -->
|
|
|
<style>
|
|
|
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
|
|
|
html::after {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
content: '';
|
|
|
display: block;
|
|
|
background-attachment: fixed; /* 背景固定不滚动 */
|
|
|
background-size: cover; /* 背景图覆盖整个容器 */
|
|
|
background-position: center; /* 背景图居中 */
|
|
|
z-index: -1; /* 层级低于内容 */
|
|
|
}
|
|
|
/* 轮播图容器样式，溢出隐藏 */
|
|
|
#swiper {
|
|
|
overflow: hidden;
|
|
|
margin: 0 auto; /* 水平居中 */
|
|
|
}
|
|
|
/* 表单输入项通用样式 */
|
|
|
.data-add-container .add .layui-input {
|
|
|
padding: 0 12px;
|
|
|
height: 40px; /* 固定高度 */
|
|
|
border-radius: 4px; /* 圆角 */
|
|
|
border: 1px solid #e0e0e0; /* 浅灰边框 */
|
|
|
font-size: 15px; /* 字体大小 */
|
|
|
}
|
|
|
/* 表单行样式，弹性布局实现标签和输入框对齐 */
|
|
|
.data-add-container .layui-form-item {
|
|
|
display: flex;
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
margin-bottom: 10px; /* 底部边距 */
|
|
|
}
|
|
|
/* 表单标签样式，固定宽度并左对齐 */
|
|
|
.layui-form-label {
|
|
|
width: 110px; /* 固定宽度 */
|
|
|
text-align: left; /* 文本左对齐 */
|
|
|
color: #333; /* 深灰文字 */
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body style="background: #EEEEEE;">
|
|
|
<!-- Vue实例挂载点，包含整个页面内容 -->
|
|
|
<div id="app">
|
|
|
<!-- 轮播图区域 -->
|
|
|
<div class="layui-carousel" id="swiper"
|
|
|
:style='{
|
|
|
"width": "100%",
|
|
|
"boxShadow": "none",
|
|
|
"border": "none"
|
|
|
}'>
|
|
|
<div carousel-item id="swiper-item">
|
|
|
<!-- 轮播图图片循环渲染，默认包含一张示例图片 -->
|
|
|
<div v-for="(item, index) in swiperList" :key="index">
|
|
|
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 挂号表单容器 -->
|
|
|
<div class="data-add-container sub_borderColor"
|
|
|
:style='{
|
|
|
"padding": "20px",
|
|
|
"margin": "30px auto",
|
|
|
"backgroundColor": "#fff", /* 白色背景 */
|
|
|
"borderRadius": "10px", /* 圆角 */
|
|
|
"border": "1px solid #e0e0e0" /* 浅灰边框 */
|
|
|
}'>
|
|
|
<form class="layui-form layui-form-pane add" lay-filter="myForm">
|
|
|
<!-- 就诊识别码输入项 -->
|
|
|
<div class="layui-form-item main_borderColor">
|
|
|
<label class="layui-form-label">就诊识别码：</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input
|
|
|
class="layui-input main_borderColor"
|
|
|
:style='{
|
|
|
"backgroundColor": "#fff",
|
|
|
"borderColor": "#e0e0e0"
|
|
|
}'
|
|
|
v-model="detail.guahaoUuinNumber"
|
|
|
lay-verify="integer|required" /* 正整数和必填校验 */
|
|
|
type="text"
|
|
|
:readonly="ro.guahaoUuinNumber" /* 只读控制 */
|
|
|
name="guahaoUuinNumber"
|
|
|
id="guahaoUuinNumber"
|
|
|
autocomplete="off"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 挂号时间输入项（日期选择器） -->
|
|
|
<div class="layui-form-item main_borderColor">
|
|
|
<label class="layui-form-label">挂号时间：</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input
|
|
|
class="layui-input main_borderColor"
|
|
|
:style='{
|
|
|
"backgroundColor": "#fff",
|
|
|
"borderColor": "#e0e0e0"
|
|
|
}'
|
|
|
type="text"
|
|
|
:readonly="ro.guahaoTime"
|
|
|
name="guahaoTime"
|
|
|
id="guahaoTime"
|
|
|
autocomplete="off"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 时间状态下拉框（动态加载字典数据） -->
|
|
|
<div class="layui-form-item main_borderColor">
|
|
|
<label class="layui-form-label">时间状态：</label>
|
|
|
<div class="layui-input-block">
|
|
|
<select
|
|
|
name="guahaoTypes"
|
|
|
id="guahaoTypesList"
|
|
|
lay-filter="guahaoTypesList"
|
|
|
class="layui-select"
|
|
|
>
|
|
|
<option value="">请选择</option>
|
|
|
<!-- 动态渲染时间状态选项，数据来自guahaoTypesList -->
|
|
|
<option
|
|
|
v-for="(item, index) in guahaoTypesList"
|
|
|
:key="item.codeIndex"
|
|
|
:value="item.codeIndex"
|
|
|
>
|
|
|
{{ item.indexName }}
|
|
|
</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 提交按钮 -->
|
|
|
<div class="layui-form-item main_borderColor" style="text-align: right;">
|
|
|
<button
|
|
|
:style='{
|
|
|
"backgroundColor": "#4b5cc4", /* 主题蓝色 */
|
|
|
"color": "#fff",
|
|
|
"borderRadius": "8px",
|
|
|
"height": "44px"
|
|
|
}'
|
|
|
class="layui-btn btn-submit"
|
|
|
lay-submit
|
|
|
lay-filter="thisSubmit"
|
|
|
>
|
|
|
提交
|
|
|
</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 引入layui框架核心脚本 -->
|
|
|
<script src="../../layui/layui.js"></script>
|
|
|
<!-- 引入Vue.js框架 -->
|
|
|
<script src="../../js/vue.js"></script>
|
|
|
<!-- 引入Element组件库（备用，当前页面未直接使用） -->
|
|
|
<script src="../../xznstatic/js/element.min.js"></script>
|
|
|
<!-- 引入项目配置和工具库 -->
|
|
|
<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 src="../../js/jquery.js"></script>
|
|
|
<script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
|
|
|
<script src="../../js/bootstrap.min.js"></script>
|
|
|
<script src="../../js/bootstrap.AMapPositionPicker.js"></script>
|
|
|
|
|
|
<script>
|
|
|
var jquery = $; // 兼容jQuery引用
|
|
|
|
|
|
// 初始化Vue实例
|
|
|
var vue = new Vue({
|
|
|
el: '#app', // 绑定根元素
|
|
|
data: {
|
|
|
swiperList: [{ img: '../../img/banner.jpg' }], // 轮播图默认数据（可动态加载）
|
|
|
ro: { /* 字段只读控制对象 */
|
|
|
guahaoUuinNumber: false,
|
|
|
guahaoTime: false
|
|
|
},
|
|
|
detail: { /* 挂号详情数据对象 */
|
|
|
guahaoUuinNumber: new Date().getTime(), // 初始化就诊识别码为时间戳
|
|
|
guahaoTime: '', // 挂号时间
|
|
|
guahaoTypes: '' // 时间状态编码
|
|
|
},
|
|
|
// 下拉框选项数据（从字典表加载）
|
|
|
guahaoTypesList: []
|
|
|
},
|
|
|
updated() {
|
|
|
layui.form.render('select', 'myForm'); // 重新渲染下拉框组件
|
|
|
},
|
|
|
methods: {
|
|
|
jump(url) { jump(url); } // 页面跳转方法（外部定义）
|
|
|
}
|
|
|
});
|
|
|
|
|
|
layui.use(['layer', 'http', 'form', 'laydate'], function() {
|
|
|
var layer = layui.layer; // 弹出层组件
|
|
|
var http = layui.http; // HTTP请求工具
|
|
|
var form = layui.form; // 表单组件
|
|
|
var laydate = layui.laydate; // 日期选择器
|
|
|
|
|
|
// ------------------------
|
|
|
// 轮播图初始化（从配置接口加载数据）
|
|
|
// ------------------------
|
|
|
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
|
|
|
if (res.data.list.length > 0) {
|
|
|
vue.swiperList = res.data.list.map(item => ({ img: item.value }));
|
|
|
// 初始化layui轮播图
|
|
|
vue.$nextTick(() => {
|
|
|
layui.carousel.render({
|
|
|
elem: '#swiper',
|
|
|
width: '100%',
|
|
|
height: '450px',
|
|
|
autoplay: true, // 自动播放
|
|
|
interval: 3000 // 切换间隔3秒
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// ------------------------
|
|
|
// 下拉框数据加载（时间状态类型）
|
|
|
// ------------------------
|
|
|
function guahaoTypesSelect() {
|
|
|
http.request("dictionary/page?dicCode=guahao_types", "GET", {}, (res) => {
|
|
|
if (res.code === 0) {
|
|
|
vue.guahaoTypesList = res.data.list; // 更新下拉框选项
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
guahaoTypesSelect(); // 初始化加载时间状态数据
|
|
|
|
|
|
// ------------------------
|
|
|
// 日期选择器初始化（挂号时间）
|
|
|
// ------------------------
|
|
|
function dateTimePick() {
|
|
|
var myDate = new Date(); // 获取当前时间
|
|
|
laydate.render({
|
|
|
elem: '#guahaoTime', // 绑定输入框
|
|
|
type: 'date', // 日期选择模式
|
|
|
min: myDate.toLocaleString(), // 最小日期为当前时间
|
|
|
change: function(value) { // 选择后更新数据
|
|
|
vue.detail.guahaoTime = value;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
dateTimePick(); // 初始化日期选择器
|
|
|
|
|
|
// ------------------------
|
|
|
// 表单提交处理
|
|
|
// ------------------------
|
|
|
form.on('submit(thisSubmit)', function(data) {
|
|
|
var formData = data.field;
|
|
|
// 组装必填参数
|
|
|
formData.yonghuId = localStorage.getItem("userid"); // 当前用户ID
|
|
|
formData.yishengId = http.getParam('yishengId'); // 从URL获取医生ID
|
|
|
formData.guahaoTime = jquery("#guahaoTime").val(); // 格式化日期
|
|
|
|
|
|
// 发送挂号预约请求
|
|
|
http.requestJson('guahao/add', 'post', formData, function(res) {
|
|
|
if (res.code === 0) {
|
|
|
layer.msg('预约成功', { time: 2000, icon: 6 }, () => back()); // 成功提示并返回
|
|
|
} else {
|
|
|
layer.msg(res.msg, { time: 2000, icon: 5 }); // 错误提示
|
|
|
}
|
|
|
});
|
|
|
return false; // 阻止表单默认提交
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
