Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
62e57b1c by 焦小希
Options

登陆页面 在线预约接口的开发

1 parent 8c7fac79
Inline Side-by-side
Showing 7 changed files with 168 additions and 31 deletions
......@@ -315,3 +315,70 @@ div.footer .system_service ul li a:hover {
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144,147,153,.5);
}
/* 登陆样式 by jxx */
.PersonLogin{
cursor: pointer;
}
.loginINfo {
padding: 50px 50px;
}
.loginINfo ul {
margin-bottom: 15px;
}
.loginINfo ul li {
color: rgb(44, 41, 41);
margin-bottom: 10px;
}
.loginINfo ul li span{
font-size: 16px!important;
width: 80px;
display: inline-block;
text-align-last: justify;
}
.loginINfo h3 {
display: inline-block;
font-size: 16px;
font-weight: 600;
}
.require{
color:red
}
.requireInfo{
color: red;
margin-left:95px;
font-size: 12px;
display: none
}
.btns{
display: flex;
justify-content: center;
}
#loginButton{
margin-right: 30px;
cursor: pointer;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
transition: .1s;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
}
#registerButton{
margin-right: 30px;
cursor: pointer;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
transition: .1s;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
}
......
......@@ -27,6 +27,10 @@
margin: 0 auto;
margin-top: 50px;
}
.active2 {
color: #006CFF!important;
border-color: #006CFF!important;
}
.selectCity h2 {
display: inline-block;
margin-right: 5px;
......@@ -82,7 +86,7 @@
margin-top: 20px!important;
}
.office_halls {
width: 15%;
width: 190px;
float: left;
margin-right: 2%;
}
......@@ -93,7 +97,7 @@
line-height: 16px;
}
.office_halls li{
width: 150px;
width: 170px;
height: 48px;
background: #FFFFFF;
border-radius: 4px;
......
......@@ -17,6 +17,7 @@ document.writeln(" <meta name=\'Keywords\' content=\'\' />");
document.writeln(" <link rel=\'stylesheet\' type=\'text/css\' href=\'"+localhostPaht+"/staticLib/layui/css/layui.css\' />");
document.writeln(" <link type=\'text/css\' rel=\'stylesheet\' href=\'"+localhostPaht+"/staticCss/common.css\' />");
document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticLib/jquery/jquery.min.js\'></script>");
document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/login.js\'></script>");
document.writeln("</head>");
document.writeln("");
document.writeln("<body>");
......@@ -36,7 +37,7 @@ document.writeln(" <li>");
document.writeln(" <a href=\'"+localhostPaht+"/staticViews/grzx.html\'>个人中心</a>");
document.writeln(" </li>");
document.writeln(" <li>");
document.writeln(" <a href=\'"+localhostPaht+"/staticViews/register.html\'>注册</a>");
document.writeln(" <p class='PersonLogin'>登录</p>");
document.writeln(" </li>");
document.writeln(" </ul>");
document.writeln(" </div>");
......
function login(){
layui.use('layer', function () {
layer.open({
type: 1,
title: '登陆信息',
shadeClose: false,
area: ['500px', '320px'],
scrollbar: false,
skin: 'confimInfo',
content: '<div class="loginINfo">'
+ '<ul>'
+ '<li><span><a class="require">*</a>用户名</span>：<input id="userName"></li>'
+ '<li><span><a class="require">*</a>密码</span>：<input id="IDcard"></li>'
+ '</ul>'
+ '<div class="btns">'
+'<button type="button" id="loginButton">登陆</button>'
+'<button type="button" id="registerButton">注册</button></div>'
+ '</div>'
});
})
}
// 时间委托解决冒泡
$(document).off().on('click', 'p', function(){
　　//所执行的代码
login()
});
// 点击登陆的时候
$(document).on('click', '#loginButton', function(){
layer.closeAll()
});
// 点击注册的时候
$(document).on('click', '#registerButton', function(){
// layer.closeAll()
window.open(`${localhostPaht}/staticViews/register.html`,'_self')
});
\ No newline at end of file
......@@ -27,6 +27,7 @@ function register(formData) {
layer.msg('注册成功！');
})
window.open("../index.html","_self")
window.history.go(-1)
}
}
});
......
......@@ -7,7 +7,6 @@ $(function () {
$('.area_list li').click(function () {
$(".area_list li").removeClass("activeRegion")
$(this).addClass("activeRegion");
})
$(".single_input").on("click", function () {
......@@ -23,7 +22,6 @@ $(function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
......@@ -122,9 +120,10 @@ $(function () {
});
// 办事大厅点亮
$('.office_halls li').click(function () {
$('.office_halls li').removeClass('hallActive')
$(this).addClass('hallActive')
// $('.office_halls li').removeClass('hallActive')
// $(this).addClass('hallActive')
var index = $(this).index();
console.log(4444,index)
if (index == 1) {
point = new BMap.Point(108.95346, 34.265725);
map.openInfoWindow(infoWindow, point); // 开启信息窗口
......@@ -133,16 +132,62 @@ $(function () {
map.openInfoWindow(infoWindow1, point);
}
})
$(document).on("click", ".office_halls li", function (e) {
$(".office_halls li").removeClass("active2")
$(this).addClass("active2");
var index = $(this).index();
console.log(4444,index)
})
infoWindow.addEventListener('close', function (type, target, point) {
$('.office_halls li').eq(0).removeClass('hallActive')
})
infoWindow1.addEventListener('close', function (type, target, point) {
$('.office_halls li').eq(1).removeClass('hallActive')
})
$(document).on("click", ".area_list li", function (e) {
$(".area_list li").removeClass("active2")
$(this).addClass("active2");
workdata($(this).index())
})
// 初始化数据
_initData()
// 下一步
$('.nextButton').click(function(){
window.open("./yysj.html?halloffice="+halloffice+"","_self")
})
})
function _initData() {
var area_list = $(".area_list");
area_list.empty();
var li
$.ajax({
type: "get", //提交方式
url: portal.api_url + "/reserve/organization/queryAllOrganization?orgType="+1,//路径
dataType: "json",
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200 && result.data != null) {
workList = result.data[0].children[0].children
for (var i = 0; i < workList.length; i++) {
li = '<li data-id="' + workList[i].id + '">' + workList[i].name + '</li>';
area_list.append(li);
}
}
}
});
}
// 点击区域获取办事大厅的方法
function workdata(index){
var office_halls =$('.office_halls')
office_halls.empty()
var li
if(workList[index].children.length > 0){
for(var i=0;i<workList[index].children.length; i++){
li = '<li data-id="' + workList[index].children[i].id + '">' + workList[index].children[i].name + '</li>';
office_halls.append(li)
}
}
}
var data = { //数据
"workList": []
};
......
......@@ -65,13 +65,13 @@
<form class="layui-form">
<h2 class="title">省</h2>
<div class="layui-inline layui-select-default" style="margin-right: 10px;">
<select name="province" class="Pselected" data-area="浙江省"" lay-filter=" province">
<select name="province" class="Pselected" disabled data-area="浙江省"" lay-filter=" province">
<option value="">选择省</option>
</select>
</div>
<h2>市</h2>
<div class="layui-inline selected layui-select-default">
<select name="city" class="Cselected" data-area="杭州市" lay-filter="selectCity">
<select name="city" class="Cselected" disabled data-area="杭州市" lay-filter="selectCity">
<option value="">选择市</option>
</select>
</div>
......@@ -79,32 +79,14 @@
<div class="area_list_content">
<h2>区</h2>
<ul class="area_list">
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
<li>新城区</li>
</ul>
</div>
</div>
<!-- ----------------------------------地图api--------------------------------------------------- -->
<div class="map_content contentBox">
<ul class="office_halls">
<h2>请选择办事大厅</h2>
<li>大唐不夜城</li>
<li>南门永宁门</li>
</ul>
<div id="container" style="width: 80%;height: 500px;"></div>
<ul class="office_halls"></ul>
<div id="container" style="width: 80%;height: 500px;float: right;"></div>
</div>
<div class="footer_button">
<button type="button" class="layui-btn layui-btn-normal">
......