commonInfo.vue

<template>
	<view>
		<view class="top">
			<view v-for="(item,index) in tabList" :key='index' @click="tabClick(index)" :class="{on:active==index}">
				{{item}}
			</view>
		</view>
		
		<view class="middle">
			<view v-if="active==0" class="contact-list" v-for="(item,index) in 8" :key="index">
				<view class="contact-name">
					<text>姓名：潘永坪</text>
					<text>15808046328</text>
				</view>
				
				<view class="contact-id">
					证件号：500109198808199110
				</view>
				
				<view class="contact-edit">
					<view>
						<u-icon name='file-text' color='#666666' size='56'></u-icon>
						编辑
					</view>
					<view>
						<u-icon name='trash' color='#666666' size='56'></u-icon>
						删除
					</view>
				</view>
			</view>
			
			<view v-else class="address-list" v-for="(item,a) in 8" :key="a">
				<view class="address-name">
					<text>收件人：潘永坪</text>
					<text>15808046328</text>
				</view>
				
				<view class="address-add">
					重庆市渝北区恒大御都会2栋5-6
				</view>
				
				<view class="address-edit">
					<view>
						<label class="radio">
							<radio />
							默认地址
						</label>
					</view>
					<view>
						<u-icon name='file-text' color='#666666' size='56'></u-icon>
						编辑
					</view>
					<view>
						<u-icon name='trash' color='#666666' size='56'></u-icon>
						删除
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text v-if="active==0">新增联系人</text>
			<text v-else>新增地址</text>
		</view>
		 
	</view>
</template>

<script>
export default {
  data() {
    return {
      active:0,//导航下标
      tabList:['联系人','收货地址']//导航标题
    }
  },
  onLoad(option) {
    
  },
  methods: {
    //---导航点击
    tabClick(index){
      this.active=index
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
	position: fixed;
	top: 0;
	z-index: 1;
	background: #fff;
	display: flex;
	height: 100rpx;
	align-items: center;
	width: 100%;
	view{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	view.on{
		color: $theme;
		font-weight: bold;
	}
}
.middle{
	padding:100rpx 0 128rpx 0 ;
}
.address-list,.contact-list{
	background: #fff;
	padding: 40rpx;
	border-radius: 8rpx;
	margin-top: 20rpx;
}
.address-name,.contact-name{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
}
.address-add,.contact-id{
	color: $grey;
	margin-top: 20rpx;
	padding-bottom: 38rpx;
	border-bottom: 1rpx solid #ededed;
}
.contact-edit{
	display: flex;
	margin-top: 30rpx;
	color: #666666;
	justify-content: space-between;
	>view{
		display: flex;
		align-items: center;
	}
}
.address-edit{
	display: flex;
	margin-top: 30rpx;
	color: #666666;
	>view{
		display: flex;
		align-items: center;
	}
	>view:first-child{
		flex: 1;
	}
	>view:last-child{
		margin-left: 60rpx;
	}
}
.bottom{
	height: 128rpx;
	background: #fff;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 1;
	width: 100%;
	padding: 0 32rpx;
	text{
		display:flex;
		height: 88rpx;
		width: 100%;
		align-items: center;
		justify-content: center;
		background: $red;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
	}
}

</style>