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

Merge pull request '4' (#9) from cqq into develop

Browse Source
develop
prxhap34i 3 months ago
parent 3ac0feab3b 220efc21b2
commit 6413bf9621
8 changed files with 1840 additions and 2122 deletions
Show Stats Download Patch File Download Diff File

548
target/classes/front/front/pages/guahao/add.html
Unescape View File

@ -1,400 +1,296 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置页面字符编码为UTF-8，确保支持中文及特殊字符 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 配置视口，实现响应式布局，禁止用户手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 页面标题 -->
<title>挂号添加</title> <title>挂号添加</title>
<!-- bootstrap样式，地图插件使用 --> <!-- 引入Bootstrap样式（地图插件依赖） -->
<link rel="stylesheet" href="../../css/bootstrap.min.css"/> <link rel="stylesheet" href="../../css/bootstrap.min.css"/>
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 --> <!-- 引入自定义全局样式 -->
<link rel="stylesheet" href="../../css/style.css"/> <link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） --> <!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/> <link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css --> <!-- 引入公共样式文件 -->
<link rel="stylesheet" href="../../css/common.css"/> <link rel="stylesheet" href="../../css/common.css"/>
</head>
<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;
}
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border-radius: 6px;
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
}
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border-radius: 6px;
}
button, button:focus {
outline: none;
}
.data-add-container .add .layui-select-title .layui-unselect {
padding: 0 12px;
height: 40px;
font-size: 15px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
text-align: center;
}
.data-add-container .add .layui-form-item {
display: flex;
align-items: center;
justify-content: center;
}
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
margin: 0;
position: inherit;
background: transparent;
border: 0;
}
.data-add-container .add .layui-input-block { <!-- 自定义页面样式 -->
margin: 0; <style>
flex: 1; /* 页面全屏背景伪元素，固定定位并居中显示背景图 */
} html::after {
position: fixed;
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline { top: 0;
margin: 0; right: 0;
flex: 1; left: 0;
display: flex; bottom: 0;
} content: '';
</style> display: block;
<body style="background: #EEEEEE; "> 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 id="app">
<!-- 轮播图区域 -->
<div class="layui-carousel" id="swiper" <div class="layui-carousel" id="swiper"
:style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'> :style='{
"width": "100%",
"boxShadow": "none",
"border": "none"
}'>
<div carousel-item id="swiper-item"> <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 v-for="(item, index) in swiperList" :key="index">
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
</div> </div>
</div> </div>
</div> </div>
<!-- 轮播图 -->
<div class="data-add-container sub_borderColor"
:style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
<!-- 挂号表单容器 -->
<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"> <form class="layui-form layui-form-pane add" lay-filter="myForm">
<!-- 当前表的 --> <!-- 就诊识别码输入项 -->
<div class="layui-form-item main_borderColor" <div class="layui-form-item main_borderColor">
:style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <label class="layui-form-label">就诊识别码：</label>
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}'
class="layui-form-label">
就诊识别码：
</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input class="layui-input main_borderColor" <input
:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' class="layui-input main_borderColor"
v-model="detail.guahaoUuinNumber" lay-verify="integer|required" type="text" :style='{
:readonly="ro.guahaoUuinNumber" name="guahaoUuinNumber" id="guahaoUuinNumber" "backgroundColor": "#fff",
autocomplete="off"> "borderColor": "#e0e0e0"
}'
v-model="detail.guahaoUuinNumber"
lay-verify="integer|required" /* 正整数和必填校验 */
type="text"
:readonly="ro.guahaoUuinNumber" /* 只读控制 */
name="guahaoUuinNumber"
id="guahaoUuinNumber"
autocomplete="off"
/>
</div> </div>
</div> </div>
<div class="layui-form-item main_borderColor"
:style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 挂号时间输入项（日期选择器） -->
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' <div class="layui-form-item main_borderColor">
class="layui-form-label"> <label class="layui-form-label">挂号时间：</label>
挂号时间：
</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input class="layui-input main_borderColor" <input
:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' class="layui-input main_borderColor"
type="text" :readonly="ro.guahaoTime" name="guahaoTime" id="guahaoTime" autocomplete="off"> :style='{
"backgroundColor": "#fff",
"borderColor": "#e0e0e0"
}'
type="text"
:readonly="ro.guahaoTime"
name="guahaoTime"
id="guahaoTime"
autocomplete="off"
/>
</div> </div>
</div> </div>
<div class="layui-form-item main_borderColor"
:style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 时间状态下拉框（动态加载字典数据） -->
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' <div class="layui-form-item main_borderColor">
class="layui-form-label"> <label class="layui-form-label">时间状态：</label>
时间状态：
</label>
<div class="layui-input-block"> <div class="layui-input-block">
<select name="guahaoTypes" id="guahaoTypesList" lay-filter="guahaoTypesList"> <select
name="guahaoTypes"
id="guahaoTypesList"
lay-filter="guahaoTypesList"
class="layui-select"
>
<option value="">请选择</option> <option value="">请选择</option>
<option v-for="(item,index) in guahaoTypesList" v-bind:key="index" :value="item.codeIndex" <!-- 动态渲染时间状态选项，数据来自guahaoTypesList -->
:key="item.codeIndex">{{ item.indexName }} <option
v-for="(item, index) in guahaoTypesList"
:key="item.codeIndex"
:value="item.codeIndex"
>
{{ item.indexName }}
</option> </option>
</select> </select>
</div> </div>
</div> </div>
<div class="layui-form-item main_borderColor"
:style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<div class="layui-input-block" style="text-align: right;">
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交
</button>
</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> </form>
</div> </div>
</div> </div>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script> <script src="../../js/vue.js"></script>
<!-- 引入element组件库 --> <!-- 引入Element组件库（备用，当前页面未直接使用） -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 --> <!-- 引入项目配置和工具库 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script> <script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script> <script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script> <script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script> <script src="../../js/validate.js"></script>
<!-- 地图 --> <!-- 地图相关脚本（当前页面未实际使用，仅引入备用） -->
<script type="text/javascript" src="../../js/jquery.js"></script> <script src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script> <script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script> <script src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script> <script>
var jquery = $; var jquery = $; // 兼容jQuery引用
// 初始化Vue实例
var vue = new Vue({ var vue = new Vue({
el: '#app', el: '#app', // 绑定根元素
data: { data: {
// 轮播图 swiperList: [{ img: '../../img/banner.jpg' }], // 轮播图默认数据（可动态加载）
swiperList: [{ ro: { /* 字段只读控制对象 */
img: '../../img/banner.jpg'
}],
dataList: [],
ro: {
yishengId: false,
yonghuId: false,
guahaoUuinNumber: false, guahaoUuinNumber: false,
guahaoTime: false, guahaoTime: false
guahaoTypes: false,
guahaoStatusTypes: false,
guahaoYesnoTypes: false,
guahaoYesnoText: false,
createTime: false,
}, },
detail: { detail: { /* 挂号详情数据对象 */
yishengId: '', guahaoUuinNumber: new Date().getTime(), // 初始化就诊识别码为时间戳
yonghuId: '', guahaoTime: '', // 挂号时间
guahaoUuinNumber: new Date().getTime(), guahaoTypes: '' // 时间状态编码
guahaoTime: '',
guahaoTypes: '',//数字
guahaoValue: '',//数字对应的值
guahaoStatusTypes: '',//数字
guahaoStatusValue: '',//数字对应的值
guahaoYesnoTypes: '',//数字
guahaoYesnoValue: '',//数字对应的值
guahaoYesnoText: '',
createTime: '',
}, },
// 级联表的 // 下拉框选项数据（从字典表加载）
guahaoTypesList: []
// 下拉框
guahaoTypesList: [],
guahaoStatusTypesList: [],
guahaoYesnoTypesList: [],
centerMenu: centerMenu
}, },
updated: function () { updated() {
layui.form.render('select', 'myForm'); layui.form.render('select', 'myForm'); // 重新渲染下拉框组件
}, },
computed: {},
methods: { methods: {
jump(url) { jump(url) { jump(url); } // 页面跳转方法（外部定义）
jump(url)
}
} }
}) });
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () { layui.use(['layer', 'http', 'form', 'laydate'], function() {
var layer = layui.layer; var layer = layui.layer; // 弹出层组件
var element = layui.element; var http = layui.http; // HTTP请求工具
var carousel = layui.carousel; var form = layui.form; // 表单组件
var http = layui.http; var laydate = layui.laydate; // 日期选择器
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var laydate = layui.laydate;
var tinymce = layui.tinymce
// 获取轮播图 数据 // ------------------------
http.request('config/list', 'get', { // 轮播图初始化（从配置接口加载数据）
page: 1, // ------------------------
limit: 5 http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
}, function (res) {
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
let swiperList = []; vue.swiperList = res.data.list.map(item => ({ img: item.value }));
res.data.list.forEach(element => { // 初始化layui轮播图
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => { vue.$nextTick(() => {
carousel.render({ layui.carousel.render({
elem: '#swiper', elem: '#swiper',
width: '100%', width: '100%',
height: '450px', height: '450px',
arrow: 'hover', autoplay: true, // 自动播放
anim: 'default', interval: 3000 // 切换间隔3秒
autoplay: 'true',
interval: '3000',
indicator: 'inside'
}); });
}); });
} }
}); });
// 下拉框 // ------------------------
// 时间类型的查询和初始化 // 下拉框数据加载（时间状态类型）
guahaoTypesSelect(); // ------------------------
// 挂号状态的查询和初始化 function guahaoTypesSelect() {
guahaoStatusTypesSelect(); http.request("dictionary/page?dicCode=guahao_types", "GET", {}, (res) => {
// 挂号审核的查询和初始化 if (res.code === 0) {
guahaoYesnoTypesSelect(); vue.guahaoTypesList = res.data.list; // 更新下拉框选项
}
// 上传文件
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
, '必须是正整数'
]
// 小数效验规则
, double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
, '最大整数位为6为,小数最大两位'
]
});
// session独取
let table = localStorage.getItem("userTable");
http.request(table + "/session", 'get', {}, function (data) {
// 表单赋值
//form.val("myForm", data.data);
// data = data.data;
for (var key in data) {
vue.detail[table + "Id"] = data.id
}
});
// 提交
form.on('submit(thisSubmit)', function (data) {
data = data.field;
data["yonghuId"] = localStorage.getItem("userid");
data["guahaoTime"] = jquery("#guahaoTime").val()
data["guahaoUuinNumber"] = jquery("#guahaoUuinNumber").val()
data["yishengId"] = http.getParam('yishengId');
// 提交数据
http.requestJson('guahao' + '/add', 'post', data, function (res) {
layer.msg('预约成功', {
time: 2000,
icon: 6
}, function () {
back();
});
}); });
return false }
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; // 阻止表单默认提交
}); });
}); });
0
// 日期框初始化
function dateTimePick() {
var myDate = new Date(); //获取当前时间
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
*/
// 挂号时间的开始时间和结束时间的效验及格式
var guahaoTime = layui.laydate.render({
elem: '#guahaoTime'
, type: 'date'
, min: myDate.toLocaleString()
, change: function (value, date, endDate) {
vue.detail.guahaoTime = value;
}
});
}
// 时间类型的查询
function guahaoTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types", "GET", {}, (res) => {
if (res.code == 0) {
vue.guahaoTypesList = res.data.list;
}
});
}
// 挂号状态的查询
function guahaoStatusTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types", "GET", {}, (res) => {
if (res.code == 0) {
vue.guahaoStatusTypesList = res.data.list;
}
});
}
// 挂号审核的查询
function guahaoYesnoTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types", "GET", {}, (res) => {
if (res.code == 0) {
vue.guahaoYesnoTypesList = res.data.list;
}
});
}
</script> </script>
</body> </body>
</html> </html>

161
target/classes/front/front/pages/guahao/detail.html
Unescape View File

@ -1,93 +1,114 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置字符编码为 UTF-8，确保支持中文等多语言字符 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 设置视口，实现页面在不同设备上的响应式布局，禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 页面标题，显示在浏览器标签栏 -->
<title>挂号详情页</title> <title>挂号详情页</title>
<!-- 引入 layui 框架的 CSS 文件，用于构建页面的基本样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 --> <!-- 引入自定义的样式文件，可能包含项目特有的样式 -->
<link rel="stylesheet" href="../../css/style.css"/> <link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） --> <!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关样式 -->
<link rel="stylesheet" href="../../css/theme.css"/> <link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css --> <!-- 引入通用的 CSS 文件，包含一些通用的样式设置 -->
<link rel="stylesheet" href="../../css/common.css"/> <link rel="stylesheet" href="../../css/common.css"/>
<!-- 引入 Bootstrap 的 CSS 文件，用于一些布局和组件样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css"> <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head> </head>
<style> <style>
/* 这里可以添加页面的自定义样式，当前为空 */
</style> </style>
<body> <body>
<!-- Vue 实例的挂载点，页面的动态内容将渲染到这里 -->
<div id="app">
</div>
<div id="app"> <!-- 引入 layui 框架的 JavaScript 文件，提供各种功能组件 -->
</div> <script src="../../layui/layui.js"></script>
<!-- 引入 Vue.js 框架，用于构建响应式的前端应用 -->
<script src="../../js/vue.js"></script>
<!-- 引入 Element 组件库的 JavaScript 文件，提供更多的 UI 组件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入 Element 组件库的样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 引入组件配置信息的 JavaScript 文件，可能包含一些全局配置 -->
<script src="../../js/config.js"></script>
<!-- 引入扩展插件配置信息的 JavaScript 文件，可能包含一些扩展功能的配置 -->
<script src="../../modules/config.js"></script>
<!-- 引入工具方法的 JavaScript 文件，可能包含一些常用的工具函数 -->
<script src="../../js/utils.js"></script>
<script>
// 为 Vue 原型添加一个过滤器方法 myFilters
// 该方法用于将字符串中的换行符 \n 替换为 HTML 的换行标签 <br>
// 如果传入的字符串为 null，则返回空字符串
Vue.prototype.myFilters = function (msg) {
if (msg != null) {
return msg.replace(/\n/g, "<br>");
} else {
return "";
}
};
<script src="../../layui/layui.js"></script> // 创建一个 Vue 实例
<script src="../../js/vue.js"></script> var vue = new Vue({
<!-- 引入element组件库 --> // 指定 Vue 实例的挂载点，即页面中 id 为 app 的元素
<script src="../../xznstatic/js/element.min.js"></script> el: '#app',
<!-- 引入element样式 --> // 定义 Vue 实例的数据对象
<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> data: {
<!-- 组件配置信息 --> // 轮播图数据数组，初始为空
<script src="../../js/config.js"></script> swiperList: [],
<!-- 扩展插件配置信息 --> // 数据详情对象，初始包含一个 id 属性，值为 0
<script src="../../modules/config.js"></script> detail: {
<!-- 工具方法 --> id: 0
<script src="../../js/utils.js"></script>
<script>
Vue.prototype.myFilters= function (msg) {
if(msg != null){
return msg.replace(/\n/g, "<br>");
}else{
return "";
}
};
var vue = new Vue({
el: '#app',
data: {
// 轮播图
swiperList: [],
// 数据详情
detail: {
id: 0
},
// 商品标题
title: '',
totalScore: 0,//评分
storeupFlag: 0,//收藏 [0为收藏 1已收藏]
//系统推荐
guahaoRecommendList: [],
// 当前详情页表
detailTable: 'guahao',
}, },
methods: { // 商品标题，初始为空字符串
jump(url) { title: '',
jump(url) // 评分，初始值为 0
}, totalScore: 0,
isAuth(tablename, button) { // 收藏标志，0 表示未收藏，1 表示已收藏，初始值为 0
return isFrontAuth(tablename, button) storeupFlag: 0,
}, // 系统推荐的挂号列表，初始为空数组
guahaoRecommendList: [],
} // 当前详情页对应的表名，这里是挂号表
}); detailTable: 'guahao',
},
// 定义 Vue 实例的方法
methods: {
// 跳转页面的方法，调用外部定义的 jump 函数
jump(url) {
jump(url)
},
// 检查是否有权限的方法，调用外部定义的 isFrontAuth 函数
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
}
}
});
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () { // 使用 layui 的 use 方法加载所需的模块
var layer = layui.layer; layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
var util = layui.util; // 从 layui 中获取各个模块的实例
var element = layui.element; var layer = layui.layer; // 弹出层模块
var form = layui.form; var util = layui.util; // 工具模块
var carousel = layui.carousel; var element = layui.element; // 元素操作模块
var http = layui.http; var form = layui.form; // 表单模块
var jquery = layui.jquery; var carousel = layui.carousel; // 轮播图模块
var laypage = layui.laypage; var http = layui.http; // HTTP 请求模块
var jquery = layui.jquery; // jQuery 模块
var laypage = layui.laypage; // 分页模块
var limit = 10; // 设置每页显示的数据条数
var limit = 10;
// 数据ID // 从 URL 参数中获取数据的 ID
var id = http.getParam('id'); var id = http.getParam('id');
vue.detail.id = id; // 将获取到的 ID 赋值给 Vue 实例中 detail 对象的 id 属性
}); vue.detail.id = id;
</script> });
</script>
</body> </body>
</html> </html>

561
target/classes/front/front/pages/guahao/list.html
Unescape View File

@ -1,23 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head lang="en"> <head lang="en">
<!-- 设置页面字符编码为UTF-8，支持中文及特殊字符 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 页面标题 -->
<title>挂号</title> <title>挂号</title>
<!-- 搜索引擎优化相关meta标签 -->
<meta name="keywords" content=""/> <meta name="keywords" content=""/>
<meta name="description" content=""/> <meta name="description" content=""/>
<!-- 指定浏览器渲染内核为webkit -->
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<!-- 兼容IE浏览器，使用最高版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 响应式布局配置，禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义公共样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/> <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<!-- 引入自定义主题样式 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/> <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<!-- 引入jQuery库（兼容旧版滑动插件） -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入滑动插件 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script> <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 引入Bootstrap框架样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" /> <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/> <link rel="stylesheet" href="../../css/theme.css"/>
</head> </head>
<style> <style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after { html::after {
position: fixed; position: fixed;
top: 0; top: 0;
@ -26,498 +40,237 @@
bottom: 0; bottom: 0;
content: ''; content: '';
display: block; display: block;
background-attachment: fixed; background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; background-position: center; /* 背景图居中 */
} }
/*轮播图相关 start*/ /* 轮播图容器样式，溢出隐藏实现滑动效果 */
#swiper { #swiper {
overflow: hidden; overflow: hidden;
} }
/* 轮播图未激活指示器样式（非当前页） */
#swiper .layui-carousel-ind li { #swiper .layui-carousel-ind li {
width: 20px; width: 20px;
height: 10px; height: 10px;
border-width: 0; border: 0 solid rgba(0, 0, 0, .3);
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border-radius: 6px; border-radius: 6px;
background-color: #f7f7f7; background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0, .8); box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影 */
} }
/* 轮播图激活指示器样式（当前页，宽度增加） */
#swiper .layui-carousel-ind li.layui-this { #swiper .layui-carousel-ind li.layui-this {
width: 30px; width: 30px; /* 当前页指示器更宽 */
height: 10px; height: 10px;
border-width: 0; border: 0 solid rgba(0, 0, 0, .3);
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border-radius: 6px; border-radius: 6px;
} }
/*轮播图相关 end*/
/*列表*/ /* 推荐内容区域样式，弹性布局居中 */
.recommend { .recommend {
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
justify-content: center; justify-content: center; /* 内容水平居中 */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
/* 列表项主体样式，点击交互效果 */
.recommend .box {
width: 1002px;
margin: 0 auto;
}
.recommend .box .title {
padding: 10px 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.recommend .box .title span {
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
.recommend .box .filter {
padding: 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
flex-wrap: wrap;
}
.recommend .box .filter .item-list {
display: flex;
align-items: center;
}
.recommend .box .filter .item-list .lable {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
.recommend .box .filter .item-list input {
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
.recommend .box .filter button {
display: flex;
padding: 0 10px;
box-sizing: border-box;
align-items: center;
justify-content: center;
outline: none;
}
.recommend .box .filter button i {
margin-right: 4px;
}
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item {
flex: 0 0 25%;
padding: 0 5px;
box-sizing: border-box;
}
.recommend .box .list .list-item .list-item-body { .recommend .box .list .list-item .list-item-body {
cursor: pointer; cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3); border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
.recommend .box .list .list-item-body img {
width: 100%;
height: 100px;
display: block;
margin: 0 auto;
}
.recommend .box .list .list-item-body .info {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item-body .info .price {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
.recommend .box .list .list-item5 {
flex: 0 0 25%;
}
.recommend .box .news {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
.recommend .box .news .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
padding: 10px;
box-sizing: border-box;
display: flex;
}
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
display: block;
margin: 0 auto;
}
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
.recommend .box .news .list-item1 {
flex: 0 0 100%;
}
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
.index-pv1 .animation-box:hover {
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
.layui-laypage .layui-laypage-count {
padding: 0 10px;
}
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
</style> </style>
<body> <body>
<!-- Vue实例挂载点，包含整个页面动态内容 -->
<div id="app"> <div id="app">
<!-- 轮播图区域 -->
<div class="banner"> <div class="banner">
<div class="layui-carousel" id="swiper" <div class="layui-carousel" id="swiper"
:style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'> :style='{
"width": "100%",
"boxShadow": "none",
"border": "none"
}'>
<div carousel-item> <div carousel-item>
<div v-for="(item,index) in swiperList" :key="index"> <!-- 轮播图图片动态渲染，数据来自Vue的swiperList -->
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/> <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>
</div> </div>
</div> </div>
<div class="recommend index-pv1" <!-- 筛选条件区域（时间类型筛选） -->
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'> <div class="recommend index-pv1">
<div class="box" style='width:80%'> <div class="box" style='width:80%'>
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'> <!-- 时间类型筛选按钮，动态生成 -->
<div style="display: inline-block;text-align: center;cursor: pointer;" <div>
class="thisTableType-search main_backgroundColor" index="" <!-- 全部筛选按钮（默认选中状态） -->
:style='searchForm.guahaoTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'> <div
class="thisTableType-search main_backgroundColor"
:style="searchForm.guahaoTypes === '' ? 激活样式 : 非激活样式"
@click="searchForm.guahaoTypes = ''; pageList()"
>
时间类型全部 时间类型全部
</div> </div>
<div v-for="(item,index) in guahaoTypesList" :key="item.codeIndex" <!-- 动态循环生成时间类型按钮，数据来自guahaoTypesList字典 -->
class="thisTableType-search main_backgroundColor" :index="item.codeIndex" <div
:style='searchForm.guahaoTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}' v-for="item in guahaoTypesList"
style="display: inline-block;text-align: center;cursor: pointer;"> :key="item.codeIndex"
{{item.indexName}} class="thisTableType-search main_backgroundColor"
:index="item.codeIndex"
:style="searchForm.guahaoTypes === item.codeIndex ? 激活样式 : 非激活样式"
@click="searchForm.guahaoTypes = item.codeIndex; pageList()"
>
{{ item.indexName }} <!-- 显示类型名称 -->
</div> </div>
</div> </div>
<div class="title sub_backgroundColor sub_borderColor" <!-- 页面标题与面包屑导航 -->
:style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'> <div class="title sub_backgroundColor sub_borderColor">
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'> <span style="font-size: 18px; color: #333;">挂号</span>
挂号 <span>您现在的位置：挂号</span>
</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
您现在的位置：挂号
</span>
</div> </div>
<form class="layui-form filter main_backgroundColor" <!-- 搜索表单（当前为空，可扩展输入框和搜索按钮） -->
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'> <form class="layui-form filter main_backgroundColor">
<!-- 可扩展的搜索输入框和筛选条件 -->
</form>
</form>
</div> </div>
</div> </div>
<div class="pager" id="pager" :style="{textAlign:'center'}"></div>
<!-- 分页组件容器 -->
<div class="pager" id="pager" :style="{ textAlign: 'center' }"></div>
</div> </div>
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <!-- 引入Bootstrap框架脚本 -->
<script src="../../xznstatic/js/bootstrap.min.js"></script>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script> <script src="../../js/vue.js"></script>
<!-- 引入element组件库 --> <!-- 引入Element组件库（备用） -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 --> <!-- 引入项目配置和工具库 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<script src="../../js/config.js"></script> <script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script> <script src="../../modules/config.js"></script>
<script src="../../js/utils.js"></script> <script src="../../js/utils.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// 初始化Vue实例
var vue = new Vue({ var vue = new Vue({
el: '#app', el: '#app', // 绑定根元素
data: { data: {
swiperList: [], swiperList: [], // 轮播图数据
guahaoTypesList: [], guahaoTypesList: [], // 时间类型字典数据
guahaoStatusTypesList: [], searchForm: { // 搜索条件对象
guahaoYesnoTypesList: [], page: 1, // 当前页码
limit: 8, // 每页显示数量
//查询条件 guahaoTypes: "" // 时间类型筛选条件（字典编码）
searchForm: {
page: 1
,limit: 8
,guahaoTypes: ""
}, },
dataList: [] // 挂号列表数据
dataList: [],
},
filters: {
subString: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
val+='...';
}
return val;
}
return '';
}
},
computed: {
}, },
methods: { methods: {
// 权限校验方法（调用外部工具函数）
isAuth(tablename, button) { isAuth(tablename, button) {
return isFrontAuth(tablename, button); return isFrontAuth(tablename, button);
} },
,jump(url) { // 页面跳转方法
jump(url); jump(url) {
} window.location.href = url;
,jumpCheck(url,check1,check2) { },
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除] // 带业务逻辑的跳转方法（检查删除/下架状态）
layui.layer.msg("已经被删除", { jumpCheck(url, check1, check2) {
time: 2000, if (check1 === 2 || check2 === 2) {
icon: 2 layer.msg("数据状态异常", { time: 2000, icon: 2 });
}); return;
return false;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
} }
this.jump(url); this.jump(url);
} }
} }
}); });
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() { layui.use(['layer', 'http', 'carousel', 'laypage', 'jquery'], function() {
var layer = layui.layer; var layer = layui.layer; // 弹出层
var element = layui.element; var http = layui.http; // HTTP请求
var carousel = layui.carousel; var carousel = layui.carousel; // 轮播图
var laypage = layui.laypage; var laypage = layui.laypage; // 分页
var http = layui.http; var jquery = layui.jquery; // jQuery
var laydate = layui.laydate;
var tinymce = layui.tinymce; // ------------------------
window.jQuery = window.$ = jquery = layui.jquery; // 轮播图数据加载与初始化
// ------------------------
// var id = http.getParam('id'); http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
let swiperList = []; vue.swiperList = res.data.list.map(item => ({ img: item.value }));
res.data.list.forEach(element => { // 初始化layui轮播图组件
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => { vue.$nextTick(() => {
carousel.render({ carousel.render({
elem: '#swiper', elem: '#swiper',
width: '100%', width: '100%',
height: '450px', height: '450px',
arrow: 'hover', autoplay: true, // 自动播放
anim: 'default', interval: 3000 // 切换间隔3秒
autoplay: 'true',
interval: '3000',
indicator: 'inside'
}); });
}); });
} }
}); });
//时间类型的动态搜素 // ------------------------
$(document).on("click", ".thisTableType-search", function (e) { // 时间类型字典数据加载（用于筛选按钮）
vue.searchForm.guahaoTypes = $(this).attr('index'); // ------------------------
pageList(); function guahaoTypesSelect() {
}); http.request("dictionary/page?dicCode=guahao_types", 'get', {}, function(res) {
if (res.code === 0) {
vue.guahaoTypesList = res.data.list; // 更新筛选按钮数据
//当前表的 时间类型 字段 字典表查询 }
guahaoTypesSelect();
//当前表的 时间类型 字段 字典表查询方法
function guahaoTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types", 'get', {}, function (res) {
if(res.code == 0){
vue.guahaoTypesList = res.data.list;
}
});
}
//当前表的 挂号状态 字段 字典表查询方法
function guahaoStatusTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types", 'get', {}, function (res) {
if(res.code == 0){
vue.guahaoStatusTypesList = res.data.list;
}
});
}
//当前表的 挂号审核 字段 字典表查询方法
function guahaoYesnoTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types", 'get', {}, function (res) {
if(res.code == 0){
vue.guahaoYesnoTypesList = res.data.list;
}
});
}
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function (e) {
pageList();
}); });
}
function pageList() { guahaoTypesSelect(); // 初始化加载
// 获取列表数据
http.request('guahao/list', 'get', vue.searchForm, function (res) { // ------------------------
vue.dataList = res.data.list; // 分页列表加载
// 分页 // ------------------------
laypage.render({ function pageList() {
elem: 'pager', http.request('guahao/list', 'get', vue.searchForm, function(res) {
count: res.data.total, vue.dataList = res.data.list; // 更新列表数据
limit: vue.searchForm.limit, // 初始化分页组件
groups: 3, laypage.render({
layout: ["prev", "page", "next"], elem: 'pager', // 分页容器ID
jump: function (obj, first) { count: res.data.total, // 总记录数
vue.searchForm.page = obj.curr;//翻页 limit: vue.searchForm.limit, // 每页数量
//首次不执行 groups: 3, // 显示页码数量
if (!first) { layout: ["prev", "page", "next"], // 分页按钮布局
http.request('guahao/list', 'get', vue.searchForm, function (res1) { jump: function(obj, first) {
vue.dataList = res1.data.list; if (!first) { // 非首次加载（用户点击分页）
}) vue.searchForm.page = obj.curr; // 更新页码
} http.request('guahao/list', 'get', vue.searchForm, function(res1) {
vue.dataList = res1.data.list; // 重新加载数据
});
} }
}); }
}); });
} });
}
pageList(); // 初始化加载列表
// ------------------------
// 筛选按钮点击事件处理
// ------------------------
$(document).on("click", ".thisTableType-search", function() {
vue.searchForm.guahaoTypes = $(this).attr('index'); // 获取筛选条件
vue.searchForm.page = 1; // 重置为第一页
pageList(); // 重新加载列表
});
}); });
// 滑动插件初始化（兼容旧版滑动效果，当前页面未实际使用）
window.xznSlide = function () { window.xznSlide = function () {
jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000}); jQuery(".banner").slide({ mainCell: ".bd ul", autoPlay: true, interTime: 5000 });
jQuery("#ifocus").slide({
titCell: "#ifocus_btn li",
mainCell: "#ifocus_piclist ul",
effect: "leftLoop",
delayTime: 200,
autoPlay: true,
triggerTime: 0
});
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
jQuery(".product_list").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5,
trigger: "click",
interTime: 4000
});
}; };
</script> </script>
</body> </body>
</html> </html>

703
target/classes/front/front/pages/yonghu/add.html
Unescape View File

@ -1,20 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置字符编码为UTF - 8 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 设置视口，以适应不同设备屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面标题为用户添加 -->
<title>用户添加</title> <title>用户添加</title>
<!-- bootstrap样式，地图插件使用 --> <!-- 引入bootstrap样式文件，用于地图插件等，提供基础布局和样式 -->
<link rel="stylesheet" href="../../css/bootstrap.min.css" /> <link rel="stylesheet" href="../../css/bootstrap.min.css" />
<!-- 引入layui的样式文件，提供丰富组件和样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 --> <!-- 引入自定义样式文件，设置页面整体样式风格 -->
<link rel="stylesheet" href="../../css/style.css" /> <link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） --> <!-- 引入主题样式文件，定义页面主题颜色等样式 -->
<link rel="stylesheet" href="../../css/theme.css" /> <link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css --> <!-- 引入通用css文件，包含常用样式规则 -->
<link rel="stylesheet" href="../../css/common.css" /> <link rel="stylesheet" href="../../css/common.css" />
</head> </head>
<!-- 自定义样式部分，设置页面背景和组件外观样式 -->
<style> <style>
/* 设置页面背景的伪元素样式，覆盖整个页面，作为背景图，固定位置且居中显示 */
html::after { html::after {
position: fixed; position: fixed;
top: 0; top: 0;
@ -28,33 +35,42 @@
background-position: center; background-position: center;
z-index: -1; z-index: -1;
} }
/* 轮播图容器样式，设置溢出隐藏，水平居中 */
#swiper { #swiper {
overflow: hidden; overflow: hidden;
margin: 0 auto; margin: 0 auto;
} }
/* 轮播图指示器普通样式，设置大小、边框、背景颜色和阴影 */
#swiper .layui-carousel-ind li { #swiper .layui-carousel-ind li {
width: 20px; width: 20px;
height: 10px; height: 10px;
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-color: rgba(0,0,0,.3); border-color: rgba(0, 0, 0, .3);
border-radius: 6px; border-radius: 6px;
background-color: #f7f7f7; background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255,0,0,.8); box-shadow: 0 0 6px rgba(255, 0, 0, .8);
} }
/* 轮播图指示器当前选中项样式，与普通样式区别在于宽度不同 */
#swiper .layui-carousel-ind li.layui-this { #swiper .layui-carousel-ind li.layui-this {
width: 30px; width: 30px;
height: 10px; height: 10px;
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-color: rgba(0,0,0,.3); border-color: rgba(0, 0, 0, .3);
border-radius: 6px; border-radius: 6px;
} }
button, button:focus { /* 按钮样式，去除默认聚焦轮廓 */
button,
button:focus {
outline: none; outline: none;
} }
/* 数据添加容器内，layui - select组件标题样式，设置内边距、高度、字体大小、边框等 */
.data-add-container .add .layui-select-title .layui-unselect { .data-add-container .add .layui-select-title .layui-unselect {
padding: 0 12px; padding: 0 12px;
height: 40px; height: 40px;
@ -64,369 +80,436 @@
border-style: solid; border-style: solid;
text-align: center; text-align: center;
} }
/* 数据添加容器内，layui表单项样式，设置为弹性布局，使内容垂直居中、水平居中 */
.data-add-container .add .layui-form-item { .data-add-container .add .layui-form-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* 数据添加容器内，layui表单面板中特定表单项的标签样式，去除默认外边距和边框，背景透明 */
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label { .data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
margin: 0; margin: 0;
position: inherit; position: inherit;
background: transparent; background: transparent;
border: 0; border: 0;
} }
/* 数据添加容器内，layui表单输入块样式，设置为弹性布局，占据剩余空间 */
.data-add-container .add .layui-input-block { .data-add-container .add .layui-input-block {
margin: 0; margin: 0;
flex: 1; flex: 1;
} }
/* 数据添加容器内，layui表单面板中特定表单项的内联输入样式，设置为弹性布局，占据剩余空间 */
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline { .data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
margin: 0; margin: 0;
flex: 1; flex: 1;
display: flex; display: flex;
} }
</style> </style>
<body style="background: #EEEEEE; ">
<div id="app">
<div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'> <body style="background: #EEEEEE; ">
<div carousel-item id="swiper-item"> <!-- Vue根容器，包含所有Vue相关元素和逻辑 -->
<div v-for="(item,index) in swiperList" :key="index"> <div id="app">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" /> <!-- 轮播图容器，使用layui的carousel组件，通过Vue动态样式绑定设置外观属性 -->
</div> <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
<!-- 轮播图内容容器，定义轮播项结构 -->
<div carousel-item id="swiper-item">
<!-- 使用Vue的v - for指令循环渲染轮播图图片，根据swiperList数组数据生成图片元素 -->
<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>
<!-- 轮播图 --> </div>
<!-- 数据添加容器，包含用户信息输入表单，通过Vue动态样式绑定设置内边距、外边距、背景颜色等属性 -->
<div class="data-add-container sub_borderColor" :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'> <div class="data-add-container sub_borderColor" :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
<!-- layui表单，收集用户信息，设置表单过滤器myForm，用于表单验证等操作 -->
<form class="layui-form layui-form-pane add" lay-filter="myForm"> <form class="layui-form layui-form-pane add" lay-filter="myForm">
0 <!-- 用户账户输入项表单项，通过Vue动态样式绑定设置外观属性 -->
<!-- 当前表的 --> <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 表单标签，显示“账户：”文本，通过Vue动态样式绑定设置宽度、颜色等属性 -->
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
账户： 账户：
</label> </label>
<div class="layui-input-block"> <!-- 表单输入块，包含输入框，使用Vue双向绑定v - model将输入值与detail.username绑定，可根据ro.username设置只读属性 -->
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' <div class="layui-input-block">
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
v-model="detail.username" type="text" :readonly="ro.username" name="username" id="username" autocomplete="off"> v-model="detail.username" type="text" :readonly="ro.username" name="username" id="username" autocomplete="off">
</div>
</div> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 用户姓名输入项表单项，结构和功能与账户输入项类似 -->
用户姓名： <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<div class="layui-input-block"> 用户姓名：
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' </label>
<div class="layui-input-block">
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
v-model="detail.yonghuName" type="text" :readonly="ro.yonghuName" name="yonghuName" id="yonghuName" autocomplete="off"> v-model="detail.yonghuName" type="text" :readonly="ro.yonghuName" name="yonghuName" id="yonghuName" autocomplete="off">
</div>
</div> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 用户头像上传和显示部分表单项 -->
头像： <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<div class="layui-input-block"> 头像：
<div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;"> </label>
<img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto"> <div class="layui-input-block">
<input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" /> <!-- 如果detail.yonghuPhoto有值，显示头像图片和隐藏输入框，用于存储头像文件路径 -->
</div> <div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;">
<button v-if="!ro.yonghuPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yonghuPhotoUpload"> <img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto">
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像 <input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
</button>
</div> </div>
<!-- 如果ro.yonghuPhoto为false，即头像可编辑，显示上传头像按钮，点击触发文件上传操作 -->
<button v-if="!ro.yonghuPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yonghuPhotoUpload">
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像
</button>
</div> </div>
<!-- 手机号 --> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 用户手机号输入项表单项，设置layui表单验证规则phone（手机号格式验证）和required（必填项验证） -->
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
用户手机号： <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
</label> 用户手机号：
<div class="layui-input-block"> </label>
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' <div class="layui-input-block">
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
v-model="detail.yonghuPhone" lay-verify="phone|required" type="text" :readonly="ro.yonghuPhone" name="yonghuPhone" id="yonghuPhone" autocomplete="off"> v-model="detail.yonghuPhone" lay-verify="phone|required" type="text" :readonly="ro.yonghuPhone" name="yonghuPhone" id="yonghuPhone" autocomplete="off">
</div>
</div> </div>
<!-- 身份证号 --> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 用户身份证号输入项表单项，设置layui表单验证规则identity（身份证号格式验证）和required（必填项验证） -->
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
用户身份证号： <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
</label> 用户身份证号：
<div class="layui-input-block"> </label>
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' <div class="layui-input-block">
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
v-model="detail.yonghuIdNumber" lay-verify="identity|required" type="text" :readonly="ro.yonghuIdNumber" name="yonghuIdNumber" id="yonghuIdNumber" autocomplete="off"> v-model="detail.yonghuIdNumber" lay-verify="identity|required" type="text" :readonly="ro.yonghuIdNumber" name="yonghuIdNumber" id="yonghuIdNumber" autocomplete="off">
</div>
</div> </div>
<!-- 邮箱 --> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 用户邮箱输入项表单项，设置layui表单验证规则email（邮箱格式验证）和required（必填项验证） -->
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
邮箱： <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
</label> 邮箱：
<div class="layui-input-block"> </label>
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}' <div class="layui-input-block">
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
v-model="detail.yonghuEmail" lay-verify="email|required" type="text" :readonly="ro.yonghuEmail" name="yonghuEmail" id="yonghuEmail" autocomplete="off"> v-model="detail.yonghuEmail" lay-verify="email|required" type="text" :readonly="ro.yonghuEmail" name="yonghuEmail" id="yonghuEmail" autocomplete="off">
</div>
</div> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 用户性别选择表单项 -->
性别： <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<div class="layui-input-block"> 性别：
<select name="sexTypes" id="sexTypes" lay-filter="sexTypes"> </label>
<option value="">请选择</option> <div class="layui-input-block">
<option v-for="(item,index) in sexTypesList" v-bind:key="index" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option> <!-- 下拉选择框，绑定数据为sexTypesList，通过lay - filter进行事件监听 -->
</select> <select name="sexTypes" id="sexTypes" lay-filter="sexTypes">
</div> <!-- 默认提示选项 -->
<option value="">请选择</option>
<!-- 使用Vue的v - for指令循环渲染下拉选项 -->
<option v-for="(item,index) in sexTypesList" v-bind:key="index" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
</select>
</div> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<div class="layui-input-block" style="text-align: right;"> <!-- 表单提交按钮所在表单项 -->
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button> <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</div> <div class="layui-input-block" style="text-align: right;">
<!-- 提交按钮，点击触发表单提交事件，通过lay - submit和lay - filter进行监听 -->
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button>
</div> </div>
</div>
</form> </form>
</div>
</div> </div>
</div>
<script src="../../layui/layui.js"></script> <!-- 引入layui的核心脚本文件 -->
<script src="../../js/vue.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入element组件库 --> <!-- 引入Vue.js库 -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../js/vue.js"></script>
<!-- 引入element样式 --> <!-- 引入element组件库脚本文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 组件配置信息 --> <!-- 引入element组件库的样式文件 -->
<script src="../../js/config.js"></script> <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 扩展插件配置信息 --> <!-- 引入组件配置信息脚本文件 -->
<script src="../../modules/config.js"></script> <script src="../../js/config.js"></script>
<!-- 工具方法 --> <!-- 引入扩展插件配置信息脚本文件 -->
<script src="../../js/utils.js"></script> <script src="../../modules/config.js"></script>
<!-- 校验格式工具类 --> <!-- 引入工具方法脚本文件 -->
<script src="../../js/validate.js"></script> <script src="../../js/utils.js"></script>
<!-- 地图 --> <!-- 引入校验格式工具类脚本文件 -->
<script type="text/javascript" src="../../js/jquery.js"></script> <script src="../../js/validate.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script> <!-- 引入jQuery库 -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script> <!-- 引入高德地图API，设置版本和密钥 -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script> <!-- 引入bootstrap的脚本文件 -->
var jquery = $; <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- 引入bootstrap的地图定位选择器插件脚本文件 -->
var vue = new Vue({ <script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
el: '#app',
data: {
// 轮播图
swiperList: [{
img: '../../img/banner.jpg'
}],
dataList: [],
ro:{
username: false,
password: false,
yonghuName: false,
yonghuPhoto: false,
yonghuPhone: false,
yonghuIdNumber: false,
yonghuEmail: false,
sexTypes: false,
newMoney: false,
yonghuDelete: false,
createTime: false,
},
detail: {
username: '',
password: '',
yonghuName: '',
yonghuPhoto: '',
yonghuPhone: '',
yonghuIdNumber: '',
yonghuEmail: '',
sexTypes: '',//数字
sexValue: '',//数字对应的值
newMoney: '',
yonghuDelete: '',
createTime: '',
},
// 级联表的
// 下拉框 <script>
sexTypesList: [], // 将jQuery对象赋值给jquery变量
var jquery = $;
centerMenu: centerMenu // 创建Vue实例
var vue = new Vue({
// 指定Vue实例的挂载点
el: '#app',
// 定义Vue实例的数据
data: {
// 轮播图数据数组
swiperList: [{
img: '../../img/banner.jpg'
}],
// 数据列表
dataList: [],
// 只读属性配置对象
ro: {
username: false,
password: false,
yonghuName: false,
yonghuPhoto: false,
yonghuPhone: false,
yonghuIdNumber: false,
yonghuEmail: false,
sexTypes: false,
newMoney: false,
yonghuDelete: false,
createTime: false,
}, },
updated: function() { // 用户详情数据对象
layui.form.render('select', 'myForm'); detail: {
username: '',
password: '',
yonghuName: '',
yonghuPhoto: '',
yonghuPhone: '',
yonghuIdNumber: '',
yonghuEmail: '',
sexTypes: '',//数字
sexValue: '',//数字对应的值
newMoney: '',
yonghuDelete: '',
createTime: '',
}, },
computed: { // 下拉框数据数组
}, sexTypesList: [],
methods: { // 中心菜单数据
jump(url) { centerMenu: centerMenu
jump(url) },
} // 当Vue实例的数据更新后执行的钩子函数
updated: function() {
// 重新渲染layui的表单下拉框
layui.form.render('select', 'myForm');
},
// 计算属性
computed: {
},
// 定义Vue实例的方法
methods: {
// 跳转页面方法
jump(url) {
jump(url)
} }
}) }
})
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() { // 加载layui的相关模块
var layer = layui.layer; layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
var element = layui.element; // 获取layer模块，用于弹出层等操作
var carousel = layui.carousel; var layer = layui.layer;
var http = layui.http; // 获取element模块，用于操作页面元素
var jquery = layui.jquery; var element = layui.element;
var form = layui.form; // 获取carousel模块，用于轮播图操作
var upload = layui.upload; var carousel = layui.carousel;
var laydate = layui.laydate; // 获取http模块，用于发起HTTP请求
var tinymce = layui.tinymce var http = layui.http;
// 获取jquery模块，用于操作DOM
var jquery = layui.jquery;
// 获取form模块，用于表单操作
var form = layui.form;
// 获取upload模块，用于文件上传操作
var upload = layui.upload;
// 获取laydate模块，用于日期选择器操作
var laydate = layui.laydate;
// 获取tinymce模块，用于富文本编辑器操作
var tinymce = layui.tinymce;
// 获取轮播图 数据 // 发起HTTP请求获取轮播图数据
http.request('config/list', 'get', { http.request('config/list', 'get', {
page: 1, page: 1,
limit: 5 limit: 5
}, function (res) { }, function (res) {
if (res.data.list.length > 0) { // 如果返回数据列表不为空
let swiperList = []; if (res.data.list.length > 0) {
res.data.list.forEach(element => { // 初始化轮播图数据数组
if(element.value != null){ let swiperList = [];
swiperList.push({ // 遍历返回的数据列表
img: element.value res.data.list.forEach(element => {
}); // 如果数据项的值不为空
} if(element.value != null){
}); // 将数据项添加到轮播图数据数组中
vue.swiperList = swiperList; swiperList.push({
img: element.value
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
}); });
}
});
// 更新Vue实例中的轮播图数据
vue.swiperList = swiperList;
// 在DOM更新后执行回调函数
vue.$nextTick(() => {
// 渲染轮播图组件
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
}); });
} });
}); }
});
// 下拉框 // 调用性别下拉框数据查询和初始化函数
// 性别的查询和初始化 sexTypesSelect();
sexTypesSelect();
// 上传文件 // 初始化头像文件上传组件
// 头像的文件上传 upload.render({
upload.render({ // 绑定上传按钮元素
//绑定元素 elem: '#yonghuPhotoUpload',
elem: '#yonghuPhotoUpload', // 上传接口地址
//上传接口 url: http.baseurl + 'file/upload',
url: http.baseurl + 'file/upload', // 请求头，添加Token信息
// 请求头 headers: {
headers: { Token: localStorage.getItem('Token')
Token: localStorage.getItem('Token') },
}, // 允许上传的文件类型为图片
// 允许上传时校验的文件类型 accept: 'images',
accept: 'images', // 上传前的回调函数
before: function () { before: function () {
//loading层 // 显示加载层
var index = layer.load(1, { var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景 shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功的回调函数
done: function (res) {
// 打印上传结果
console.log(res);
// 关闭所有加载层
layer.closeAll();
// 如果上传成功
if (res.code == 0) {
// 弹出上传成功提示框
layer.msg("上传成功", {
time: 2000,
icon: 6
}); });
}, // 拼接头像文件的完整URL
// 上传成功 var url = http.baseurl + 'upload/' + res.file;
done: function (res) { // 设置隐藏输入框的值为头像文件的URL
console.log(res); jquery('#yonghuPhoto').val(url);
layer.closeAll(); // 更新Vue实例中的头像数据
if (res.code == 0) { vue.detail.yonghuPhoto = url;
layer.msg("上传成功", { // 设置头像图片的src属性为头像文件的URL
time: 2000, jquery('#yonghuPhotoImg').attr('src', url);
icon: 6 } else {
}) // 弹出上传失败提示框
var url = http.baseurl + 'upload/' + res.file; layer.msg(res.msg, {
jquery('#yonghuPhoto').val(url);
vue.detail.yonghuPhoto = url;
jquery('#yonghuPhotoImg').attr('src', url);
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
}
},
//请求异常回调
error: function () {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000, time: 2000,
icon: 5 icon: 5
}) });
}
});
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
});
// session独取
let table = localStorage.getItem("userTable");
http.request(table+"/session", 'get', {}, function (data) {
// 表单赋值
//form.val("myForm", data.data);
// data = data.data;
for (var key in data) {
vue.detail[table+"Id"] = data.id
} }
}); },
// 请求异常的回调函数
error: function () {
// 关闭所有加载层
layer.closeAll();
// 弹出请求接口异常提示框
layer.msg("请求接口异常", {
time: 2000,
icon: 5
});
}
});
// 调用日期框初始化函数
dateTimePick();
// 定义表单验证规则
form.verify({
// 正整数验证规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
],
// 小数验证规则
double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
,'最大整数位为6位,小数最大两位'
]
});
// 从本地存储中获取用户表名
let table = localStorage.getItem("userTable");
// 发起HTTP请求获取用户会话数据
http.request(table+"/session", 'get', {}, function (data) {
// 遍历返回的数据
for (var key in data) {
// 将用户ID存储到Vue实例的detail对象中
vue.detail[table+"Id"] = data.id;
}
});
// 提交 // 监听表单提交事件
form.on('submit(thisSubmit)', function (data) { form.on('submit(thisSubmit)', function (data) {
data = data.field; // 获取表单数据
data["Id"]= localStorage.getItem("userid"); data = data.field;
// 提交数据 // 从本地存储中获取用户ID并添加到表单数据中
http.requestJson('yonghu' + '/add', 'post', data, function (res) { data["Id"]= localStorage.getItem("userid");
layer.msg('提交成功', { // 发起JSON格式的HTTP请求提交用户信息
time: 2000, http.requestJson('yonghu' + '/add', 'post', data, function (res) {
icon: 6 // 弹出提交成功提示框
}, function () { layer.msg('提交成功', {
back(); time: 2000,
}); icon: 6
}, function () {
// 提交成功后执行返回操作
back();
}); });
return false
}); });
// 阻止表单默认提交行为
return false;
}); });
// 日期框初始化 });
function dateTimePick(){
var myDate = new Date(); //获取当前时间
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
*/
}
// 性别的查询
function sexTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
if(res.code == 0){
vue.sexTypesList = res.data.list;
}
});
}
// 日期框初始化函数
function dateTimePick(){
// 获取当前时间
var myDate = new Date();
// 注释中给出了日期框change事件的回调函数示例
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
*/
}
</script> // 性别下拉框数据查询函数
function sexTypesSelect() {
// 发起HTTP请求获取性别下拉框数据
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
// 如果请求成功
if(res.code == 0){
// 更新Vue实例中的性别下拉框数据
vue.sexTypesList = res.data.list;
}
});
}
</script>
</body> </body>
</html> </html>

911
target/classes/front/front/pages/yonghu/center.html
View File

File diff suppressed because it is too large Load Diff

163
target/classes/front/front/pages/yonghu/detail.html
Unescape View File

@ -1,93 +1,114 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置页面的字符编码为UTF-8，确保可以正确显示各种字符 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 配置页面的视口信息，让页面在不同设备上有合适的显示效果，禁止用户手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面的标题，会显示在浏览器的标签页上 -->
<title>用户详情页</title> <title>用户详情页</title>
<!-- 引入layui框架的CSS文件，用于提供一些基础的样式和组件 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 --> <!-- 引入自定义的样式文件，可能包含了页面的整体布局样式 -->
<link rel="stylesheet" href="../../css/style.css"/> <link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） --> <!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关的样式 -->
<link rel="stylesheet" href="../../css/theme.css"/> <link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css --> <!-- 引入通用的CSS文件，可能包含了多个页面都会用到的通用样式 -->
<link rel="stylesheet" href="../../css/common.css"/> <link rel="stylesheet" href="../../css/common.css"/>
<!-- 引入Bootstrap框架的CSS文件，用于提供一些响应式布局和组件的样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css"> <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head> </head>
<style> <style>
/* 这里可以添加页面特定的样式，目前为空 */
</style> </style>
<body> <body>
<!-- 定义一个id为app的div元素，作为Vue实例的挂载点 -->
<div id="app">
</div>
<div id="app"> <!-- 引入layui框架的JavaScript文件，用于使用layui提供的各种组件和功能 -->
</div> <script src="../../layui/layui.js"></script>
<!-- 引入Vue.js库，用于构建响应式的用户界面 -->
<script src="../../js/vue.js"></script>
<!-- 引入Element组件库的JavaScript文件，用于使用Element提供的各种组件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入Element组件库的样式文件，用于设置Element组件的样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 引入组件配置信息的JavaScript文件，可能包含了一些组件的默认配置 -->
<script src="../../js/config.js"></script>
<!-- 引入扩展插件配置信息的JavaScript文件，可能包含了一些扩展插件的配置 -->
<script src="../../modules/config.js"></script>
<!-- 引入工具方法的JavaScript文件，可能包含了一些常用的工具函数 -->
<script src="../../js/utils.js"></script>
<script>
<script src="../../layui/layui.js"></script> // 为Vue的原型添加一个过滤器方法myFilters，用于处理文本中的换行符
<script src="../../js/vue.js"></script> Vue.prototype.myFilters= function (msg) {
<!-- 引入element组件库 --> // 如果传入的消息不为空
<script src="../../xznstatic/js/element.min.js"></script> if(msg != null){
<!-- 引入element样式 --> // 将消息中的换行符替换为HTML的换行标签<br>
<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> return msg.replace(/\n/g, "<br>");
<!-- 组件配置信息 --> }else{
<script src="../../js/config.js"></script> // 如果消息为空，返回空字符串
<!-- 扩展插件配置信息 --> return "";
<script src="../../modules/config.js"></script> }
<!-- 工具方法 --> };
<script src="../../js/utils.js"></script> // 创建一个Vue实例
var vue = new Vue({
<script> // 将Vue实例挂载到id为app的DOM元素上
Vue.prototype.myFilters= function (msg) { el: '#app',
if(msg != null){ // 定义Vue实例的数据对象
return msg.replace(/\n/g, "<br>"); data: {
}else{ // 存储轮播图的数据
return ""; swiperList: [],
} // 存储数据详情的对象，初始包含一个id属性，值为0
}; detail: {
var vue = new Vue({ id: 0
el: '#app',
data: {
// 轮播图
swiperList: [],
// 数据详情
detail: {
id: 0
},
// 商品标题
title: '',
totalScore: 0,//评分
storeupFlag: 0,//收藏 [0为收藏 1已收藏]
//系统推荐
yonghuRecommendList: [],
// 当前详情页表
detailTable: 'yonghu',
}, },
methods: { // 存储商品标题
jump(url) { title: '',
jump(url) // 存储商品的评分
}, totalScore: 0,
isAuth(tablename, button) { // 存储收藏状态，0表示未收藏，1表示已收藏
return isFrontAuth(tablename, button) storeupFlag: 0,
}, // 存储系统推荐的用户列表
yonghuRecommendList: [],
} // 当前详情页对应的表名
}); detailTable: 'yonghu',
},
// 定义Vue实例的方法
methods: {
// 定义一个跳转页面的方法，调用外部的jump函数
jump(url) {
jump(url)
},
// 定义一个判断是否有权限的方法，调用外部的isFrontAuth函数
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
}
}
});
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () { // 使用layui的use方法加载所需的模块
var layer = layui.layer; layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
var util = layui.util; // 从加载的模块中获取对应的对象
var element = layui.element; var layer = layui.layer; // 弹出层组件
var form = layui.form; var util = layui.util; // 工具类
var carousel = layui.carousel; var element = layui.element; // 元素操作组件
var http = layui.http; var form = layui.form; // 表单组件
var jquery = layui.jquery; var carousel = layui.carousel; // 轮播图组件
var laypage = layui.laypage; var http = layui.http; // HTTP请求组件
var jquery = layui.jquery; // jQuery库
var laypage = layui.laypage; // 分页组件
var limit = 10; // 定义每页显示的记录数
var limit = 10;
// 数据ID // 从URL参数中获取数据的ID
var id = http.getParam('id'); var id = http.getParam('id');
vue.detail.id = id; // 将获取到的ID赋值给Vue实例的detail对象的id属性
}); vue.detail.id = id;
</script> });
</script>
</body> </body>
</html> </html>

532
target/classes/front/front/pages/yonghu/list.html
Unescape View File

@ -1,23 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head lang="en"> <head lang="en">
<!-- 设置页面字符编码为UTF-8 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 页面标题 -->
<title>用户</title> <title>用户</title>
<!-- 页面关键词，用于搜索引擎优化 -->
<meta name="keywords" content=""/> <meta name="keywords" content=""/>
<!-- 页面描述，用于搜索引擎优化 -->
<meta name="description" content=""/> <meta name="description" content=""/>
<!-- 指定使用webkit内核渲染 -->
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<!-- 兼容IE浏览器，使用最新渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 视口配置，实现响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 引入layui框架样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义公共样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/> <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<!-- 引入自定义主题样式 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/> <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<!-- 引入jQuery库（用于兼容旧版插件） -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入滑动插件 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script> <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 引入Bootstrap框架样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" /> <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入自定义主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/> <link rel="stylesheet" href="../../css/theme.css"/>
</head> </head>
<style> <style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after { html::after {
position: fixed; position: fixed;
top: 0; top: 0;
@ -26,248 +41,93 @@
bottom: 0; bottom: 0;
content: ''; content: '';
display: block; display: block;
background-attachment: fixed; background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; background-position: center; /* 背景图居中 */
} }
/*轮播图相关 start*/ /* 轮播图容器样式，溢出隐藏 */
#swiper { #swiper {
overflow: hidden; overflow: hidden;
} }
/* 轮播图未激活指示器样式 */
#swiper .layui-carousel-ind li { #swiper .layui-carousel-ind li {
width: 20px; width: 20px;
height: 10px; height: 10px;
border-width: 0; border: 0 solid rgba(0, 0, 0, .3);
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border-radius: 6px; border-radius: 6px;
background-color: #f7f7f7; background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0, .8); box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影 */
} }
/* 轮播图激活指示器样式（当前页） */
#swiper .layui-carousel-ind li.layui-this { #swiper .layui-carousel-ind li.layui-this {
width: 30px; width: 30px; /* 加宽以区分当前页 */
height: 10px; height: 10px;
border-width: 0; border: 0 solid rgba(0, 0, 0, .3);
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border-radius: 6px; border-radius: 6px;
} }
/*轮播图相关 end*/
/*列表*/ /* 推荐内容区域样式 */
.recommend { .recommend {
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
justify-content: center; justify-content: center; /* 内容水平居中 */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
.recommend .box { .recommend .box {
width: 1002px; width: 1002px;
margin: 0 auto; margin: 0 auto; /* 水平居中 */
} }
/* 标题栏样式，弹性布局实现左右分隔 */
.recommend .box .title { .recommend .box .title {
padding: 10px 5px; padding: 10px 5px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between; /* 内容左右分布 */
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
} }
.recommend .box .title span { /* 搜索过滤表单样式 */
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
.recommend .box .filter { .recommend .box .filter {
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box;
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap; /* 换行支持 */
} }
/* 搜索条件项样式 */
.recommend .box .filter .item-list { .recommend .box .filter .item-list {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* 列表项主体样式，点击交互效果 */
.recommend .box .filter .item-list .lable {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
.recommend .box .filter .item-list input {
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
.recommend .box .filter button {
display: flex;
padding: 0 10px;
box-sizing: border-box;
align-items: center;
justify-content: center;
outline: none;
}
.recommend .box .filter button i {
margin-right: 4px;
}
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item {
flex: 0 0 25%;
padding: 0 5px;
box-sizing: border-box;
}
.recommend .box .list .list-item .list-item-body { .recommend .box .list .list-item .list-item-body {
cursor: pointer; cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3); border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
.recommend .box .list .list-item-body img { /* 分页组件样式调整 */
width: 100%;
height: 100px;
display: block;
margin: 0 auto;
}
.recommend .box .list .list-item-body .info {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item-body .info .price {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
.recommend .box .list .list-item5 {
flex: 0 0 25%;
}
.recommend .box .news {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
.recommend .box .news .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
padding: 10px;
box-sizing: border-box;
display: flex;
}
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
display: block;
margin: 0 auto;
}
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
.recommend .box .news .list-item1 {
flex: 0 0 100%;
}
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
.index-pv1 .animation-box:hover {
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
.layui-laypage .layui-laypage-count { .layui-laypage .layui-laypage-count {
padding: 0 10px; padding: 0 10px;
} }
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
</style> </style>
<body> <body>
<!-- Vue实例挂载点 -->
<div id="app"> <div id="app">
<!-- 轮播图区域 -->
<div class="banner"> <div class="banner">
<div class="layui-carousel" id="swiper" <div class="layui-carousel" id="swiper"
:style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'> :style='{
"boxShadow":"0 0 0px rgba(255,0,0,.8)",
"margin":"0 auto",
"width":"100%"
}'>
<div carousel-item> <div carousel-item>
<!-- 轮播图图片循环渲染，使用Vue的v-for指令 -->
<div v-for="(item,index) in swiperList" :key="index"> <div v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/> <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
</div> </div>
@ -275,243 +135,177 @@
</div> </div>
</div> </div>
<div class="recommend index-pv1" <!-- 搜索与列表区域 -->
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'> <div class="recommend index-pv1">
<div class="box" style='width:80%'> <div class="box" style='width:80%'>
<!-- 页面标题与面包屑导航 -->
<div class="title sub_backgroundColor sub_borderColor" <div class="title sub_backgroundColor sub_borderColor">
:style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'> <span :style='{"fontSize":"18px"}'>用户</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'> <span>您现在的位置：用户</span>
用户
</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
您现在的位置：用户
</span>
</div> </div>
<form class="layui-form filter main_backgroundColor" <!-- 搜索过滤表单 -->
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'> <form class="layui-form filter main_backgroundColor">
<!-- 用户姓名搜索框 -->
<div class="item-list">
<div class="lable">用户姓名</div>
<input type="text" v-model="searchForm.yonghuName" placeholder="用户姓名"
class="layui-input"
:style='{
"borderRadius":"8px",
"height":"44px"
}'>
</div>
<!-- 性别筛选下拉框 -->
<div class="item-list"> <div class="item-list">
<div class="lable" <div class="lable">性别</div>
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'> <select v-model="searchForm.sexTypes">
用户姓名 <option value="">请选择</option>
</div> <!-- 性别选项循环渲染，数据来自Vue的sexTypesList -->
<input type="text" v-model="searchForm.yonghuName" <option v-for="item in sexTypesList" :key="item.codeIndex"
:style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' :value="item.codeIndex">{{ item.indexName }}</option>
placeholder="用户姓名" autocomplete="off" </select>
class="layui-input">
</div> </div>
<!-- 搜索按钮与添加按钮 -->
<div class="item-list"> <button id="btn-search" type="button" class="layui-btn layui-btn-normal sub_backgroundColor"
<div class="lable" @click="pageList">
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'> <i class="layui-icon layui-icon-search"></i>搜索
性别</div>
<select :style='{"boxShadow":"0 0 0px rgba(0,0,0,0)","borderColor":"rgba(0, 0, 0, 0)","backgroundColor":"#ffffff","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
style="display:block" v-model="searchForm.sexTypes">
<option value="">请选择</option>
<option v-for="(item,index) in sexTypesList" v-bind:key="index"
:value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}
</option>
</select>
</div>
<button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
</button> </button>
<button v-if="isAuth('yonghu','新增')" @click="jump('../yonghu/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme"> <!-- 权限控制：仅有权限用户显示添加按钮 -->
<i v-if="true" class="layui-icon">&#xe654;</i>添加 <button v-if="isAuth('yonghu','新增')" @click="jump('../yonghu/add.html')" class="layui-btn btn-theme">
<i class="layui-icon">&#xe654;</i>添加
</button> </button>
</form> </form>
</div> </div>
</div> </div>
<!-- 分页组件 -->
<div class="pager" id="pager" :style="{textAlign:'center'}"></div> <div class="pager" id="pager" :style="{textAlign:'center'}"></div>
</div> </div>
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <!-- 引入Bootstrap框架脚本 -->
<script src="../../xznstatic/js/bootstrap.min.js"></script>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script> <script src="../../js/vue.js"></script>
<!-- 引入element组件库 --> <!-- 引入Element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 --> <!-- 引入项目配置文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<script src="../../js/config.js"></script> <script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script> <script src="../../modules/config.js"></script>
<!-- 引入工具函数库 -->
<script src="../../js/utils.js"></script> <script src="../../js/utils.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// 初始化Vue实例
var vue = new Vue({ var vue = new Vue({
el: '#app', el: '#app', // 绑定根元素
data: { data: {
swiperList: [], swiperList: [], // 轮播图数据
sexTypesList: [], sexTypesList: [], // 性别选项列表
// 搜索条件对象
//查询条件
searchForm: { searchForm: {
page: 1 page: 1, // 当前页码
,limit: 8 limit: 8, // 每页显示数量
,yonghuDelete: 1 yonghuDelete: 1, // 逻辑删除状态（1:未删除）
,yonghuName: "" yonghuName: "", // 用户名搜索关键词
,sexTypes: "" sexTypes: "" // 性别筛选条件
}, },
dataList: [] // 用户列表数据
dataList: [],
},
filters: {
subString: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
val+='...';
}
return val;
}
return '';
}
},
computed: {
}, },
methods: { methods: {
// 权限校验方法
isAuth(tablename, button) { isAuth(tablename, button) {
return isFrontAuth(tablename, button); return isFrontAuth(tablename, button); // 调用外部权限校验函数
} },
,jump(url) { // 页面跳转方法
jump(url); jump(url) {
} window.location.href = url; // 路由跳转
,jumpCheck(url,check1,check2) { },
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除] // 带条件的跳转方法（处理删除和下架状态）
layui.layer.msg("已经被删除", { jumpCheck(url, check1, check2) {
time: 2000, if (check1 === 2) { // 已删除
icon: 2 layer.msg("已经被删除", {time: 2000, icon: 2});
}); return;
return false;
} }
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架] if (check2 === 2) { // 已下架
layui.layer.msg("已经下架", { layer.msg("已经下架", {time: 2000, icon: 2});
time: 2000, return;
icon: 2
});
return false;
} }
this.jump(url); this.jump(url);
} }
} }
}); });
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() { layui.use(['layer', 'http', 'laypage', 'carousel'], function() {
var layer = layui.layer; var layer = layui.layer; // 弹出层组件
var element = layui.element; var http = layui.http; // HTTP请求工具
var carousel = layui.carousel; var laypage = layui.laypage; // 分页组件
var laypage = layui.laypage; var carousel = layui.carousel; // 轮播图组件
var http = layui.http;
var laydate = layui.laydate;
var tinymce = layui.tinymce;
window.jQuery = window.$ = jquery = layui.jquery;
// var id = http.getParam('id'); // 获取轮播图数据
http.request('config/list', 'get', {page: 1, limit: 5}, function(res) {
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
let swiperList = []; vue.swiperList = res.data.list.map(item => ({img: item.value}));
res.data.list.forEach(element => { // 初始化轮播图组件
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => { vue.$nextTick(() => {
carousel.render({ carousel.render({
elem: '#swiper', elem: '#swiper',
width: '100%', width: '100%',
height: '450px', height: '450px',
arrow: 'hover', autoplay: true, // 自动播放
anim: 'default', interval: 3000 // 切换间隔3秒
autoplay: 'true',
interval: '3000',
indicator: 'inside'
}); });
}); });
} }
}); });
// 加载性别选项数据（来自字典表）
//当前表的 性别 字段 字典表查询 function sexTypesSelect() {
sexTypesSelect(); http.request("dictionary/page?dicCode=sex_types", 'get', {}, function(res) {
//当前表的 性别 字段 字典表查询方法 if (res.code === 0) {
function sexTypesSelect() { vue.sexTypesList = res.data.list; // 更新性别选项列表
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", 'get', {}, function (res) { }
if(res.code == 0){
vue.sexTypesList = res.data.list;
}
});
}
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function (e) {
pageList();
}); });
}
function pageList() { sexTypesSelect(); // 初始化性别数据
// 获取列表数据
http.request('yonghu/list', 'get', vue.searchForm, function (res) { // 分页列表加载函数
vue.dataList = res.data.list; function pageList() {
// 分页 http.request('yonghu/list', 'get', vue.searchForm, function(res) {
laypage.render({ vue.dataList = res.data.list; // 更新列表数据
elem: 'pager', // 初始化分页组件
count: res.data.total, laypage.render({
limit: vue.searchForm.limit, elem: 'pager', // 分页容器ID
groups: 3, count: res.data.total, // 总记录数
layout: ["prev", "page", "next"], limit: vue.searchForm.limit, // 每页数量
jump: function (obj, first) { groups: 3, // 显示页码数量
vue.searchForm.page = obj.curr;//翻页 layout: ["prev", "page", "next"], // 分页布局
//首次不执行 jump: function(obj, first) {
if (!first) { if (!first) { // 非首次加载（用户点击分页）
http.request('yonghu/list', 'get', vue.searchForm, function (res1) { vue.searchForm.page = obj.curr; // 更新当前页码
vue.dataList = res1.data.list; http.request('yonghu/list', 'get', vue.searchForm, function(res1) {
}) vue.dataList = res1.data.list; // 重新加载数据
} });
} }
}); }
}); });
} });
}
pageList(); // 初始化加载列表数据
// 搜索按钮点击事件
$('#btn-search').click(function() {
vue.searchForm.page = 1; // 重置为第一页
pageList(); // 重新加载列表
});
}); });
// 滑动插件初始化（兼容旧版滑动效果）
window.xznSlide = function () { window.xznSlide = function () {
jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000}); $(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
jQuery("#ifocus").slide({
titCell: "#ifocus_btn li",
mainCell: "#ifocus_piclist ul",
effect: "leftLoop",
delayTime: 200,
autoPlay: true,
triggerTime: 0
});
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
jQuery(".product_list").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5,
trigger: "click",
interTime: 4000
});
}; };
</script> </script>
</body> </body>
</html> </html>

383
target/classes/front/front/pages/yonghu/register.html
Unescape View File

@ -1,217 +1,292 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置页面字符编码为UTF-8，支持中文及特殊字符 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 配置视口，实现响应式布局，禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 页面标题 -->
<title>注册</title> <title>注册</title>
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"> <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/public.css"/>
<!-- 引入登录/注册页面专属样式 -->
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/> <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
<!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css" /> <link rel="stylesheet" href="../../css/theme.css" />
<!-- 自定义注册页面样式 -->
<style type="text/css"> <style type="text/css">
/* 注册页面整体容器，全屏背景图 */
.register { .register {
display: flex; display: flex; /* 弹性布局，垂直水平居中 */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100vh; /* 占满视口高度 */
background-attachment: fixed; background-attachment: fixed; /* 背景图固定 */
background-size: cover; background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; background-position: center; /* 背景图居中 */
background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); /* 背景图片路径 */
} }
/* 注册表单样式 */
.register form { .register form {
box-sizing: border-box; box-sizing: border-box;
min-height: 400px; min-height: 400px;
display: flex; display: flex; /* 弹性垂直布局 */
flex-direction: column; flex-direction: column;
justify-content: center !important; justify-content: center; /* 内容垂直居中 */
} padding: 20px;
.register .logo, .register .title { background-color: #fff; /* 白色背景 */
box-sizing: border-box; border-radius: 20px; /* 圆角 */
} width: 400px; /* 固定表单宽度 */
.register .logo img {
display: block;
} }
/* 表单标题样式 */
.register .title { .register .title {
text-align: center; text-align: center; /* 文本居中 */
font-size: 17px; /* 字体大小 */
color: red; /* 红色标题 */
margin: 10px auto; /* 上下边距，水平居中 */
} }
/* 表单项容器样式 */
.register .form-item { .register .form-item {
display: flex; display: flex; /* 弹性布局，标签和输入框同行显示 */
align-items: center; align-items: center; /* 垂直居中 */
flex-wrap: wrap; flex-wrap: wrap; /* 换行支持 */
box-sizing: border-box; margin-bottom: 15px; /* 底部边距 */
} width: 100%; /* 占满表单宽度 */
.register .form-item input, .register .form-label {
box-sizing: border-box;
} }
.register .btn-submit { /* 输入框通用样式 */
display: block; .register .layui-input {
box-sizing: border-box; padding: 0 10px;
height: 44px; /* 固定高度 */
border: 1px solid rgba(135, 206, 250, 1); /* 蓝色边框 */
border-radius: 8px; /* 圆角 */
font-size: 14px; /* 字体大小 */
} }
.register form p.txt { /* 提交按钮样式 */
width: 100%; .btn-submit {
margin: 0; width: 60%; /* 按钮宽度 */
box-sizing: border-box; margin: 10px auto; /* 水平居中 */
} background-color: var(--publicMainColor); /* 主题背景色 */
.layui-unselect{ color: #fff; /* 白色文字 */
margin-left: -5px; border-radius: 8px; /* 圆角 */
margin-top: 3px; height: 44px; /* 固定高度 */
border: 0px;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Vue实例挂载点，包含整个注册表单 -->
<div class="register" id="app"> <div class="register" id="app">
<form class="layui-form login-form" lay-filter="myForm" :style='{"padding":"20px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"20px","borderWidth":"0","width":"400px","borderStyle":"solid","justifyContent":"center","height":"auto"}'> <form class="layui-form login-form" lay-filter="myForm"
<p class="title" v-if="true" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(247, 247, 247, 0)","color":"red","isshow":true,"borderRadius":"8px","borderWidth":"0","width":"110px","lineHeight":"32px","fontSize":"17px","borderStyle":"solid"}'>用户注册</p> :style='{
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> "padding": "20px",
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">账户：</label> "backgroundColor": "#fff",
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" autocomplete="off" class="layui-input"> "borderRadius": "20px",
</div> "width": "400px"
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> }'>
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label> <!-- 页面标题 -->
<input type="password" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input"> <p class="title" :style='{"color": "red", "fontSize": "17px"}'>用户注册</p>
</div>
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> <!-- 账户输入框 -->
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label> <div class="form-item layui-form-text">
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" autocomplete="off" class="layui-input"> <input :style='{"width": "100%"}'
</div> lay-verify="required"
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> type="text"
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">用户姓名：</label> id="username"
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yonghuName" name="yonghuName" placeholder="请输入用户姓名" autocomplete="off" class="layui-input"> name="username"
</div> placeholder="请输入账户"
<!-- 手机号 --> autocomplete="off"
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> class="layui-input">
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">用户手机号：</label> </div>
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="phone|required" type="text" id="yonghuPhone" name="yonghuPhone" placeholder="请输入用户手机号" autocomplete="off" class="layui-input">
</div> <!-- 密码输入框 -->
<!-- 身份证号 --> <div class="form-item layui-form-text">
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> <input type="password"
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">用户身份证号：</label> lay-verify="password1|required"
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="identity|required" type="text" id="yonghuIdNumber" name="yonghuIdNumber" placeholder="请输入用户身份证号" autocomplete="off" class="layui-input"> id="password"
</div> name="password"
<!-- 邮箱 --> placeholder="请输入密码"
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text"> autocomplete="off"
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">邮箱：</label> class="layui-input">
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="email|required" type="text" id="yonghuEmail" name="yonghuEmail" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> </div>
</div>
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}'> <!-- 重复密码输入框 -->
<div :style='{"margin-top":"10px","padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'> <div class="form-item layui-form-text">
<select name="sexTypes" id="sexTypes"> <input type="password"
<option value="">请选择性别</option> lay-verify="password2|required"
<option v-for="(item,index) in sexTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option> id="password2"
</select> name="password2"
</div> placeholder="请重复输入密码"
</div> autocomplete="off"
<button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-submit lay-filter="register" style="width: 280px;">注册</button> class="layui-input">
<p :style='{"color":"rgba(59, 46, 126, 1)","textAlign":"left","fontSize":"12px"}' class="txt"><a href="javascript:window.location.href='../login/login.html'">已有账号登录</a></p> </div>
<!-- 用户姓名输入框 -->
<div class="form-item layui-form-text">
<input lay-verify="required"
type="text"
id="yonghuName"
name="yonghuName"
placeholder="请输入用户姓名"
autocomplete="off"
class="layui-input">
</div>
<!-- 手机号输入框（带格式校验） -->
<div class="form-item layui-form-text">
<input lay-verify="phone|required"
type="text"
id="yonghuPhone"
name="yonghuPhone"
placeholder="请输入用户手机号"
autocomplete="off"
class="layui-input">
</div>
<!-- 身份证号输入框（带格式校验） -->
<div class="form-item layui-form-text">
<input lay-verify="identity|required"
type="text"
id="yonghuIdNumber"
name="yonghuIdNumber"
placeholder="请输入用户身份证号"
autocomplete="off"
class="layui-input">
</div>
<!-- 邮箱输入框（带格式校验） -->
<div class="form-item layui-form-text">
<input lay-verify="email|required"
type="text"
id="yonghuEmail"
name="yonghuEmail"
placeholder="请输入邮箱"
autocomplete="off"
class="layui-input">
</div>
<!-- 性别选择下拉框（动态加载字典数据） -->
<div>
<select name="sexTypes" id="sexTypes" class="layui-input">
<option value="">请选择性别</option>
<!-- 动态渲染性别选项，数据来自Vue的sexTypesList -->
<option v-for="(item, index) in sexTypesList"
:value="item.codeIndex"
:key="item.codeIndex">
{{ item.indexName }}
</option>
</select>
</div>
<!-- 注册按钮，触发表单提交 -->
<button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit"
lay-submit
lay-filter="register"
:style='{"width": "280px"}'>
注册
</button>
<!-- 跳转登录链接 -->
<p class="txt">
<a href="javascript:window.location.href='../login/login.html'">已有账号登录</a>
</p>
</form> </form>
</div> </div>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script> <script src="../../js/vue.js"></script>
<!-- 引入element组件库 --> <!-- 引入Element组件库（用于下拉框等组件） -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 --> <!-- 引入项目配置文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script> <script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 --> <!-- 引入工具函数库 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script> <script src="../../js/utils.js"></script>
<!-- 校验格式工具类 --> <!-- 引入表单校验工具 -->
<script src="../../js/validate.js"></script> <script src="../../js/validate.js"></script>
<script> <script>
// 初始化Vue实例
var vue = new Vue({ var vue = new Vue({
el: '#app', el: '#app', // 绑定根元素
data: { data: {
sexTypesList : [], sexTypesList: [] // 存储性别选项数据（从字典表获取）
}, },
updated: function() { updated() {
// 表单更新后重新渲染layui表单组件（如下拉框）
layui.form.render(null, 'myForm'); layui.form.render(null, 'myForm');
}, }
}); });
layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() { layui.use(['layer', 'form', 'http', 'jquery'], function() {
var layer = layui.layer; var layer = layui.layer; // 弹出层组件
var element = layui.element; var form = layui.form; // 表单组件
var carousel = layui.carousel; var http = layui.http; // HTTP请求工具
var form = layui.form; var jquery = layui.jquery; // jQuery库
var http = layui.http;
var jquery = layui.jquery;
// 获取URL中的表名参数（用于接口路径）
var tablename = http.getParam('tablename'); var tablename = http.getParam('tablename');
//字典表数据容器
// 性别的查询和初始化 // ------------------------
sexTypesSelect(); // 表单校验规则配置
// 日期效验规则及格式 // ------------------------
dateTimePick();
// 表单效验规则
form.verify({ form.verify({
// 正整数效验规则 // 密码一致性校验（两次输入需一致）
integer: [ password1: function(value) {
/^[1-9][0-9]*$/ var password2 = jquery("#password2").val();
,'必须是正整数' if (password2 && value !== password2) {
] return '两次输入的密码不一致';
// 小数效验规则
,double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
,password1: function(value, item){ //value：表单的值、item：表单的DOM对象
var password2 = jquery("#password2").val();
if(password2 != null && password2 != "" && password2 != "null"){
if(value != password2){
return '密码的两次密码不一致';
}
} }
} },
,password2: function(value, item){ //value：表单的值、item：表单的DOM对象 password2: function(value) {
var password1 = jquery("#password1").val(); var password1 = jquery("#password").val();
if(password1 != null && password1 != "" && password1 != "null"){ if (password1 && value !== password1) {
if(value != password1){ return '两次输入的密码不一致';
return '密码的两次密码不一致';
}
} }
} }
}); });
// 注册 // ------------------------
// 注册表单提交处理
// ------------------------
form.on('submit(register)', function(data) { form.on('submit(register)', function(data) {
data = data.field; // 组装提交数据
http.requestJson(tablename + '/register', 'post', data, function(res) { var formData = data.field;
layer.msg('注册成功', {
time: 2000, // 发送注册请求
icon: 6 http.requestJson(`${tablename}/register`, 'post', formData, function(res) {
},function(){ if (res.code === 0) {
// 路径访问设置 layer.msg('注册成功', {
window.location.href = '../login/login.html'; time: 2000, // 显示2秒
}); icon: 6 // 成功图标
}, function() {
// 注册成功后跳转登录页
window.location.href = '../login/login.html';
});
} else {
layer.msg(res.msg, { icon: 5 }); // 错误提示
}
}); });
return false return false; // 阻止表单默认提交
}); });
// ------------------------
// 加载性别选项数据（来自字典表）
// 日期框初始化 // ------------------------
function dateTimePick(){ function sexTypesSelect() {
}; // 请求字典表数据（性别类型）
http.request("dictionary/page?dicCode=sex_types", "GET", {}, function(res) {
// 性别的查询 if (res.code === 0) {
function sexTypesSelect() { vue.sexTypesList = res.data.list; // 更新Vue数据
//填充下拉框选项 form.render('select'); // 重新渲染下拉框
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => { }
if(res.code == 0){ });
vue.sexTypesList = res.data.list; }
} sexTypesSelect(); // 初始化加载性别数据
});
}
}); });
</script> </script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save