sso-ssr/components/mobile/enterpriseCertification/addressChoose.vue

<template>
  <div class="distpicker-address-wrapper">
    <template>
      <div>{{regProvince}}{{regCity}}{{regDistrict}}{{regStreet}}</div>
      <div>{{chooseAddress}}</div>
      <div class="return">
        <i class="fa fa-angle-left" @click="goBack"></i>
        填写企业注册地址
        <span @click="goFinish">完成</span>
      </div>
      <div class="choose">
        <div class="form-group" @click="popupVisible = true">
          <label for="addr">选择地区</label>
          <input readonly
                 id="addr"
                 placeholder="地区信息"
                 v-model="chooseAddress">
          <i class="fa fa-map-marker"></i>
        </div>
        <div class="form-group">
          <label for="addrs">详细信息</label>
          <textarea placeholder="街道、大厦、楼层信息"
                    id="addrs"
                    v-model="detailAddress"
                    @blur="out"></textarea>
        </div>
      </div>
    </template>
    <mt-popup v-model="popupVisible" position="bottom" class="mint-popup">
      <template>
        <div class="handle">
          <span class="cancel" @click="cancel">取消</span>
          <span class="sure" @click="sure">完成</span>
        </div>
        <div :class="addressHeader">
          <ul>
            <li :class="{'active': tab === 1}" @click="resetProvince">{{ currentProvince && !staticPlaceholder ? currentProvince : placeholders.province }}</li>
            <template v-if="!onlyProvince">
              <li v-if="showCityTab" :class="{'active': tab === 2}" @click="resetCity">{{  currentCity && !staticPlaceholder ? currentCity : placeholders.city }}</li>
              <li v-if="showAreaTab && !hideArea" :class="{'active': tab === 3}">{{ currentArea && !staticPlaceholder ? currentArea : placeholders.area }}</li>
            </template>
          </ul>
        </div>
        <div :class="addressContainer">
          <ul v-if="tab === 1">
            <li v-for="(item, index) in provinces"
                :class="{'active': item === currentProvince}"
                @click="chooseProvince(item)"
                :key="index">
              {{ item }}
            </li>
          </ul>
          <template v-if="!onlyProvince">
            <ul v-if="tab === 2">
              <li v-for="(item, index) in cities"
                  :class="{'active': item === currentCity}"
                  @click="chooseCity(item)"
                  :key="index">
                {{ item }}
              </li>
            </ul>
            <ul v-if="tab === 3 && !hideArea">
              <li v-for="(item, index) in areas"
                  :class="{'active': item === currentArea}"
                  @click="chooseArea(item)"
                  :key="index">
                {{ item }}
              </li>
            </ul>
          </template>
        </div>
      </template>
    </mt-popup>
  </div>
</template>

<script>
  import DISTRICTS from './districts'
  const DEFAULT_CODE = 100000
  export default {
    name: 'v-distpicker',
    props: {
      province: { type: [String, Number], default: '' },
      city: { type: [String, Number], default: '' },
      area: { type: [String, Number], default: '' },
      type: { type: String, default: '' },
      hideArea: { type: Boolean, default: false },
      onlyProvince: { type: Boolean, default: false },
      staticPlaceholder: { type: Boolean, default: false },
      placeholders: {
        type: Object,
        default () {
          return {
            province: '省',
            city: '市',
            area: '区'
          }
        }
      },
      disabled: { type: Boolean, default: false },
      addressHeader: { type: String, default: 'address-header' },
      addressContainer: { type: String, default: 'address-container' },
      popAddress: {type: String},
      regStreet: {type: String},
      regProvince: {type: String},
      regCity: {type: String},
      regDistrict: {type: String}
    },
    data () {
      return {
        popupVisible: false,
        allAddress: '',
        detailAddress: '',
        chooseAddress: '',
        tab: 1,
        showCityTab: false,
        showAreaTab: false,
        provinces: [],
        cities: [],
        areas: [],
        currentProvince: this.determineType(this.province) || this.placeholders.province,
        currentCity: this.determineType(this.city) || this.placeholders.city,
        currentArea: this.determineType(this.area) || this.placeholders.area
      }
    },
    created () {
      this.chooseAddress = this.popAddress
      this.detailAddress = this.regStreet
      if (this.chooseAddress && this.detailAddress) {
        this.allAddress = this.chooseAddress + this.detailAddress
      }
      this.currentProvince = this.regProvince
      this.currentCity = this.regCity
      this.currentArea = this.regDistrict
      if (this.area && !this.hideArea && !this.onlyProvince) {
        this.tab = 3
        this.showCityTab = true
        this.showAreaTab = true
        this.areas = this.getDistricts(this.getAreaCode(this.determineType(this.city), this.area))
      } else if (this.city && this.hideArea && !this.onlyProvince) {
        this.tab = 2
        this.showCityTab = true
        this.cities = this.getDistricts(this.getAreaCode(this.determineType(this.province)))
      } else {
        this.provinces = this.getDistricts()
      }
    },
    watch: {
      currentProvince (vaule) {
        this.$emit('province', this.setData(vaule))
        if (this.onlyProvince) this.emit('selected')
      },
      currentCity (value) {
        this.$emit('city', this.setData(value, this.currentProvince))
        if (value !== this.placeholders.city && this.hideArea) this.emit('selected')
      },
      currentArea (value) {
        this.$emit('area', this.setData(value, this.currentProvince))
        if (value !== this.placeholders.area) this.emit('selected')
      },
      province (value) {
        this.currentProvince = this.province || this.placeholders.province
        this.cities = this.determineValue(this.currentProvince, this.placeholders.province)
      },
      city (value) {
        this.currentCity = this.city || this.placeholders.city
        this.areas = this.determineValue(this.currentCity, this.placeholders.city, this.currentProvince)
      },
      area (value) {
        this.currentArea = this.area || this.placeholders.area
      }
    },
    mounted () {
      this.$nextTick(() => {
        if (!this.regProvince && !this.regProvince && !this.regDistrict) {
          console.log('result', !this.regProvince && !this.regProvince && !this.regDistrict)
        } else {
          this.chooseProvince(this.regProvince)
          this.chooseCity(this.regCity)
          this.chooseArea(this.regDistrict)
        }
      })
    },
    methods: {
      // 取消选择地址
      cancel () {
        this.popupVisible = false
        this.allAddress = ''
      },
      // 完成选择地址
      sure () {
        if (this.currentProvince.length <= 1) {
          this.$toast({
            message: '请选择省、市、区',
            iconClass: 'el-icon-warning'
          })
          this.popupVisible = true
        } else if (this.currentCity.length <= 1) {
          this.$toast({
            message: '请选择省、市、区',
            iconClass: 'el-icon-warning'
          })
          this.popupVisible = true
        } else if (this.currentArea.length <= 1) {
          this.$toast({
            message: '请选择省、市、区',
            iconClass: 'el-icon-warning'
          })
          this.popupVisible = true
        } else {
          this.chooseAddress = this.currentProvince + this.currentCity + this.currentArea
          this.popupVisible = false
        }
      },
      // 监听textarea
      out () {
        if (!this.detailAddress) {
          this.$toast({
            message: '请输入详情地址',
            iconClass: 'el-icon-warning'
          })
        } else {
          let reg = /^(?=.*([\w\u4e00-\u9fa5]+)).*$/
          if (!reg.test(this.detailAddress)) {
            this.$toast({
              message: '请输入详情地址',
              iconClass: 'el-icon-warning'
            })
          }
        }
      },
      // 返回注册页面
      goBack () {
        if (this.chooseAddress && this.detailAddress) {
          this.allAddress = this.chooseAddress + this.detailAddress
          this.$emit('getAddress', this.allAddress)
          this.$emit('getProvince', this.currentProvince)
          this.$emit('getCity', this.currentCity)
          this.$emit('getArea', this.currentArea)
          this.$emit('getDetailAddress', this.detailAddress)
          this.$emit('getPopAddress', this.chooseAddress)
        } else if (this.chooseAddress && !this.detailAddress) {
          this.$emit('getAddress', '')
          this.$emit('getProvince', this.currentProvince)
          this.$emit('getCity', this.currentCity)
          this.$emit('getArea', this.currentArea)
          this.$emit('getDetailAddress', '')
          this.$emit('popAddress', this.chooseAddress)
        } else if (!this.chooseAddress && this.detailAddress) {
          this.$emit('getAddress', '')
          this.$emit('getProvince', '')
          this.$emit('getCity', '')
          this.$emit('getArea', '')
          this.$emit('getDetailAddress', this.detailAddress)
          this.$emit('popAddress', '')
        } else {
          this.$emit('getAddress', '')
          this.$emit('getProvince', '')
          this.$emit('getCity', '')
          this.$emit('getArea', '')
          this.$emit('getDetailAddress', '')
          this.$emit('popAddress', '')
        }
        this.$emit('showEvent', false)
      },
      goFinish () {
        if (!this.chooseAddress) {
          this.$toast({
            message: '请选择省、市、区',
            iconClass: 'el-icon-warning'
          })
        } else if (!this.detailAddress) {
          this.$toast({
            message: '请输入详情地址',
            iconClass: 'el-icon-warning'
          })
        } else {
          if (this.chooseAddress && this.detailAddress) {
            this.allAddress = this.chooseAddress + this.detailAddress
          }
          this.$emit('getAddress', this.allAddress)
          this.$emit('getProvince', this.currentProvince)
          this.$emit('getCity', this.currentCity)
          this.$emit('getArea', this.currentArea)
          this.$emit('getDetailAddress', this.detailAddress)
          this.$emit('getPopAddress', this.chooseAddress)
          this.$emit('showEvent', false)
        }
      },
      setData (value, check = '') {
        return {
          code: this.getAreaCode(value, check),
          value: value
        }
      },
      emit (name) {
        let data = {
          province: this.setData(this.currentProvince)
        }
        if (!this.onlyProvince) {
          this.$set(data, 'city', this.setData(this.currentCity))
        }
        if (!this.onlyProvince || this.hideArea) {
          this.$set(data, 'area', this.setData(this.currentArea))
        }
        this.$emit(name, data)
      },
      getCities () {
        this.currentCity = this.placeholders.city
        this.currentArea = this.placeholders.area
        this.cities = this.determineValue(this.currentProvince, this.placeholders.province)
        this.cleanList('areas')
        if (this.cities === null) {
          this.emit('selected')
          this.tab = 1
          this.showCityTab = false
        }
      },
      getAreas () {
        this.currentArea = this.placeholders.area
        this.areas = this.determineValue(this.currentCity, this.placeholders.city, this.currentProvince)
        if (this.areas === null) {
          this.emit('selected')
          this.tab = 2
          this.showAreaTab = false
        }
      },
      resetProvince () {
        this.tab = 1
        this.provinces = this.getDistricts()
        this.showCityTab = false
        this.showAreaTab = false
      },
      resetCity () {
        this.tab = 2
        this.showCityTab = true
        this.showAreaTab = false
        this.getCities()
      },
      chooseProvince (name) {
        this.currentProvince = name
        if (this.onlyProvince) return
        this.tab = 2
        this.showCityTab = true
        this.showAreaTab = false
        this.getCities()
      },
      chooseCity (name) {
        this.currentCity = name
        if (this.hideArea) return
        this.tab = 3
        this.showCityTab = true
        this.showAreaTab = true
        this.getAreas()
      },
      chooseArea (name) {
        this.currentArea = name
      },
      getAreaCode (name, check = '') {
        for (let x in DISTRICTS) {
          for (let y in DISTRICTS[x]) {
            if (name === DISTRICTS[x][y]) {
              if (check.length > 0) {
                if (y.slice(0, 2) !== this.getAreaCode(check).slice(0, 2)) {
                  continue
                } else {
                  return y
                }
              } else {
                return y
              }
            }
          }
        }
      },
      getCodeValue (code) {
        console.log(code)
        for (let x in DISTRICTS) {
          for (let y in DISTRICTS[x]) {
            if (code === parseInt(y)) {
              return DISTRICTS[x][y]
            }
          }
        }
      },
      getDistricts (code = DEFAULT_CODE) {
        return DISTRICTS[code] || []
      },
      determineValue (currentValue, placeholderValue, check = '') {
        if (currentValue === placeholderValue) {
          return []
        } else {
          return this.getDistricts(this.getAreaCode(currentValue, check))
        }
      },
      determineType (value) {
        if (typeof value === 'number') {
          return this.getCodeValue(value)
        }
        return value
      },
      cleanList (name) {
        this[name] = []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mint-toast.is-placemiddle {
    z-index: 1000;
  }
  .distpicker-address-wrapper {
    color: #9caebf;
  .handle {
    padding: .3rem;
    span{
      font-size: .28rem;
      color: #2d8cf0;
    }
    span.cancel{
      float: left;
    }
    span.sure{
      float: right;
    }
  }
  .return {
    padding: 0 .2rem;
    margin-bottom: .3rem;
    width: 100%;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    text-align: center;
    color: #787878;
    background: #fff;
    overflow: hidden;
    i{
      float: left;
      font-size: .5rem;
      margin-top: .2rem;
      font-weight: bold;
      color: #000;
    }
    span{
      float: right;
      font-size: .3rem;
      color: #999;
    }
  }
  .choose{
    background: #fff;
    div.form-group {
      padding: 0 .2rem;
      position: relative;
      height: 1.5rem;
      overflow: hidden;
      &:first-child{
        height: 1rem;
        line-height: 1rem;
        border-bottom: 1px solid #ddd;
       }
      label{
        float: left;
        margin-right: .6rem;
        font-size: .3rem;
        font-weight: normal;
        color: #505050;
      }
      input{
        float: left;
        height: 1rem;
        color: #555;
        font-size: .28rem;
        border: none;
      }
      textarea {
        float: left;
        /*width: 4.6rem;*/
        height: 1.5rem;
        font-size: .28rem;
        color: #555;
        border: none;
        outline: none;
        resize:none
      }
      i{
        position: absolute;
        top: .3rem;
        right: .4rem;
        font-size: .4rem;
        color: #a0a0a0;
      }
    }
  }
  select {
    padding: .5rem .75rem;
    height: 40px;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
  }
  }
  ul {
    margin: 0;
    padding: 0;
  li {
    list-style: none;
  }
  }
  .address-header {
    background-color: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
  li {
    display: inline-block;
    padding: 10px 10px 7px;
    color: #000;
  &.active {
     border-bottom: #52697f solid 3px;
     color: #52697f;
    font-weight: bold;
   }
  }
  }
  }
  .address-container {
    background-color: #fff;
  ul {
    height: 100%;
    overflow: auto;
  li {
    color: #555;
    padding: 8px 10px;
    border-top: 1px solid #f6f6f6;
  &.active {
     color: #52697f;
     font-weight: bold;
   }
  }
  }
  }
  }
</style>