|
|
@@ -1,13 +1,170 @@
|
|
|
<template>
|
|
|
<div class="areaSelect">
|
|
|
<div class="lists">
|
|
|
+ <h2>选择区域</h2>
|
|
|
+ <div class="content">
|
|
|
+ <div class="search">
|
|
|
+ <el-input v-model="input" placeholder="搜索"></el-input>
|
|
|
+ </div>
|
|
|
<ul>
|
|
|
- <li>河南</li>
|
|
|
+ <li><span @click="selectCountry" :class="{active:isCountry}">全国</span></li>
|
|
|
+ <li v-for="(item,x) in filterArea" :key="item.id">
|
|
|
+ <h4> {{item[0].title}}</h4>
|
|
|
+ <div class="proviceList">
|
|
|
+ <div class="proviceItem" :class="{toggle:v.isToggle}" v-for="(v,y) in item[0].list" :key="v.id">
|
|
|
+ <h5><span @click="selectALL(v,x,y)" :class="v.checked"></span> <p @click="toggle(v,x,y)"><strong>{{v.name}}</strong> <i v-if="v.data.length>1" class="el-icon-arrow-down"></i></p></h5>
|
|
|
+ <div class="cityList" v-if="v.data.length >1" >
|
|
|
+ <span v-for="(city,i) in v.data" :key="i" :class="{active:city.status}" @click="selectCity(v,x,y,i)">
|
|
|
+ {{city.name}}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+<script>
|
|
|
+import chinaMapJSON from "@/assets/js/china_area.js";
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ initals:[ 'A','B','C','F','G','H','J','L','N','Q','S','T','X','Y','Z'],
|
|
|
+ newArea:null,
|
|
|
+ input:'',
|
|
|
+ citys:{
|
|
|
+ "安徽省":["合肥市","芜湖市"],
|
|
|
+ "北京市":[],
|
|
|
+ },
|
|
|
+ isCountry:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getProvince();
|
|
|
+
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ filterArea:function(){
|
|
|
+ let city_arr = JSON.parse(JSON.stringify(this.newArea));
|
|
|
+ if(this.newArea){
|
|
|
+ city_arr.forEach(item =>{
|
|
|
+ item[0].list.forEach(val =>{
|
|
|
+ let selectAll = []; //省份下选中的城市
|
|
|
+ Object.keys(this.citys).forEach(v =>{
|
|
|
+ if(v === val.name ){//省份名称一样，并且vales值为空
|
|
|
+ if(this.citys[v].length === 0){
|
|
|
+ val.isSelectAll = true;
|
|
|
+ val.data.forEach(city =>{
|
|
|
+ //遍历该城市改变状态选中
|
|
|
+ city.status = true;
|
|
|
+ selectAll.push('1');
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ val.isSelectAll = false;
|
|
|
+ //遍历该城市改变状态选中
|
|
|
+ val.data.forEach(city =>{
|
|
|
+ this.citys[v].forEach(s_city =>{
|
|
|
+ if(s_city == city.name){
|
|
|
+ city.status = true;
|
|
|
+ selectAll.push('1');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //判断省会下的城市全部选中、部分选中、没有选中
|
|
|
+ if(val.data.length === selectAll.length){
|
|
|
+ val.checked = "selectAll" //全选
|
|
|
+ }else if(selectAll.length === 0){
|
|
|
+ val.checked = ""; //没有选中
|
|
|
+ }else{
|
|
|
+ val.checked = "selectHalf";//部分选中
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(city_arr,"sss")
|
|
|
+ return city_arr;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //获取省、市
|
|
|
+ getProvince(){
|
|
|
+ let newArea = [];
|
|
|
+ chinaMapJSON.forEach((v,i) =>{
|
|
|
+ this.initals.forEach((inital,x) =>{
|
|
|
+ if(v.Initials === inital){
|
|
|
+ if(!Array.isArray(newArea[x])){
|
|
|
+ newArea[x] = [{title:inital,id:x,list:[]}];
|
|
|
+ }
|
|
|
+ newArea[x][0].list.push({name:v.name,id:v.ProID,data:v.city,isToggle:false,isSelectAll:false})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.newArea = newArea;
|
|
|
+ },
|
|
|
+ //省市开关
|
|
|
+ toggle(val,x,y){
|
|
|
+ val.isToggle = !val.isToggle;
|
|
|
+ this.newArea[x][0].list.splice(y,1,val);
|
|
|
+ },
|
|
|
+ //选择市
|
|
|
+ selectCity(val,x,y,i){
|
|
|
+ this.isCountry = false;
|
|
|
+ val.data[i].status = !val.data[i].status;
|
|
|
+ this.newArea[x][0].list.splice(y,1,val);
|
|
|
+ this.citys[val.name] = []
|
|
|
+ val.data.forEach(v =>{
|
|
|
+ if(v.status){
|
|
|
+ this.citys[val.name].push(v.name)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let selectLength = this.citys[val.name].length;
|
|
|
+ if(selectLength === 0){
|
|
|
+ delete this.citys[val.name]
|
|
|
+ }else if( selectLength === val.data.length ){
|
|
|
+ this.citys[val.name] = [];
|
|
|
+ }
|
|
|
+ console.log( this.citys,"选择城市")
|
|
|
+ },
|
|
|
+ //全选
|
|
|
+ selectALL(val,x,y){
|
|
|
+ this.isCountry = false;
|
|
|
+ val.data.forEach(v =>{
|
|
|
+ if(val.isSelectAll){
|
|
|
+ v.status = false;
|
|
|
+ delete this.citys[val.name]
|
|
|
+ }else{
|
|
|
+ this.citys[val.name] = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ val.isSelectAll = !val.isSelectAll;
|
|
|
+ this.newArea[x][0].list.splice(y,1,val);
|
|
|
+ console.log( this.citys,"选择城市")
|
|
|
+ },
|
|
|
+ //全国
|
|
|
+ selectCountry(){
|
|
|
+ this.isCountry = !this.isCountry;
|
|
|
+ this.citys = {};
|
|
|
+ // console.log(this.newArea)
|
|
|
+ this.newArea.forEach(item =>{
|
|
|
+ item[0].list.forEach(val =>{
|
|
|
+ val.isSelectAll = false;
|
|
|
+ val.data.forEach(city=>{
|
|
|
+ city.status = false;
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
|
|
|
<style lang="scss">
|
|
|
.areaSelect{
|
|
|
@@ -18,6 +175,9 @@
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(0,0,0,.2);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
.lists{
|
|
|
position: relative;
|
|
|
width: 460px;
|
|
|
@@ -25,10 +185,125 @@
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.16);
|
|
|
border-radius: 5px;
|
|
|
+ padding: 30px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid $border_color;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .search{
|
|
|
+ width: 360px;
|
|
|
+ height: 40px;
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
}
|
|
|
ul{
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
li{
|
|
|
float: none;
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+ h4{
|
|
|
+ text-align: left;
|
|
|
+ padding: 0px 20px ;
|
|
|
+ line-height: 30px;
|
|
|
+ background: #F5F5FB;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ >span{
|
|
|
+ display: block;
|
|
|
+ width: 48px;
|
|
|
+ height: 24px;
|
|
|
+ border: 1px solid $border_color;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active{
|
|
|
+ color: $light_color;
|
|
|
+ border: 1px solid $light_color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .proviceList{
|
|
|
+ .proviceItem{
|
|
|
+ h5{
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid $border_color;
|
|
|
+ padding: 0 20px;
|
|
|
+ span{
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ cursor: pointer;
|
|
|
+ &.selectAll{
|
|
|
+ border:none;
|
|
|
+ background: url(../assets/images/checked.png) no-repeat center center;
|
|
|
+ background-size: 20px;
|
|
|
+ }
|
|
|
+ &.selectHalf{
|
|
|
+ border:none;
|
|
|
+ background: url(../assets/images/half.png) no-repeat center center;
|
|
|
+ background-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ strong{
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cityList{
|
|
|
+ padding: 8px 14px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ display: none;
|
|
|
+ span{
|
|
|
+ margin: 10px 5px;
|
|
|
+ padding: 0 4px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ &.active{
|
|
|
+ border: 1px solid $light_color;
|
|
|
+ color: $light_color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ &.toggle{
|
|
|
+ .cityList{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ h5{
|
|
|
+ i{
|
|
|
+ transform: rotateZ(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
xgwangman