<template>  <div class="tm-mil-city">   <p class="tm-mil-city-title tm-mil-mb20">{{name}}</p>   <div class="tm-mil-district-box tm-mil-mb20">    <Select class="tm-mil-selsect" style='width:200px' v-model='province' placeholder='全部' @on-change='changeProvince'>     <Option v-for='item in provinceList' :value='item.id' :key='item.id'>{{ item.regionName }}</Option>    </Select>    <span class="tm-mil-selsect-all-btn tm-mil-ml20 tm-mil-colB" @click="chooseAllRegion">全選</span>    <div class="tm-mil-line-loading" v-if="province && !cityList.length"><img src="../assets/loading.gif" alt=""></div>    <div class="tm-mil-mb20" v-if="cityList.length">     <CheckboxGroup style="marginTop:10px;width:900px" v-model="checkCity">       <Checkbox v-for='item in cityList' :key='item.id' :label="item.regionCode">{{item.regionName}}</Checkbox>     </CheckboxGroup>     <Button v-show="cityList.length" size="small" style="marginTop:10px" @click="saveCheckCity">確定</Button>    </div>   </div>   <p class="tm-mil-city-title tm-mil-mb20">已選擇的地區(qū)</p>   <div class="tm-mil-line-loading" v-if="waiting"><img src="../assets/loading.gif" alt=""></div>   <div class="tm-mil-choose-district" v-else>    <div v-for="(item, idx) in allCheckCityShowList" :key="idx">     <span class="tm-mil-colB">{{provinceFilter(item.province)}}</span>     <span class="tm-mil-ml10" v-for="(obj, indx) in item.cityList" :key="indx" >{{obj}}</span>    </div>    <span v-if="!allCheckCityShowList.length">全部地區(qū)</span>   </div>  </div></template>

 data() {    return {      waiting: false, // loading      province: '', // 當(dāng)前的省      provinceList: [], // 省列表      Municipality: [{id: 2, name: '北京'}, {id: 3, name: '天津'}, {id: 10, name: '上海'}, {id: 23, name: '重慶'}, {id: 2, name: '北京'}], // 直轄市      cityList: [], // 城市列表      activityTime: [], // 活動時間      checkCity: [], // 當(dāng)前省所選的市列表 -- 展示      allCheckCityApi: [], // 所有的市列表 -- 接口      allCheckCitySave: { // 存儲所有選擇各省對應(yīng)的市列表 -- 存儲      // '10001': [{code:'10111', name:'北京'}]      },      allCheckCityShowList: [ // 存儲所有選擇的市列表 -- 展示      // { province: '10001', cityList: ['上海', 2, 3]}      ]    }  },

 // 獲取省級數(shù)據(jù)  getOrigin() {    this.axios.get(`/users/open/region/topRegions`).then(res => {     if (res.status === 200) {      this.provinceList = res.data     }    })  }  // 返回省名稱  provinceFilter(id) {    return this.provinceList.filter(item => item.id === id)[0].regionName  }   // 選擇全部地區(qū)  chooseAllRegion() {    this.province = 0    this.cityList = []    this.checkCity = []    this.allCheckCityApi = []    this.allCheckCitySave = []    this.allCheckCityShowList = []  }  // 保存城市后存儲數(shù)據(jù) -- 接口  handleSaveCityList() {    let _arr = []    for (var key in this.allCheckCitySave) {      _arr = _arr.concat(this.allCheckCitySave[key])    }    this.allCheckCityApi = _arr  }

 // 更改省  changeProvince(parentId) {    if (!parentId) {      return    }    this.cityList = []     //獲取該省下的市列表    this.axios.get(`/users/open/region/${parentId}/subRegions`).then(res => {     if (res.status === 200) {      this.cityList = res.data     }    })    // 處理已經(jīng)選擇的市    let _checkCity = this.allCheckCitySave[parentId] || []     let _checkCityList = []    _checkCity.forEach(el => {      _checkCityList.push(el.regionCode)    })    this.checkCity = JSON.parse(JSON.stringify(_checkCityList))  }  // 保存所選的當(dāng)前市  saveCheckCity() {  // 處理選擇不同省，保存當(dāng)前省已選擇的投放城市    if (!this.checkCity.length) {      return    }    this.waiting = true    // 當(dāng)前城市的省code    let _province = JSON.parse(JSON.stringify(this.province))    // 當(dāng)前城市的省名稱    let _provinceName = this.Municipality.filter(el => el.id === _province)[0] && this.Municipality.filter(el => el.id === _province)[0].name || ''    // 已選擇城市(code name level)列表    let _arrCheckMsgList = []    // 當(dāng)前選擇的城市code    let _arrCheck = JSON.parse(JSON.stringify(this.checkCity))    _arrCheck.forEach(el => {      let _obj = this.cityList.filter(_el => _el.regionCode === el)[0]      // 區(qū)別市轄區(qū)      let _regionName = _provinceName + _obj.regionName      let _regionLevel = _obj.regionLevel      let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel, parentId: _province}      // let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel}      _arrCheckMsgList.push(obj)    })    // 存儲到當(dāng)前省對應(yīng)的已選擇的市列表 -- 存儲    this.$set(this.allCheckCitySave, _province, _arrCheckMsgList)    // 保存城市后存儲數(shù)據(jù) -- 接口    this.handleSaveCityList()    // 處理已選擇的投放地區(qū)數(shù)據(jù)展示    let _arrCheckMsg = []    // 處理展示列表－城市名稱 －－ 直轄市（北京，上海等）選地區(qū)時要加上直轄市前綴，如 北京市轄區(qū)／北京縣    this.cityList.map(obj => {      if (_arrCheck.indexOf(obj.regionCode) > -1) {      _arrCheckMsg.push(_provinceName + obj.regionName)      }    })    let _msgObj = {      province: _province,      cityList: _arrCheckMsg      }    let _len = this.allCheckCityShowList.filter(item => item.province === _province).length || 0    // 新增 ／ 替換    if (!_len) {      this.allCheckCityShowList.push(_msgObj)      this.waiting = false    } else {      this.allCheckCityShowList.forEach((item, idx) => {      if (item.province === _province) {        this.$set(this.allCheckCityShowList, idx, _msgObj)        this.waiting = false        return      }      })    }  }