|
|
@@ -1,6 +1,6 @@
|
|
|
# Address 地址选择
|
|
|
|
|
|
-## 基本用法
|
|
|
+## 选择自定义地址
|
|
|
|
|
|
```html
|
|
|
<div class="address-list init" @click="showAddress">
|
|
|
@@ -14,6 +14,7 @@
|
|
|
:city="city"
|
|
|
:country="country"
|
|
|
:town="town"
|
|
|
+ customAddressTitle="请选择所在地区"
|
|
|
@onChange="onChange1"
|
|
|
@close="close1">
|
|
|
</nut-address>
|
|
|
@@ -25,27 +26,21 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showPopup:false,
|
|
|
- province:[{'name':''}], // 省 必传值：name
|
|
|
- city:[{'name':''}],// 市 必传值：name
|
|
|
- country:[{'name':''}],// 县 必传值：name
|
|
|
- town:[{'name':''}], // 镇 必传值：name
|
|
|
+ province:[{"id":1,"name":"北京"},{"id":2,"name":"广西"},{"id":3,"name":"江西"},{"id":4,"name":"四川"}], // 省
|
|
|
+ city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
|
|
|
+ country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
|
|
|
+ town:[], // 镇 必传值：name
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
showAddress(){
|
|
|
- this.province = Address.province //模拟数据
|
|
|
- const that = this
|
|
|
- setTimeout(()=>{
|
|
|
- this.showPopup = true // 使用 setTimeout 模拟数据请求时间
|
|
|
- },1000);
|
|
|
+ this.showPopup = true
|
|
|
},
|
|
|
onChange1(cal){
|
|
|
- // 赋值下一个行政区列表的内容
|
|
|
- if(Address[cal.next].length > 0){
|
|
|
- this[cal.next] = [].concat(Address[cal.next])
|
|
|
- }else{
|
|
|
+ // 判断下一个行政区列表的内容是否有值
|
|
|
+ if(this[cal.next].length < 1){
|
|
|
this.showPopup = false
|
|
|
- }
|
|
|
+ }
|
|
|
},
|
|
|
close1(val){
|
|
|
this.text1 = val.data.addressStr
|
|
|
@@ -55,9 +50,142 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
+## 选择已有地址
|
|
|
+```html
|
|
|
+<div class="address-list other" @click="showAddressExist">
|
|
|
+ <div class="titile">选择地址</div>
|
|
|
+ <div class="choose">{{text2}}</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<nut-address
|
|
|
+ v-model="showPopupExist"
|
|
|
+ type="exist"
|
|
|
+ :existAddress="existAddress"
|
|
|
+ @onChange="onChange2"
|
|
|
+ @close="close2"
|
|
|
+ :isShowCustomAddress="false"
|
|
|
+ existAddressTitle="配送至"
|
|
|
+ @selected="selected2">
|
|
|
+</nut-address>
|
|
|
+
|
|
|
+```
|
|
|
+```javascript
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPopupExist:false,
|
|
|
+ existAddress:[
|
|
|
+ {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
|
|
|
+ {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
|
|
|
+ {"id":3,"addressDetail":"发大水比 ","cityName":"放到","countyName":"广宁街道","provinceName":"钓鱼岛全区","selectedAddress":false,"townName":""},
|
|
|
+ {"id":4,"addressDetail":"还是想吧百度吧 ","cityName":"研发","countyName":"八里庄街道","provinceName":"北京","selectedAddress":false,"townName":""},
|
|
|
+ ],
|
|
|
+ text2:'请选择地址',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showAddressExist(){
|
|
|
+ this.showPopupExist = true
|
|
|
+ },
|
|
|
+
|
|
|
+ onChange2(cal){
|
|
|
+ console.log('change2',cal)
|
|
|
+ if(this[cal.next].length < 1){
|
|
|
+ this.showPopupOther = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ close2(val){
|
|
|
+ console.log(val)
|
|
|
+ if(val.type == 'exist'){
|
|
|
+ this.text2 = val.data.provinceName+val.data.cityName+val.data.countyName+val.data.townName+val.data.addressDetail
|
|
|
+ }else{
|
|
|
+ this.text2 = val.data.addressStr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selected2(prevExistAdd,nowExistAdd,arr){
|
|
|
+ console.log(prevExistAdd)
|
|
|
+ console.log(nowExistAdd)
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+```
|
|
|
|
|
|
|
|
|
-## 选择地址列表
|
|
|
+## 自定义图标
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="address-list other" @click="showCustomImg">
|
|
|
+ <div class="titile">选择地址</div>
|
|
|
+ <div class="choose">{{text3}}</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<nut-address
|
|
|
+ v-model="showPopupCustomImg"
|
|
|
+ type="exist"
|
|
|
+ :existAddress="existAddress"
|
|
|
+ @onChange="onChange3"
|
|
|
+ @close="close3"
|
|
|
+ :isShowCustomAddress="false"
|
|
|
+ @selected="selected3"
|
|
|
+ :defaultIcon="defaultIcon"
|
|
|
+ :selectedIcon='selectedIcon'>
|
|
|
+</nut-address>
|
|
|
+
|
|
|
+```
|
|
|
+```javascript
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPopupCustomImg:false,
|
|
|
+ selectedIcon:require('../../assets/svg/checked.svg'),
|
|
|
+ defaultIcon:require('../../assets/svg/unchecked.svg'),
|
|
|
+ existAddress:[
|
|
|
+ {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
|
|
|
+ {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
|
|
|
+ {"id":3,"addressDetail":"发大水比 ","cityName":"放到","countyName":"广宁街道","provinceName":"钓鱼岛全区","selectedAddress":false,"townName":""},
|
|
|
+ {"id":4,"addressDetail":"还是想吧百度吧 ","cityName":"研发","countyName":"八里庄街道","provinceName":"北京","selectedAddress":false,"townName":""},
|
|
|
+ ],
|
|
|
+ tex3:'请选择地址',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showCustomImg(){
|
|
|
+ this.showPopupCustomImg = true
|
|
|
+ },
|
|
|
+
|
|
|
+ onChange3(cal){
|
|
|
+ console.log('change2',cal)
|
|
|
+ if(this[cal.next].length < 1){
|
|
|
+ this.showPopupOther = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ close3(val){
|
|
|
+ console.log(val)
|
|
|
+ if(val.type == 'exist'){
|
|
|
+ this.text3 = val.data.provinceName+val.data.cityName+val.data.countyName+val.data.townName+val.data.addressDetail
|
|
|
+ }else{
|
|
|
+ this.text3 = val.data.addressStr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selected3(prevExistAdd,nowExistAdd,arr){
|
|
|
+ console.log(prevExistAdd)
|
|
|
+ console.log(nowExistAdd)
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+## 自定义地址与已有地址切换
|
|
|
|
|
|
```html
|
|
|
<div class="address-list other" @click="showAddressOther">
|
|
|
@@ -72,9 +200,9 @@ export default {
|
|
|
:city="city"
|
|
|
:country="country"
|
|
|
:town="town"
|
|
|
- @onChange="onChange2"
|
|
|
- @close="close2"
|
|
|
- @selected="selected">
|
|
|
+ @onChange="onChange4"
|
|
|
+ @close="close4"
|
|
|
+ @selected="selected4">
|
|
|
</nut-address>
|
|
|
|
|
|
|
|
|
@@ -85,49 +213,38 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showPopupOther:false,
|
|
|
- existAddress:[{
|
|
|
- 'provinceName':'',
|
|
|
- 'cityName':'',
|
|
|
- 'countyName':'',
|
|
|
- 'townName':'',
|
|
|
- 'addressDetail':'',
|
|
|
- }], // 已有地址列表 必传值：provinceName、cityName、countyName、townName、addressDetail
|
|
|
- province:[{'name':''}], // 省
|
|
|
- city:[{'name':''}],// 市
|
|
|
- country:[{'name':''}],// 县
|
|
|
- town:[{'name':''}], // 镇
|
|
|
+ existAddress:[
|
|
|
+ {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
|
|
|
+ {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
|
|
|
+ {"id":3,"addressDetail":"发大水比 ","cityName":"放到","countyName":"广宁街道","provinceName":"钓鱼岛全区","selectedAddress":false,"townName":""},
|
|
|
+ {"id":4,"addressDetail":"还是想吧百度吧 ","cityName":"研发","countyName":"八里庄街道","provinceName":"北京","selectedAddress":false,"townName":""},
|
|
|
+ ], // 已有地址列表 必传值：provinceName、cityName、countyName、townName、addressDetail 、selectedAddress
|
|
|
+ province:[{"id":1,"name":"北京"},{"id":2,"name":"广西"},{"id":3,"name":"江西"},{"id":4,"name":"四川"}], // 省
|
|
|
+ city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
|
|
|
+ country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
|
|
|
+ town:[], // 镇 必传值：name
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
showAddressOther(){
|
|
|
- const that = this
|
|
|
- this.province = Address.province
|
|
|
- setTimeout(()=>{
|
|
|
- this.existAddress = [].concat(Address.addressList)
|
|
|
- this.showPopupOther = true
|
|
|
- },1000)
|
|
|
+ this.showPopupOther = true
|
|
|
},
|
|
|
- onChange2(cal){
|
|
|
- if(Address[cal.next].length > 0){
|
|
|
- this[cal.next] = [].concat(Address[cal.next])
|
|
|
- }else{
|
|
|
+ onChange4(cal){
|
|
|
+ if(this[cal.next].length < 1){
|
|
|
this.showPopupOther = false
|
|
|
}
|
|
|
},
|
|
|
- close2(val){
|
|
|
+ close4(val){
|
|
|
if(val.type == 'exist'){
|
|
|
this.text2 = val.data.provinceName+val.data.cityName+val.data.countyName+val.data.townName+val.data.addressDetail
|
|
|
}else{
|
|
|
this.text2 = val.data.addressStr
|
|
|
}
|
|
|
},
|
|
|
- selected(val){
|
|
|
- this.existAddress.forEach((item)=>{
|
|
|
- this.$set(item,'selectedAddress',false)
|
|
|
- if(item.id == val.id){
|
|
|
- this.$set(item,'selectedAddress',true)
|
|
|
- }
|
|
|
- })
|
|
|
+
|
|
|
+ selected4(prevExistAdd,nowExistAdd,arr){
|
|
|
+ console.log(prevExistAdd)
|
|
|
+ console.log(nowExistAdd)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -140,13 +257,23 @@ export default {
|
|
|
|----- | ----- | ----- | -----
|
|
|
| v-model | 是否打开地址选择 | String | ''
|
|
|
| type | 地址选择类型 exist/custom | String | custom
|
|
|
-| province | 省 | Array | []
|
|
|
-| city | 市 | Array | []
|
|
|
-| country | 县 | Array | []
|
|
|
-| town | 乡/镇 | Array | []
|
|
|
-| existAddress | 已存在地址列表 | Array | []
|
|
|
+| province | 省，每个省的对象中，必须有 name 字段 | Array | []
|
|
|
+| city | 市，每个市的对象中，必须有 name 字段 | Array | []
|
|
|
+| country | 县，每个县的对象中，必须有 name 字段 | Array | []
|
|
|
+| town | 乡/镇，每个乡/镇的对象中，必须有 name 字段 | Array | []
|
|
|
+| existAddress | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | Array | []
|
|
|
+| defaultIcon | 已有地址列表默认图标，type=‘exist’ 时生效 | string | ''
|
|
|
+| selectedIcon | 已有地址列表选中图标，type=‘exist’ 时生效 | string | ''
|
|
|
+| isShowCustomAddress | 是否可以切换自定义地址选择，type=‘exist’ 时生效 | Boolean | true
|
|
|
+| customAddressTitle | 自定义地址选择标题，type='custom' 时生效 | string | '请选择所在地区'
|
|
|
+| existAddressTitle| 已有地址标题 ，type=‘exist’ 时生效| string | '配送至'
|
|
|
|
|
|
-注：existAddress 列表值中使用的 provinceName、cityName、countyName、townName、addressDetail 字段进行拼接。province/city/country/town 数组中，使用的是每个地址的 name 字段显示名称。
|
|
|
+ * provinceName 省的名字
|
|
|
+ * cityName 市的名字
|
|
|
+ * countyName 县的名字
|
|
|
+ * townName 乡/镇的名字
|
|
|
+ * addressDetail 具体地址
|
|
|
+ * selectedAddress 字段用于判断当前地址列表的选中项。
|
|
|
|
|
|
## Event
|
|
|
| 字段 | 说明 | 回调参数
|
|
|
@@ -165,8 +292,9 @@ export default {
|
|
|
## selected 回调参数
|
|
|
| 参数 | 说明 | 可能值
|
|
|
|----- | ----- | -----
|
|
|
-| type | 地址选择类型 exist/custom | exist
|
|
|
-| data | 选择地址列表的值 | 传入时列表的值
|
|
|
+| 第一个参数（prevExistAdd） | 选择前选中的地址 | {}
|
|
|
+| 第二个参数（nowExistAdd） | 当前选中的地址 | {}
|
|
|
+| 第三个参数（arr） | 选择完之后的已有地址列表（selectedAddress 值发生改变） | {}
|
|
|
|
|
|
## close 回调参数
|
|
|
| 参数 | 说明 | 可能值
|
杨小璐