mall-web-ssr/components/mobile/base/SelectAddress.vue

<template>
  <div class="base-select-address mobile-modal" v-if="isShow">
    <div class="bs-wrap">
      <p class="bs-wrap-title">选择地址<i class="iconfont icon-guanbi1" @click="$emit('closeAction')"></i></p>
      <ul class="bs-selected-list">
        <li class="inline-block" v-for="(addrVal, addrName, index) in currentAddress" :class="{active: isActive(addrName)}" @click="resetAddr(addrName)">{{addrVal}}</li>
      </ul>
      <ul class="bs-current-list">
        <li v-for="(item, index) in currentArr" @click="checkItem(index)">
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        addressData: '',
        provinces: [],
        activeObj: {
          // 省
          province: -1,
          // 市
          city: -1,
          // 区
          area: -1
        }
      }
    },
    created () {
      this.$http.get('/data/city.json').then(res => {
        this.addressData = res.data
        for (let provinceAttr in this.addressData) {
          this.provinces.push(provinceAttr)
        }
      })
    },
    computed: {
      currentType () {
        if (this.activeObj.area > -1) {
          return 'full'
        } else if (this.activeObj.city > -1) {
          return 'area'
        } else if (this.activeObj.province > -1) {
          return 'city'
        } else {
          return 'province'
        }
      },
      currentAddress () {
        let obj = {
          province: '',
          city: '',
          area: ''
        }
        if (this.activeObj.province > -1) {
          obj.province = this.provinces[this.activeObj.province]
        }
        if (this.activeObj.city > -1) {
          obj.city = this.cityObject.attrArr[this.activeObj.city]
        }
        if (this.activeObj.area > -1) {
          obj.area = this.cityObject.valArr[this.activeObj.city][this.activeObj.area]
        }
        return obj
      },
      cityObject () {
        let attrArr = []
        let valArr = []
        let tmp = this.addressData[this.provinces[this.activeObj.province]]
        for (let attr in tmp) {
          attrArr.push(attr)
          valArr.push(tmp[attr])
        }
        return {
          attrArr: attrArr,
          valArr: valArr
        }
      },
      currentArr () {
        let arr = []
        if (this.currentType === 'area') {
          arr = this.cityObject.valArr[this.activeObj.city]
        } else if (this.currentType === 'city') {
          arr = this.cityObject.attrArr
        } else if (this.currentType === 'province') {
          arr = this.provinces
        }
        return arr
      }
    },
    methods: {
      checkItem (index) {
        if (this.currentType === 'province') {
          this.activeObj.province = index
          this.activeObj.area = -1
          this.activeObj.city = -1
        } else if (this.currentType === 'city') {
          this.activeObj.city = index
          this.activeObj.area = -1
        } else {
          this.activeObj.area = index
          this.$emit('closeAction', this.currentAddress)
        }
      },
      isActive (type) {
        return (type === 'province' && this.currentType === 'city') || (type === 'city' && this.currentType === 'area') || (type === 'area' && this.currentType === 'full')
      },
      resetAddr (addrName) {
        if (addrName === 'province') {
          this.activeObj.province = -1
          this.activeObj.area = -1
          this.activeObj.city = -1
        } else if (addrName === 'city') {
          this.activeObj.city = -1
          this.activeObj.area = -1
        } else {
          this.activeObj.area = -1
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bs-wrap {
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 8.17rem;
    .bs-wrap-title {
      text-align: center;
      font-size: .3rem;
      color: #666;
      margin: .34rem 0;
      i {
        font-size: .24rem;
        color: #666;
        position: absolute;
        right: .12rem;
        top: .09rem;
      }
    }
    .bs-selected-list {
      border-bottom: 1px solid #e7e8ec;
      li {
        height: .48rem;
        line-height: .48rem;
        margin: 0 .33rem;
        font-size: .28rem;
        &.active {
          border-bottom: .02rem solid #f38c8c;
        }
      }
    }
    .bs-current-list {
      height: 100%;
      overflow-y: auto;
      li {
        padding: .27rem .39rem;
        &:hover, &:active, &:focus {
          background: #f7f7f7;
        }
      }
    }
  }
</style>