aluminium-trading-uniapp-240925/pages_order/center/addressListManage.vue

<template>
	<view class="address">

		<navbar title="地址管理" leftClick @leftClick="leftClick" />

		<view class="address-list">
			<addressList controls ref="addressList" @deleteAddress="deleteAddress" @editAddress="editAddress"
				@editDefault="editDefault" />
		</view>


		<redactAddress ref="addressPopup" @saveOrUpdate="saveOrUpdate" :title="title">
		</redactAddress>


		<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'

	export default {
		components: {
			redactAddress,
			addressList
		},
		data() {
			return {
				title: '新增地址',
				type: '',
			}
		},
		onLoad(args) {
			this.type = args.type

			if (this.type == 'back') {
				this.addBtn()
			}
		},
		mounted() {
			this.getAddressList()
		},
		methods: {

			//获取地址列表
			getAddressList() {
				this.$refs.addressList.getAddressList()
			},

			//获取地址详情
			editAddress(address) {
				this.$refs.addressPopup.open({
					...address
				})
			},

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

			//添加和修改地址
			saveOrUpdate(addressDetail) {

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

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

				this.$api(data.id ? 'editAddress' : 'addAddress', data, res => {
					if (res.code == 200) {
						this.$refs.addressPopup.close()
						this.getAddressList()

						if (this.type == 'back') {
							uni.navigateBack(-1)
						}

						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					}
				})
			},

			//修改默认地址
			editDefault(id) {
				this.$api('editAddress', {
					id: id,
					defaultFlag: 1
				}, res => {
					if (res.code == 200) {
						this.$refs.addressPopup.close()
						this.getAddressList()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					}
				})
			},

			//删除地址
			deleteAddress(id) {
				let self = this
				uni.showModal({
					title: this.$t('components.deleteAddress'),
					content: this.$t('components.confirmDeleteAddress'),
					success(e) {
						if (e.confirm) {
							self.$api('editAddress', {
								id: id,
								isDisable: 1,
								defaultFlag: 0
							}, res => {
								if (res.code == 200) {
									self.getAddressList()
									uni.showToast({
										title: this.$t('components.deleteSuccessful'),
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},

			//点击新增按钮
			addBtn() {
				this.title = '新增地址'
				this.$refs.addressPopup.open({ //初始化数据
					name: '',
					phone: '',
					address: '',
					addressDetail: '',
					defaultFlag: '0',
					latitude: '',
					longitude: ''
				})
			},
		}
	}
</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;
		}

		.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>