Skip to content

Commit

Permalink
0
Browse files Browse the repository at this point in the history
  • Loading branch information
logoove committed Dec 21, 2021
1 parent 48bf4f3 commit 25cefd8
Show file tree
Hide file tree
Showing 8 changed files with 549 additions and 2 deletions.
1 change: 1 addition & 0 deletions weui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ php.js所有方法在插件js方法中都有简单介绍,会不断增加;很多

### 更新日志
![](https://img.shields.io/badge/Date-%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97-1)
- 2021-12-21 v6.08 新增省市县乡镇街道四级选择,更新省市县,数据都是来自github最多那个省市县采集
- 2021-6-7 v6.07 修复验证码可能导致在小内存机器上内存崩溃闪退程序.
- 2021-5-30 v6.06 修复分页中计算数组或对象长度使用count,否则可能导致分页错误,length属性可以计算数组不能计算对象.
- 2021-5-24 v6.05 修改分页中一些逻辑,错误,以及优化.
Expand Down
Binary file modified weui/db.db
Binary file not shown.
311 changes: 311 additions & 0 deletions weui/demo/pcas.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,311 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区镇四级联动</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="../css/weui.css"/>
<link rel="stylesheet" href="../css/weuix.css"/>
<script src="../js/zepto.min.js"></script>
<script src="../js/pcas.js"></script>
<style>
.city-title{
border: 1px solid #E2E2E2;
padding: 5px 8px;
color: #555;
font-size: 16px;
}
.city-mask{
background-color: rgba(0, 0, 0, 0.4);
position: fixed;z-index: 500;
bottom: 0;right: 0; left: 0;top: 0;
display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
-webkit-box-pack: center;-webkit-justify-content: center;
-ms-flex-pack: center;justify-content: center;
-webkit-box-align: center;-webkit-align-items: center;
-ms-flex-align: center;align-items: center;
font-size: 16px;
}
.city-select{
position: fixed;
font-size: 16px;
bottom: 0;left: 0;
width: 100%;height: 75%;overflow-y:auto;overflow-x: hidden;
z-index: 1000; background-color: #fff;
-webkit-transform: translate(0, 100%);transform: translate(0, 100%);-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;
}
.city-select.brouce-in{
-webkit-transform: translate(0, 0);transform: translate(0, 0);
}
.city-select-header{
position: absolute;top: 0;left: 0;
width: 100%;z-index: 1;
}
.city-select-title{
width: 100%;text-align: center;
height: 45px;line-height: 45px;position: relative;
}
.city-select-title:after {
content: '';position: absolute;
z-index: 0;bottom: 0;left: 0;width: 100%;height: 1px;
border-bottom: 1px solid #B2B2B2;-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);-webkit-transform-origin: 0 100%;transform-origin: 0 100%;
}
.city-select-nav{
width: 100%;padding-left: .2rem;overflow: hidden;
display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
}
.city-select-nav > a {
color: #222;display: block;
height: 40px;line-height: 46px;text-decoration: none;
padding: 0 .2rem;position: relative;
margin-right: .15rem;white-space: nowrap;
overflow: hidden;text-overflow: ellipsis;max-width: 40%;
}
.city-select-nav > a.crt {
color: #07C160;
}
.city-select-nav > a.crt:after {
content: '';
width: 100%;height: 2px;
background-color: #07C160;
position: absolute;bottom: 0;left: 0;z-index: 2;
}
.city-select-content{
height: 100%;padding-top: 85px;
width: 100%;display: -webkit-box;display: -webkit-flex;
display: -ms-flexbox;display: flex;
}
.city-select-content>.city-select-item{
display: block;height: inherit;width: 25%;overflow-x: hidden;
-webkit-box-flex: 0;-webkit-flex: 0 0 25%;-ms-flex: 0 0 25%;flex: 0 0 25%;
overflow-y: auto;-webkit-overflow-scrolling: touch;
background-color: #FFF;border-right: 1px solid #D9D9D9;
}
.city-select-item-box{
width: 250%;height: inherit;
display: block; padding: 0 .4rem;
}
.city-select-item-box > a {
color: #333;height: 40px;line-height: 40px;
overflow: hidden;
display: -webkit-box;display: -webkit-flex;
display: -ms-flexbox;display: flex;
-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;
align-items: center;width: 100%;position: relative;z-index: 1;
}
.city-select-item-box > a.crt {
color: #07C160;
}
.city-select-item-box > a:before {
content: '';
position: absolute;
z-index: 0;bottom: 0;left: 0;
width: 100%;height: 1px;
border-bottom: 1px solid #D9D9D9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
</style>
</head>
<body>
<div class="page-hd">
<h1 class="page-hd-title">
四级联动省市县镇(街道/乡)
</h1>
<p class="page-hd-desc f-green">数据来自github排名第一的采集</p>
</div>

<div class="city-title">请选择省市县街道(乡镇)</div>

<script>

function pcasLocation(className){
this.cityBox = $("."+className); //获取元素
this.chinaData = (new Location()).citys; //设置中国城市数据
this.citys; //选中省份后获得下面的所有地级市数据
this.areas; //选中地级市后获得下面的所有县级市数据
this.streets; //选中县级市后获得下面的所有街镇数据
this.address = Array(4); //四个长度的数组,存放地址选择的结果
this.init();
}
pcasLocation.prototype={
constructor: pcasLocation,

init:function(){
this.defaultHtml(this.cityBox);
this.defaultProvince(this.chinaData);

this.selected("province", 0, "city");
this.selected("city", 1, "area");
this.selected("area", 2, "street");
this.selected("street", 3, "");

this.bind();
},
//1. 开始默认生成html
defaultHtml:function(dom){
let html = `
<div class="city-select brouce-in">
<div class="city-select-header">
<p class="city-select-title">选择省市县街道(乡镇)</p>
<div class="city-select-nav">
<a id="province-nav" href="javascript:;" class="crt">请选择</a>
<a id="city-nav" href="javascript:;" class=""></a>
<a id="area-nav" href="javascript:;" class=""></a>
<a id="street-nav" href="javascript:;" class=""></a>
</div>
</div>
<ul class="city-select-content">
<li class="city-select-item">
<div id="province" class="city-select-item-box"></div>
</li>
<li class="city-select-item">
<div id="city" class="city-select-item-box"></div>
</li>
<li class="city-select-item">
<div id="area" class="city-select-item-box"></div>
</li>
<li class="city-select-item">
<div id="street" class="city-select-item-box"></div>
</li>
</ul>
</div>
<div class="city-mask"></div>
`;
$("body").append(html);
},
//2. 默认加载省份数据
defaultProvince:function(chinArr){
let str = "";
chinArr.forEach(function(e,i,arr){
str += `
<a title="${e.n}" code="${e.c}" href="javascript:;" >${e.n}</a>
`;
})
$("#province").append(str);
},
//3. 省,地,县,街点击事件
selected:function(idName, index, nextidName){
let that = this;
$("#"+idName).on("click","a",function(){
//点击颜色变化
$("#"+idName+" a").removeClass("crt");
$(this).addClass("crt");
let value = $(this).attr("title");
//将选中的地址存放到数组中
//先清空数组
if(index == 0){
that.address.forEach(function(e,i,arr){
delete that.address[i];
});
}
that.address[index] = value;
that.loadAddress(that.address);
$("#"+idName+"-nav").html(value);
$(".city-select-nav a").removeClass("crt");
$("#"+idName+"-nav").addClass("crt");
let arrSelect;
switch(index){
case 0:
arrSelect = that.getData(value, that.chinaData);
break;
case 1:
arrSelect = that.getData(value, that.citys); //获取选中的地级市的全部数据
break;
case 2:
arrSelect = that.getData(value, that.areas); //获取选中的县级市的全部数据
break;
default:
arrSelect = 0;
break;
}
if(that.findChildren(arrSelect)){
$("#"+nextidName).empty();
$("#"+nextidName).append(that.loadHtml(arrSelect).html);
switch(index){
case 0:
that.citys = that.loadHtml(arrSelect).data; //获得子级全部数据
break;
case 1:
that.areas = that.loadHtml(arrSelect).data; //获得子级全部数据
break;
default:
that.streets = that.loadHtml(arrSelect).data; //获得子级全部数据
break;
}
}else{
$(".city-select").removeClass("brouce-in");
$(".city-mask").css("display","none");
}
});
},
//4. 将获取到的结果加载到页面上
loadAddress:function(arr){
let result = arr[0];
//判断后面是否为空,为空就不显示"-"
arr.forEach(function(e,i,arr){
if(i>0){
if(e != undefined){
result += "-";
result += e;
}
}
});
$(".city-title").html(result);
$(".city-title").css("color","#000");
},
//5. 点击地址选择框弹出模态框
bind:function(){
$(".city-title").on("click",function(){
$(".city-select").addClass("brouce-in");
$(".city-mask").css("display","block");
});
$(".city-mask").on("click",function(){
$(".city-select").removeClass("brouce-in");
$(".city-mask").css("display","none");
});
},
//查找对象中是否有children属性
findChildren:function(obj){
for(var name in obj){
if(obj.hasOwnProperty("h")){
return true;
}else{
return false;
}
}
},
//根据父级数据加载对应的子级数据
loadHtml:function(obj){
let str = "";
let data = obj.h;
obj.h.forEach(function(e,i,arr){
str += `
<a title="${e.n}" code="${e.c}" href="javascript:;" class="">${e.n}</a>
`;
});
return {"html":str , "data":data};
},
//根据code和子级全部数据,获得选中的完整数据
getData:function(str,arr){
let data;
arr.forEach(function(e,i,arr){
if(e.n == str){
data = e;
}
});
return data;
}
}
var citySelect = new pcasLocation("city-title");
$(function(){
$(".city-select").removeClass("brouce-in");
$(".city-mask").css("display","none");
})
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions weui/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,12 @@ <h1 class="page-hd-title">
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access" href="demo/pcas.html">
<div class="weui-cell__bd">
<p>省市县乡镇街道</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>

</div>
Expand Down
1 change: 1 addition & 0 deletions weui/js/pcas.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion weui/js/picker.city.js

Large diffs are not rendered by default.

228 changes: 228 additions & 0 deletions weui/js/picker.city1.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion weui/php/ver
Original file line number Diff line number Diff line change
@@ -1 +1 @@
6.05|2021-05-24
6.08|2021-12-21

0 comments on commit 25cefd8

Please sign in to comment.