Skip to content

Commit 25cefd8

Browse files
logoovelogoove
committed
0
1 parent 48bf4f3 commit 25cefd8

File tree

8 files changed

+549
-2
lines changed

8 files changed

+549
-2
lines changed

‎weui/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ php.js所有方法在插件js方法中都有简单介绍,会不断增加;很多
3232

3333
### 更新日志
3434
![](https://img.shields.io/badge/Date-%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97-1)
35+
- 2021-12-21 v6.08 新增省市县乡镇街道四级选择,更新省市县,数据都是来自github最多那个省市县采集
3536
- 2021-6-7 v6.07 修复验证码可能导致在小内存机器上内存崩溃闪退程序.
3637
- 2021-5-30 v6.06 修复分页中计算数组或对象长度使用count,否则可能导致分页错误,length属性可以计算数组不能计算对象.
3738
- 2021-5-24 v6.05 修改分页中一些逻辑,错误,以及优化.

‎weui/db.db

0 Bytes
Binary file not shown.

‎weui/demo/pcas.html

+311
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>省市区镇四级联动</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
7+
<link rel="stylesheet" href="../css/weui.css"/>
8+
<link rel="stylesheet" href="../css/weuix.css"/>
9+
<script src="../js/zepto.min.js"></script>
10+
<script src="../js/pcas.js"></script>
11+
<style>
12+
.city-title{
13+
border: 1px solid #E2E2E2;
14+
padding: 5px 8px;
15+
color: #555;
16+
font-size: 16px;
17+
}
18+
.city-mask{
19+
background-color: rgba(0, 0, 0, 0.4);
20+
position: fixed;z-index: 500;
21+
bottom: 0;right: 0; left: 0;top: 0;
22+
display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
23+
-webkit-box-pack: center;-webkit-justify-content: center;
24+
-ms-flex-pack: center;justify-content: center;
25+
-webkit-box-align: center;-webkit-align-items: center;
26+
-ms-flex-align: center;align-items: center;
27+
font-size: 16px;
28+
}
29+
.city-select{
30+
position: fixed;
31+
font-size: 16px;
32+
bottom: 0;left: 0;
33+
width: 100%;height: 75%;overflow-y:auto;overflow-x: hidden;
34+
z-index: 1000; background-color: #fff;
35+
-webkit-transform: translate(0, 100%);transform: translate(0, 100%);-webkit-transition: -webkit-transform .3s;
36+
transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;
37+
}
38+
.city-select.brouce-in{
39+
-webkit-transform: translate(0, 0);transform: translate(0, 0);
40+
}
41+
.city-select-header{
42+
position: absolute;top: 0;left: 0;
43+
width: 100%;z-index: 1;
44+
}
45+
.city-select-title{
46+
width: 100%;text-align: center;
47+
height: 45px;line-height: 45px;position: relative;
48+
}
49+
.city-select-title:after {
50+
content: '';position: absolute;
51+
z-index: 0;bottom: 0;left: 0;width: 100%;height: 1px;
52+
border-bottom: 1px solid #B2B2B2;-webkit-transform: scaleY(0.5);
53+
transform: scaleY(0.5);-webkit-transform-origin: 0 100%;transform-origin: 0 100%;
54+
}
55+
.city-select-nav{
56+
width: 100%;padding-left: .2rem;overflow: hidden;
57+
display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
58+
}
59+
.city-select-nav > a {
60+
color: #222;display: block;
61+
height: 40px;line-height: 46px;text-decoration: none;
62+
padding: 0 .2rem;position: relative;
63+
margin-right: .15rem;white-space: nowrap;
64+
overflow: hidden;text-overflow: ellipsis;max-width: 40%;
65+
}
66+
.city-select-nav > a.crt {
67+
color: #07C160;
68+
}
69+
.city-select-nav > a.crt:after {
70+
content: '';
71+
width: 100%;height: 2px;
72+
background-color: #07C160;
73+
position: absolute;bottom: 0;left: 0;z-index: 2;
74+
}
75+
.city-select-content{
76+
height: 100%;padding-top: 85px;
77+
width: 100%;display: -webkit-box;display: -webkit-flex;
78+
display: -ms-flexbox;display: flex;
79+
}
80+
.city-select-content>.city-select-item{
81+
display: block;height: inherit;width: 25%;overflow-x: hidden;
82+
-webkit-box-flex: 0;-webkit-flex: 0 0 25%;-ms-flex: 0 0 25%;flex: 0 0 25%;
83+
overflow-y: auto;-webkit-overflow-scrolling: touch;
84+
background-color: #FFF;border-right: 1px solid #D9D9D9;
85+
}
86+
.city-select-item-box{
87+
width: 250%;height: inherit;
88+
display: block; padding: 0 .4rem;
89+
}
90+
.city-select-item-box > a {
91+
color: #333;height: 40px;line-height: 40px;
92+
overflow: hidden;
93+
display: -webkit-box;display: -webkit-flex;
94+
display: -ms-flexbox;display: flex;
95+
-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;
96+
align-items: center;width: 100%;position: relative;z-index: 1;
97+
}
98+
.city-select-item-box > a.crt {
99+
color: #07C160;
100+
}
101+
.city-select-item-box > a:before {
102+
content: '';
103+
position: absolute;
104+
z-index: 0;bottom: 0;left: 0;
105+
width: 100%;height: 1px;
106+
border-bottom: 1px solid #D9D9D9;
107+
-webkit-transform: scaleY(0.5);
108+
transform: scaleY(0.5);
109+
-webkit-transform-origin: 0 100%;
110+
transform-origin: 0 100%;
111+
}
112+
</style>
113+
</head>
114+
<body>
115+
<div class="page-hd">
116+
<h1 class="page-hd-title">
117+
四级联动省市县镇(街道/乡)
118+
</h1>
119+
<p class="page-hd-desc f-green">数据来自github排名第一的采集</p>
120+
</div>
121+
122+
<div class="city-title">请选择省市县街道(乡镇)</div>
123+
124+
<script>
125+
126+
function pcasLocation(className){
127+
this.cityBox = $("."+className); //获取元素
128+
this.chinaData = (new Location()).citys; //设置中国城市数据
129+
this.citys; //选中省份后获得下面的所有地级市数据
130+
this.areas; //选中地级市后获得下面的所有县级市数据
131+
this.streets; //选中县级市后获得下面的所有街镇数据
132+
this.address = Array(4); //四个长度的数组，存放地址选择的结果
133+
this.init();
134+
}
135+
pcasLocation.prototype={
136+
constructor: pcasLocation,
137+
138+
init:function(){
139+
this.defaultHtml(this.cityBox);
140+
this.defaultProvince(this.chinaData);
141+
142+
this.selected("province", 0, "city");
143+
this.selected("city", 1, "area");
144+
this.selected("area", 2, "street");
145+
this.selected("street", 3, "");
146+
147+
this.bind();
148+
},
149+
//1. 开始默认生成html
150+
defaultHtml:function(dom){
151+
let html = `
152+
<div class="city-select brouce-in">
153+
<div class="city-select-header">
154+
<p class="city-select-title">选择省市县街道(乡镇)</p>
155+
<div class="city-select-nav">
156+
<a id="province-nav" href="javascript:;" class="crt">请选择</a>
157+
<a id="city-nav" href="javascript:;" class=""></a>
158+
<a id="area-nav" href="javascript:;" class=""></a>
159+
<a id="street-nav" href="javascript:;" class=""></a>
160+
</div>
161+
</div>
162+
<ul class="city-select-content">
163+
<li class="city-select-item">
164+
<div id="province" class="city-select-item-box"></div>
165+
</li>
166+
<li class="city-select-item">
167+
<div id="city" class="city-select-item-box"></div>
168+
</li>
169+
<li class="city-select-item">
170+
<div id="area" class="city-select-item-box"></div>
171+
</li>
172+
<li class="city-select-item">
173+
<div id="street" class="city-select-item-box"></div>
174+
</li>
175+
</ul>
176+
</div>
177+
<div class="city-mask"></div>
178+
`;
179+
$("body").append(html);
180+
},
181+
//2. 默认加载省份数据
182+
defaultProvince:function(chinArr){
183+
let str = "";
184+
chinArr.forEach(function(e,i,arr){
185+
str += `
186+
<a title="${e.n}" code="${e.c}" href="javascript:;" >${e.n}</a>
187+
`;
188+
})
189+
$("#province").append(str);
190+
},
191+
//3. 省，地，县，街点击事件
192+
selected:function(idName, index, nextidName){
193+
let that = this;
194+
$("#"+idName).on("click","a",function(){
195+
//点击颜色变化
196+
$("#"+idName+" a").removeClass("crt");
197+
$(this).addClass("crt");
198+
let value = $(this).attr("title");
199+
//将选中的地址存放到数组中
200+
//先清空数组
201+
if(index == 0){
202+
that.address.forEach(function(e,i,arr){
203+
delete that.address[i];
204+
});
205+
}
206+
that.address[index] = value;
207+
that.loadAddress(that.address);
208+
$("#"+idName+"-nav").html(value);
209+
$(".city-select-nav a").removeClass("crt");
210+
$("#"+idName+"-nav").addClass("crt");
211+
let arrSelect;
212+
switch(index){
213+
case 0:
214+
arrSelect = that.getData(value, that.chinaData);
215+
break;
216+
case 1:
217+
arrSelect = that.getData(value, that.citys); //获取选中的地级市的全部数据
218+
break;
219+
case 2:
220+
arrSelect = that.getData(value, that.areas); //获取选中的县级市的全部数据
221+
break;
222+
default:
223+
arrSelect = 0;
224+
break;
225+
}
226+
if(that.findChildren(arrSelect)){
227+
$("#"+nextidName).empty();
228+
$("#"+nextidName).append(that.loadHtml(arrSelect).html);
229+
switch(index){
230+
case 0:
231+
that.citys = that.loadHtml(arrSelect).data; //获得子级全部数据
232+
break;
233+
case 1:
234+
that.areas = that.loadHtml(arrSelect).data; //获得子级全部数据
235+
break;
236+
default:
237+
that.streets = that.loadHtml(arrSelect).data; //获得子级全部数据
238+
break;
239+
}
240+
}else{
241+
$(".city-select").removeClass("brouce-in");
242+
$(".city-mask").css("display","none");
243+
}
244+
});
245+
},
246+
//4. 将获取到的结果加载到页面上
247+
loadAddress:function(arr){
248+
let result = arr[0];
249+
//判断后面是否为空，为空就不显示"-"
250+
arr.forEach(function(e,i,arr){
251+
if(i>0){
252+
if(e != undefined){
253+
result += "-";
254+
result += e;
255+
}
256+
}
257+
});
258+
$(".city-title").html(result);
259+
$(".city-title").css("color","#000");
260+
},
261+
//5. 点击地址选择框弹出模态框
262+
bind:function(){
263+
$(".city-title").on("click",function(){
264+
$(".city-select").addClass("brouce-in");
265+
$(".city-mask").css("display","block");
266+
});
267+
$(".city-mask").on("click",function(){
268+
$(".city-select").removeClass("brouce-in");
269+
$(".city-mask").css("display","none");
270+
});
271+
},
272+
//查找对象中是否有children属性
273+
findChildren:function(obj){
274+
for(var name in obj){
275+
if(obj.hasOwnProperty("h")){
276+
return true;
277+
}else{
278+
return false;
279+
}
280+
}
281+
},
282+
//根据父级数据加载对应的子级数据
283+
loadHtml:function(obj){
284+
let str = "";
285+
let data = obj.h;
286+
obj.h.forEach(function(e,i,arr){
287+
str += `
288+
<a title="${e.n}" code="${e.c}" href="javascript:;" class="">${e.n}</a>
289+
`;
290+
});
291+
return {"html":str , "data":data};
292+
},
293+
//根据code和子级全部数据,获得选中的完整数据
294+
getData:function(str,arr){
295+
let data;
296+
arr.forEach(function(e,i,arr){
297+
if(e.n == str){
298+
data = e;
299+
}
300+
});
301+
return data;
302+
}
303+
}
304+
var citySelect = new pcasLocation("city-title");
305+
$(function(){
306+
$(".city-select").removeClass("brouce-in");
307+
$(".city-mask").css("display","none");
308+
})
309+
</script>
310+
</body>
311+
</html>

‎weui/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -634,6 +634,12 @@ <h1 class="page-hd-title">
634634
</div>
635635
<div class="weui-cell__ft"></div>
636636
</a>
637+
<a class="weui-cell weui-cell_access" href="demo/pcas.html">
638+
<div class="weui-cell__bd">
639+
<p>省市县乡镇街道</p>
640+
</div>
641+
<div class="weui-cell__ft"></div>
642+
</a>
637643
</div>
638644

639645
</div>

‎weui/js/pcas.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎weui/js/picker.city.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎weui/js/picker.city1.js

+228
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎weui/php/ver

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
6.05|2021-05-24
1+
6.08|2021-12-21

0 commit comments

Comments
 (0)