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

10

Browse Source
pull/8/head
cp 3 months ago
parent 6a7c1633b3
commit 0468267421
1 changed files with 356 additions and 419 deletions
Show Stats Download Patch File Download Diff File

775
src/main/resources/front/front/pages/yisheng/center.html
Unescape View File

@ -1,22 +1,25 @@
<!-- 个人中心 -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置字符编码为UTF-8 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 设置页面在不同设备上的显示效果 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面标题为个人中心 -->
<title>个人中心</title> <title>个人中心</title>
<!-- 引入Layui的CSS样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入element样式 --> <!-- 引入Element UI的CSS样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 样式 --> <!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="../../css/style.css" /> <link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） --> <!-- 引入主题样式文件 -->
<link rel="stylesheet" href="../../css/theme.css" /> <link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css --> <!-- 引入通用样式文件 -->
<link rel="stylesheet" href="../../css/common.css" /> <link rel="stylesheet" href="../../css/common.css" />
</head> </head>
<style> <style>
/* 设置页面背景样式 */
html::after { html::after {
position: fixed; position: fixed;
top: 0; top: 0;
@ -30,9 +33,11 @@
background-position: center; background-position: center;
z-index: -1; z-index: -1;
} }
/* 设置轮播图容器样式 */
#swiper { #swiper {
overflow: hidden; overflow: hidden;
} }
/* 设置轮播图指示器样式 */
#swiper .layui-carousel-ind li { #swiper .layui-carousel-ind li {
width: 20px; width: 20px;
height: 10px; height: 10px;
@ -43,6 +48,7 @@
background-color: #f7f7f7; background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255,0,0,.8); box-shadow: 0 0 6px rgba(255,0,0,.8);
} }
/* 设置轮播图当前指示器样式 */
#swiper .layui-carousel-ind li.layui-this { #swiper .layui-carousel-ind li.layui-this {
width: 30px; width: 30px;
height: 10px; height: 10px;
@ -51,7 +57,7 @@
border-color: rgba(0,0,0,.3); border-color: rgba(0,0,0,.3);
border-radius: 6px; border-radius: 6px;
} }
/* 设置标题容器样式 */
.index-title { .index-title {
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
@ -61,16 +67,20 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
/* 设置标题文字样式 */
.index-title span { .index-title span {
padding: 0 10px; padding: 0 10px;
line-height: 1.4; line-height: 1.4;
} }
/* 设置个人中心菜单容器样式 */
.center-container .layui-nav-tree { .center-container .layui-nav-tree {
width: 100%; width: 100%;
} }
/* 设置个人中心菜单样式 */
.center-container .layui-nav { .center-container .layui-nav {
position: inherit; position: inherit;
} }
/* 设置个人中心菜单项样式 */
.center-container .layui-nav-tree .layui-nav-item { .center-container .layui-nav-tree .layui-nav-item {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
@ -82,10 +92,12 @@
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
} }
/* 设置个人中心菜单选中条样式 */
.center-container .layui-nav-tree .layui-nav-bar { .center-container .layui-nav-tree .layui-nav-bar {
height: 44px !important; height: 44px !important;
opacity: 0 !important; opacity: 0 !important;
} }
/* 设置个人中心菜单当前选中项样式 */
.center-container .layui-nav-tree .layui-nav-item.layui-this { .center-container .layui-nav-tree .layui-nav-item.layui-this {
font-size: 16px; font-size: 16px;
color: rgba(17, 17, 17, 1); color: rgba(17, 17, 17, 1);
@ -93,6 +105,7 @@
border-style: solid; border-style: solid;
border-radius: 0; border-radius: 0;
} }
/* 设置个人中心菜单项悬停样式 */
.center-container .layui-nav-tree .layui-nav-item:hover { .center-container .layui-nav-tree .layui-nav-item:hover {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
@ -100,6 +113,7 @@
border-style: solid; border-style: solid;
border-radius: 0; border-radius: 0;
} }
/* 设置个人中心菜单项链接样式 */
.center-container .layui-nav-tree .layui-nav-item a { .center-container .layui-nav-tree .layui-nav-item a {
line-height: inherit; line-height: inherit;
height: auto; height: auto;
@ -107,18 +121,21 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
/* 设置右侧内容容器样式 */
.right-container { .right-container {
position: relative; position: relative;
} }
/* 设置右侧表单元素样式 */
.right-container .layui-form-item { .right-container .layui-form-item {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* 设置右侧表单输入框容器样式 */
.right-container .layui-input-block { .right-container .layui-input-block {
margin: 0; margin: 0;
flex: 1; flex: 1;
} }
/* 设置右侧输入框样式 */
.right-container .input .layui-input { .right-container .input .layui-input {
padding: 0 12px; padding: 0 12px;
height: 40px; height: 40px;
@ -129,6 +146,7 @@
background-color: #fff; background-color: #fff;
text-align: left; text-align: left;
} }
/* 设置右侧下拉框样式 */
.right-container .select .layui-input { .right-container .select .layui-input {
padding: 0 12px; padding: 0 12px;
height: 40px; height: 40px;
@ -139,6 +157,7 @@
background-color: #fff; background-color: #fff;
text-align: left; text-align: left;
} }
/* 设置右侧日期输入框样式 */
.right-container .date .layui-input { .right-container .date .layui-input {
padding: 0 12px; padding: 0 12px;
height: 40px; height: 40px;
@ -151,443 +170,361 @@
box-shadow: 0 0 0px rgba(255,0,0,.8); box-shadow: 0 0 0px rgba(255,0,0,.8);
text-align: left; text-align: left;
} }
/* 设置头部动画和样式 */
.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;} /* 设置特定头部样式 */
#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;} #plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;}
.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;} /* 设置头部标题样式 */
#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;} .header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;} /* 设置头部副标题样式 */
#category a.active::before {display: none;} .header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
#category a.active::after {display:none;} /* 设置分类菜单激活项样式 */
#category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;} #category a.active::before {display: none;}
#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;} /* 设置分类菜单激活项样式 */
#category li:last-child { border-bottom:none;} #category a.active::after {display:none;}
#category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;} /* 设置分类菜单激活项和悬停样式 */
#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } #category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
#category a.active::before {display: none;} /* 设置分类菜单项样式 */
#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;} #category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF; transition: 0.3s; transform-origin: bottom;} /* 设置分类菜单最后一项样式 */
#category li:hover ul li{width: 136px;} #category li:last-child { border-bottom:none;}
#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden; background-color: rgb(34, 73, 160); padding-left:0px;} /* 设置分类菜单链接样式 */
#category li ul li:hover a{ padding-left:0px; margin-left: 0px;} #category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
#category li:hover a{color:#fff} /* 设置分类菜单链接前伪元素样式 */
#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
/* 设置分类菜单激活项前伪元素样式 */
#category a.active::before {display: none;}
/* 设置分类菜单项悬停样式 */
#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
/* 设置分类菜单特定项样式 */
#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF; transition: 0.3s; transform-origin: bottom;}
/* 设置分类菜单项悬停时子项宽度 */
#category li:hover ul li{width: 136px;}
/* 设置分类菜单项悬停时子项链接样式 */
#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden; background-color: rgb(34, 73, 160); padding-left:0px;}
/* 设置分类菜单项悬停时子项链接悬停样式 */
#category li ul li:hover a{ padding-left:0px; margin-left: 0px;}
/* 设置分类菜单项悬停时链接样式 */
#category li:hover a{color:#fff}
</style> </style>
<body> <body>
<div id="app"> <!-- 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"}'> <!-- 轮播图 -->
<div carousel-item> <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 v-for="(item,index) in swiperList" :key="index"> <div carousel-item>
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" /> <!-- 循环渲染轮播图图片 -->
</div> <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>
<!-- 轮播图 -->
<!-- 标题 -->
<!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
<div class="line-container">
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
</div> -->
<!-- 标题 --> <!-- 标题 -->
<!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
<div class="line-container">
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
</div> -->
<!-- 标题 -->
<div class="center-container"> <!-- 个人中心容器 -->
<!-- 个人中心菜单 config.js--> <div class="center-container">
<div style=" width:auto; margin:-70px 10px 0px auto"> <!-- 个人中心菜单 config.js-->
<div class="header" id="plheader"> <div style=" width:auto; margin:-70px 10px 0px auto">
<p class="title">个人中心</p> <!-- 头部标题部分 -->
<p class="subtitle">USER / CENTER</p> <div class="header" id="plheader">
</div> <!-- 主标题 -->
<ul id="category"> <p class="title">个人中心</p>
<li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''"> <!-- 副标题 -->
<a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a> <p class="subtitle">USER / CENTER</p>
</li> </div>
</ul> <!-- 分类菜单 -->
</div> <!-- 个人中心菜单 --> <ul id="category">
<!-- 个人中心 --> <!-- 循环渲染菜单列表 -->
<div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'> <li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
<form class="layui-form"> <!-- 菜单项链接 -->
<!-- 主键 --> <a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
<input type="hidden" v-model="detail.id" name="id" id="id" /> </li>
<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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </ul>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> </div>
医生工号 <!-- 个人中心菜单 -->
</label> <!-- 个人中心 -->
<div class="layui-input-block input"> <div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
<input type="text" v-model="detail.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" lay-verify="required" placeholder="医生工号" autocomplete="off" class="layui-input"> <!-- 表单部分 -->
</div> <form class="layui-form">
<!-- 隐藏的主键输入框 -->
<input type="hidden" v-model="detail.id" name="id" id="id" />
<!-- 医生工号输入项 -->
<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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
医生工号
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 医生工号输入框 -->
<input type="text" v-model="detail.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" lay-verify="required" placeholder="医生工号" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 账户输入项 -->
账户 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block input"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<input type="text" v-model="detail.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input"> 账户
</div> </label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 账户输入框 -->
<input type="text" v-model="detail.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 医生名称输入项 -->
医生名称 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block input"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<input type="text" v-model="detail.yishengName" name="yishengName" id="yishengName" lay-verify="required" placeholder="医生名称" autocomplete="off" class="layui-input"> 医生名称
</div> </label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 医生名称输入框 -->
<input type="text" v-model="detail.yishengName" name="yishengName" id="yishengName" lay-verify="required" placeholder="医生名称" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 科室选择项 -->
科室 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block select"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<el-select v-model="detail.yishengTypes" filterable placeholder="请选择科室 Search111" style="border-color: var(--publicMainColor, #808080);" name="yishengTypes" id="yishengTypes"> 科室
<el-option </label>
v-for="(item,index) in yishengTypesList" <!-- 选择框容器 -->
v-bind:key="item.codeIndex" <div class="layui-input-block select">
:label="item.indexName" <!-- Element UI的选择框 -->
:value="item.codeIndex"> <el-select v-model="detail.yishengTypes" filterable placeholder="请选择科室 Search111" style="border-color: var(--publicMainColor, #808080);" name="yishengTypes" id="yishengTypes">
</el-option> <!-- 循环渲染科室选项 -->
</el-select> <el-option
</div> v-for="(item,index) in yishengTypesList"
v-bind:key="item.codeIndex"
:label="item.indexName"
:value="item.codeIndex">
</el-option>
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
职位
</label>
<!-- 选择框容器 -->
<div class="layui-input-block select">
<!-- Element UI的选择框 -->
<el-select v-model="detail.zhiweiTypes" filterable placeholder="请选择职位 Search111" style="border-color: var(--publicMainColor, #808080);" name="zhiweiTypes" id="zhiweiTypes">
<!-- 循环渲染职位选项 -->
<el-option
v-for="(item,index) in zhiweiTypesList"
v-bind:key="item.codeIndex"
:label="item.indexName"
:value="item.codeIndex">
</el-option>
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 职称输入项 -->
职位 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block select"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<el-select v-model="detail.zhiweiTypes" filterable placeholder="请选择职位 Search111" style="border-color: var(--publicMainColor, #808080);" name="zhiweiTypes" id="zhiweiTypes"> 职称
<el-option </label>
v-for="(item,index) in zhiweiTypesList" <!-- 输入框容器 -->
v-bind:key="item.codeIndex" <div class="layui-input-block input">
:label="item.indexName" <!-- 职称输入框 -->
:value="item.codeIndex"> <input type="text" v-model="detail.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" lay-verify="required" placeholder="职称" autocomplete="off" class="layui-input">
</el-option>
</el-select>
</div>
</div> </div>
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 医生头像显示项 -->
职称 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 隐藏标签 -->
<div class="layui-input-block input"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
<input type="text" v-model="detail.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" lay-verify="required" placeholder="职称" autocomplete="off" class="layui-input"> 医生头像
</div> </label>
<!-- 头像显示容器 -->
<div class="layui-input-block">
<!-- 医生头像图片 -->
<img id="yishengPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yishengPhoto">
<!-- 隐藏的头像路径输入框 -->
<input type="hidden" v-model="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label"> <!-- 医生头像上传按钮项 -->
医生头像 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 隐藏标签 -->
<div class="layui-input-block"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
<img id="yishengPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yishengPhoto"> 医生头像
<input type="hidden" v-model="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" /> </label>
</div> <!-- 上传按钮容器 -->
<div class="layui-input-block">
<!-- 上传按钮 -->
<button class="main_backgroundColor" :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"
id="yishengPhotoUpload">
<!-- 上传图标 -->
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传医生头像
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label"> <!-- 联系方式输入项 -->
医生头像 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<button class="main_backgroundColor" :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" 联系方式
id="yishengPhotoUpload"> </label>
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传医生头像 <!-- 输入框容器 -->
</button> <div class="layui-input-block input">
</div> <!-- 联系方式输入框 -->
<input type="text" v-model="detail.yishengPhone" name="yishengPhone" id="yishengPhone" lay-verify="required|phone" placeholder="联系方式" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 挂号须知输入项 -->
联系方式 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block input"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<input type="text" v-model="detail.yishengPhone" name="yishengPhone" id="yishengPhone" lay-verify="required|phone" placeholder="联系方式" autocomplete="off" class="layui-input"> 挂号须知
</div> </label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 挂号须知输入框 -->
<input type="text" v-model="detail.yishengGuahao" name="yishengGuahao" id="yishengGuahao" lay-verify="required" placeholder="挂号须知" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 邮箱输入项 -->
挂号须知 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block input"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<input type="text" v-model="detail.yishengGuahao" name="yishengGuahao" id="yishengGuahao" lay-verify="required" placeholder="挂号须知" autocomplete="off" class="layui-input"> 邮箱
</div> </label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 邮箱输入框 -->
<input type="text" v-model="detail.yishengEmail" name="yishengEmail" id="yishengEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> </div>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label"> <!-- 挂号价格输入项 -->
邮箱 <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
</label> <!-- 标签 -->
<div class="layui-input-block input"> <label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">挂号价格</label>
<input type="text" v-model="detail.yishengEmail" name="yishengEmail" id="yishengEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input"> <!-- 输入框容器 -->
</div> <div class="layui-input-inline input">
<!-- 挂号价格输入框，禁用状态 -->
<input type="number" v-model="detail.yishengNewMoney" name="yishengNewMoney" id="yishengNewMoney" placeholder="挂号价格" autocomplete="off" class="layui-input" disabled="disabled">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'> <!-- 充值提示和链接 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">挂号价格</label> <div class="layui-form-mid layui-word-aux">
<div class="layui-input-inline input"> <!-- 提示图标 -->
<input type="number" v-model="detail.yishengNewMoney" name="yishengNewMoney" id="yishengNewMoney" placeholder="挂号价格" autocomplete="off" class="layui-input" disabled="disabled"> <i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
</div> <!-- 充值链接 -->
<div class="layui-form-mid layui-word-aux"> <a id="btn-recharge" href="javascript:void(0)">点我充值</a>
<i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
<a id="btn-recharge" href="javascript:void(0)">点我充值</a>
</div>
</div> </div>
</div>
<div class="layui-form-item"> <!-- 表单提交和退出登录按钮 -->
<div class="layui-input-block" style="display: flex;flex-wrap:wrap;"> <div class="layui-form-item">
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button> <div class="layui-input-block" style="display: flex;flex-wrap:wrap;">
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button> <!-- 更新信息按钮 -->
</div> <button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button>
<!-- 退出登录按钮 -->
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
</div> </div>
</form> </div>
</div> </form>
<!-- 个人中心 -->
</div> </div>
<!-- 个人中心 -->
</div> </div>
<!-- layui --> </div>
<script src="../../layui/layui.js"></script>
<!-- vue --> <!-- 引入Layui的JS文件 -->
<script src="../../js/vue.js"></script> <script src="../../layui/layui.js"></script>
<!-- 引入element组件库 --> <!-- 引入Vue的JS文件 -->
<script src="../../xznstatic/js/element.min.js"></script> <script src="../../js/vue.js"></script>
<!-- 组件配置信息 --> <!-- 引入Element UI的JS文件 -->
<script src="../../js/config.js"></script> <script src="../../xznstatic/js/element.min.js"></script>
<!-- 扩展插件配置信息 --> <!-- 引入组件配置信息文件 -->
<script src="../../modules/config.js"></script> <script src="../../js/config.js"></script>
<!-- 工具方法 --> <!-- 引入扩展插件配置信息文件 -->
<script src="../../js/utils.js"></script> <script src="../../modules/config.js"></script>
<!-- 校验格式工具类 --> <!-- 引入工具方法文件 -->
<script src="../../js/validate.js"></script> <script src="../../js/utils.js"></script>
<!-- 引入校验格式工具类文件 -->
<script src="../../js/validate.js"></script>
<script> <script>
var vue = new Vue({ // 创建Vue实例
el: '#app', var vue = new Vue({
data: { // 挂载点
// 轮播图 el: '#app',
swiperList: [], // 数据部分
detail: { data: {
yishengUuidNumber: new Date().getTime(),//数字 // 轮播图数据
username: '', swiperList: [],
password: '', // 个人信息详情
yishengName: '', detail: {
yishengTypes: '',//数字 yishengUuidNumber: new Date().getTime(),//数字
yishengValue: '',//数字对应的值 username: '',
zhiweiTypes: '',//数字 password: '',
zhiweiValue: '',//数字对应的值 yishengName: '',
yishengZhichneg: '', yishengTypes: '',//数字
yishengPhoto: '', yishengValue: '',//数字对应的值
yishengPhone: '', zhiweiTypes: '',//数字
yishengGuahao: '', zhiweiValue: '',//数字对应的值
yishengEmail: '', yishengZhichneg: '',
yishengNewMoney: '', yishengPhoto: '',
yishengContent: '', yishengPhone: '',
createTime: '', yishengGuahao: '',
}, yishengEmail: '',
yishengTypesList: [], yishengNewMoney: '',
zhiweiTypesList: [], yishengContent: '',
centerMenu: centerMenu createTime: '',
}, },
updated: function() { // 科室列表
// layui.form.render(null, 'myForm'); yishengTypesList: [],
// 职位列表
zhiweiTypesList: [],
// 个人中心菜单数据
centerMenu: centerMenu
},
// 数据更新后的钩子函数
updated: function() {
// 重新渲染表单
// layui.form.render(null, 'myForm');
},
// 方法部分
methods: {
// 跳转页面方法
jump(url) {
jump(url)
}, },
methods: { // 退出登录方法
jump(url) { logout(){
jump(url) // 清除本地存储的登录信息
}, localStorage.removeItem('Token');
logout(){ localStorage.removeItem('role');
localStorage.removeItem('Token'); localStorage.removeItem('sessionTable');
localStorage.removeItem('role'); localStorage.removeItem('adminName');
localStorage.removeItem('sessionTable'); localStorage.removeItem('userid');
localStorage.removeItem('adminName'); localStorage.removeItem('userTable');
localStorage.removeItem('userid'); localStorage.removeItem('iframeUrl');
localStorage.removeItem('userTable'); // 跳转到登录页面
localStorage.removeItem('iframeUrl'); window.parent.location.href = '../login/login.html';
window.parent.location.href = '../login/login.html';
}
}
})
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], 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;
// 充值
jquery('#btn-recharge').click(function(e) {
layer.open({
type: 2,
title: '用户充值',
area: ['900px', '600px'],
content: '../recharge/recharge.html'
});
});
// 获取轮播图 数据
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'
});
})
}
});
// 查询字典表相关
// 科室的查询和初始化
yishengTypesSelect();
// 职位的查询和初始化
zhiweiTypesSelect();
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[0-9]{0,6}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
});
// 上传 文件/图片
// 医生头像的文件上传
var yishengPhotoUpload = upload.render({
//绑定元素
elem: '#yishengPhotoUpload',
//上传接口
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透明度的白色背景
});
},
// 上传成功
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;
vue.detail.yishengPhoto = url;
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
}
},
//请求异常回调
error: function() {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
}
});
// 查询用户信息
let table = localStorage.getItem("userTable");
if(!table){
layer.msg('请先登录', {
time: 2000,
icon: 5
}, function() {
window.parent.location.href = '../login/login.html';
});
} }
http.request(`yisheng/session`, 'get', {}, function(data) {
// 表单赋值
// form.val("myForm", data.data);
vue.detail = data.data
// 图片赋值
//jquery("#yishengPhotoImg").attr("src", data.data.yishengPhoto);
});
// 提交表单
form.on('submit(*)', function(data) {
data = vue.detail;
data['createTime']=jquery("#createTime").val();
http.requestJson(table + '/update', 'post', data, function(res) {
layer.msg('修改成功', {
time: 2000,
icon: 6
}, function() {
window.location.reload();
});
});
return false
});
});
// 日期框初始化
function dateTimePick(){
}
//科室的查询
function yishengTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=yisheng_types", "GET", {}, (res) => {
if(res.code == 0){
vue.yishengTypesList = res.data.list;
}
});
}
//职位的查询
function zhiweiTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
} }
})
</script> // 使用Layui的模块
</body> layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
</html> // 获取Layui的模块
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
Write Preview
Loading…
Cancel
Save