T

apps/home/Tpl/default/User/address_w3g.html

 <include file="__THEME__/public_header_w3g"/>
+<script type="text/javascript" src="__THEME__/js/Area.js"></script>
 <link rel="stylesheet" href="__APP__/css/address_w3g.css">
     <div id="app" class="body">
 		<div class="layout_v">
@@ -22,14 +23,7 @@
 		</div>
 		
 		<van-popup v-model="showPicker" round position="bottom">
-			<van-picker
-				ref="picker"
-				show-toolbar 
-				title="收货地址" 
-				:columns="columns" 
-				@confirm="onAreaConfirm"
-				@cancel="onAreaCancel"
-				@change="onAreaChange"></van-picker>
+			<van-area title="收货地址" :area-list="areaList" />
 		</van-popup>
 		
 		<div id="provinceData" style="display: none;">
@@ -150,9 +144,7 @@
 					area: "{$address.location}",
 					address: "{$address['address']}",
 					showPicker: false,
-					loading: false,
-					columns: [],
-					selected: ['', '', '']
+					areaList: areaList
 				}
 			},
 			created:function(){
@@ -171,132 +163,22 @@
 				}
 			},
 			methods: {
-				//Helper
-				indexOf: function(array, call) {
-					for(let i = 0; i < array.length; i++) {
-						if(call(array[i])) {
-							return i
-						}
-					}
-					return -1
-				},
-				//当选择省变化
-				onProvinceChange: function(picker, p) {
-					console.log("当选择省变化")
-					console.log(p)
-					let that = this
-					if(p.children.length == 0) {
-						that.getCity(p.id, r => {
-							let idx = that.indexOf(that.columns, i => { return i.text == p.text })
-							that.$set(that.columns[idx], 'children', r.map(r => { return { text: r.title, id: r.area_id, children: [] } }))
-							let c = p.children[0]
-							that.selected[1] = c.text
-							that.onCityChange(picker, c)
-						})
-					} else {
-						that.selected[1] = p.children[0].text
-						picker.setColumnValues(1, p.children)
-						that.onCityChange(picker, p.children[0])
-					}
-				},
-				//当选择市变化
-				onCityChange: function(picker, c) {
-					console.log("当选择市变化")
-					console.log(c)
-					let that = this
-					if(c.children.length == 0) {
-						that.getArea(c.id, r => {
-							c.children = r.map(r => { return { text: r.title, id: r.area_id } })
-							that.selected[2] = c.children[0].text
-							picker.setColumnValues(2, c.children)
-						})
-					} else {
-						that.selected[2] = c.children[0].text
-						picker.setColumnValues(2, c.children)
-					}
-				},
 				onArea: function() {
 					let that = this
 					that.showPicker = true
-					if(that.columns[0].children.length == 0) {
-						that.$nextTick(() => {
-							let p = that.columns[0]
-							that.selected[0] = p.text
-							that.onProvinceChange(that.$refs.picker, p)
-						})
-					}
 				},
+				
 				onAreaConfirm: function(picker, values) {
 					
 				},
+				
 				onAreaCancel: function(picker, values) {
 					
 				},
-				onAreaChange: function(picker, values) {
-					console.log("Values = ")
-					console.log(values)
-					console.log("Selected = ")
-					console.log(this.selected)
-					let that = this
-					let found = that.columns.filter( r => { return r.text == values[0] })
-					let p = undefined
-					if(found.length > 0) {
-						p = found[0]
-						if(p.text != that.selected[0]) {
-							that.onProvinceChange(picker, p)
-							return
-						}
-					} else {
-						that.onProvinceChange(picker, that.columns[0])
-						return
-					}
-					let c = undefined
-					found = p.children.filter( r => { return r.text == values[1] })
-					if(found.length > 0) {
-						c = found[0]
-						if(c.text != that.selected[1]) {
-							that.onCityChange(picker, c)
-							return
-						}
-					} else {
-						that.onCityChange(picker, p.children[0])
-						return
-					}
-					that.selected[2] = values[2]
-				},
+				
 				saveAddress: function() {
 					
 				},
-				
-				//Helper
-				getCity: function(id, call) {
-					let that = this
-					$.ajax({
-					    type:'POST',
-					    url:"{:U('home/User/getAreaList')}",
-					    data: { id: id },
-					    dataType:'json',
-					    success:function(res){
-							if(res.status == 1) {
-								call && call(res.data)
-							}
-					    }
-					})
-				},
-				getArea: function(id, call) {
-					let that = this
-					$.ajax({
-					    type:'POST',
-					    url:"{:U('home/User/getAreaList')}",
-					    data:{ id: id },
-					    dataType:'json',
-					    success:function(res){
-					        if(res.status == 1) {
-								call && call(res.data)
-							}
-					    }
-					})
-				}
 			}
 		})