caimei-authentic-www/components/RossSelectGroup/index.vue

<template>
  <div class="select-group">
    <div class="select-group__item" @click.stop="toggleMenu('province')">
      <div class="info select-click-type">
        <span>{{ province ? province.name : '省份' }}</span>
        <span
          class="el-icon-circle-close"
          v-if="province"
          @click.stop="onClear('province', $event)"
        ></span>
        <span class="icon el-icon-caret-bottom" v-else></span>
      </div>
      <el-select
        ref="provinceSelect"
        v-model="provinceId"
        @change="onProvinceChange"
        :clearable="true"
      >
        <template v-for="item in provinceList">
          <el-option :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </template>
      </el-select>
    </div>
    <div class="select-group__item" @click.stop="toggleMenu('city')">
      <div class="info select-click-type">
        <span>{{ city ? city.name : '城市' }}</span>
        <span
          class="el-icon-circle-close"
          v-if="city"
          @click.stop="onClear('city', $event)"
        ></span>
        <span class="icon el-icon-caret-bottom" v-else></span>
      </div>
      <el-select
        ref="citySelect"
        v-model="cityId"
        @change="onCityChange"
        :clearable="true"
      >
        <template v-for="item in cityList">
          <el-option :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </template>
      </el-select>
    </div>
    <div class="select-group__item" @click.stop="toggleMenu('town')">
      <div class="info select-click-type">
        <span>{{ town ? town.name : '县区' }}</span>
        <span
          class="el-icon-circle-close"
          v-if="town"
          @click.stop="onClear('town', $event)"
        ></span>
        <span class="icon el-icon-caret-bottom" v-else></span>
      </div>
      <el-select
        ref="townSelect"
        v-model="townId"
        @change="onTownChange"
        :clearable="true"
      >
        <template v-for="item in townList">
          <el-option :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </template>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      provinceId: '',
      cityId: '',
      townId: '',
      provinceList: [],
      province: null,
      city: null,
      town: null,
      visibleMap: {
        province: false,
        city: false,
        town: false,
      },
    }
  },
  computed: {
    cityList() {
      return this.province ? this.province.children : []
    },
    townList() {
      return this.city ? this.city.children : []
    },
  },
  mounted() {
    window.addEventListener('click', () => {
      this.visibleMap = {
        province: false,
        city: false,
        town: false,
      }
    })
  },
  beforeDestroy() {
    window.removeEventListener('click', () => {})
  },
  created() {
    this.initSelectValue()
  },
  methods: {
    async initSelectValue(data) {
      try {
        const res = await this.$http.api.fetchAllCityList()
        this.provinceList = res.data
        if (data) {
          this.provinceId = data.provinceId
          this.cityId = data.cityId
          this.townId = data.townId
          if (this.provinceId) {
            this.province = this.provinceList.find(
              (item) => item.id === this.provinceId
            )
          }
          if (this.cityId) {
            this.city = this.cityList.find((item) => item.id === this.cityId)
          }
          if (this.townId) {
            this.town = this.townList.find((item) => item.id === this.townId)
          }
        }
      } catch (error) {
        console.log(error)
      }
    },

    resetVisiable(type, flag) {
      for (const key in this.visibleMap) {
        if (type === key) {
          this.visibleMap[key] = flag
        } else {
          this.visibleMap[key] = false
        }
      }
    },

    toggleMenu(type) {
      const action = {
        province: this.$refs.provinceSelect,
        city: this.$refs.citySelect,
        town: this.$refs.townSelect,
      }
      const target = action[type]
      if (!this.visibleMap[type]) {
        target.visible = true
        this.resetVisiable(type, true)
      } else {
        target.visible = false
        this.resetVisiable(type, false)
      }
    },
    onClear(type, $event) {
      const action = {
        province: this.$refs.provinceSelect.handleClearClick,
        city: this.$refs.citySelect.handleClearClick,
        town: this.$refs.townSelect.handleClearClick,
      }
      action[type]($event)
    },
    onProvinceChange(value) {
      console.log(this.$refs)
      this.cityId = ''
      this.townId = ''
      this.city = null
      this.town = null
      this.province = this.provinceList.find((item) => item.id === value)
      this.onEmit()
    },
    onCityChange(value) {
      this.townId = ''
      this.town = null
      this.city = this.cityList.find((item) => item.id === value)
      this.onEmit()
    },
    onTownChange(value) {
      this.town = this.townList.find((item) => item.id === value)
      this.onEmit()
    },
    onEmit() {
      this.$emit('change', {
        provinceId: this.provinceId,
        cityId: this.cityId,
        townId: this.townId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
// pc 端
@media screen and (min-width: 768px) {
  .select-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    color: #282828;

    .select-group__item {
      cursor: pointer;
      position: relative;
      width: 160px;
      text-align: center;

      .info {
        position: absolute;
        left: 0;
        top: 0;
        width: 160px;
        z-index: 1;
        line-height: 40px;
      }

      .icon {
        color: #999;
      }

      .el-icon-circle-close {
        &:hover {
          @include themify($themes) {
            color: themed('color');
          }
        }
      }

      .el-select {
        position: absolute;
        left: 30px;
        top: 0;
        width: 160px;
        opacity: 0;
      }
    }
  }
}

// 移动 端
@media screen and (max-width: 768px) {
  .select-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 12px;
    color: #282828;
    font-size: 3.4vw;

    .select-group__item {
      cursor: pointer;
      position: relative;
      width: 20vw;
      text-align: center;

      .info {
        position: absolute;
        left: 0;
        top: 0;
        width: 20vw;
        z-index: 1;
        line-height: 40px;
      }

      .icon {
        color: #999;
      }

      .el-select {
        position: absolute;
        left: 0;
        top: 0;
        width: 20vw;
        opacity: 0;
      }
    }
  }
}
</style>