<template>

	<view class="quick-pick-up-wrapper">
	   <view class="quick-pick-up-wrapper__text">{{tilteText}}</view>
	   <view class="quick-pick-up-wrapper__input">
		 <!-- 输入框 -->
		    <input 
		      class="input-box"
		      type="text"
		      :placeholder="placeholder"
		      v-model="pickupCode"
		    />
		 <!-- 按钮 -->
		    <button 
			type="primary"
		      class="query-btn"
		      @click="handleQuery"
		    >{{btnTitle}}</button>
	   </view>
	</view>
</template>

<script>
		// 待收货---已送达--订单详情--收货码
		
	export default {
		props:{
			tilteText:{
				type:String,
				default:"收货码"
			},
			tipsMessge:{
				type:String,
				default:"收货码"
			},
			placeholder:{
				type:String,
				default:"请输入用户提供的收货码"
			},
			btnTitle:{
				type:String,
				default:"送达"
			}
		},
		data() {
			return {
				pickupCode:""
				
			};
		},
		methods:{
			handleQuery(){
				if (!this.pickupCode){
					uni.showToast({
					  title: this.tipsMessge,
					  icon: 'none'
					})
					return
				}
			  console.log(this.pickupCode)
			}
			
		}
	}
</script>

<style lang="scss">
.quick-pick-up-wrapper{
	min-height: 222rpx;
	background: #FFFFFF;
	 border-radius: 16rpx;
	  display: flex;
	  flex-direction: column;
	&__text{
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	  margin: 32rpx 0rpx 26rpx 26rpx;
	  user-select: none;
	}
	&__input{
		display: flex;
		flex-direction: row;
		width: calc(100% - 0rpx);
		height: 74rpx;
		border-radius: 6rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		.input-box {
		  width: 85%;
		  border-radius: 12rpx;
		  padding: 0 20rpx;
		  font-size: 32rpx;
		  height: 74rpx;
		  background: #F5F5F5;
		  border-radius: 6rpx;
		  box-sizing: border-box;
		}
	.query-btn {
		user-select: none;
		display: flex;
		align-items: center;
		justify-content: center;
	  width: 150rpx;
	  height: 74rpx;
	background: #1F7CFF;
	  border-radius: 6rpx;
	  font-family: PingFangSC, PingFang SC;
	  font-weight: 400;
	  font-size: 28rpx;
	  color: #FFFFFF;
	}
		
	}
}
</style>
