|
|
@@ -1,179 +1,412 @@
|
|
|
<template>
|
|
|
- <div class="address">
|
|
|
- <div class="header">
|
|
|
- <i class="fa fa-angle-left"></i>
|
|
|
- <span>填写企业注册地址</span>
|
|
|
- <a href="">完成</a>
|
|
|
- </div>
|
|
|
+ <div class="distpicker-address-wrapper">
|
|
|
<template>
|
|
|
- <mt-picker :slots1="slots1" @change="onProvinceChange"></mt-picker>
|
|
|
- <mt-picker :slots2="slots2" @change="onCityChange"></mt-picker>
|
|
|
- <mt-picker :slots3="slots3" @change="onCountyChange"></mt-picker>
|
|
|
- <!--<mt-picker :slots="addressSlots" class="picker" :visible-item-count="5" ></mt-picker >-->
|
|
|
- <!--<mt-picker :slots="streetSlots" ref="picker" class="picker" :visible-item-count="5" ></mt-picker >-->
|
|
|
- <!--上门服务地址:{{ addressProvince }} {{ addressCity }}{{allCityData}}-->
|
|
|
+ <div class="return">
|
|
|
+ <i class="fa fa-angle-left"></i>
|
|
|
+ 填写企业注册地址
|
|
|
+ <span>完成</span>
|
|
|
+ </div>
|
|
|
+ <div class="choose">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="">选择地区</label>
|
|
|
+ <input readonly
|
|
|
+ placeholder="地区信息"
|
|
|
+ v-model="allAddress"
|
|
|
+ @click="popupVisible = true">
|
|
|
+ <i class="fa fa-map-marker"></i>
|
|
|
+ </div>
|
|
|
+ <textarea name="" id="" cols="30" rows="10" placeholder="街道、大厦、楼层信息"></textarea>
|
|
|
+ </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 s from '/data/city.json'
|
|
|
+ import DISTRICTS from './districts'
|
|
|
+ const DEFAULT_CODE = 100000
|
|
|
export default {
|
|
|
- name: 'choose-address',
|
|
|
+ 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' }
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
- county: '请选择',
|
|
|
- slots1: [
|
|
|
- {
|
|
|
- flex: 1,
|
|
|
- values: ['请选择', '北京', '广东', '上海'],
|
|
|
- className: 'slot',
|
|
|
- textAlign: 'center'
|
|
|
- }
|
|
|
- ],
|
|
|
- slots2: [
|
|
|
- {
|
|
|
- flex: 1,
|
|
|
- values: ['请选择'],
|
|
|
- className: 'slot',
|
|
|
- textAlign: 'center'
|
|
|
- }
|
|
|
- ],
|
|
|
- slots3: [
|
|
|
- {
|
|
|
- flex: 1,
|
|
|
- values: ['请选择'],
|
|
|
- className: 'slot',
|
|
|
- textAlign: 'center'
|
|
|
- }
|
|
|
- ],
|
|
|
- provinceCity: ''
|
|
|
- // addressSlots: [
|
|
|
- // {
|
|
|
- // flex: 1,
|
|
|
- // defaultIndex: 1,
|
|
|
- // // values: Object.keys(this.allCityData),
|
|
|
- // className: 'slot1',
|
|
|
- // textAlign: 'center'
|
|
|
- // }, {
|
|
|
- // divider: true,
|
|
|
- // content: '-',
|
|
|
- // className: 'slot2'
|
|
|
- // }, {
|
|
|
- // flex: 1,
|
|
|
- // values: [],
|
|
|
- // className: 'slot3',
|
|
|
- // textAlign: 'center'
|
|
|
- // }, {
|
|
|
- // divider: true,
|
|
|
- // content: '-',
|
|
|
- // className: 'slot4'
|
|
|
- // }, {
|
|
|
- // flex: 1,
|
|
|
- // values: [],
|
|
|
- // className: 'slot5',
|
|
|
- // textAlign: 'center'
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // streetSlots: [
|
|
|
- // {
|
|
|
- // flex: 1,
|
|
|
- // values: [],
|
|
|
- // className: 'slot1',
|
|
|
- // textAlign: 'center'
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // allCityData: {},
|
|
|
- // addressProvince: '省',
|
|
|
- // addressCity: '市',
|
|
|
- // addressXian: '区',
|
|
|
- // addressStreet: '街道'
|
|
|
+ popupVisible: false,
|
|
|
+ allAddress: '',
|
|
|
+ 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 () {
|
|
|
+ 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()
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
- // 获取城市地址
|
|
|
- // this.$http.get('/data/city.json').then(response => {
|
|
|
- // this.allCityData = response.data
|
|
|
- // })
|
|
|
- // this.$nextTick(() => {
|
|
|
- // setTimeout(() => {
|
|
|
- // this.addressSlots[0].defaultIndex = 0
|
|
|
- // }, 100)
|
|
|
- // })
|
|
|
+ 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
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- onProvinceChange (picker, values) {
|
|
|
- this.province = picker.getValues()[0]
|
|
|
- var cityArr = []
|
|
|
- for (var key in this.provinceCity[this.province]) {
|
|
|
- cityArr.push(key)
|
|
|
+ // 取消选择地址
|
|
|
+ cancel () {
|
|
|
+ this.popupVisible = false
|
|
|
+ this.allAddress = ''
|
|
|
+ },
|
|
|
+ // 完成选择地址
|
|
|
+ sure () {
|
|
|
+ this.allAddress = this.currentProvince + this.currentCity + this.currentArea
|
|
|
+ this.popupVisible = 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))
|
|
|
}
|
|
|
- this.slots2[0].values = cityArr
|
|
|
},
|
|
|
- onCityChange (picker, values) {
|
|
|
- this.city = picker.getValues()[0]
|
|
|
- var countyArr = []
|
|
|
- for (var key in this.provinceCity[this.province][this.city]) {
|
|
|
- countyArr.push(key)
|
|
|
+ determineType (value) {
|
|
|
+ if (typeof value === 'number') {
|
|
|
+ return this.getCodeValue(value)
|
|
|
}
|
|
|
- this.slots3[0].values = countyArr
|
|
|
+ return value
|
|
|
},
|
|
|
- onCountyChange (picker, values) {
|
|
|
- this.county = picker.getValues()[0]
|
|
|
+ cleanList (name) {
|
|
|
+ this[name] = []
|
|
|
}
|
|
|
- // onAddressChange (picker, values) {
|
|
|
- // // let sheng = Object.keys(s)
|
|
|
- // let shi = Object.keys(this.allCityData[values[0]])
|
|
|
- // let index = shi.indexOf(values[1])
|
|
|
- // let xian = this.allCityData[values[0]][shi[index]]
|
|
|
- // this.xianObj = xian
|
|
|
- // picker.setSlotValues(1, shi)
|
|
|
- // this.addressProvince = values[0]
|
|
|
- // this.addressCity = values[1]
|
|
|
- // this.addressXian = values[2]
|
|
|
- // picker.setSlotValues(2, Object.keys(xian))
|
|
|
- // },
|
|
|
- // onStreetChange (picker, values) {
|
|
|
- // this.addressStreet = values[0]
|
|
|
- // }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 'addressXian': {
|
|
|
- // handler (val, oval) {
|
|
|
- // let street = this.xianObj[this.addressXian]
|
|
|
- // this.streetSlots[0].values = street
|
|
|
- // }
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang="scss">
|
|
|
- .address{
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .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%;
|
|
|
- background: #eaeaea;
|
|
|
- .header{
|
|
|
- margin: 0 auto;
|
|
|
+ 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: .25rem;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ float: right;
|
|
|
+ font-size: .3rem;
|
|
|
+ color: #c7c7c7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .choose{
|
|
|
+ background: #fff;
|
|
|
+ div.form-group {
|
|
|
padding: 0 .2rem;
|
|
|
- width: 100%;
|
|
|
- height: .9rem;
|
|
|
- line-height: .9rem;
|
|
|
- text-align: center;
|
|
|
- background: #fff;
|
|
|
- overflow: hidden;
|
|
|
- i{
|
|
|
- padding-top: .25rem;
|
|
|
- float: left;
|
|
|
- color: #000;
|
|
|
- font-size: .38rem;
|
|
|
+ position: relative;
|
|
|
+ &:first-child{
|
|
|
+ height: 1rem;
|
|
|
+ line-height: 1rem;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ label{
|
|
|
+ margin-right: .6rem;
|
|
|
+ font-size: .3rem;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #505050;
|
|
|
}
|
|
|
- span{
|
|
|
- font-size: .28rem;
|
|
|
- color: #787878;
|
|
|
+ input{
|
|
|
+ height: 1rem;
|
|
|
+ border: none;
|
|
|
}
|
|
|
- a{
|
|
|
- float: right;
|
|
|
- font-size: .3rem;
|
|
|
- color: #c7c7c7;
|
|
|
+ i{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ 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;
|
|
|
+ &.active {
|
|
|
+ border-bottom: #52697f solid 3px;
|
|
|
+ color: #52697f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address-container {
|
|
|
+ background-color: #fff;
|
|
|
+ ul {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ li {
|
|
|
+ padding: 8px 10px;
|
|
|
+ border-top: 1px solid #f6f6f6;
|
|
|
+ &.active {
|
|
|
+ color: #52697f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|