<template>
	<div class="content">
		
		<!-- table切换 -->
		<div class="tab">
			<div>
				<p @click="tab(1)" :class="[index==1?'active':'']">寄件人</p>
				<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p>
			</div>		
		</div>
		<!-- 寄件人 -->
		<div v-if="index==1">
			<div class="jjinfo">
				<div>
					<div class="jj">
						<div class="jjaddress">
							<p>寄</p>
							<div>
								<p>测试 18896778789</p>
								<p>江苏省苏州市相城区测试</p>
							</div>
						</div>
						<div class="cz">
							<p>
								<img src="../assets/images/del.png" alt="">
								<span>修改</span>
							</p>						
							<p>
								<img src="../assets/images/whrite.png" alt="">
								<span>编辑</span>
							</p>
							<p>
								<img src="../assets/images/copy.png" alt="">
								<span>复制</span>
							</p>
						</div>
					</div>
				</div>			
			</div>
			<!-- 寄件 -->
			<div class="btn-jj">
				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
			</div>
		</div>
		
		<!-- 收件人 -->
		<div v-if="index==2">
			<div class="jjinfo">
				<div>
					<div class="jj">
						<div class="jjaddress">
							<p style="background: #fa9c22;">收</p>
							<div>
								<p>测试 18896778789</p>
								<p>江苏省苏州市相城区测试</p>
							</div>
						</div>
						<div class="cz">
							<p>
								<img src="../assets/images/del.png" alt="">
								<span>修改</span>
							</p>						
							<p>
								<img src="../assets/images/whrite.png" alt="">
								<span>编辑</span>
							</p>
							<p>
								<img src="../assets/images/copy.png" alt="">
								<span>复制</span>
							</p>
						</div>
					</div>
				</div>			
			</div>
			<!-- 寄件 -->
			<div class="btn-jj">
				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
			</div>
		</div>
		
		
		
		
		
	</div>	
</template>

<script>
	export default{
		data(){
			return {
				titlename:"地址簿",
				index:1
			}
		},
		created:function(){
			
		},
		methods:{
			tab(obj){
				this.index=obj
			},
			link(obj){
				this.$router.push({path:"/Newaddress",query:{type:obj}})
			}
		},
		computed:{
			
		}
	}
</script>

<style scoped lang="less">
	.content{
		.tab{
			font-size: .36rem;
			color: #00c4b8;
			padding: .33rem;			
			div{
				display: flex;
				border: .01rem solid #00c4b8;
				text-align: center;			
				border-radius: .05rem;
				p{
					flex: 1;
					padding: .1rem 0rem;
									
				}
				p.active{
					background: #00c4b8;
					color: white;
				}
			}
			
		}
		.jjinfo{
			font-size: .36rem;
			color: #999999;
			padding: .0rem .33rem 0.33rem;
			>div{
				background: white;
				border-radius: .05rem;
				padding: .1rem .3rem;
				.jj{
					display: flex;
					justify-content: space-between;
					padding: .2rem 0rem;
					flex-wrap: wrap;
					.jjaddress{
						display: flex;
						padding: .1rem 0rem .2rem;
						
						>p{
							font-size: .24rem;
							font-weight: bold;
							display: inline-block;
							width:.5rem;
							height: .5rem;
							background: #00c4b8;
							text-align: center;
							line-height: .5rem;
							color: white;
							border-radius: 50%;
							margin-right: .3rem;
						}
						div{
							//font-weight: bold;
							max-width: 4.2rem;
							p:nth-of-type(1){
								font-size: .3rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .3rem;
							}
						}
					}
					.cz{
						border-top: .01rem solid #ededed;
						width: 100%;
						display: flex;
						flex-direction: row-reverse;
						font-size: .24rem;
						color: #999999;
						padding-top: .2rem;
						p{
							margin-left: .2rem;
							img{
								width:.22rem;
								height: .24rem;
							}
							span{
								position: relative;
								top: -.01rem;
							}
						}
						
					}
				}
		    }
		
		}
		
		
		
		.btn-jj{
			padding: .33rem;
			button{
				width: 100%;
			}
		}
	}
	
</style>
