<template>
	<view class="wrap">
		<view class="addAddress">
			<view class="addIcon">
				<image src="../../static/add.png" mode="aspectFill"></image>
			</view>
			<view class="addressText">{{addAddress}}</view>
			<image src="../../static/right.png" mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="orderInfo">
				<view class="title">
					<image src="../../static/store.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
					<text>非常戴镜</text>
				</view>
				<view class="infoBox">
						<view class="infoTop">
							<image src="../../static/img/goods/p10.jpg" mode="aspectFill"></image>
							<view class="infoRight"> 
								<text class="goodName">商品名称商品名称商品名称名称名称</text>
								<text class="remarks">支持7天无理由退货 顺丰发货</text>
								<view class="priceBox">
									<view class="price">￥198</view>
									<view class="counter">
										<view class="btn" disabled="this.disabled" type="default" @click="counter(false)">-</view>
										<text>{{count}}</text>
										<view class="btn" type="default" @click="counter(true)">+</view>
									</view>
								</view>
							</view>
						</view>
						<view class="infoBottom">
							<view class="norm">规格 <text>玫瑰金/钛合金</text></view>
							<view class="shippingMethod">配送方式 <text>玫瑰金/钛合金</text></view>
							<view class="message">买家留言 
								<input type="text" value="" placeholder="建议提前协商(50字以内)" />
							</view>
						</view>
					</view>
			</view>
			<view class="payWay">
				<view class="item">
					<text>支付方式</text>
					<view class="itemRight">
						<view class="rightText">
							<view class="choosePayWay">
								<image src="../../static/store.png" mode="aspectFill"></image>
								<text>微信支付</text>
							</view>
							<view class="randomSubstraction">最高随机立减￥99</view>
						</view>
						<image src="../../static/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item">
					<text>优惠券</text>
					<view class="itemRight">
						<view class="rightText">
							<view class="chooseOffers">
								<text>-￥70.00</text>
							</view>
							<view class="preferentialWay">最大优惠</view>
						</view>
						<image src="../../static/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item">
					<text>运费</text>
					<view class="itemRight">
						<view class="freight">￥{{freight}}</view>
					</view>
				</view>
				<view class="item">
					<text>合计</text>
					<view class="itemRight">
						<view class="total">￥{{total}}</view>
					</view>
				</view>
			</view>
<!-- 			
			<view class="checkBox">
				<checkbox-group>
					<label>
						<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
					</label>
				</checkbox-group>
			</view> -->
		</view>
		<view class="footer">
			<view class="footerLeft">实付金额:<text>￥{{total}}</text></view>
			<view class="footerRight">
				<view class="paybtn">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addAddress :'添加收货地址',
				count:1,
				disabled:false,
				total:120,
				freight:0.00
				// isAnonymous:
			};
		},
		methods:{
			counter(isadd){
				if(isadd){
					this.count++
				}else{
					this.count <= 1? this.disabled = true:this.count--
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		height: 100vh;
		background-color:#F2F2F2 ;
		font-family: PingFangSC-Regular;
		letter-spacing: -0.23px;
	}
	.addAddress{
		background-color:#ffffff ;
		box-sizing: border-box;
		height: 124rpx;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		.addIcon{
			background-color:#F2F2F2 ;
			height: 56rpx;
			width: 60rpx;
			border-radius: 4rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 40rpx;
		}
		image{
			height: 28rpx;
			width: 28rpx;
		}
		.addressText{
			font-size: 28rpx;
			color: #333333;
			margin-right: 364rpx;
		}
	}
	.content{
		background-color:#F2F2F2 ;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
		box-sizing: border-box;
		.orderInfo{
			width: 670rpx;
			height: 488rpx;
			background-color:#ffffff ;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0 40rpx 40rpx 40rpx;
			.title{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				height: 60rpx;
				line-height: 40rpx;
				padding: 10rpx 10rpx 10rpx 0rpx;
				image{
					margin-right: 20rpx;
				}
			}
			.infoBox{
				margin-top: 42rpx;
				.infoTop{
					display: flex;
					flex-direction: row;
					image{
						height: 188rpx;
						width: 188rpx;
						margin-right: 24rpx;
					}
					.infoRight{
						width: 374rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						.goodName{
							font-size: 28rpx;
							color: #333333;
						}
						.remarks{
							font-size: 20rpx;
							color: #999999;
						}
						.priceBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							.price{
								color: #FF6B4A;
								font-size: 28rpx;
							}
							.counter{
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								font-size: 28rpx;
								color: #333333;
								width: 122rpx;
								.btn{
									display: flex;
									justify-content: center;
									line-height: 32rpx;
									height: 32rpx;
									width: 32rpx;
									background-color: #F2F2F2;
									color: #CFCFCF;
								}
							}
						}
					}
				}
				.infoBottom{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					font-size: 24rpx;
					color: #333333;
					text{
						color: #999999;
						margin-left: 20rpx;
					}
					
					.norm{
						margin-top: 28rpx;
					}
					.shippingMethod{
						margin-top: 12rpx;
					}
					.message{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 18rpx;
						input{
							margin-left: 20rpx;
							width: 75%;
						}
					}
				}
			}
		}
		.payWay{
			height: 464rpx;
			width: 670rpx;
			background-color: #ffffff;
			color: #333333;
			font-size: 24rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0 52rpx 0rpx 40rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			.item{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 115rpx;
				.itemRight{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					image{
						height: 24rpx;
						width: 12rpx;
					}
					.rightText{
						margin-right: 20rpx;
						text-align: right;
						.choosePayWay{
							text{
								color: #333333 ;
							}
							image{
								height:26rpx ;
								width: 30rpx;
								margin-right: 20px;
							}
						}
						.randomSubstraction{
							color: #FF6B4A ;
						}
						.preferentialWay{
							color: #999999 ;
						}
					}
					.freight,.total{
						margin-right: 32rpx;
					}
					text{
						color: #FF6B4A ;
					}
				}
			}
		}
		// .checkBox{
		// 	height: 58rpx;
		// 	line-height: 58rpx;
		// 	width: 100%;
		// 	margin-top: 36rpx;
		// 	margin-left: 40rpx;
		// 	font-size: 12px;
		// 	color: #999999;
		// }
	}
	.footer{
		height: 112rpx;
		width: 100%;
		background-color: #F2F2F2;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.footerLeft{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50%;
			color: #333333;
			text{
				color: #FF6B4A;
			}
		}
		.footerRight{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 50%;
			margin-right: 26rpx;
			.paybtn{
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FF6B4A;
				border-radius: 20px;
				border-radius: 20px;
				color: #FFFFFF;
				width: 204rpx;
				height: 80rpx;
			}
		}
			
	}
	
</style>