<template>
	<div class="bg" style="">
		
		<div class="content">
			<div  class="add">
				<van-field v-model="jjadd" type="text" name="寄" label="寄" placeholder="选择寄件城市" />
				<van-field v-model="sjadd" class="shou" type="text" name="收" label="收" placeholder="选择收件城市" />
			</div>
			<div class="kdshow">
				<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
				<van-popup v-model="showPicker" position="bottom">
				  <van-picker
				    show-toolbar
				    :columns="columns"
				    @confirm="onConfirm"
				    @cancel="showPicker = false"
				  />
				</van-popup>
			</div>
			<div class="steps">
				<van-field name="stepper" label="物品重量(KG)">
				  <template #input>
				    <van-stepper v-model="stepper" />
				  </template>
				</van-field>
			</div>
			<div class="price">
				<p>12<span>元</span></p>
				<p>运费预估</p>
			</div>
			<p style="font-size: .24rem;color: #999;margin: .2rem 0rem 1rem;">此价格为官方指导价，不包含增值服务费</p>
			<div class="btn">
				<van-button color="#00c4b8">立即寄件</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				titlename: "运费时效",
				jjadd:"",
				sjadd:"",
				stepper: 1,
				showPicker:false,
				value:"",
				columns:["顺丰快递","中通快递","圆通快递"],
			}
		},
		methods:{
			// 选择快递公司
			onConfirm(e){
				this.value=e
				this.showPicker=false
			}
		}
	}
</script>

<style scoped lang="less">
	.bg{
		background: url(../assets/images/bg.png) no-repeat bottom;
		background-size: 100%;
		min-height: 100vh;
	}
	.content {
		padding: .2rem .33rem;
		font-size: .3rem;
		border-radius: .05rem;
		.add{
			/deep/.shou{
				div:nth-of-type(1){
					span{
						background:#fa9c22 !important
					}
				}
			}
			>div:nth-of-type(1){
				border-bottom: .01rem solid #ededed;
			}
			>div:nth-of-type(2){
				
			}
			/deep/.van-field{
				padding: .3rem 16px;
				.van-field__label{
					width: auto;
					span{
						width:.5rem;
						height: .5rem;
						border-radius: 50%;
						color: white;
						display: inline-block;
						text-align: center;
						line-height: .5rem;
					}
				}
				.van-field__value{
					.van-field__body{
						input{
							height: .5rem;
						}
					}
				}
				div:nth-of-type(1){
					span{
						background:#00c4b8
					}
				}
				
			}
			/deep/.van-field:after{
				content: "";
				display: inline-block;
				border-right: .01rem solid #b0b0b0;
				border-bottom: .01rem solid #b0b0b0;
				transform: rotate(-45deg);
				left: unset;
				position: absolute;
				right: 16px;
				bottom: .45rem;
				width: .2rem;
				height: .2rem;
			}
		}
	    .steps{
			margin-top: .2rem;
			border-radius: .05rem;
			padding: .3rem 0rem;
			background: white;
			/deep/.van-field{
				display: block;
				overflow: unset;
				padding: 0rem 16px;
				.van-field__label{
					width: 100%;
					text-align: center;
					color: #999999;
					font-size: .3rem;
					font-weight: bold;
				}
				.van-field__value{
					margin-top: .4rem;
					.van-field__body{
						.van-field__control--custom{
							.van-stepper{
								margin: 0 auto;
								.van-stepper__minus{
									border-radius: 50%;
									color: #006094;
									background: white;
									border: .01rem solid #dcdcdc;
									width: .38rem;
									height: .38rem;
								}
								input{
									color: #172880;
									font-size: .54rem;
									background: white;
									width: 2rem;
								}
								.van-stepper__plus{
									border-radius: 50%;
									color: #006094;
									background: white;
									border: .01rem solid #dcdcdc;
									width: .38rem;
									height: .38rem;
								}
							}
						}
					}
				}
			}
		}
	    .price{
			font-size: .3rem;
			padding: .3rem 16px;
			background: white;
			border-radius: .05rem;
			margin-top: .2rem;
			text-align: center;
			p:nth-of-type(1){
				color: #172880;
				font-size: .54rem;
				margin-bottom: .2rem;
				span{
					font-size: .3rem;
					color: #999
				}
			}
			p:nth-of-type(2){
				color: #999999;
				font-size: .24rem;
			}
		}
		.btn{
			margin-top: .2rem;
			/deep/.van-button{				
				width:100%
			}
		}
		.kdshow{
			font-size: .3rem;
			padding: .3rem 16px;
			background: white;
			border-radius: .05rem;
			margin-top: .2rem;
			/deep/.van-cell{
				padding: 0px;
				overflow: unset;
				input{
					text-align: right;
					height: .5rem;
					padding-right: .25rem;
				}
			}
			/deep/.van-cell::after{
				content: "";
				display: inline-block;
				border-right: .01rem solid #b0b0b0;
				border-bottom: .01rem solid #b0b0b0;
				transform: rotate(-45deg);
				left: unset;
				position: absolute;
				right: 0px;
				bottom: .15rem;
				width: .2rem;
				height: .2rem;
			}
		}
	}
</style>
