vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇

<template>
 <div class="city">
 <!-- 點(diǎn)擊此處 省市區(qū)選擇出現(xiàn) -->
 <div class="chooseCity" @click="clickCity">{{chooseCity}}</div>
 <div class="boxcity" v-if="showCity">
 <!-- 省市區(qū)的標(biāo)題 點(diǎn)擊可回退 -->
 <div class="chooseTit">
  <p @click="chooseProvince" v-show='tit1'>{{chooseTit1}}</p>
  <p @click="chooseCity2" v-show='tit2'>{{chooseTit2}}</p>
  <p v-show='tit3'>{{chooseTit3}}</p>
 </div>
 <!-- 省市區(qū) -->
 <div class="citys">
 <div @click="getCity" class="province">
  <ul v-show="showProvince">
  <li v-for="item in provinceL" :key="item.regionId" @click="getProvince(item)">{{item.regionName}}</li>
 </ul>
 <ul v-show="showCity2">
  <li v-for="item in cityL" :key="item.regionId" @click="getCity2(item)">{{item.regionName}}</li>
 </ul>
  <ul v-show="showarea">
  <li v-for="item in areaL" :key="item.regionId" @click="getarea(item)">{{item.regionName}}</li>
 </ul>
 </div>
 </div>
 </div>
 <!-- 遮罩層 -->
 <div class="mask" v-show="mackShow" @click="closeMask"></div>
 </div>
</template>
 
<script>
export default {
 data () {
 return {
 chooseCity:"點(diǎn)擊我選擇",
 selected : '',
 citySelected: '',
 areaSelected: '',
 provinceL : [],
 cityL : [],
 areaL : [],
 city : [],
 provinceName: '',
 cityName : '',
 areaName : '',
 showProvince:true,
 showCity:false,
 showCity2:false,
 showarea:false,
 chooseTit1:"省",
 chooseTit2:"市",
 chooseTit3:"區(qū)",
 tit1:true,
 tit2:false,
 tit3:false,
 mackShow:false,
 province:"",
 Nextcity:"",
 district:"",
 totalCity:"",
}
 },
 methods:{
 //點(diǎn)擊省市標(biāo)題隱藏出現(xiàn)內(nèi)容 形成回退效果
 chooseProvince(){
 this.showProvince = true;
 this.showCity2 = false;
 },
 chooseCity2(){
 this.showProvince = false;
 this.showCity2 = true;
 this.showarea = false;
 },
 //點(diǎn)擊省市區(qū)出現(xiàn)
 clickCity(){
 this.showCity = true;
 this.mackShow = true;
 },
 //點(diǎn)擊省市區(qū) 讓每個(gè)li內(nèi)展示的名字等于數(shù)據(jù)的城市名
 getCity(){
 for(var item of this.provinceL){
  this.provinceName = item.regionName;
  //this.regionId = item.regionId
 }
 },
 //當(dāng)用戶點(diǎn)擊某個(gè)省事件 根據(jù)省的id獲取市
 getProvince(item){
 this.province = item.regionName
 console.log(this.province);
 // console.log(item.regionId);
 this.$axios({
 url:'http://192.168.1.16:0000/insurance-intact-wechat-api/get_regions?parentId='+item.regionId,
 method: 'get'
 }).then(res=>{
 //console.log(res)
  this.cityL = res.data;
  this.citySelected = this.cityL[0].regionId;
  this.showProvince = false;
  this.showCity2= true;
  this.tit2 = true;
 })
 
 this.areaL = [];
 
 },
 //當(dāng)用戶點(diǎn)擊某個(gè)市事件 根據(jù)省的id獲取區(qū)
 getCity2(item){
 this.Nextcity = item.regionName
 console.log(this.Nextcity);
 // console.log(item.regionId);
 this.$axios({
 url:'http://192.168.1.16:0000/insurance-intact-wechat-api/get_regions?parentId='+item.regionId, 
 method: 'get'
 }).then(res=>{
 //console.log(res)
  this.areaL = res.data;
  this.areaSelected = this.areaL[0].regionId;
  this.showarea = true;
  this.showCity2= false;
  this.tit3 = true;
 })
 },
 //用戶點(diǎn)擊區(qū)或者鎮(zhèn)，遮罩消失
 getarea(item){
 this.district = item.regionName;
 console.log(this.district);
 var totalCity = this.province+"," + this.Nextcity +"," +this.district;
 this.chooseCity =totalCity;
 //console.log(item.regionId);
 this.showCity = false;
 this.mackShow = false;
 },
 
 closeMask(){
 this.showCity = false;
 this.mackShow = false;
 }
 },
 //頁面初始化 請(qǐng)求數(shù)據(jù) 將請(qǐng)求到的城市保存下來
 created() {
  var url="http://192.168.1.16:0000/insurance-intact-wechat-api/get_regions?parentId=0";
   this.$axios({
   method:'get',
   url:url,
   withCredentials: true,
   crossDomain: true,
   data:"data",
   headers: {
    'Content-Type':'application/x-www-form-urlencoded',
   }
   }).then(res=>{
   //console.log(res.data);
   this.provinceL = res.data;
   
 
   })
   .catch(error=>{
   console.log(error);
  });
 },
}
</script>
 
<style scoped>
 .chooseCity{
 width: 100%;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border-bottom: 1px solid #666;
 }
 .boxcity{
 position: absolute;
 width: 40%;
 right: 0;
 top:0;
 height: 60%;
 z-index: 100;
 background: #ffffff;
 }
 .citys{
 border-top: 1px solid #666; 
 height: 100%;
 overflow: hidden;
 overflow-y: scroll;
 background: #ffffff;
 }
 .province{
 height: 100%;
 }
 /* 讓滾動(dòng)條不顯示 */
 .citys::-webkit-scrollbar {
 display: none;
 }
 ul{
 margin:0;
 padding:0;
 }
li{
 list-style: none;
 margin-top: 10px;
}
.chooseTit {
 display: flex;
 justify-content: space-around;
 width: 100%;
 text-align: center;
 background: #448ff7;
}
.chooseTit p{
 color: #ffffff;
}
.mask{
 position: absolute;
 width: 100%;
 height: 100%;
 background: black;
 opacity: .5;
 top:0;
 left: 0;
 z-index: 90;
}
</style>