drink-answer-wechat-uniapp-24-9-2/pages_order/mine/address.vue

<template>
	<view class="address">
		
		<navbar title="地址管理" leftClick @leftClick="leftClick" />

		<view v-if="addressList.length > 0" class="address-list">
			<!-- <uv-radio-group v-model="selectAddress">
				<view v-for="item in addressList" :key="item.id" class="address-item">

					<view class="address-item-top">
						<view class="img-box">
							<image src="../static/address/icon.png" mode="aspectFill"></image>
						</view>

						<view class="address-info">
							<view class="user-info">
								<text class="user-name">{{ item.name }}</text>
								<text class="user-phone">{{ item.phone }}</text>
								<text v-if="item.defaultId == '1'" class="is-default">默认</text>
							</view>

							<view class="address-detail">
								{{ item.address + " " + item.addressDetail }}
							</view>
						</view>
					</view>

					<view class="controls">

						<view class="default-checkbox">
							<uv-radio @click="addDefault(item)" 
							:name="item.id" 
							label-disabled 
							size="30rpx"
							icon-size="30rpx">
								默认地址
							</uv-radio>
						</view>

						<view class="edit-btn">
							<uv-icon name="edit-pen"></uv-icon>
							<text @click="getAddressDetail(item.id)" class="control-title">编辑</text>
						</view>

						<view class="del-btn">
							<uv-icon name="trash"></uv-icon>
							<text class="control-title" @click="deleteAddress(item.id)">删除</text>
						</view>

					</view>
				</view>
			</uv-radio-group> -->
			<addressList 
			controls
			@deleteAddress="deleteAddress"
			@editAddress="getAddressDetail"
			@editDefault="addDefault"
			:addressList="addressList"/>
		</view>

		<view
		style="padding: 100rpx 0;"
		v-else>
			<uv-empty 
			mode="history"
			textSize="28rpx"
			iconSize="100rpx"/>
		</view>

		<uv-popup
		round="40rpx"
		ref="addressPopup"
			:customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
			<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title"
				@clickAddressIcon="selectAddr"></redactAddress>
		</uv-popup>

		<view class="add-btn">
			<view @click="addBtn" class="btn">
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	import redactAddress from '../components/address/redactAddress.vue'
	import addressList from '../components/address/addressList.vue'
	import Position from '@/utils/position.js'

	export default {
		components: {
			redactAddress,
			addressList
		},
		data() {
			return {
				selectAddress: 0, //单选框选中的地址
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				addressList: [
					{
						id : 1,
						name : 'xx',
						phone : '1305xxxx802',
						address : '广东省广州市越秀区',
						addressDetail : '城南故事C3栋2802',
					},
					{
						id : 2,
						name : 'xx',
						phone : '1305xxxx802',
						address : '广东省广州市越秀区',
						addressDetail : '城南故事C3栋2802',
					},
					{
						id : 3,
						name : 'xx',
						phone : '1305xxxx802',
						address : '广东省广州市越秀区',
						addressDetail : '城南故事C3栋2802',
					},
				],
				addressDetail: {},
				title: '新增地址'
			}
		},
		onShow() {
			// if (this.$route.query.current == 'payOrder') {
			// 	this.$refs.addressPopup.open('bottom')
			// }
			// this.getAddressList()
		},
		methods: {

			//list列表滑动到底部自动新增数据列表
			onLoad() {
				this.queryParams.pageSize += 10
				this.getAddressList()
			},

			//获取地址列表
			getAddressList() {
				this.$api('getAddressList', this.queryParams, res => {
					if (res.code == 200) {
						this.addressList = res.result.records || [];
						this.addressList.forEach(n => { //筛选默认地址
							if (n.defaultId == '1') {
								this.selectAddress = n.id
							}
						})
						if (this.queryParams.pageSize > res.result.total) {
							this.finished = true
						}
					}
					this.loading = false
				})
			},

			//获取地址详情
			getAddressDetail(id) {
				this.title = '修改地址'
				this.$api('getAddressDetail', {
					id
				}, res => {
					if (res.code == 200) {
						this.addressDetail = res.result;
						this.$refs.addressPopup.open('bottom')
					}
				})
			},

			//返回个人中心
			leftClick() {
				uni.navigateBack(-1)
			},

			//添加和修改地址
			saveOrUpdate() {
				let isOk = this.parameterVerification()
				if (isOk && !isOk.auth) {
					return showNotify({
						type: 'warning',
						message: isOk.title,
						'z-index': 10000
					});
				}

				let data = {
					name: this.addressDetail.name,
					phone: this.addressDetail.phone,
					address: this.addressDetail.address,
					addressDetail: this.addressDetail.addressDetail,
					defaultId: this.addressDetail.defaultId || '0',
					latitude: this.addressDetail.latitude,
					longitude: this.addressDetail.longitude
				}

				if (this.addressDetail.id) {
					data.id = this.addressDetail.id
				}

				this.$api('addOrUpdateAddress', data, res => {
					if (res.code == 200) {
						this.$refs.addressPopup.close()
						this.getAddressList()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						if (this.$route.query.current == 'payOrder') { //如果是从订单支付过来添加地址的就再调回去
							uni.navigateTo({
								url: `/pages/order/payOrder?orderId=${this.$route.query.orderId}`
							})
						}
					}
				})
			},

			//新增默认地址
			addDefault(item) {
				this.selectAddress = item.id
				this.$api('addOrUpdateAddress', {
					id: item.id,
					defaultId: '1',
				}, res => {
					if (res.code == 200) {
						this.$refs.addressPopup.close()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getAddressList()
					}
				})
			},

			//删除地址
			deleteAddress(id) {
				let self = this
				uni.showModal({
					title: '删除地址',
					content: '确认删除此地址?删除后数据不可恢复',
					success(e) {
						if(e.confirm){
							self.$api('deleteAddress', {
								id
							}, res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									self.getAddressList()
								}
							})
						}
					}
				})
			},

			//点击新增按钮
			addBtn() {
				this.title = '新增地址'
				this.addressDetail = { //初始化数据
					name: '',
					phone: '',
					address: '',
					addressDetail: '',
					defaultId: '',
					latitude: '',
					longitude: ''
				}
				this.$refs.addressPopup.open('bottom')
			},

			//验证用户参数合法性
			parameterVerification() {
				let {
					name,
					phone,
					address,
					addressDetail
				} = this.addressDetail
				if (name.trim() == '') {
					return {
						title: '请填写联系人',
						auth: false
					}
				} else if (phone.trim() == '') {
					return {
						title: '请填写手机号',
						auth: false
					}
				} else if (address.trim() == '') {
					return {
						title: '请填写所在地区',
						auth: false
					}
				} else if (addressDetail.trim() == '') {
					return {
						title: '请填写详细地址',
						auth: false
					}
				} else if (phone.trim() != '') {
					if (!this.$utils.verificationPhone(phone)) {
						return {
							title: '手机号格式不合法',
							auth: false
						}
					}
				}
				return {
					title: '验证通过',
					auth: true
				}
			},

			//地图上选择地址
			selectAddr() {
				Position.getLocation(res => {
					Position.selectAddress(res.longitude, res.latitude, success => {
						this.setAddress(success)
					})
				})
			},

			//提取用户选择的地址信息复制给表单数据
			setAddress(res) {
				//经纬度信息
				this.addressDetail.latitude = res.latitude
				this.addressDetail.longitude = res.longitude

				if (!res.address && res.name) { //用户直接选择城市的逻辑
					return this.addressDetail.address = res.name
				}
				if (res.address || res.name) {
					return this.addressDetail.address = res.address + res.name
				}
				this.addressDetail.address = '' //用户啥都没选就点击勾选
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		width: 750rpx;
		margin: 0rpx auto;
		background: #F5F5F5;
		box-sizing: border-box;
		min-height: 100vh;

		.address-list {
			padding: 40rpx 20rpx 120rpx 20rpx;

			// .address-item {
			// 	background: white;
			// 	border-radius: 20rpx;
			// 	overflow: hidden;
			// 	margin-bottom: 20rpx;
			// 	padding: 15rpx 15rpx 0rpx 15rpx;
			// 	width: 680rpx;

			// 	.address-item-top {
			// 		border-bottom: 1px dashed #D3D1D1;
			// 		display: flex;
			// 		align-items: center;
			// 		padding: 0rpx 0rpx 15rpx 0rpx;

			// 		.img-box {
			// 			width: 120rpx;
			// 			height: 120rpx;

			// 			image {
			// 				width: 75%;
			// 				height: 75%;
			// 				display: block;
			// 				margin: 12.5% auto;
			// 			}
			// 		}

			// 		.address-info {
			// 			width: calc(100% - 120rpx);
			// 			height: 100%;
			// 			display: flex;
			// 			flex-direction: column;
			// 			justify-content: space-between;

			// 			.user-info {
			// 				display: flex;
			// 				align-items: center;

			// 				text {
			// 					display: block;
			// 					line-height: 40rpx;
			// 					margin-right: 20rpx;
			// 				}

			// 				.user-name,
			// 				.user-phone {
			// 					font-size: 30rpx;
			// 				}

			// 				.is-default {
			// 					display: flex;
			// 					align-items: center;
			// 					justify-content: center;
			// 					background: #FEB773;
			// 					color: white;
			// 					width: 80rpx;
			// 					height: 35rpx;
			// 					border-radius: 20rpx;
			// 					font-size: 22rpx;
			// 				}
			// 			}

			// 			.address-detail {
			// 				color: #4a4a4a;
			// 				font-size: 26rpx;
			// 				overflow: hidden;
			// 				display: -webkit-box;
			// 				-webkit-box-orient: vertical;
			// 				-webkit-line-clamp: 2;
			// 				text-overflow: ellipsis;
			// 			}
			// 		}
			// 	}

			// 	.controls {
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		align-items: center;
			// 		font-size: 26rpx;
			// 		padding: 15rpx 15rpx 25rpx 15rpx;

			// 		.default-checkbox {
			// 			display: flex;

			// 			text {
			// 				margin-left: 8rpx;
			// 			}
			// 		}

			// 		.control-title {
			// 			height: 30rpx;
			// 			line-height: 30rpx;
			// 			color: #666666;
			// 		}

			// 		view {
			// 			display: flex;
			// 			align-items: center;
			// 		}

			// 		image {
			// 			width: 23rpx;
			// 			height: 23rpx;
			// 			vertical-align: middle;
			// 			margin-right: 8rpx;
			// 		}
			// 	}
			// }
		}

		.add-btn {
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 100rpx;
			background: white;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 85%;
				height: 80rpx;
				border-radius: 40rpx;
				color: white;
				text-align: center;
				font-size: 28rpx;
				background: $uni-color;
			}
		}
	}

	@media all and (min-width: 961px) {
		.add-btn {
			left: 50% !important;
			transform: translateX(-50%);
		}
	}

	//选择位置地图样式
	:deep(.uni-system-choose-location) {
		z-index: 99999 !important;
	}
</style>