<template>
	<view>
		<uni-nav-bar  :statusBar="true" left-icon="left"   title="Shipping Cart" color="#000000"   :fixed="true" @clickLeft="back">
			<block slot="right">
				<view class="nav_right">
					<image src="../../static/img/delete1.png" mode=""></image>
				</view>
			</block>
		</uni-nav-bar>
		<view class="empty" v-if="isEmpty">
			<image src="/static/img/cart3.png" mode=""></image>
			<text>Your cart is empty</text>
			<button>Shop Now</button>
		</view>
		<template v-if="!isEmpty">
			<view class="cart_info">
				<image src="/static/img/Shipped.png" mode=""></image>
				<view class="cart_title_content">Buy US$32.00 more to enjoy FREE STANDARD SHIPPING!</view>
				<view class="cart_title_right">Add</view>
			</view>
			<view class="cart">
				<view class="cart_content">
					<view class="good_info" v-for="(item,index) in 3 " :key="index">
						<image src="../../static/img/select2.png" mode="" class="cart_select"></image>
						<view class="good_info_left ">
							<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
							<view class="left_info">
								<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
								<view class="left_info_bottom">
									<view class="info_lable">
										<text>Multicolor;41</text>
										<image src="/static/img/bottom.png" mode=""></image>
									</view>
									<text>x1</text>
								</view>
								<view class="info_price">
									<text>US$314.00</text>
									<uni-number-box background="#FFFFFF">1</uni-number-box>
			
								</view>
							</view>
						</view>
					</view>
						
				</view>
			</view>
			
			<view class="cart">
				<view class="cart_content">
					<view class="good_info" v-for="(item,index) in 3 " :key="index">
						<image src="../../static/img/select.png" mode="" class="cart_select"></image>
						<view class="good_info_left ">
							<view class="good_info_image">
								<view class="good_info_image_tips">sold out</view>
							</view>
							
							<view class="left_info left_info1">
								<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
								<view class="left_info_bottom">
									<view class="info_lable">
										<text>Multicolor;41</text>
										<image src="/static/img/bottom.png" mode=""></image>
									</view>
									<text>x1</text>
								</view>
								<view class="info_price">
									<text>US$314.00</text>
									<image src="../../static/img/delete2.png" mode="" class="delete"></image>
								</view>
							</view>
						</view>
					</view>
						
				</view>
			</view>
		</template>
		
		
		<view class="recommend">
			<view class="recommend_title">RECOMMEND</view>
			<view class="recommend_content">
				<view class="recommend_content_item" v-for="(item,index) in 4 " :key="index">
					<view class="recommend_content_item_image"></view>
					<text>Adidas Yeezy Boost 350 DazzlingBlue Black</text>
					<view class="recommend_content_item_pric">US$314.00</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEmpty:false
			}
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		onShow() {
			uni.hideTabBar()
		},
		onHide(){
			uni.showTabBar()
		}
		
	}
</script>
<style>
	page{
		background-color: #F6F5FA;
	}
</style>
<style lang="scss" scoped>
	.uni-navbar{
		font-size: 32rpx;
		font-weight: bold;
	}
	.uni-numbox{
		border: 1px solid #999999;
		border-radius: 14rpx;
		height: 42.67rpx;
		
		/deep/ .uni-numbox__minus{
			border-radius: 14rpx;
		}
		/deep/.uni-numbox__plus{
			border-radius: 14rpx;
		}
		/deep/.uni-numbox__value{
			border-left: 1px solid #999999;
			border-right: 1px solid #999999;
			height: 100%;
			width: 63.33rpx;
			font-size: 21.33rpx;
		}
	}
	.nav_right{
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 136rpx;
		font-size: 30.67rpx;
		font-weight: 400;
		image{
			width: 125.33rpx;
			height: 125.33rpx;
			margin-bottom: 49.33rpx;
		}
		button{
			font-size: 29.33rpx;
			font-weight: 500;
			background-color: black;
			color: white;
			height: 45.67rpx;
			line-height: 45.67rpx;
			border-radius: 0;
			margin-top: 33.33rpx;
		}
	}
	.recommend{
		margin-top: 124rpx;
	}
	.cart_info{
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36.67rpx 32rpx;
		font-size: 24rpx;
		font-weight: 400;
		
		image{
			width: 41.33rpx;
			height: 41.33rpx;
		}
		.cart_title_content{
			width: 510.67rpx;
		}
		.cart_title_right{
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.cart{
		background-color: white;
		margin: 0 18rpx;
		padding: 42rpx 12.67rpx;
		margin-top: 16.67rpx;
		
		.cart_title{
			padding-left: 12.67rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 76rpx;
		}
		.cart_content{
			
			.good_info{
				display: flex;
				align-items: center;
				color: #000000;
				justify-content: space-between;
				border-bottom: none;
				padding: 0;
				margin-bottom: 78.67rpx;
				
				&:last-child{
					margin-bottom: 0;
				}
				.good_info_image{
					position: relative;
					.good_info_image_tips{
						width: 117.33rpx;
						height: 117.33rpx;
						border-radius: 50%;
						background: rgba(0, 0, 0, 0.3);
						color: white;
						font-size: 22rpx;
						font-weight: 800;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 99;
						position: absolute;
						top: 50%;
						margin-top: -60rpx;
						left: 50%;
						margin-left: -60rpx;
					}
				}
				.left_info1{
					color: #C4C4C4;
					
					.left_info_bottom{
						color: #C4C4C4;
						
						.info_lable{
							border: 1px solid #C4C4C4;
						}
					}
					.info_price{
						color: #C4C4C4;
					}
				}
				.cart_select{
					width: 34.67rpx;
					height: 34.67rpx;
				}
				.info_name{
					width: 406.67rpx;
				}
				.delete{
					width: 36rpx;
					height: 36rpx;
				}
			}
			
			
		}
	}
	
</style>