Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
ee93f7e9 by 任超
Options

feat:预约设置选择区域模块的开发

1 parent 789d40ce
Expand all
Inline Side-by-side
Showing 37 changed files with 647 additions and 68 deletions
1 /* ------------------------公共头部和尾部css------------------------------------ */ 1 /* ------------------------公共头部和尾部css------------------------------------ */
2 /* layer confim */
3 .layui-layer-btn .layui-layer-btn0 {
4 background-color: #fff!important;
5 color: #333!important;
6 border: 1px solid #dedede!important;
7 }
8 .layui-layer-btn .layui-layer-btn1 {
9 border-color: #1E9FFF;
10 background-color: #1E9FFF;
11 color: #fff;
12 }
2 /* ----------------------公共样式-------------------------- */ 13 /* ----------------------公共样式-------------------------- */
3 .contentBox { 14 .contentBox {
4 width: 1200px; 15 width: 1200px;
......
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
68 <ul class="banner_title"> 68 <ul class="banner_title">
69 <li><a href="">查询档案</a></li> 69 <li><a href="">查询档案</a></li>
70 <li><a href="">进度查询</a></li> 70 <li><a href="">进度查询</a></li>
71 <li><a href="">在线预约</a></li> 71 <li><a href="./staticViews/yyxz/index.html">在线预约</a></li>
72 <li><a>网上预审</a></li> 72 <li><a>网上预审</a></li>
73 </ul> 73 </ul>
74 </div> 74 </div>
......
No preview for this file type
1 {"version":3,"sources":["main.js"],"names":["e","t","n","r","s","o","u","a","require","i","Error","f","exports","call","length","1","module","./global","2","global","$","window","this","self"],"mappings":"CAAA,QAAAA,GAAAC,EAAAC,EAAAC,GAAA,QAAAC,GAAAC,EAAAC,GAAA,IAAAJ,EAAAG,GAAA,CAAA,IAAAJ,EAAAI,GAAA,CAAA,GAAAE,GAAA,kBAAAC,UAAAA,OAAA,KAAAF,GAAAC,EAAA,MAAAA,GAAAF,GAAA,EAAA,IAAAI,EAAA,MAAAA,GAAAJ,GAAA,EAAA,MAAA,IAAAK,OAAA,uBAAAL,EAAA,KAAA,GAAAM,GAAAT,EAAAG,IAAAO,WAAAX,GAAAI,GAAA,GAAAQ,KAAAF,EAAAC,QAAA,SAAAZ,GAAA,GAAAE,GAAAD,EAAAI,GAAA,GAAAL,EAAA,OAAAI,GAAAF,EAAAA,EAAAF,IAAAW,EAAAA,EAAAC,QAAAZ,EAAAC,EAAAC,EAAAC,GAAA,MAAAD,GAAAG,GAAAO,QAAA,IAAA,GAAAH,GAAA,kBAAAD,UAAAA,QAAAH,EAAA,EAAAA,EAAAF,EAAAW,OAAAT,IAAAD,EAAAD,EAAAE,GAAA,OAAAD,KAAAW,GAAA,SAAAP,EAAAQ,EAAAJ,GACA,YACAJ,GAAA,cAGAS,WAAA,IAAAC,GAAA,SAAAV,EAAAQ,EAAAJ,IACA,SAAAO,GACA,YACA,IAAAC,GAAA,mBAAAC,QAAAA,OAAA,OAAA,mBAAAF,GAAAA,EAAA,OAAA,IACAC,GAAA,gBAGAP,KAAAS,KAAA,mBAAAC,MAAAA,KAAA,mBAAAF,QAAAA,qBACA","file":"main.min.js","sourcesContent":["'use strict';\nrequire('./global');\n\n"]}
...\ No newline at end of file ...\ No newline at end of file
1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 //监听导航点击
4 element.on('nav(demo)', function (elem) {
5 //console.log(elem)
6 layer.msg(elem.text());
7 });
8 });
9 //config的设置是全局的
10 layui.config({
11 base: './js/'
12 }).extend({ //设定模块别名
13 common: 'common'
14 });
15
16 layui.use(['form', 'common'], function () {
17 var common = layui.common,
18 form = layui.form;
19 //三级地址联动
20 common.showCity('province', 'city');
21
22 //区域选择
23 form.on('select(selectCity)', function (data) {
24 console.log(data)
25 return false;
26 });
27 //办事大厅
28 form.on('select(officehall)', function (data) {
29 let latitude= undefined
30 let longitude= undefined
31 let title= ''
32 if(data.value==1) {
33 latitude = 116.397469
34 longitude = 39.908821
35 title = '北京'
36 }else if(data.value==2){
37 latitude = 121.491119
38 longitude = 31.235172
39 title = '上海'
40 }else {
41 latitude = 120.21201
42 longitude = 30.2084
43 title = '杭州'
44 }
45
46 var point = new BMapGL.Point(latitude, longitude);
47 var infoWindow = new BMapGL.InfoWindow(title, opts);
48 map.openInfoWindow(infoWindow, point);
49 return false;
50 });
51
52 });
53
54 var geolocation = new BMap.Geolocation();
55 var gc = new BMap.Geocoder();
56 geolocation.getCurrentPosition(function (r) {
57 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
58 var pt = r.point;
59 gc.getLocation(pt, function (rs) {
60 var addComp = rs.addressComponents;
61 var province = addComp.province;
62 var city = addComp.city;
63 $('.Pselected').attr('data-area', province)
64 $('.Cselected').attr('data-area', city)
65 layui.use(['form', 'common'], function () {
66 var common = layui.common,
67 form = layui.form;
68 //三级地址联动
69 common.showCity('province', 'city');
70 })
71 })
72 }
73 else {
74 alert("定位失败");
75 }
76 }, { enableHighAccuracy: true });
77
78 var map = new BMapGL.Map('container');
79 var point = new BMapGL.Point(108.95309828, 34.2777999);
80 map.centerAndZoom(point, 15);
81 var opts = {
82 width: 100,
83 height: 60,
84 title: '办事大厅'
85 };
86 var infoWindow = new BMapGL.InfoWindow('雁塔区南二环西段', opts);
87 map.openInfoWindow(infoWindow, point);
...\ No newline at end of file ...\ No newline at end of file
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
1 <?xml version="1.0" standalone="no"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata>Generated by IcoMoon</metadata>
5 <defs>
6 <font id="raty" horiz-adv-x="512">
7 <font-face units-per-em="512" ascent="480" descent="-32" />
8 <missing-glyph horiz-adv-x="512" />
9 <glyph unicode="&#x20;" d="" horiz-adv-x="256" />
10 <glyph unicode="&#xe600;" d="M256 16c-114.88 0-208 93.12-208 208s93.12 208 208 208 208-93.12 208-208-93.12-208-208-208zM351.376 284.656c3.904 3.904 3.904 10.256 0 14.16l-21.248 21.232c-3.904 3.904-10.256 3.904-14.16 0l-60.176-60.176-60.176 60.176c-3.904 3.904-10.256 3.904-14.16 0l-21.248-21.232c-3.904-3.904-3.904-10.256 0-14.16l60.192-60.192-60.192-60.16c-3.904-3.904-3.904-10.256 0-14.16l21.248-21.248c3.904-3.904 10.256-3.904 14.16 0l60.176 60.192 60.176-60.192c3.904-3.904 10.256-3.904 14.16 0l21.248 21.248c3.904 3.904 3.904 10.256 0 14.16l-60.192 60.16 60.192 60.192z" />
11 <glyph unicode="&#xe601;" d="M256 16c-114.88 0-208 93.12-208 208s93.12 208 208 208 208-93.12 208-208-93.12-208-208-208zM256 384c-88.352 0-160-71.648-160-160s71.648-160 160-160c88.368 0 160 71.648 160 160s-71.632 160-160 160zM328.592 167.44l-16.224-16.224c-2.976-2.976-7.808-2.976-10.8 0l-45.92 45.92-45.92-45.92c-2.992-2.976-7.808-2.976-10.8 0l-16.224 16.224c-2.976 2.976-2.976 7.808 0 10.8l45.936 45.904-45.936 45.92c-2.976 2.992-2.976 7.824 0 10.816l16.224 16.208c2.992 2.992 7.808 2.992 10.8 0l45.92-45.92 45.92 45.92c2.992 2.992 7.824 2.992 10.8 0l16.224-16.208c2.976-2.992 2.976-7.824 0-10.816l-45.936-45.92 45.936-45.904c2.976-2.992 2.976-7.84 0-10.8z" />
12 <glyph unicode="&#xf005;" d="M475.428 290.572q0-6.286-7.428-13.714l-103.714-101.143 24.572-142.857q0.286-2 0.286-5.714 0-6-3-10.143t-8.714-4.143q-5.428 0-11.428 3.428l-128.286 67.428-128.286-67.428q-6.285-3.428-11.428-3.428-6 0-9 4.143t-3 10.143q0 1.714 0.572 5.714l24.572 142.857-104 101.143q-7.143 7.714-7.143 13.714 0 10.572 16 13.143l143.428 20.857 64.286 130q5.428 11.714 14 11.714t14-11.714l64.286-130 143.429-20.857q16-2.572 16-13.143z" horiz-adv-x="476" />
13 <glyph unicode="&#xf006;" d="M324.857 188.572l87.428 84.857-120.572 17.715-54 109.143-54-109.143-120.572-17.714 87.428-84.857-20.857-120.286 108 56.857 107.714-56.857zM475.428 290.572q0-6.286-7.428-13.714l-103.714-101.143 24.572-142.857q0.286-2 0.286-5.714 0-14.286-11.714-14.286-5.428 0-11.428 3.428l-128.286 67.428-128.286-67.428q-6.285-3.428-11.428-3.428-6 0-9 4.143t-3 10.143q0 1.714 0.572 5.714l24.572 142.857-104 101.143q-7.143 7.714-7.143 13.714 0 10.572 16 13.143l143.428 20.857 64.286 130q5.428 11.714 14 11.714t14-11.714l64.286-130 143.429-20.857q16-2.572 16-13.143z" horiz-adv-x="476" />
14 <glyph unicode="&#xf123;" d="M338.857 202l73.428 71.428-120.572 17.714-8.572 17.143-45.428 92v-275.143l16.857-8.857 90.857-48-17.143 101.428-3.428 18.857zM468 276.857l-103.714-101.143 24.572-142.857q1.428-9.428-1.714-14.714t-9.714-5.286q-4.857 0-11.428 3.428l-128.286 67.428-128.286-67.428q-6.572-3.428-11.428-3.428-6.572 0-9.715 5.286t-1.715 14.714l24.572 142.857-104 101.143q-9.143 9.143-6.572 17t15.428 9.857l143.429 20.857 64.286 130q5.714 11.714 14 11.714 8 0 14-11.714l64.286-130 143.429-20.857q12.857-2 15.428-9.857t-6.857-17z" horiz-adv-x="476" />
15 </font></defs></svg>
...\ No newline at end of file ...\ No newline at end of file
No preview for this file type
No preview for this file type
1 .cancel-on-png, .cancel-off-png, .star-on-png, .star-off-png, .star-half-png {
2 font-size: 2em;
3 }
4
5 @font-face {
6 font-family: "raty";
7 font-style: normal;
8 font-weight: normal;
9 src: url("fonts/raty.eot");
10 src: url("fonts/raty.eot?#iefix") format("embedded-opentype");
11 src: url("fonts/raty.svg#raty") format("svg");
12 src: url("fonts/raty.ttf") format("truetype");
13 src: url("fonts/raty.woff") format("woff");
14 }
15
16 .cancel-on-png, .cancel-off-png, .star-on-png, .star-off-png, .star-half-png {
17 -moz-osx-font-smoothing: grayscale;
18 -webkit-font-smoothing: antialiased;
19 font-family: "raty";
20 font-style: normal;
21 font-variant: normal;
22 font-weight: normal;
23 line-height: 1;
24 speak: none;
25 text-transform: none;
26 }
27
28 .cancel-on-png:before {
29 content: "\e600";
30 }
31
32 .cancel-off-png:before {
33 content: "\e601";
34 }
35
36 .star-on-png:before {
37 content: "\f005";
38 }
39
40 .star-off-png:before {
41 content: "\f006";
42 }
43
44 .star-half-png:before {
45 content: "\f123";
46 }
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
67 <div class="one_content contentBox"> 67 <div class="one_content contentBox">
68 <div class="layui-tab"> 68 <div class="layui-tab">
69 <ul class="layui-tab-title"> 69 <ul class="layui-tab-title">
70 <li class="layui-this">线上办理</li> 70 <li class="layui-this">网上申请</li>
71 <li>线下办理</li> 71 <li>在线预约</li>
72 </ul> 72 </ul>
73 <div class="layui-tab-content"> 73 <div class="layui-tab-content">
74 <div class="layui-tab-item layui-show"> 74 <div class="layui-tab-item layui-show">
......
1 .navigation_crumbs {
2 height: 45px;
3 }
4 .appointment_notice {
5 margin-top: 30px;
6 margin-bottom: 30px;
7 }
8 .app_progress li {
9 padding: 0 30px;
10 line-height: 40px;
11 background: #eee;
12 display: inline-block;
13 color: #fff;
14 position: relative;
15 color: black;
16 }
17 .app_progress li:after{
18 content: '';
19 display: block;
20 border-top: 20px solid #fff;
21 border-bottom: 20px solid #fff;
22 border-left: 12px solid #eee;
23 position: absolute;
24 right:0;
25 top: 0;
26 }
27 .active {
28 background-color: #1E9FFF!important;
29 color: #fff!important;
30 }
31 .app_progress li.active:after {
32 border-left-color: #1E9FFF;
33 }
34 .line {
35 width: 80px;
36 height: 0;
37 display: inline-block;
38 border-bottom: 2px dotted#dddddd;
39 margin-bottom: 4px;
40 }
41 .selectCity {
42 width: 1200px;
43 margin: 0 auto;
44 }
45 .selectCity h2 {
46 display: inline-block;
47 margin-right: 5px;
48 }
49 .area_list_content {
50 overflow: hidden;
51 margin-top: 20px;
52 width: 100%;
53 }
54 .area_list_content h2 {
55 display: inline-block;
56 float: left;
57 margin-right: 8px;
58 }
59 .selectCity .area_list {
60 width: 95%;
61 float: left;
62 }
63 .selectCity .area_list li {
64 display: inline-block;
65 width: 100px;
66 height: 32px;
67 border-radius: 3px;
68 background-color: #01AAED;
69 margin-right: 10px;
70 color: #fff;
71 text-align: center;
72 line-height: 32px;
73 margin-bottom: 10px;
74 }
75 .select_officehall {
76 width: 1200px;
77 margin: 0 auto;
78 margin-top: 10px;
79 }
80 .select_officehall h2 {
81 display: inline-block;
82 margin-right: 8px;
83 }
84 /* -----------------------------地图--------------------------------------- */
85 .map_content {
86 margin-top: 20px;
87 }
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <title>选择区域</title>
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8 <meta name="format-detection" content="telephone=no">
9 <meta name="renderer" content="webkit">
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
11 <meta http-equiv="Cache-Control" content="no-siteapp" />
12 <link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
13 <link rel='icon' href='favicon.ico' type='image/x-ico' />
14 <meta name="description" content="" />
15 <meta name="keywords" content="" />
16 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
17 <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
18 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
19 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
20 <link rel="stylesheet" type="text/css" href="./css/index.css">
21 </head>
22
23 <body>
24 <div class="main">
25 <div class="subject top-logo">
26 <div class="top_logo_content">
27 <h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台" /></a></h1>
28 <div class="top_logo_search">
29 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
30 autocomplete="off" class="layui-input">
31 <i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
32 </div>
33 <ul class="login">
34 <li>登录</li>
35 <li>注册</li>
36 </ul>
37 </div>
38 </div>
39 <div class="navigation">
40 <ul class="layui-nav layui-bg-blue" lay-filter="">
41 <li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
42 <li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
43 <li class="layui-nav-item"><a href="">业务办理</a></li>
44 <li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
45 <li class="layui-nav-item">
46 <a href="javascript:;">查验中心</a>
47 <dl class="layui-nav-child">
48 <!-- 二级菜单 -->
49 <dd><a href="">移动模块</a></dd>
50 <dd><a href="">后台模版</a></dd>
51 <dd><a href="">电商平台</a></dd>
52 </dl>
53 </li>
54 <li class="layui-nav-item"><a href="">在线缴费</a></li>
55 <li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
56 </ul>
57 </div>
58 <div class="navigation_crumbs">
59 <div class="contentBox">
60 <span class="layui-breadcrumb">
61 <a href="../../staticIndex.html">首页</a>
62 <a href="../grzx/index.html">个人中心</a>
63 <a><cite>我的预约</cite></a>
64 </span>
65 </div>
66 </div>
67 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
68 <div class="appointment_notice contentBox">
69 <ul class="app_progress">
70 <li>
71 <span>1</span>
72 预约须知
73 </li>
74 <div class="line"></div>
75 <li class="active">
76 <span>2</span>
77 选择区域
78 </li>
79 <div class="line"></div>
80 <li>
81 <span>3</span>
82 预约时间
83 </li>
84 <div class="line"></div>
85 <li>
86 <span>4</span>
87 预约结果
88 </li>
89 </ul>
90 </div>
91 <!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
92 <div class="selectCity">
93 <form class="layui-form">
94 <h2 class="title">省</h2>
95 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
96 <select name="province" class="Pselected" data-area="浙江省"" lay-filter=" province">
97 <option value="">选择省</option>
98 </select>
99 </div>
100 <h2>市</h2>
101 <div class="layui-inline selected layui-select-default">
102 <select name="city" class="Cselected" data-area="杭州市" lay-filter="selectCity">
103 <option value="">选择市</option>
104 </select>
105 </div>
106 </form>
107 <div class="area_list_content">
108 <h2>区</h2>
109 <ul class="area_list">
110 <li>新城区</li>
111 <li>新城区</li>
112 <li>新城区</li>
113 <li>新城区</li>
114 <li>新城区</li>
115 <li>新城区</li>
116 <li>新城区</li>
117 <li>新城区</li>
118 <li>新城区</li>
119 <li>新城区</li>
120 <li>新城区</li>
121 <li>新城区</li>
122 <li>新城区</li>
123 <li>新城区</li>
124 <li>新城区</li>
125 </ul>
126 </div>
127 </div>
128 <div class="select_officehall">
129 <form class="layui-form">
130 <h2>办事大厅</h2>
131 <div class="layui-inline">
132 <select name="officehall" lay-filter="officehall">
133 <option value="">选择办事大厅</option>
134 <option value="1">北京</option>
135 <option value="2">上海</option>
136 <option value="3">杭州</option>
137 </select>
138 </div>
139 </form>
140 </div>
141 <!-- ----------------------------------地图api--------------------------------------------------- -->
142 <div class="map_content contentBox">
143 <div id="container" style="width: 100%;height: 500px;"></div>
144 </div>
145 <!-- ----------------------------------内容模块end-------------------------------------------------- -->
146 <div class="footer">
147 <div class="system_service">
148 <ul class="">
149 <li>
150 <a href="">
151 <span>公示公告</span>
152 </a>
153 </li>
154 <li>
155 <a href="">
156 <span>法律法规</span>
157 </a>
158 </li>
159 <li>
160 <a href="">
161 <span>相应政策</span>
162 </a>
163 </li>
164 <li>
165 <a href="">
166 <span>下载服务</span>
167 </a>
168 </li>
169 <li>
170 <a href="">
171 <span>关于我们</span>
172 </a>
173 </li>
174 </ul>
175 </div>
176 <div class="subject">
177 <div class="footer_logo">
178 <a href="">
179 <img src="./../../staticImages/jiguan.png">
180 </a>
181 </div>
182 <ul>
183 <li>
184 西安市自然资源和规划局
185 </li>
186 <li>
187 电话：028-456465
188 </li>
189 <li>
190 地址：西安市丰城8路
191 </li>
192 <li>
193 网站标识吗：87987987
194 </li>
195 <li>
196 备案：陕IPC456465465
197 </li>
198 <li>
199 陕公网备案：456465465
200 </li>
201 </ul>
202 <ol>
203 <li>
204 <img src="./../../staticImages/code.png">
205 <p>扫描关注公众号</p>
206 </li>
207 <li>
208 <img src="./../../staticImages/code.png">
209 <p>扫描关注公众号</p>
210 </li>
211 </ol>
212 </div>
213 </div>
214 </div>
215 </body>
216
217 </html>
218 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
219 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
220 <script type="text/javascript" src="./js/city-picker.js"></script>
221 <script type="text/javascript" src="../../staticJs/xzqy.js"></script>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 /**
2 * @authors Mzong(mzong121491@gmail.com)
3 * @date 2019-01-18 11:15
4 * @requires layui
5 * @version $1.1.0$
6 */
7 layui.define("layer", function(exports){
8 //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
9 var $ = layui.jquery,
10 form = layui.form;
11 // 返回的对象
12 var returnObj = {
13 /**
14 * 省市县三级联动
15 *
16 * @param { string } [form] [form是layui.form对象]
17 * @param {string} [province] [省容器的name名字 ]
18 * eg:<select name="province">
19 * @param {string} [city] [省容器的name名字]
20 * @param {string} [district] [县容器的name名字]
21 * @return {undefined} [无返回值]
22 */
23 showCity: function(province, city, district) {
24 //AreaData是地址传过来的json对象
25 var AreaData = $.rawCitiesData;
26 // console.log(999, AreaData) // 接口请求数据
27 if("undefined" == typeof AreaData) {
28 layer.open({
29 title: '系统提示'
30 ,content: '调用showCity之前请引入地址数据'
31 });
32 return;
33 }
34 var htmlProvince = '',
35 htmlCity = '',
36 htmlDistrict = '',
37 cityData = '',
38 districtData = '',
39 $province = $('select[name='+province+']'),
40 $city = $('select[name='+city+']'),
41 $district = $('select[name='+district+']'),
42 provVal = $province.attr('data-area') || '', // 省默认值
43 cityVal = $city.attr('data-area') || '', // 市默认值
44 distVal = $district.attr('data-area') || ''; // 县默认值
45 $province.find('option').not(':first').remove();
46 $city.find('option').not(':first').remove();
47 $district.find('option').not(':first').remove();
48 form.render('select');
49
50 // 加载省数据
51 loadProvince();
52 function loadProvince() {
53 AreaData.forEach(function(v, i) {
54 htmlProvince += '<option value='+v.code+'>'+v.name+'</option>';
55 });
56 $province.append(htmlProvince);
57
58 // 默认选中省
59 defaultSelect($province, provVal, function(code) {
60 cityData = findPlace(AreaData, code);
61 loadCity(cityData, true);
62 });
63
64 form.render('select');
65
66 }
67
68 // 加载城市数据
69 function loadCity(city, hasDefault) {
70 $city.find('option').not(':first').remove();
71 htmlCity = '';
72 var city = city || [];
73 city.forEach(function(v, i) {
74 htmlCity += '<option value='+v.code+'>'+v.name+'</option>';
75 });
76 $city.append(htmlCity);
77
78 // 默认加载才执行，手动选中不执行
79 if (hasDefault) {
80 // 默认选中城市
81 defaultSelect($city, cityVal, function(code) {
82 // console.log(code)
83 // 加载默认城市数据
84 districtData = findPlace(cityData, code);
85 loadDistrict(districtData, true);
86 });
87 }
88
89 form.render('select');
90 }
91
92 // 加载县数据
93 function loadDistrict(districtData, hasDefault) {
94 $district.find('option').not(':first').remove();
95 htmlDistrict = '';
96 var districtData = districtData || [];
97 districtData.forEach(function(v, i) {
98 htmlDistrict += '<option value='+v.code+'>'+v.name+'</option>';
99 });
100 $district.append(htmlDistrict);
101
102 if (hasDefault) {
103 // 默认选中县
104 defaultSelect($district, distVal);
105 }
106
107 form.render('select');
108 }
109
110 // 查找地点数据
111 function findPlace(data, code) {
112 var resData = [];
113 data.forEach(function(v, i) {
114 if (v.code === code) {
115 resData = v.sub
116 }
117 });
118
119 return resData;
120 }
121
122 /*
123 * 查找默认选中项
124 * @param {object} jq元素
125 * @param {string} 默认值
126 * @param {function} 回调函数
127 */
128 function defaultSelect($el, SelectVal, callback) {
129 $('option', $el).each(function(i, el) {
130 var $this = $(this);
131 var optVal = $this.html();
132 var code;
133 if (optVal == SelectVal) {
134 $this.attr("selected", true);
135 code = $this.val();
136 // 加载默认城市数据
137 callback && callback(code);
138 }
139 });
140 }
141
142 // 省选择
143 form.on('select('+province+')', function(data) {
144 var code = data.value;
145 // console.log(data.elem); //得到select原始DOM对象
146 // console.log(code); //得到被选中的值
147 if (code != '') {
148
149 cityData = findPlace(AreaData, code);
150
151 loadCity(cityData);
152 loadDistrict();
153
154 } else {
155 loadCity();
156 loadDistrict();
157 }
158 // console.log(data.othis); //得到美化后的DOM对象
159 });
160 // 市选择
161 form.on('select('+city+')', function(data){
162 var code = data.value;
163 if (code != '') {
164
165 districtData = findPlace(cityData, code);
166
167 loadDistrict(districtData);
168 // console.log(data.elem); //得到select原始DOM对象
169 } else {
170 loadDistrict();
171 }
172 // console.log(data.othis); //得到美化后的DOM对象
173 });
174 form.on('select('+district+')', function(data){
175 // console.log(data.elem); //得到select原始DOM对象
176 // console.log(data.value); //得到被选中的值
177 // console.log(data.othis); //得到美化后的DOM对象
178 });
179 },
180 /**
181 * 获取省市县数据
182 *
183 * @param { object } [address] [address eg:广东省广州市天河区]
184 * @return {object} [address][根据code码返回地址名称]
185 */
186 getCity: function(address) {
187 //AreaData是地址传过来的json对象
188 var AreaData = $.rawCitiesData;
189 if("undefined" == typeof AreaData) {
190 layer.open({
191 title: '系统提示'
192 ,content: '调用getCity之前请引入地址数据'
193 });
194 return;
195 }
196 var province = address.province,
197 city = address.city,
198 district = address.district,
199 provinceName = '',
200 cityName = '',
201 districtName = '';
202
203 function findIndex(arr, target) {
204 return arr.findIndex(function(v, i) {
205 return target == v.code;
206 })
207 }
208
209 if (province) {
210 var findProvinceIndex = findIndex(AreaData, province);
211 provinceName = AreaData[findProvinceIndex].name;
212 }
213
214 if (province && city) {
215 var findCityIndex = findIndex(AreaData[findProvinceIndex].sub, city);
216 cityName = AreaData[findProvinceIndex].sub[findCityIndex].name;
217 }
218
219 if (province && city && district) {
220 var findDistrictIndex = findIndex(AreaData[findProvinceIndex].sub[findCityIndex].sub, district);
221
222 districtName = AreaData[findProvinceIndex].sub[findCityIndex].sub[findDistrictIndex].name;
223 }
224
225 return {
226 provinceName: provinceName,
227 cityName: cityName,
228 districtName: districtName
229 }
230 }
231 }
232
233 // exports module
234 exports('common', returnObj);
235 });
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <html lang="en"> 2 <html lang="en">
3 3
4 <head> 4 <head>
5 <title>个人中心</title> 5 <title>预约须知</title>
6 <meta charset="UTF-8"> 6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8 <meta name="format-detection" content="telephone=no"> 8 <meta name="format-detection" content="telephone=no">
...@@ -235,9 +235,9 @@ ...@@ -235,9 +235,9 @@
235 title: '真实准确的承诺', 235 title: '真实准确的承诺',
236 btn: ['不同意', '同意进入下一步'] //按钮 236 btn: ['不同意', '同意进入下一步'] //按钮
237 }, function () { 237 }, function () {
238 238 layer.closeAll();
239 }, function () { 239 }, function () {
240 240 window.location.href = "../xzqy/index.html";
241 }); 241 });
242 }); 242 });
243 } 243 }
......