building-materials-shop-uniapp-241014/pages_order/mine/address.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"
		:addressDetail="addressDetail" 
		@saveOrUpdate="saveOrUpdate" 
		:title="title"></redactAddress>
		
		<quick-order-entry
		ref="quickOrderEntry"
		/>

		<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()
			}
		},
		onShow() {
			this.getAddressList()
		},
		methods: {

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

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

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

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

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

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

				this.$api('saveOrUpdateAddress', 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('updateDefaultAddress', {
					id: id,
				}, 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.$refs.addressPopup.open({ //初始化数据
					name: '',
					phone: '',
					address: '',
					addressDetails: '',
					defaultFlag: '',
					latitude: '',
					longitude: ''
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		width: 750rpx;
		margin: 0rpx auto;
		background: #F5F5F5;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);

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

		.add-btn {
			position: fixed;
			padding-bottom: env(safe-area-inset-bottom);
			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>