<template>
	<view class="">
		<view class="addressHeader">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="地址管理"></z-nav-bar>

		</view>
		<view class="addressMain">
			<view class="addressItem" v-for="(item,index) in addressList" :key="index">				
				<view class="addrContent">
					<view class="addrContentTop">
						<view class="userName">
							{{item.username}}
						</view>
						<view class="userTel">
							{{item.userphone}}
						</view>
						<view class="userMoren" v-if="item.isdefault==1">
							默认
						</view>
					</view>
					<view class="addrContentBottom">
						<view class="userAddress">
							{{item.areaidpathtext}} {{item.useraddress}}
						</view>
					</view>
				</view>
				<view class="addrEdit" @click="toAddress(1,index)">
					<u-icon name="edit-pen" color="#a7a5a5" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="addressFooter">
			<view class="addAddress" @click="toAddress(0,0)">
				+ 添加收货地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				addressList: []
			}
		},
		onShow() {
			this.getUserAddress()
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			getUserAddress() {
				this.$http
					.post(`book/useraddress/getUserAddress?userId=${this.userInfo.id}`)
					.then(res => {
						if (res.code == 0) {
							this.addressList = res.list
						}
					})
			},
			// 跳转页面
			toAddress(type, index) {
				uni.navigateTo({
					url: `/pages/user/addAddress?type=${type}&index=${index}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressItem {
		width: 100%;
		display: flex;
		padding: 20rpx 10rpx;
		margin: 25rpx 0 0 0;
		align-items: center;
		background-color: #fff;

		.addrContent {
			margin-left: 40rpx;
			flex: 1;

			.addrContentTop {
				display: flex;
				align-items: flex-end;
				margin: 0 0 15rpx 0;

				.userName {
					font-size: 35rpx;
					font-weight: bold;
					margin-right: 30rpx;
				}

				.userTel {
					font-size: 25rpx;
					color: #888;
				}

				.userMoren {
					border: 1px solid #fd6004;
					color: #fd6004;
					padding: 3rpx 10rpx;
					font-size: 22rpx;
					border-radius: 10rpx;
					margin: 0 0 0 20rpx;
				}
			}

			.addrContentBottom {
				font-size: 32rpx;
			}
		}

		.addrEdit {
			padding: 10rpx;
		}
	}

	.addressFooter {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 30rpx;

		.addAddress {
			font-size: 34rpx;
			width: 90%;
			text-align: center;
			color: #fff;
			background-image: linear-gradient(90deg, #eba00b 0%, #c96713 100%);
			border-radius: 20rpx;
			padding: 25rpx 0;
		}
	}
</style>
