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+1==current}"
      >{{ item.name }}</li>
    </ul>
    <!-- end：选择大区 -->

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

    <button @click="coolse">确定</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: '1',
      current2: [],
      areaone: [{ id: '1', name: '全国' }],
      areatwo: [{ id: '1', name: '全国' }]
    }
  },
  props: ['regiont'],
  created() {
    this.areaone = this.areaone.concat(this.regiont)
  },
  methods: {
    addClass: function(index) {
      if (index > 0) {
        this.areatwo = [{ id: this.areaone[index].id, name: '全部' }]
        this.areatwo = this.areatwo.concat(this.areaone[index].province)
      } else {
        this.areatwo = [{ id: '1', name: '全国' }]
      }
      this.current = this.areaone[index].id
    },
    choose: function(index) {
      if (index == '1') {
        this.current2 = []
        this.current2[index] = 'active'
      } else {
        if (index == this.current) {
          for (var i = 0; i < this.areaone[index - 1].province.length; i++) {
            this.current2[this.areaone[index - 1].province[i].id] = ''
          }
        } else {
          this.current2[this.current] = ''
        }
        if (this.current2[index] == 'active') {
          this.current2[index] = ''
        } else {
          this.current2[index] = 'active'
        }
         this.current2[1] = ''
      }
      this.current2 = [].concat(this.current2)
    },
    coolse:function(){
       this.$emit('province','4545454456456');
    }
  }
}
</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;
  max-width: 500px;
  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;
  overflow-y: scroll;
}
.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>