prxhap34i
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

4 #9

Merged
prxhap34i merged 1 commits from cqq into develop 3 months ago
Conversation 0 Commits 1 Files Changed 8
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>
<html>
<head>
<!-- 设置页面字符编码为UTF-8，确保支持中文及特殊字符 -->
<meta charset="utf-8">
<!-- 配置视口，实现响应式布局，禁止用户手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 页面标题 -->
<title>挂号添加</title>
<!-- bootstrap样式，地图插件使用 -->
<!-- 引入Bootstrap样式（地图插件依赖） -->
<link rel="stylesheet" href="../../css/bootstrap.min.css"/>
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义全局样式 -->
<link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） -->
<!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的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;
flex: 1;
}
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
margin: 0;
flex: 1;
display: flex;
}
</style>
<body style="background: #EEEEEE; ">
<!-- 自定义页面样式 -->
<style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
display: block;
background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; /* 背景图居中 */
z-index: -1; /* 层级低于内容 */
}
/* 轮播图容器样式，溢出隐藏 */
#swiper {
overflow: hidden;
margin: 0 auto; /* 水平居中 */
}
/* 表单输入项通用样式 */
.data-add-container .add .layui-input {
padding: 0 12px;
height: 40px; /* 固定高度 */
border-radius: 4px; /* 圆角 */
border: 1px solid #e0e0e0; /* 浅灰边框 */
font-size: 15px; /* 字体大小 */
}
/* 表单行样式，弹性布局实现标签和输入框对齐 */
.data-add-container .layui-form-item {
display: flex;
align-items: center; /* 垂直居中 */
margin-bottom: 10px; /* 底部边距 */
}
/* 表单标签样式，固定宽度并左对齐 */
.layui-form-label {
width: 110px; /* 固定宽度 */
text-align: left; /* 文本左对齐 */
color: #333; /* 深灰文字 */
}
</style>
</head>
<body style="background: #EEEEEE;">
<!-- Vue实例挂载点，包含整个页面内容 -->
<div id="app">
<!-- 轮播图区域 -->
<div class="layui-carousel" id="swiper"
:style='{"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 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 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">
<!-- 当前表的 -->
<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-form-item main_borderColor">
<label class="layui-form-label">就诊识别码：</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.guahaoUuinNumber" lay-verify="integer|required" type="text"
:readonly="ro.guahaoUuinNumber" name="guahaoUuinNumber" id="guahaoUuinNumber"
autocomplete="off">
<input
class="layui-input main_borderColor"
:style='{
"backgroundColor": "#fff",
"borderColor": "#e0e0e0"
}'
v-model="detail.guahaoUuinNumber"
lay-verify="integer|required" /* 正整数和必填校验 */
type="text"
:readonly="ro.guahaoUuinNumber" /* 只读控制 */
name="guahaoUuinNumber"
id="guahaoUuinNumber"
autocomplete="off"
/>
</div>
</div>
<div class="layui-form-item main_borderColor"
: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-form-item main_borderColor">
<label class="layui-form-label">挂号时间：</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"}'
type="text" :readonly="ro.guahaoTime" name="guahaoTime" id="guahaoTime" autocomplete="off">
<input
class="layui-input main_borderColor"
:style='{
"backgroundColor": "#fff",
"borderColor": "#e0e0e0"
}'
type="text"
:readonly="ro.guahaoTime"
name="guahaoTime"
id="guahaoTime"
autocomplete="off"
/>
</div>
</div>
<div class="layui-form-item main_borderColor"
: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-form-item main_borderColor">
<label class="layui-form-label">时间状态：</label>
<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 v-for="(item,index) in guahaoTypesList" v-bind:key="index" :value="item.codeIndex"
:key="item.codeIndex">{{ item.indexName }}
<!-- 动态渲染时间状态选项，数据来自guahaoTypesList -->
<option
v-for="(item, index) in guahaoTypesList"
:key="item.codeIndex"
:value="item.codeIndex"
>
{{ item.indexName }}
</option>
</select>
</div>
</div>
<div class="layui-form-item main_borderColor"
:style='{"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>
</div>
</div>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库（备用，当前页面未直接使用） -->
<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="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>
<!-- 地图 -->
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
<!-- 地图相关脚本（当前页面未实际使用，仅引入备用） -->
<script src="../../js/jquery.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script>
var jquery = $;
var jquery = $; // 兼容jQuery引用
// 初始化Vue实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
// 轮播图
swiperList: [{
img: '../../img/banner.jpg'
}],
dataList: [],
ro: {
yishengId: false,
yonghuId: false,
swiperList: [{ img: '../../img/banner.jpg' }], // 轮播图默认数据（可动态加载）
ro: { /* 字段只读控制对象 */
guahaoUuinNumber: false,
guahaoTime: false,
guahaoTypes: false,
guahaoStatusTypes: false,
guahaoYesnoTypes: false,
guahaoYesnoText: false,
createTime: false,
guahaoTime: false
},
detail: {
yishengId: '',
yonghuId: '',
guahaoUuinNumber: new Date().getTime(),
guahaoTime: '',
guahaoTypes: '',//数字
guahaoValue: '',//数字对应的值
guahaoStatusTypes: '',//数字
guahaoStatusValue: '',//数字对应的值
guahaoYesnoTypes: '',//数字
guahaoYesnoValue: '',//数字对应的值
guahaoYesnoText: '',
createTime: '',
detail: { /* 挂号详情数据对象 */
guahaoUuinNumber: new Date().getTime(), // 初始化就诊识别码为时间戳
guahaoTime: '', // 挂号时间
guahaoTypes: '' // 时间状态编码
},
// 级联表的
// 下拉框
guahaoTypesList: [],
guahaoStatusTypesList: [],
guahaoYesnoTypesList: [],
centerMenu: centerMenu
// 下拉框选项数据（从字典表加载）
guahaoTypesList: []
},
updated: function () {
layui.form.render('select', 'myForm');
updated() {
layui.form.render('select', 'myForm'); // 重新渲染下拉框组件
},
computed: {},
methods: {
jump(url) {
jump(url)
}
jump(url) { jump(url); } // 页面跳转方法（外部定义）
}
})
});
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var laydate = layui.laydate;
var tinymce = layui.tinymce
layui.use(['layer', 'http', 'form', 'laydate'], function() {
var layer = layui.layer; // 弹出层组件
var http = layui.http; // HTTP请求工具
var form = layui.form; // 表单组件
var laydate = layui.laydate; // 日期选择器
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
// ------------------------
// 轮播图初始化（从配置接口加载数据）
// ------------------------
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.swiperList = res.data.list.map(item => ({ img: item.value }));
// 初始化layui轮播图
vue.$nextTick(() => {
carousel.render({
layui.carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: true, // 自动播放
interval: 3000 // 切换间隔3秒
});
});
}
});
// 下拉框
// 时间类型的查询和初始化
guahaoTypesSelect();
// 挂号状态的查询和初始化
guahaoStatusTypesSelect();
// 挂号审核的查询和初始化
guahaoYesnoTypesSelect();
// 上传文件
// 日期效验规则及格式
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();
});
// ------------------------
// 下拉框数据加载（时间状态类型）
// ------------------------
function guahaoTypesSelect() {
http.request("dictionary/page?dicCode=guahao_types", "GET", {}, (res) => {
if (res.code === 0) {
vue.guahaoTypesList = res.data.list; // 更新下拉框选项
}
});
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>
</body>
</html>

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

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

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

@ -1,23 +1,37 @@
<!DOCTYPE html>
<html>
<head lang="en">
<!-- 设置页面字符编码为UTF-8，支持中文及特殊字符 -->
<meta charset="utf-8">
<!-- 页面标题 -->
<title>挂号</title>
<!-- 搜索引擎优化相关meta标签 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<!-- 指定浏览器渲染内核为webkit -->
<meta name="renderer" content="webkit">
<!-- 兼容IE浏览器，使用最高版本渲染 -->
<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">
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义公共样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.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.SuperSlide.2.1.1.js"></script>
<!-- 引入Bootstrap框架样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after {
position: fixed;
top: 0;
@ -26,497 +40,236 @@
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; /* 背景图居中 */
}
/*轮播图相关 start*/
/* 轮播图容器样式，溢出隐藏实现滑动效果 */
#swiper {
overflow: hidden;
}
/* 轮播图未激活指示器样式（非当前页） */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
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 {
width: 30px;
width: 30px; /* 当前页指示器更宽 */
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
}
/*轮播图相关 end*/
/*列表*/
/* 推荐内容区域样式，弹性布局居中 */
.recommend {
padding: 10px 0;
display: flex;
justify-content: center;
justify-content: center; /* 内容水平居中 */
background-repeat: no-repeat;
background-position: center center;
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 {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
padding: 5px;
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>
<body>
<!-- Vue实例挂载点，包含整个页面动态内容 -->
<div id="app">
<!-- 轮播图区域 -->
<div class="banner">
<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 v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
<!-- 轮播图图片动态渲染，数据来自Vue的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 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 :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;"
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>
<!-- 全部筛选按钮（默认选中状态） -->
<div
class="thisTableType-search main_backgroundColor"
:style="searchForm.guahaoTypes === '' ? 激活样式 : 非激活样式"
@click="searchForm.guahaoTypes = ''; pageList()"
>
时间类型全部
</div>
<div v-for="(item,index) in guahaoTypesList" :key="item.codeIndex"
class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
: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"}'
style="display: inline-block;text-align: center;cursor: pointer;">
{{item.indexName}}
<!-- 动态循环生成时间类型按钮，数据来自guahaoTypesList字典 -->
<div
v-for="item in guahaoTypesList"
:key="item.codeIndex"
class="thisTableType-search main_backgroundColor"
:index="item.codeIndex"
:style="searchForm.guahaoTypes === item.codeIndex ? 激活样式 : 非激活样式"
@click="searchForm.guahaoTypes = item.codeIndex; pageList()"
>
{{ item.indexName }} <!-- 显示类型名称 -->
</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"}'>
<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 :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 class="title sub_backgroundColor sub_borderColor">
<span style="font-size: 18px; color: #333;">挂号</span>
<span>您现在的位置：挂号</span>
</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>
<!-- 搜索表单（当前为空，可扩展输入框和搜索按钮） -->
<form class="layui-form filter main_backgroundColor">
<!-- 可扩展的搜索输入框和筛选条件 -->
</form>
</div>
</div>
<div class="pager" id="pager" :style="{textAlign:'center'}"></div>
<!-- 分页组件容器 -->
<div class="pager" id="pager" :style="{ textAlign: 'center' }"></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>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库（备用） -->
<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="../../modules/config.js"></script>
<script src="../../js/utils.js"></script>
<script type="text/javascript">
// 初始化Vue实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
swiperList: [],
guahaoTypesList: [],
guahaoStatusTypesList: [],
guahaoYesnoTypesList: [],
//查询条件
searchForm: {
page: 1
,limit: 8
,guahaoTypes: ""
swiperList: [], // 轮播图数据
guahaoTypesList: [], // 时间类型字典数据
searchForm: { // 搜索条件对象
page: 1, // 当前页码
limit: 8, // 每页显示数量
guahaoTypes: "" // 时间类型筛选条件（字典编码）
},
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: {
dataList: [] // 挂号列表数据
},
methods: {
// 权限校验方法（调用外部工具函数）
isAuth(tablename, button) {
return isFrontAuth(tablename, button);
}
,jump(url) {
jump(url);
}
,jumpCheck(url,check1,check2) {
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
layui.layer.msg("已经被删除", {
time: 2000,
icon: 2
});
return false;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
},
// 页面跳转方法
jump(url) {
window.location.href = url;
},
// 带业务逻辑的跳转方法（检查删除/下架状态）
jumpCheck(url, check1, check2) {
if (check1 === 2 || check2 === 2) {
layer.msg("数据状态异常", { time: 2000, icon: 2 });
return;
}
this.jump(url);
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
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) {
layui.use(['layer', 'http', 'carousel', 'laypage', 'jquery'], function() {
var layer = layui.layer; // 弹出层
var http = layui.http; // HTTP请求
var carousel = layui.carousel; // 轮播图
var laypage = layui.laypage; // 分页
var jquery = layui.jquery; // jQuery
// ------------------------
// 轮播图数据加载与初始化
// ------------------------
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.swiperList = res.data.list.map(item => ({ img: item.value }));
// 初始化layui轮播图组件
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: true, // 自动播放
interval: 3000 // 切换间隔3秒
});
});
}
});
//时间类型的动态搜素
$(document).on("click", ".thisTableType-search", function (e) {
vue.searchForm.guahaoTypes = $(this).attr('index');
pageList();
});
//当前表的 时间类型 字段 字典表查询
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 guahaoTypesSelect() {
http.request("dictionary/page?dicCode=guahao_types", 'get', {}, function(res) {
if (res.code === 0) {
vue.guahaoTypesList = res.data.list; // 更新筛选按钮数据
}
});
function pageList() {
// 获取列表数据
http.request('guahao/list', 'get', vue.searchForm, function (res) {
vue.dataList = res.data.list;
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: vue.searchForm.limit,
groups: 3,
layout: ["prev", "page", "next"],
jump: function (obj, first) {
vue.searchForm.page = obj.curr;//翻页
//首次不执行
if (!first) {
http.request('guahao/list', 'get', vue.searchForm, function (res1) {
vue.dataList = res1.data.list;
})
}
}
guahaoTypesSelect(); // 初始化加载
// ------------------------
// 分页列表加载
// ------------------------
function pageList() {
http.request('guahao/list', 'get', vue.searchForm, function(res) {
vue.dataList = res.data.list; // 更新列表数据
// 初始化分页组件
laypage.render({
elem: 'pager', // 分页容器ID
count: res.data.total, // 总记录数
limit: vue.searchForm.limit, // 每页数量
groups: 3, // 显示页码数量
layout: ["prev", "page", "next"], // 分页按钮布局
jump: function(obj, first) {
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 () {
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
});
jQuery(".banner").slide({ mainCell: ".bd ul", autoPlay: true, interTime: 5000 });
};
</script>
</body>

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

@ -1,20 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码为UTF - 8 -->
<meta charset="utf-8">
<!-- 设置视口，以适应不同设备屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面标题为用户添加 -->
<title>用户添加</title>
<!-- bootstrap样式，地图插件使用 -->
<!-- 引入bootstrap样式文件，用于地图插件等，提供基础布局和样式 -->
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
<!-- 引入layui的样式文件，提供丰富组件和样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义样式文件，设置页面整体样式风格 -->
<link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，定义页面主题颜色等样式 -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css -->
<!-- 引入通用css文件，包含常用样式规则 -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<!-- 自定义样式部分，设置页面背景和组件外观样式 -->
<style>
/* 设置页面背景的伪元素样式，覆盖整个页面，作为背景图，固定位置且居中显示 */
html::after {
position: fixed;
top: 0;
@ -28,33 +35,42 @@
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-color: rgba(0, 0, 0, .3);
border-radius: 6px;
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 {
width: 30px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-color: rgba(0, 0, 0, .3);
border-radius: 6px;
}
button, button:focus {
/* 按钮样式，去除默认聚焦轮廓 */
button,
button:focus {
outline: none;
}
/* 数据添加容器内，layui - select组件标题样式，设置内边距、高度、字体大小、边框等 */
.data-add-container .add .layui-select-title .layui-unselect {
padding: 0 12px;
height: 40px;
@ -64,369 +80,436 @@
border-style: solid;
text-align: center;
}
/* 数据添加容器内，layui表单项样式，设置为弹性布局，使内容垂直居中、水平居中 */
.data-add-container .add .layui-form-item {
display: flex;
align-items: center;
justify-content: center;
}
/* 数据添加容器内，layui表单面板中特定表单项的标签样式，去除默认外边距和边框，背景透明 */
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
margin: 0;
position: inherit;
background: transparent;
border: 0;
}
/* 数据添加容器内，layui表单输入块样式，设置为弹性布局，占据剩余空间 */
.data-add-container .add .layui-input-block {
margin: 0;
flex: 1;
}
/* 数据添加容器内，layui表单面板中特定表单项的内联输入样式，设置为弹性布局，占据剩余空间 */
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
margin: 0;
flex: 1;
display: flex;
}
</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"}'>
<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>
<body style="background: #EEEEEE; ">
<!-- Vue根容器，包含所有Vue相关元素和逻辑 -->
<div id="app">
<!-- 轮播图容器，使用layui的carousel组件，通过Vue动态样式绑定设置外观属性 -->
<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 class="data-add-container sub_borderColor" :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
<form class="layui-form layui-form-pane add" lay-filter="myForm">
0
<!-- 当前表的 -->
<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">
<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>
<!-- 数据添加容器，包含用户信息输入表单，通过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"}'>
<!-- layui表单，收集用户信息，设置表单过滤器myForm，用于表单验证等操作 -->
<form class="layui-form layui-form-pane add" lay-filter="myForm">
<!-- 用户账户输入项表单项，通过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"}'>
<!-- 表单标签，显示“账户：”文本，通过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>
<!-- 表单输入块，包含输入框，使用Vue双向绑定v - model将输入值与detail.username绑定，可根据ro.username设置只读属性 -->
<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">
</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"}' class="layui-form-label">
用户姓名：
</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"}'
</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"}' class="layui-form-label">
用户姓名：
</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">
</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"}' class="layui-form-label">
头像：
</label>
<div class="layui-input-block">
<div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;">
<img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto">
<input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
</div>
<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 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">
<!-- 如果detail.yonghuPhoto有值，显示头像图片和隐藏输入框，用于存储头像文件路径 -->
<div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;">
<img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto">
<input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
</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 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">
<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>
<!-- 用户手机号输入项表单项，设置layui表单验证规则phone（手机号格式验证）和required（必填项验证） -->
<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">
<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">
</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"}' class="layui-form-label">
用户身份证号：
</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"}'
</div>
<!-- 用户身份证号输入项表单项，设置layui表单验证规则identity（身份证号格式验证）和required（必填项验证） -->
<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">
<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">
</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"}' class="layui-form-label">
邮箱：
</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"}'
</div>
<!-- 用户邮箱输入项表单项，设置layui表单验证规则email（邮箱格式验证）和required（必填项验证） -->
<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">
<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">
</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"}' class="layui-form-label">
性别：
</label>
<div class="layui-input-block">
<select name="sexTypes" id="sexTypes" lay-filter="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>
</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"}' class="layui-form-label">
性别：
</label>
<div class="layui-input-block">
<!-- 下拉选择框，绑定数据为sexTypesList，通过lay - filter进行事件监听 -->
<select name="sexTypes" id="sexTypes" lay-filter="sexTypes">
<!-- 默认提示选项 -->
<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 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='{"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;">
<!-- 提交按钮，点击触发表单提交事件，通过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>
</form>
</div>
</div>
</form>
</div>
</div>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<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="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>
<!-- 地图 -->
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script>
var jquery = $;
var vue = new Vue({
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: '',
},
// 级联表的
<!-- 引入layui的核心脚本文件 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js库 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库脚本文件 -->
<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="../../modules/config.js"></script>
<!-- 引入工具方法脚本文件 -->
<script src="../../js/utils.js"></script>
<!-- 引入校验格式工具类脚本文件 -->
<script src="../../js/validate.js"></script>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="../../js/jquery.js"></script>
<!-- 引入高德地图API，设置版本和密钥 -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<!-- 引入bootstrap的脚本文件 -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- 引入bootstrap的地图定位选择器插件脚本文件 -->
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
// 下拉框
sexTypesList: [],
<script>
// 将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: {
},
methods: {
jump(url) {
jump(url)
}
// 下拉框数据数组
sexTypesList: [],
// 中心菜单数据
centerMenu: centerMenu
},
// 当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() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var laydate = layui.laydate;
var tinymce = layui.tinymce
// 加载layui的相关模块
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
// 获取layer模块，用于弹出层等操作
var layer = layui.layer;
// 获取element模块，用于操作页面元素
var element = layui.element;
// 获取carousel模块，用于轮播图操作
var carousel = layui.carousel;
// 获取http模块，用于发起HTTP请求
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.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
// 发起HTTP请求获取轮播图数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
// 如果返回数据列表不为空
if (res.data.list.length > 0) {
// 初始化轮播图数据数组
let swiperList = [];
// 遍历返回的数据列表
res.data.list.forEach(element => {
// 如果数据项的值不为空
if(element.value != null){
// 将数据项添加到轮播图数据数组中
swiperList.push({
img: element.value
});
}
});
// 更新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({
//绑定元素
elem: '#yonghuPhotoUpload',
//上传接口
url: http.baseurl + 'file/upload',
// 请求头
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
accept: 'images',
before: function () {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
// 初始化头像文件上传组件
upload.render({
// 绑定上传按钮元素
elem: '#yonghuPhotoUpload',
// 上传接口地址
url: http.baseurl + 'file/upload',
// 请求头，添加Token信息
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传的文件类型为图片
accept: 'images',
// 上传前的回调函数
before: function () {
// 显示加载层
var index = layer.load(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
});
},
// 上传成功
done: function (res) {
console.log(res);
layer.closeAll();
if (res.code == 0) {
layer.msg("上传成功", {
time: 2000,
icon: 6
})
var url = http.baseurl + 'upload/' + res.file;
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("请求接口异常", {
// 拼接头像文件的完整URL
var url = http.baseurl + 'upload/' + res.file;
// 设置隐藏输入框的值为头像文件的URL
jquery('#yonghuPhoto').val(url);
// 更新Vue实例中的头像数据
vue.detail.yonghuPhoto = url;
// 设置头像图片的src属性为头像文件的URL
jquery('#yonghuPhotoImg').attr('src', url);
} else {
// 弹出上传失败提示框
layer.msg(res.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为,小数最大两位'
]
});
// 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) {
data = data.field;
data["Id"]= localStorage.getItem("userid");
// 提交数据
http.requestJson('yonghu' + '/add', 'post', data, function (res) {
layer.msg('提交成功', {
time: 2000,
icon: 6
}, function () {
back();
});
// 监听表单提交事件
form.on('submit(thisSubmit)', function (data) {
// 获取表单数据
data = data.field;
// 从本地存储中获取用户ID并添加到表单数据中
data["Id"]= localStorage.getItem("userid");
// 发起JSON格式的HTTP请求提交用户信息
http.requestJson('yonghu' + '/add', 'post', data, function (res) {
// 弹出提交成功提示框
layer.msg('提交成功', {
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>
</html>

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

File diff suppressed because it is too large Load Diff

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

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

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

@ -1,23 +1,38 @@
<!DOCTYPE html>
<html>
<head lang="en">
<!-- 设置页面字符编码为UTF-8 -->
<meta charset="utf-8">
<!-- 页面标题 -->
<title>用户</title>
<!-- 页面关键词，用于搜索引擎优化 -->
<meta name="keywords" content=""/>
<!-- 页面描述，用于搜索引擎优化 -->
<meta name="description" content=""/>
<!-- 指定使用webkit内核渲染 -->
<meta name="renderer" content="webkit">
<!-- 兼容IE浏览器，使用最新渲染模式 -->
<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">
<!-- 引入layui框架样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义公共样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.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.SuperSlide.2.1.1.js"></script>
<!-- 引入Bootstrap框架样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入自定义主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after {
position: fixed;
top: 0;
@ -26,248 +41,93 @@
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; /* 背景图居中 */
}
/*轮播图相关 start*/
/* 轮播图容器样式，溢出隐藏 */
#swiper {
overflow: hidden;
}
/* 轮播图未激活指示器样式 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
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 {
width: 30px;
width: 30px; /* 加宽以区分当前页 */
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
}
/*轮播图相关 end*/
/*列表*/
/* 推荐内容区域样式 */
.recommend {
padding: 10px 0;
display: flex;
justify-content: center;
justify-content: center; /* 内容水平居中 */
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.recommend .box {
width: 1002px;
margin: 0 auto;
margin: 0 auto; /* 水平居中 */
}
/* 标题栏样式，弹性布局实现左右分隔 */
.recommend .box .title {
padding: 10px 5px;
display: flex;
justify-content: space-between;
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;
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 {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
padding: 5px;
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>
<body>
<!-- Vue实例挂载点 -->
<div id="app">
<!-- 轮播图区域 -->
<div class="banner">
<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>
<!-- 轮播图图片循环渲染，使用Vue的v-for指令 -->
<div v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
</div>
@ -275,242 +135,176 @@
</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="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='{"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 :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 class="title sub_backgroundColor sub_borderColor">
<span :style='{"fontSize":"18px"}'>用户</span>
<span>您现在的位置：用户</span>
</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"
: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"}'>
用户姓名
</div>
<input type="text" v-model="searchForm.yonghuName"
: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"}'
placeholder="用户姓名" autocomplete="off"
class="layui-input">
<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="lable"
: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"}'>
性别</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>搜索
<!-- 性别筛选下拉框 -->
<div class="item-list">
<div class="lable">性别</div>
<select v-model="searchForm.sexTypes">
<option value="">请选择</option>
<!-- 性别选项循环渲染，数据来自Vue的sexTypesList -->
<option v-for="item in sexTypesList" :key="item.codeIndex"
:value="item.codeIndex">{{ item.indexName }}</option>
</select>
</div>
<!-- 搜索按钮与添加按钮 -->
<button id="btn-search" type="button" class="layui-btn layui-btn-normal sub_backgroundColor"
@click="pageList">
<i class="layui-icon layui-icon-search"></i>搜索
</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>
</form>
</div>
</div>
<!-- 分页组件 -->
<div class="pager" id="pager" :style="{textAlign:'center'}"></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>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库 -->
<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="../../modules/config.js"></script>
<!-- 引入工具函数库 -->
<script src="../../js/utils.js"></script>
<script type="text/javascript">
// 初始化Vue实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
swiperList: [],
sexTypesList: [],
//查询条件
swiperList: [], // 轮播图数据
sexTypesList: [], // 性别选项列表
// 搜索条件对象
searchForm: {
page: 1
,limit: 8
,yonghuDelete: 1
,yonghuName: ""
,sexTypes: ""
page: 1, // 当前页码
limit: 8, // 每页显示数量
yonghuDelete: 1, // 逻辑删除状态（1:未删除）
yonghuName: "", // 用户名搜索关键词
sexTypes: "" // 性别筛选条件
},
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: {
dataList: [] // 用户列表数据
},
methods: {
// 权限校验方法
isAuth(tablename, button) {
return isFrontAuth(tablename, button);
}
,jump(url) {
jump(url);
}
,jumpCheck(url,check1,check2) {
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
layui.layer.msg("已经被删除", {
time: 2000,
icon: 2
});
return false;
return isFrontAuth(tablename, button); // 调用外部权限校验函数
},
// 页面跳转方法
jump(url) {
window.location.href = url; // 路由跳转
},
// 带条件的跳转方法（处理删除和下架状态）
jumpCheck(url, check1, check2) {
if (check1 === 2) { // 已删除
layer.msg("已经被删除", {time: 2000, icon: 2});
return;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
if (check2 === 2) { // 已下架
layer.msg("已经下架", {time: 2000, icon: 2});
return;
}
this.jump(url);
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var laydate = layui.laydate;
var tinymce = layui.tinymce;
window.jQuery = window.$ = jquery = layui.jquery;
layui.use(['layer', 'http', 'laypage', 'carousel'], function() {
var layer = layui.layer; // 弹出层组件
var http = layui.http; // HTTP请求工具
var laypage = layui.laypage; // 分页组件
var carousel = layui.carousel; // 轮播图组件
// 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) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.swiperList = res.data.list.map(item => ({img: item.value}));
// 初始化轮播图组件
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: true, // 自动播放
interval: 3000 // 切换间隔3秒
});
});
}
});
//当前表的 性别 字段 字典表查询
sexTypesSelect();
//当前表的 性别 字段 字典表查询方法
function sexTypesSelect() {
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 sexTypesSelect() {
http.request("dictionary/page?dicCode=sex_types", 'get', {}, function(res) {
if (res.code === 0) {
vue.sexTypesList = res.data.list; // 更新性别选项列表
}
});
function pageList() {
// 获取列表数据
http.request('yonghu/list', 'get', vue.searchForm, function (res) {
vue.dataList = res.data.list;
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: vue.searchForm.limit,
groups: 3,
layout: ["prev", "page", "next"],
jump: function (obj, first) {
vue.searchForm.page = obj.curr;//翻页
//首次不执行
if (!first) {
http.request('yonghu/list', 'get', vue.searchForm, function (res1) {
vue.dataList = res1.data.list;
})
}
}
sexTypesSelect(); // 初始化性别数据
// 分页列表加载函数
function pageList() {
http.request('yonghu/list', 'get', vue.searchForm, function(res) {
vue.dataList = res.data.list; // 更新列表数据
// 初始化分页组件
laypage.render({
elem: 'pager', // 分页容器ID
count: res.data.total, // 总记录数
limit: vue.searchForm.limit, // 每页数量
groups: 3, // 显示页码数量
layout: ["prev", "page", "next"], // 分页布局
jump: function(obj, first) {
if (!first) { // 非首次加载（用户点击分页）
vue.searchForm.page = obj.curr; // 更新当前页码
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 () {
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
});
$(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
};
</script>
</body>

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

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

Write Preview
Loading…
Cancel
Save