<template>
	<view class="cart-pages">
		<view class="cart-bar">
			<view>共25件商品</view>
			<view @click="editCart">
				<text class="blue" v-if="!isEdit">管理</text>
				<text class="blue" v-else>完成</text>
			</view>
		</view>
		<view class="goods-list">
			<!-- 按分类显示 -->
			<view class="goods-class-box" v-for="item in 2">
				<view class="goods-class-head">
					<view>
						<u-checkbox shape="circle" name='goodsClas' @change="goodsClasChange">
							人气零食
						</u-checkbox>
					</view>
					<view class="des">
						满<text>300</text>乐豆才可购买
					</view>
				</view>
				<view class="goods-class-list">
					<!-- 商品列表 -->
					<view class="goods-item" v-for="(item,index) in 3" :key="index">
						<view class="checkbox">
							<u-checkbox v-if="index!=1||isEdit" shape="circle" name='goodsItem'></u-checkbox>
						</view>
						<view class="goods-imgs">
							<view v-if="index==1" class="goods-staus">已售罄</view>
							<u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
						</view>
						<view class="goods-info">
							<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
							<view class="goods-price">
								<view><text>50</text>乐豆</view>
								<view v-if="index!=1">
									<u-number-box :min="1"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cart-submit">
			<view>
				<u-checkbox shape="circle" name='checkAll' @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
			</view>
			<view v-if="!isEdit">
				<view>总计：<text>450</text>乐豆</view>
				<u-button type="warning" @click="toOrder()">立即下单</u-button>
			</view>
			<view v-else>
				<u-button type="error">删除</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkAll: false,// 全选
				isEdit: false, // 是否编辑模式
			};
		},
		methods: {
			// 全选
			checkAllChange(e) {
				console.log(e);
			},
			// 每个分类的全选
			goodsClasChange(e){
				console.log(e);
			},
			// 编辑购物车
			editCart(){
				this.isEdit = !this.isEdit
			},
			//立即下单
			toOrder(){
				uni.redirectTo({
					url:"/pages/toOrder/index"
				})
			}
		},
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.cart-pages{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.cart-bar{
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		padding:20upx;
		.blue{
			color: #007AFF;
		}
	}
	.goods-list{
		padding: 20upx 0;
		flex-grow: 1;
		overflow: auto;
		.goods-class-box{
			background: #FFFFFF;
			box-shadow: 1px 1px 3px #eee;
			margin-bottom: 20upx;
			.goods-class-head{
				display: flex;
				align-items: center;
				padding: 20upx;
				border-bottom: 1px solid #F8F8F8;
				justify-content: space-between;
				.des{
					font-size: 26upx;
					text{
						color: #FA3534;
					}
				}
			}
		}
		
		.goods-item{
			padding: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F8F8F8;
			&:last-child{
				border: 0;
			}
			.checkbox{
				width: 80rpx;
				overflow: hidden;
			}
			.goods-imgs{
				position: relative;
				.goods-staus{
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					z-index: 10000;
					border-radius: 100%;
					background: rgba($color: #000000, $alpha: 0.5);
					text-align: center;
					line-height: 100rpx;
					left: 50%;
					top: 50%;
					margin-top: -50rpx;
					margin-left: -50rpx;
					color: #eee;
					font-size: 24upx;
				}
			}
			.goods-info{
				padding-left: 20upx;
			}
			.goods-price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;
				>view{
					&:first-child{
						font-size: 22upx;
						text{
							color: red;
							font-size: 30upx;
							margin-right: 6upx;
						}
					}
				}
			}
		}
	}
	.cart-submit{
		padding: 20upx;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view{
			&:last-child{
				display: flex;
				align-items: center;
				font-size: 26upx;
				text{
					color: red;
					font-size: 40upx;
				}
				> view{
					padding: 0 20upx;
				}
			}
		}
	}
}
</style>
