reservation-uniapp-250509/service-uniapp-client/pages/mine/address.vue

<template>
	<view class="address">
		<mNavbar title="地址管理" :leftClick="leftClick"></mNavbar>

		<view v-if="addressList.length > 0" class="address-list">
			<van-radio-group v-model="selectAddress">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<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/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">
								<van-radio @click="addDefault(item)" :name="item.id" label-disabled icon-size="30rpx">
									默认地址
								</van-radio>
							</view>

							<view class="edit-btn">
								<image src="@/static/address/edit-icon.png" mode="aspectFill"></image>
								<text @click="getAddressDetail(item.id)" class="control-title">编辑</text>
							</view>

							<view class="del-btn">
								<image src="@/static/address/delete-icon.png" mode="aspectFill"></image>
								<text class="control-title" @click="deleteAddress(item.id)">删除</text>
							</view>

						</view>
					</view>
				</van-list>
			</van-radio-group>
		</view>

		<van-empty v-else image="/static/empty/address.png" image-size="400rpx" description="暂无服务地址请添加" />

		<van-popup v-model:show="showOverlay" position="bottom" round closeable close-icon="close" :z-index="100"
			:style="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
			<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title"
				@clickAddressIcon="selectAddr"></redactAddress>
		</van-popup>

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

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	import redactAddress from '@/components/address/redactAddress.vue'
	import {
		showNotify
	} from 'vant'
	import {
		showConfirmDialog
	} from 'vant';
	import Position from '@/utils/position.js'

	export default {
		components: {
			mNavbar,
			redactAddress
		},
		data() {
			return {
				selectAddress: 0, //单选框选中的地址
				showOverlay: false,
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				addressList: [],
				addressDetail: {},
				loading: false,
				finished: false,
				title: '新增地址'
			}
		},
		onShow() {
			if (this.$route.query.current == 'payOrder') {
				this.showOverlay = true;
			}
			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.showOverlay = true
					}
				})
			},

			//返回个人中心
			leftClick() {
				if (this.$route.query.current == 'payOrder') { //如果是从订单支付过来添加地址的就再调回去
					return uni.navigateTo({
						url: `/pages/order/payOrder?orderId=${this.$route.query.orderId}`
					})
				}

				uni.switchTab({
					url: '/pages/index/center'
				})
			},

			//添加和修改地址
			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.showOverlay = false
						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.showOverlay = false
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getAddressList()
					}
				})
			},

			//删除地址
			deleteAddress(id) {
				showConfirmDialog({
					title: '删除地址',
					message: '确认删除此地址?删除后数据不可恢复',
				}).then(() => {
					this.$api('deleteAddress', {
						id
					}, res => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							this.getAddressList()
						}
					})
				}).catch(() => {});
			},

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

			//验证用户参数合法性
			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;

				.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: linear-gradient(180deg, #6FDFBE, #5AC796);
			}
		}
	}

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

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