使用地区选择组件

pages/address/create.vue

@@ -1,10 +1,10 @@
 <template>
 	<view>
-		<u-navbar :title="addrId ? '编辑地址' : '添加地址'" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
+		<u-navbar :title="addrId ? '编辑地址' : '添加地址'" :border="true" :placeholder="true" :autoBack="true"
+			bgColor="#fff" />
 		<!-- 表单组件 -->
 		<view class="address-add">
 			<u--form labelPosition="left" ref="form" labelWidth="90">
-
 				<u-form-item label="收货人:" borderBottom required>
 					<u--input v-model="form.receiver" border="none" placeholder="请输入收货人"></u--input>
 				</u-form-item>
@@ -27,14 +27,17 @@
 			<button :loading="loading" type="default" @click="saveAddress">保存</button>
 		</view>
 
-		<u-picker ref="uPicker" :show="show" :columns="columns" @change="changeHandler" @confirm="confirm"
-			@cancel="cancel" keyName="areaName"></u-picker>
+		<area-picker :area-show="areaShow" @cancel="cancel" @confirmArea="confirmArea" />
 	</view>
 </template>
 
 <script>
 	import $http from '@/utils/request.js'
+	import AreaPicker from '../../components/area-picker/area-picker.vue'
 	export default {
+		components: {
+			AreaPicker
+		},
 		data() {
 			return {
 				loading: false,
@@ -52,18 +55,10 @@
 					areaId: '', // 区ID/编码
 					area: '', // 区
 				},
-				show: false,
-				columns: [
-					[],
-					[],
-					[]
-				],
+				areaShow: false,
 			}
 		},
 
-		/**
-		 * 生命周期函数--监听页面加载
-		 */
 		onLoad(options) {
 			this.addrId = options.addrId
 			if (options.addrId) {
@@ -73,10 +68,11 @@
 
 		methods: {
 			getAddrDetail() {
+				uni.hideLoading();
 				$http.post('/api/v1/mp/user/addr/query', {
 					addrId: this.addrId
 				}).then(res => {
-
+					uni.hideLoading();
 					if (res.code == 0) {
 						let item = res.data
 						this.form = {
@@ -84,92 +80,28 @@
 							cityShow: `${ item.province }-${ item.city }-${ item.area }`
 						}
 					}
+				}).catch(() => {
+					uni.hideLoading();
 				})
 			},
 
-			async getArea() {
-				const picker = this.$refs.uPicker
-
-				let provinceRes = await $http.post('/api/v1/mp/area/listByPid', {
-					pid: 0
-				})
-
-				let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
-					pid: provinceRes && provinceRes.data && provinceRes.data[0].areaId
-				})
-				let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
-					pid: cityRes && cityRes.data && cityRes.data[0].areaId
-				})
-				picker.setColumnValues(0, provinceRes.data)
-				picker.setColumnValues(1, cityRes.data)
-				picker.setColumnValues(2, areaRes.data)
-
-			},
 			selectArea() {
-				this.getArea()
-				this.show = true
+				this.areaShow = true
 			},
 
-			async changeHandler(e) {
-				const {
-					columnIndex,
-					index,
-					value,
-					// 微信小程序无法将picker实例传出来，只能通过ref操作
-					picker = this.$refs.uPicker
-				} = e
-				if (columnIndex === 0) {
-					let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
-						pid: value && value[0].areaId
-					})
-					let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
-						pid: cityRes && cityRes.data && cityRes.data[0].areaId
-					});
-					picker.setColumnValues(1, cityRes.data)
-					picker.setColumnValues(2, areaRes.data)
-				}
-				if (columnIndex === 1) {
-					let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
-						pid: value && value[1].areaId
-					})
-					picker.setColumnValues(2, areaRes.data)
-				}
-
-
-			},
-			// 回调参数为包含columnIndex、value、values
-			confirm(e) {
-				const picker = this.$refs.uPicker
-				const {
-					value
-				} = e
-				this.form.province = value[0].areaName
-				this.form.provinceId = value[0].areaId
-				this.form.city = value[1].areaName
-				this.form.cityId = value[1].areaId
-				this.form.area = value[2].areaName
-				this.form.areaId = value[2].areaId
-				this.form.cityShow = value.map(item => item.areaName).join('-')
-				this.show = false
-				picker.setColumnValues(0, [])
-				picker.setColumnValues(1, [])
-				picker.setColumnValues(2, [])
-			},
-			cancel() {
-				this.show = false
+			confirmArea(obj) {
+				// console.log(obj);
+				this.form.province = obj.province
+				this.form.provinceId = obj.provinceId
+				this.form.city = obj.city
+				this.form.cityId = obj.cityId
+				this.form.area = obj.area
+				this.form.areaId = obj.areaId
+				this.form.cityShow = obj.cityShow
+				this.areaShow = false
 			},
 
 			saveAddress() {
-				// receiver: '',
-				// mobile: '',
-				// city: '',
-				// addr: '',
-				// privinceId: '', // 省ID/编码
-				// privince: '', // 省
-				// cityId: '', // 市ID/编码
-				// city: '', // 市
-				// areaId: '', // 区ID/编码
-				// area: '', // 区
 				let _this = this
 				if (!_this.form.receiver) {
 					uni.$u.toast('请输入收货人');
@@ -205,25 +137,6 @@
 				})
 			},
 		},
-
-		// 表单提交
-		// saveAddress() {
-		// 	const app = this
-		// 	if (app.disabled) {
-		// 		return false
-		// 	}
-		// app.$refs.uForm.validate(valid => {
-		//   if (valid) {
-		//     app.disabled = true
-		//     AddressApi.add(app.form)
-		//       .then(result => {
-		//         app.$toast(result.message)
-		//         uni.navigateBack()
-		//       })
-		//       .finally(() => app.disabled = false)
-		//   }
-		// })
-
 	}
 </script>
 

pages/address/index.vue

@@ -46,7 +46,6 @@
 
 <script>
 	import $http from '@/utils/request.js'
-
 	export default {
 		data() {
 			return {
@@ -73,15 +72,20 @@
 		},
 
 		methods: {
-
 			// 获取页面数据
 			getPageData() {
+				uni.showLoading({
+					title: '加载中'
+				});
 				const app = this
 				app.isLoading = true
 				Promise.all([app.getDefaultId(), app.getAddressList()])
 					.then(() => {
+						uni.hideLoading();
 						// 列表排序把默认收货地址放到最前
 						app.onReorder()
+					}).catch(() => {
+						uni.hideLoading();
 					})
 			},
 
@@ -135,8 +139,8 @@
 						if (res.confirm) {
 							$http.post('/api/v1/mp/user/addr/remove', {
 								addrId: addressId
-							}).then(res=>{
-								if(res.code == 0){
+							}).then(res => {
+								if (res.code == 0) {
 									_this.getPageData()
 									uni.$u.toast('删除成功');
 								}
@@ -166,9 +170,9 @@
 	.address-item {
 		margin: 20rpx auto 20rpx auto;
 		padding: 30rpx 40rpx;
-		width: 94%;
+		width: 95%;
 		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
-		border-radius: 16rpx;
+		border-radius: 10rpx;
 		background: #fff;
 	}