shicai/pages/groupBooking/suborder.vue

<template>
	<view class="container">
		<view class="top">
		</view>
		<view class="content-box">
			<view class="tit">
				站点自提
			</view>
			<view class="tit1">
				<view class="address">
					上西路服务站
				</view>
				<view class="address1">
					台州市椒江区商海北街381号
				</view>
				<view class="address3">
					<image src="../../static/img/img71.png" class="icon-address"></image>
					<view class="distance">
						距您14.5km
					</view>
					<view class="border"></view>
					<view class="see">
						查看地图 >
					</view>
				</view>
			</view>
		  <view class="tit2">
		  	<view class="tit2-left">
		  		提货人
		  	</view>
				<view class="tit2-left2">
					韩大力
				</view>
				<view class="tit2-right">
					 <label class="radio" @click="sex=1"><radio  :checked="sex==1" color='#119327'style="transform:scale(0.7)" />先生</label>
					  <label class="radio margin-left" @click="sex=0"><radio :checked="sex==0"  color='#119327'style="transform:scale(0.7)"  />女士</label>
				</view>
		  </view>
		   <view class="tit3">
		   	<view class="number">
		   		手机号
		   	</view>
				<view class="phone-number">
					13896969696
				</view>
		   </view>
		</view>
	  
		<view class="time-box">
			<view class="time-top flex">
				<view class="service">
					送达时间
				</view>
				<view class="explain">
					拼团结束后8小时后到货
				</view>
			</view>
			<view class="time-center flex">
				<view class="center-left">
					<image src="/static/img/img52.png" class="shop-img"></image>
					<image src="/static/img/img52.png" class="aatuan"></image>
				</view>
				<view class="center-center flex">
					<view class="center-left">
						<view class="center-tit">
							洋鸡蛋10枚490g
						</view>
						<view class="center-number">
							10枚
						</view>
						<view class="over-right">
							<view>截单倒计时</view>
							<uni-countdown
								color="#ffffff"
								background-color="#FF0000"
								show-colon
								:show-day="false"
								:hour="seckillObj.stopTimeH"
								:minute="seckillObj.stopTimeM"
								:second="seckillObj.stopTimeS"
							></uni-countdown>
						</view>
					</view>
				  <view class="center-right">
				  	<view class="right-pic">
				  		<text class="pic-b">¥1.9</text><text>/份</text>
				  	</view>
						<view class="right-pic2">
							¥ 9.9
						</view>
						<view class="right-number">
							x1
						</view>
				  </view>
				</view>
			</view>
		</view>
	  
		<view class="discount-box">
			<view class="flex">
				<view >
					商品总额
				</view>
				<view >
					¥9.9
				</view>
			</view>
			<view class="flex">
				<view >
					配送费
				</view>
				<view >
					+ ¥0
				</view>
			</view>
			<view class="flex">
				<view >
					团购优惠金额
				</view>
				<view class="red-color">
					- ¥8
				</view>
			</view>
		</view>
	   
		 <view class="agreement">
		 	<label class="radio">
		 		<radio :checked='ischeck' @click="changecheck()"   style="transform:scale(0.7)" color="#018D25" value="" /><text>同意</text><text class="text_color">《用户自提服务协议》</text>
		 	</label>
		 </view>
		 
		 <view class="bottom-box">
	
			
			<view class="pay">
				立即支付
			</view>
			
			<view class="mony">
				¥1.9
			</view>
			<view class="content">
				待支付:
			</view>
		 </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				sex:1,
				ischeck:true,//是否选中
				// 秒杀数据保存
				seckillObj: {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0 //秒钟
				},
				// 拼团数据保存
			}
		},
		methods:{
			//选中
			changecheck(){
				console.log(this.ischeck);
				this.ischeck = !this.ischeck;
			},
			  radioChange: function(evt) {
			            for (let i = 0; i < this.items.length; i++) {
			                if (this.items[i].value === evt.target.value) {
			                    this.current = i;
			                    break;
			                }
			            }
			        }
		}
	}
</script>

<style lang="scss">
	.container{
		padding-bottom: 110rpx;
		.top{
			width:750rpx;
			height:454rpx;
			background:linear-gradient(180deg,rgba(49,193,59,0.93) 65%,rgba(255,255,255,0) 100%);
		}
		.content-box{
			width:705rpx;
			// height:419rpx;
			background:rgba(255,255,255,1);
			border-radius:20rpx;
			margin: - 280rpx auto 0;
		  .tit{
				text-align: center;
				line-height:70rpx;
				background:rgba(218,250,209,1);
				border-radius:20rpx 20rpx 0 0 ;
				font-size:37rpx;
				font-weight:bold;
				color:rgba(0,0,0,1);
			}
			.tit1{
				border-bottom: 1px solid rgba(236,236,236,1);
				margin: 0 6rpx 0 20rpx;
				.address{
					margin-top: 30rpx;
					margin-bottom: 14rpx;
					font-size:33rpx;
					font-weight:bold;
					color:rgba(0,0,0,1);
				}
				.address1{
					font-size:25rpx;
					font-weight:bold;
					color:rgba(155,155,155,1);
				}
				.address3{
					display: flex;
					align-items: center;
					margin: 23rpx 0 29rpx 0;
					.icon-address{
						width: 22rpx;
						height: 27rpx;
						margin-right: 13rpx;
					}
					.distance{
						font-size:24rpx;
						font-weight:bold;
						color:rgba(17,147,39,1);
						margin-right: 18rpx;
					}
					.border{
						width:2rpx;
						height:20rpx;
						background:rgba(169,169,169,1);
						margin-right: 18rpx;
					}
					.see{
						font-size:25rpx;
						font-weight:bold;
						color:rgba(155,155,155,1);
					}
				}
			}
			.tit2{
				border-bottom: 1px solid rgba(236,236,236,1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 86rpx;
				margin: 0 6rpx 0 20rpx;
				.tit2-left{
					margin-right: 20rpx;
					font-size:26rpx;
					font-weight:bold;
					color:rgba(0,0,0,1);
				}
				.tit2-left2{
					flex: 1;
					font-size:26rpx;
					font-weight:bold;
				}
				.tit2-right{
					display: flex;
					align-items: center;
					font-size:27rpx;
					font-weight:400;
					color:rgba(0,0,0,1);
					margin-right: 37rpx;
					
				}
			}
			.tit3{
				display: flex;
				align-items: center;
				height: 87rpx;
				font-size:26rpx;
				font-weight:bold;
				color:rgba(0,0,0,1);
				margin: 0 6rpx 0 20rpx;
				.number{
					margin-right: 20rpx;
				}
			}
		}
    
		.time-box{
			width:705rpx;
			background:rgba(255,255,255,1);
			border-radius:20rpx;
			margin: 15rpx auto 33rpx;
			.time-top{
				height: 85rpx;
				margin-left: 20rpx;
				margin-right: 5rpx;
				padding-right: 13rpx;
				border-bottom: 1px solid rgba(236,236,236,1);
				.service{
					font-size:27rpx;
					font-weight:400;
					color:rgba(103,103,103,1);
				}
				.explain{
					font-size:24rpx;
					font-weight:bold;
					color:rgba(0,140,31,1);
				}
			}
			.time-center{
				margin: 5rpx 23rpx;
				.center-left{
					width: 169rpx;
					height: 169rpx;
						position: relative;
						margin-right: 16rpx;
					.shop-img{
						width: 100%;
						height: 100%;
					}
					.aatuan{
						width: 83rpx;
						height: 34rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				.center-center{
					flex:1;
					.center-left{
						flex: 1;
						.center-tit{
							margin-top: 20rpx;
							margin-bottom: 10rpx;
							font-size:27rpx;
							font-weight:bold;
							color:rgba(0,0,0,1);
						}
						.center-number{
							font-size:23rpx;
							font-weight:bold;
							color:rgba(126,126,134,1);
							margin-bottom: 15rpx;
						}
						.over-right{
							display: flex;
							align-items: center;
							font-size:29rpx;
							font-weight:bold;
							color:rgba(255,0,0,1);
						}
					}
					.center-right{
						text-align: right;
						.right-pic{
							font-size:23rpx;
							font-weight:bold;
							color:rgba(136,139,145,1);
							margin-bottom: 15rpx;
							.pic-b{
								font-size:27rpx;
								font-weight:bold;
								color:rgba(0,0,0,1);
							}
						}
						.right-pic2{
							font-size:23rpx;
							font-weight:bold;
							text-decoration:line-through;
							color:rgba(136,139,145,1);
						}
						.right-number{
							font-size:24rpx;
							font-weight:bold;
							color:rgba(136,139,145,1);
						}
					}
				}
			}
		}
	
	  .discount-box{
			width:705rpx;
		
			background:rgba(255,255,255,1);
			border-radius:20rpx;
			margin: 0 auto 38rpx;
			padding: 33rpx 20rpx;
			font-size:26rpx;
			font-weight:bold;
			color:rgba(0,0,0,1);
			line-height: 50rpx;
			.red-color{
				color:rgba(255,0,0,1);
			}
		}
	
	.radio{
		font-size:21rpx;
		font-weight:bold;
		color:rgba(97,97,97,1);
		margin-left: 23rpx;
		.text_color{
			color:rgba(1,141,37,1);
		}
	}
	
	.bottom-box{
		position: fixed;
		bottom: 0;
		padding-right: 18rpx;
		width:750rpx;
		height:109rpx;
		background:rgba(255,255,255,1);
		border:2rpx solid rgba(133, 133, 133, 0.08);
		display: flex;
		align-items: center;
		flex-direction:row-reverse;
		.content{
			font-size:27rpx;
			font-weight:bold;
			color:rgba(0,0,0,1);
		}
		.mony{
			font-size:34rpx;
			font-weight:400;
			color:rgba(255,0,0,1);
		}
		.pay{
			background:linear-gradient(90deg,rgba(255,83,37,1) 0%,rgba(255,34,41,1) 100%);
			border-radius:39rpx;
			font-size:28rpx;
			font-weight:400;
			color:rgba(255,255,255,1);
			padding: 14rpx 52rpx;
			margin-left: 22rpx;
		}
	}
	}
</style>