zhibo/pages_user/address.vue

<template>
	<view class="content">
		<view class="inner">
			<!-- <view class="top">
				<view class="del" @click="delAllAddress">清空地址</view>
			</view> -->
			<view v-for="(item,index) in address" :key="index" class="address-item">
				<view class="info" @click="selectAddress(item)">
					<view class="title">
						<view v-if="item.isDefault == 1" class="tag">默认</view>
						{{item.province}}{{item.city}}{{item.district}}{{item.detail}}
					</view>
					<view class="name-phone">
						<text class="text">{{item.realName}}</text>
						<text class="text">{{$parsePhone(item.phone)}}</text>
					</view>
				</view>
				<view class="operat-box">
					<image src="/static/images/del1.png" mode="" @click="delAddress(item)"></image>
					<image src="/static/images/edit.png" mode="" @click="editAddress(item)"></image>
				</view>
			</view>
			<view v-if="address.length == 0" class="no-data-box" @click="getAddressList()">
				<image src="/static/images/no_data.png" mode="aspectFit"></image>
				<view class="empty-title">暂无数据</view>
			</view>

		</view>
		<view class="btn-box">

			<view class="sub-btn" @click="addAdress">新建收货地址</view>
		</view>
	</view>
</template>

<script>
	import {
		userAddr, // 获取用户收货地址
		delAddress ,// 删除地址
	} from "@/api/order.js"
	// import {getAddressList,delAddress,delAllAddress} from '@/api/address'
	export default {
		data() {
			return {
				address: [],
			}
		},
		onLoad() {
				this.getUserAddr()
			uni.$on('refreshAddress', () => {
				this.getUserAddr()
			})

		},
		// mounted() {
		// 	this.getUserAddr()
		// },
		methods: {
			// 获取用户收货地址
			getUserAddr() {
				this.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
				userAddr(this.userInfo.userId).then(res => {
						if (res.code == 200) {
							console.log("用户收货地址>>>>", res.data)
							// this.userAddrLiat = res
							this.address = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},

			// 选地址
			selectAddress(item) {
				uni.$emit('updateAddress', item);
				uni.navigateBack({
					delta: 1
				});
			},
			// 编辑地址
			editAddress(item) {
				uni.navigateTo({
					url: './addAddress?type=edit&addressId=' + item.addressId
				})
			},
			// 删除所有地址(暂无)
			// delAllAddress(item) {
			// 	uni.showModal({
			// 		title: "提示",
			// 		content: "确认删除所有地址吗?",
			// 		showCancel: true,
			// 		cancelText: '取消',
			// 		confirmText: '确定',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				var data = {}
			// 				delAllAddress(data).then(
			// 					res => {
			// 						if (res.code == 200) {
			// 							uni.showToast({
			// 								icon: 'success',
			// 								title: "操作成功",
			// 							});
			// 							this.getAddressList()
			// 						} else {
			// 							uni.showToast({
			// 								icon: 'none',
			// 								title: "请求失败",
			// 							});
			// 						}
			// 					},
			// 					rej => {}
			// 				);

			// 			} else {
			// 				// 否则点击了取消  
			// 			}
			// 		}
			// 	})
			// },

			// 删除地址
			delAddress(item) {
				uni.showModal({
					title: "提示",
					content: "确认删除此地址吗?",
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							// 用户点击确定
							var data = {
								addressId: item.addressId
							}
							delAddress(data).then(
								res => {
									if (res.code == 200) {
										uni.showToast({
											icon: 'success',
											title: "操作成功",
										});
										this.getUserAddr()
									} else {
										uni.showToast({
											icon: 'none',
											title: "请求失败",
										});
									}
								},
								rej => {}
							);

						} else {
							// 否则点击了取消  
						}
					}
				})
			},
			// getAddressList(){
			// 	uni.showLoading({
			// 		title:"正在加载中"
			// 	})
			// 	getAddressList().then(
			// 		res => {
			// 			uni.hideLoading()
			// 			if(res.code==200){
			// 				this.address=res.data;
			// 			}else{
			// 				uni.showToast({
			// 					icon:'none',
			// 					title: "请求失败",
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			// 新建收货地址
			addAdress() {
				uni.navigateTo({
					url: './addAddress?type=add'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.inner {
			flex: 1;
			padding: 20upx 20upx 160upx;

			.top {
				padding: 0upx 20upx 20upx;
				text-align: right;

				.del {
					font-size: 28upx;
					font-family: PingFang SC;
					color: #999999;
				}
			}

			.address-item {
				background: #FFFFFF;
				border-radius: 16upx;
				padding: 46upx 40upx 50upx 24upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20upx;

				.info {
					width: 75%;

					.title {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
						line-height: 42upx;
						word-break: break-all;

						.tag {
							padding: 0 6upx;
							height: 32upx;
							line-height: 32upx;
							font-size: 22upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							background: #0bb3f2;
							border-radius: 4upx;
							float: left;
							margin-right: 10upx;
							margin-top: 5upx;
						}
					}

					.name-phone {
						margin-top: 30upx;
						display: flex;
						align-items: center;

						.text {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							margin-right: 22upx;

							&:last-child {
								margin-right: 0;
							}
						}
					}
				}

				.operat-box {
					display: flex;
					align-items: center;

					image {
						width: 30upx;
						height: 30upx;
						margin-left: 38upx;

						&:first-child {
							margin-left: 0;
						}
					}
				}
			}
		}

		.no-data-box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.btn-box {
			z-index: 9999;
			width: 100%;
			padding: 30upx;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			background: #FFFFFF;

			.sub-btn {

				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #0bb3f2;
				border-radius: 44upx;
			}
		}
	}
</style>