H5-Merchant/pages/ordermanagement/components/quickPickUp/quickPickUp.vue

<template>
	<!-- .设置了自提模式的商户展示该模块，没有自提模式的不展示； -->
	<view class="card-list-wrapper">
	   <view class="card-list-wrapper__text">快速提货</view>
	   <view class="card-list-wrapper__input">
		 <!-- 输入框 -->
		    <input 
		      class="input-box"
		      type="text"
		      placeholder="请输入提货码"
		      v-model="pickupCode"
		    />
		 <!-- 查询按钮 -->
		    <button 
			type="primary"
		      class="query-btn"
		      @click="handleQuery"
		    >查询</button>
	   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickupCode:""
				
			};
		},
		methods:{
			handleQuery(){
				if (!this.pickupCode){
					uni.showToast({
					  title: '请输入提货码',
					  icon: 'none'
					})
					return
				}
			  console.log(this.pickupCode)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.card-list-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;
	  white-space: nowrap;
	}
		
	}
}
</style>