gcb_zc/components/areaSelect.vue

<template>
  <div class="me_search">
    <!-- 选择大区 -->
    <ul class="area_sel big_area">
      <li
        v-for="(item,index) in areaone"
        :key="index"
        @click="addClass(index)"
        :class="{active:index==current}"
      >{{ item.text }}</li>
    </ul>
    <!-- end：选择大区 -->

    <!-- 选择省份 -->
    <ul class="area_sel area_province">
      <li
        v-for="(item,index) in areatwo"
        :key="index"
        @click="choose(index)"
        :class="current2[index]"
      >{{ item.text }}</li>
    </ul>
    <!-- end：选择省份 -->

    <button>确定</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: '0',
      current2: [],
      areaone: [
        {
          text: '全国',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: 'assa' },
            { text: '上海' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '西北',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '2' },
            { text: '上海' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '西南',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '3' },
            { text: '上海' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '东北',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '4' },
            { text: '上海' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '东南',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '5' },
            { text: '上海' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '华中',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '6' },
            { text: '上海' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '华北',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '天津' },
            { text: '7' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        },
        {
          text: '华南',
          province: [
            { text: '全部' },
            { text: '北京' },
            { text: '天津' },
            { text: '8' },
            { text: '湖北' },
            { text: '河南' },
            { text: '山西' },
            { text: '新疆' },
            { text: '各小区' }
          ]
        }
      ],
      areatwo: [],
      a: true //true为为全部选中
    }
  },
  created() {
    this.areatwo = this.areaone[0].province
  },
  methods: {
    addClass: function(index) {
      this.areatwo = this.areaone[index].province
      this.current = index
    },
    choose: function(index) {
      var current = this.current2
      //判断点击的是否为全选
      if (index == 0) {
        //判断是否以及全选
        console.log(this.a)
        if (this.a) {
          //如果未全部选中则全部选中
          for (var i = 0; i < this.areatwo.length; i++) {
            current[i] = ['active']
          }
          this.a = false
        } else {
          //如果已经全部选中则初始化
          current = []
          this.a = true
        }
      } else {      
        if (current[index] == 'active') {
          //如果当前数组的这个值为已选中
          current[index] = ['']
        } else {
          //如果未选中
          current[index] = ['active']
        }
        var k = 1;//设置初始值
        for (var i = 0; i < current.length; i++) {
          //循环整个数组看看有多少已选中
          if (current[i] == 'active') {
            //赋值k的值为已选中的数量
            k++
          }
        }
        if (k == current.length) {
          //如果k（已选中的数量）等于数组全部的数量
          this.a = false
          //设置当前已经全部选中
        }
      }
      if(current.length>0){
         this.$set(this.current2, current)
      }else{
         this.current2=current
      }
    }
  }
}
</script>
  
<style>
.me_search {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 50px;
}
.me_search button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  background-color: #ff5c5c;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 18px;
  border: 0;
  outline: none;
}
.big_area {
  width: 30%;
  background-color: #efefef;
  text-align: center;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
.big_area li {
  color: #7a7a7a;
}
.area_province {
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding-left: 30%;
  height: 100%;
  padding-right: 1.5rem;
}
.area_province li {
  padding-left: 30px;
  background-image: url('../static/img/icon_select.png');
  background-position: right center;
  background-size: 20px;
  background-repeat: no-repeat;
}
.area_sel li {
  line-height: 60px;
  transition: 0.2s;
}
.big_area li.active {
  background-color: #fff;
  color: #ff5c5c;
  transition: 0.2s;
}
.area_province li.active {
  color: #ff5c5c;
  background-image: url('../static/img/icon_selected.png');
  transition: 0.2s;
}
</style>