realtorEasier-webSite/mobile/src/components/citySelect/newModule.vue

<template>
  <div class="select-layout">
    <div class="address-input-con">
      <div class="address-input-item">
        <div class="address-sub address-name">
          <div class="top-title">{{ $t('mall.receiver') }}</div>
          <div class="ant-input">
            <input v-model="tempAddress.shipName" type="text" :placeholder="langAccount.placeholder.name" maxlength="10" />
          </div>
        </div>
      </div>
      <div class="address-input-item">
        <div class="address-sub address-phone">
          <div class="top-title">{{ $t('mall.phone') }}</div>
          <div class="ant-input">
            <input v-model="tempAddress.shipMobile" oninput="value=value.replace(/[^\d]/g,'')" maxlength='11' type="text" :placeholder="langAccount.placeholder.phone" />
          </div>
        </div>
      </div>
      <div class="address-input-item">
        <div class="address-sub prov-name">
          <div class="top-title">{{$t('mall.receiveAddress')}}</div>
          <div class="ant-input prov" @click="handleSelect('prov')">
            {{citylist[currentPID]['p']||'省份'}}
            <ul v-if="prov">
              <li v-for="(item,i) in citylist" :key="i" @click="handleClick('currentPID',i)">{{item.p}}</li>
            </ul>
          </div>
        </div>
        <div class="address-sub prov-name">
          <div class="top-title notrequired"></div>
          <div class="ant-input city" @click.stop="handleSelect('city')">
            {{currentProv[currentCID]['n']||'城市'}}
            <ul v-if="city">
              <li v-for="(item,i) in currentProv" :key="i" @click="handleClick('currentCID',i)">{{item.n}}</li>
            </ul>
          </div>
        </div>
        <div class="address-sub prov-name">
          <div class="top-title notrequired"></div>
          <div class="ant-input city" @click.stop="handleSelect('dist')">
            {{currentCity[currentSID]['s']||'区/县'}}
            <ul v-if="dist">
              <li v-for="(item,i) in currentCity" :key="i" @click="handleClick('currentSID',i)">{{item.s}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="address-input-item">
        <div class="address-sub">
          <!-- <div class="top-title">{{langAccount.placeholder.address}}</div> -->
          <div class="ant-input">
            <input v-model="tempAddress.shipAddress" type="text" :placeholder="langAccount.placeholder.address" maxlength="50" />
          </div>
        </div>
      </div>
      <div class="address-input-item">
        <p class="p-dec">{{ langAccount.recaddress }}</p>
      </div>
      <div class="actions-w">
        <button type="submit" class="ant-btn ant-btn-primary cancel" @click="$emit('cancle', true)">
          <span>{{langAccount.cancel}}</span>
        </button>
        <button type="submit" class="ant-btn ant-btn-primary" @click="uAddress">
          <span>{{langAccount.save}}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { citylist } from './city'
import { mapState } from 'vuex'

let sle = ['prov', 'city', 'dist']
var cloneObj = function (obj) {
  var newObj = {}
  if (obj instanceof Array) {
    newObj = []
  }
  for (var key in obj) {
    var val = obj[key] || ''
    newObj[key] = typeof val === 'object' ? cloneObj(val) : val
  }
  return newObj
}
export default {
  props: ['address', 'token'],
  data () {
    let idArr = ['', '', '']
    if (this.address.shipAreaPath) {
      let tempArr = this.address.shipAreaPath.split(',')
      let [p, c, d] = tempArr
      idArr = (() => {
        let tmp = []
        citylist.forEach((item, index) => {
          if (item.p === p) {
            tmp.push(index)
            item.c.forEach((t2, i2) => {
              if (t2.n === c) {
                tmp.push(i2)
                t2.a.forEach((t3, i3) => {
                  if (t3.s === d) {
                    tmp.push(i3)
                  }
                })
              }
            })
          }
        })
        return tmp
      })()
    }

    return {
      citylist,
      prov: false,
      city: false,
      dist: false,
      currentPID: idArr[0] || 18,
      currentCID: idArr[1] || 3,
      currentSID: idArr[2] || 2,
      areaPath: cloneObj(this.address.areaPath)
    }
  },
  computed: {
    ...mapState({
      langAccount: state => state.language.home.manage.account
    }),
    tempAddress: function () {
      return cloneObj(this.address)
    },

    currentProv: function () {
      let tmp = this.citylist[this.currentPID]
      return tmp.c
    },
    currentCity: function () {
      let cprov = this.citylist[this.currentPID]
      let tmp = cprov.c[this.currentCID]
      return tmp.a
    }
  },
  watch: {
    currentProv () {
      this.currentCID = 0
      this.currentSID = 0
    }
  },
  methods: {
    uAddress () {
      this.tempAddress.province = this.areaPath[0]
      this.tempAddress.city = this.areaPath[1]
      this.tempAddress.shipAreaPath = this.areaPath.join(',')
      let {
        shipAddress,
        shipAreaPath,
        province,
        city,
        shipMobile,
        shipName
      } = this.tempAddress

      let isObject = function (obj) {
        return JSON.stringify(obj) === '{}' ? '' : obj
      }

      let params = {
        shipAddress,
        shipAreaPath,
        province,
        city,
        shipMobile,
        shipName
      }
      let test = Object.keys(params)
      console.log(test, params)
      for (let i = 0; i < test.length; i++) {
        if (!isObject(params[test[i]])) {
          return this.$toast.show('warn', this.langAccount.fill)
        }
      }
      params['id'] = this.address.id
      let url = this.address.id ? 'updateAddress' : 'insertAddress'
      this.$http
        .post(`/user/${url}`, params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          let res = data.data
          if (res.code === 0) {
            this.$emit('closeSelect', true)
            this.$store.dispatch('getInfo', {
              url: '/user/getReceiverInfo',
              name: 'address'
            })
            this.$emit('submit', params)
          }
        })
    },
    handleSelect (item) {
      sle.forEach(i => {
        console.log(i, item)
        if (i === item) {
          this[i] = !this[i]
        } else {
          this[i] = false
        }
      })
    },
    handleClick (id, i) {
      this[id] = i
      this.handleChange()
    },
    handleChange () {
      setTimeout(() => {
        let prov = this.citylist[this.currentPID]
        let city = prov.c[this.currentCID]
        let dist = city.a[this.currentSID]
        this.areaPath = [prov.p, city.n, dist.s]
      })
    }
  },
  mounted () {
    this.handleChange()
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>