<template>
  <view class="wrap">
		<view class="top">
			<view class='top-one'>
				<view class="top-one-first">
					<u-icon name="map-fill" color="#FC6703" size='40'></u-icon>
				</view>
				
				<view class="top-one-two">
					取件地址
				</view>
				
				<view class="top-one-last">
					现场取件
					<u-icon name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
			
			<view class="top-two">
				<view class="top-two-first">
					
				</view>
				
				<view class="top-two-last">
					<view>重庆市渝中区长江索道南站观景台旁</view>
					<view>15808046328</view>
				</view>
			</view>
			
			<view class="top-three" @click="productPop=true">
				<view class="top-three-first">
					<u-icon name="plus-circle-fill" color="#FC6703" size='40'></u-icon>
				</view>
				
				<view class="top-three-two">
					支持多个收货地址
				</view>
				
				<view class="top-three-last">
					去修改
					<u-icon name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="middle">
			<view class="middle-list" v-for="(item,index) in 3" :key='index'>
				<view class="list-title">
					云相册
				</view>
				<view class="product-list" v-for="(item,a) in 2" :key='a'>
					<view class="product-left">
						<image src="../static/album/custom.png"></image>
					</view>
					
					<view class="product-right">
						<view class="product-number">
							<text>
								单张照片
							</text>
							<text>
								x1
							</text>
						</view>
						
						<view class="product-price">
							<text style="font-size: 32rpx;">¥</text>
							20
						</view>
						
						<view class="product-download">
							<text>下载/打印</text>
							<u-icon name="arrow-right" color="#666666"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view>
				商品合计
				<text class="bottom-price">
					<text style="font-size: 28rpx;">¥</text>100
				</text>
			</view>
			<text class="big-btn">
				提交订单
			</text>
		</view>
		<!-- 产品弹窗 -->
		<u-popup  :show="productPop" :round="20" @close="productPop=false" closeable>
			<view class="son-wrap">
				<view class="product-head">
					修改收货地址
				</view>
				<view style="flex: 1;overflow-y: scroll;">
					<view class="top">
						<view class='top-one'>
							<view class="top-one-first">
								<u-icon name="map-fill" color="#FC6703" size='40'></u-icon>
							</view>
							
							<view class="top-one-two">
								取件地址
							</view>
							
							<view class="top-one-last">
								现场取件
								<u-icon name="arrow-right" color="#666666"></u-icon>
							</view>
						</view>
						
						<view class="top-two">
							<view class="top-two-first">
								
							</view>
							
							<view class="top-two-last">
								<view>重庆市渝中区长江索道南站观景台旁</view>
								<view>15808046328</view>
							</view>
						</view>
					</view>
					
					<view class="middle">
						<view class="middle-list" v-for="(item,index) in 3" :key='index'>
							<view class="list-title">
								云相册
							</view>
							<view class="product-list" v-for="(item,a) in 2" :key='a'>
								<view class="product-left">
									<image src="../static/album/custom.png"></image>
								</view>
								
								<view class="product-right">
									<view class="product-number">
										<text>
											单张照片
										</text>
										<text>
											x1
										</text>
									</view>
									
									<view class="product-price">
										<text style="font-size: 32rpx;">¥</text>
										20
									</view>
									
									<view class="product-btnWrap">
										<text>下载/打印</text>
										<text class="product-btn" @click="addressPop=true">修改地址</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="bottom">
						<text class="pop-btn">
							提交订单
						</text>
					</view>
				</view>
				
			</view>
			
		</u-popup>
		<!-- 地址弹窗 -->
		<u-popup  :show="addressPop" :round="20" @close="addressPop=false" closeable>
			<view class="son-wrap">
				<view class="address-head">
					<text v-for="(item,index) in addressTabList" :key="index" :class="{on:active==index}" @click="tabChange(index)">
						{{item}}
					</text>
				</view>
				<view style="flex:1;overflow-y: scroll;">
					<!-- 现场取件 -->
					<view v-if="active==0">
						<view class="live-top">
							<view class="live-top-list">
								<text>
									选择城市
								</text>
								<view>
									重庆市渝中区
									<u-icon name="arrow-right" color="#666666"></u-icon>
								</view>
							</view>
							<view class="live-top-list">
								<text>
									经营主体
								</text>
								<view>
									重庆索道北广场
									<u-icon name="arrow-right" color="#666666"></u-icon>
								</view>
							</view>
							<view class="live-top-list">
								<text>
									详细地址
								</text>
								<view>
									重庆市渝中区
								</view>
							</view>
						</view>
						
						<view class="live-bottom">
							<text>确认</text>
						</view>
					</view>
					<!-- 邮寄到家 -->
					<view v-else>
						<view class="mail-top">
							<view>
								原地址
							</view>
							<view>
								重庆市渝北区恒大御都会A组团2栋5-6
							</view>
							<view>
								<text>潘永坪</text>
								<text>15808046328</text>
							</view>
						</view>
						
						<view class="mail-middle">
							
						</view>
						<view class="mail-bottom">
							
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
  data() {
    return{
      productPop:false,//产品弹窗
      addressPop:false,//地址弹窗
      addressTabList:['现场取件','邮寄到家'],//导航栏标题列表
      active:0,//导航栏下标
    }
  },
  methods: {
    //地址导航栏变化
    tabChange(index){
      this.active=index
    }
  }
}
</script>
<style lang="scss" scoped>
	.wrap{
		padding: 24rpx;
	}
	.top{
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	.top-one{
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		align-items: center;
	}
	.top-one-first{
		width: 70rpx;
	}
	.top-one-two{
		flex: 1;
	}
	.top-one-last{
		display: flex;
	}
	.top-two{
		display: flex;
		color: #666666;
	}
	.top-two-first{
		width: 70rpx;
	}
	.top-two-last view{
		margin-top: 10rpx;
	}
	.top-three{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.top-three-first{
		width: 70rpx;
	}
	.top-three-two{
		flex: 1;
	}
	.top-three-last{
		display: flex;
	}
	.middle{
		padding-bottom:24rpx 24rpx 120rpx 24rpx;
	}
	.middle-list{
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 24rpx;
	}
	.list-title{
		font-weight: bold;
	}
	.product-list{
		margin: 20rpx 0;
		display: flex;
	}
	.product-left{
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}
	.product-left image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
	}
	.product-right{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.product-number{
		display: flex;
		justify-content: space-between;
		font-weight: bold;
	}
	.product-price{
		color: $red;
		font-size: 36rpx;
		font-weight: bold;
	}
	.product-download{
		background:#F7F7F7;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		height: 56rpx;
		align-items: center;
		padding: 0 20rpx;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 1;
		padding: 0 24rpx;
	}
	.bottom-price{
		color: $red;
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.big-btn{
		border-radius: 40rpx;
		width: 200rpx;
		height: 80rpx;
		font-size: 32rpx;
		line-height: 80rpx;
	}
	// 产品弹窗
	.product-head{
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 0 0;
	}
	.son-wrap{
		height:80vh;
		display: flex;
		flex-direction:column;
	}
	.pop-btn{
		display: inline-block;
		width: 100%;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: $red;
		font-size: 32rpx;
		border-radius: 44rpx;
		color: #ffffff;
	}
	.product-btnWrap{
		display: flex;
		justify-content: space-between;
	}
	.product-btn{
		display: inline-block;
		width: 136rpx;
		text-align: center;
		height: 52rpx;
		line-height: 50rpx;
		border: 1px solid #eeeeee;
		border-radius: 26rpx;
		font-size: 24rpx;
	}
	// 修改地址弹窗
	.address-head{
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 40rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 0 0;
		text:last-child{
			margin-left: 80rpx;
		}
		text.on{
			color: $red;
		}
	}
	.live-top{
		background: #ffffff;
	}
	.live-top-list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		border-bottom: 1px solid #eeeeee;
		>view{
			display: flex;
		}
		text{
			color: #666666;
		}
	}
	.live-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		z-index: 1;
		text{
			display: inline-block;
			width: 100%;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			background: $red;
			border-radius: 44rpx;
			color: #ffffff;
			font-size: 32rpx;
		}
	}
</style>