添加车牌

homePage/parkingService/ParkingRecord/index.vue

 <template>
-	<view>
-		<view>
+	<view class="plateManagement">
 		<u-empty
 				text="暂无停车缴费记录" 
 				model="history" 
@@ -8,13 +7,16 @@
 				iconSize='150'>
 		</u-empty>
 	</view>	
-	</view>	
 </template>
 
 <script>
 </script>
 
 <style lang="scss" scoped>
-
+	.plateManagement{
+		background-color: #eeeeee;
+		min-height: 100vh;
+		padding: 60rpx;
+	}
 	
 </style>
\ No newline at end of file

homePage/parkingService/addplate/index.vue

 <template>
-	<view>添加车牌</view>
+	<view class="plateManagement">
+		<!-- 第一部分 卡片 -->
+		<view class="card">
+			<view class="text">车牌号</view>
+			<view class="license-plate-input">
+			    <!-- 输入框 -->
+			    <view class="input-container">
+			      <u-input
+			        v-for="(value, index) in licensePlate"
+			        :key="index"
+			        v-model="licensePlate[index]"
+					:clearable="false"
+					placeholder=" "
+			        maxlength="1"
+			        type="number"
+			        :border="true"
+			        :show-clear="false"
+			        @click.native.stop="showKeyboard1(index)"
+			      />
+			    </view>
+			    <!-- 自定义键盘 -->
+			    <u-keyboard
+				  ref="uKeyboard"
+			      v-model="showKeyboard"
+			      mode="car"
+			      @change="handleKeyboardClick"
+			    >
+				</u-keyboard>
+				
+			    <!-- 拼接的车牌号输出 -->
+			    <view class="output">
+			      拼接的车牌号：{{ getLicensePlate() }}
+			    </view>
+			  </view>
+		</view>
+		<!-- 第二部分 按钮 -->
+		<view class="bottom-button">
+			<view class="button" @click="addPlate">确认添加</view>
+		</view>
+	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				licensePlate: ['', '', '', '', '', '', '', ''], // 车牌号数组，用于存放每个输入框的值
+				showKeyboard: false, // 标记是否显示自定义键盘
+				currentInputIndex: 0 // 记录当前输入框的索引
+			}
+		},
+
+		methods: {
+			// 显示自定义键盘
+			showKeyboard1(index) {
+			  this.currentInputIndex = index;
+			  this.showKeyboard = true;
+			},
+			// 自定义键盘点击事件
+			handleKeyboardClick(value) {
+			  this.licensePlate[this.currentInputIndex] = value; // 将键盘点击的值赋给当前输入框
+			  this.showKeyboard = false; // 隐藏自定义键盘
+			},
+			// 拼接车牌号
+			getLicensePlate() {
+			  return this.licensePlate.join('');
+			},
+			addPlate(){
+				console.log(this.licensePlate)
+				// uni.navigateTo({
+				// 	url:'/homePage/parkingService/plateManagement/index',
+				// 	query:{
+				// 		licensePlate:this.licensePlate
+				// 	}
+				// })
+			},
+
+
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.plateManagement {
+		background-color: #eeeeee;
+		min-height: 100vh;
+		padding: 10rpx;
+
+		//卡片
+		.card {
+			padding: 10rpx 30rpx;
+			width: 96%;
+			margin-left: 2%;
+			height: 16vh;
+			background-color: #fff;
+			border-radius: 10px;
+
+			.tetx {
+				margin-top: 20rpx;
+			}
+			
+			.license-plate-input {
+			  display: flex;
+			  flex-direction: column;
+			  align-items: center;
+			}
+			
+			.input-container {
+			  display: flex;
+			  justify-content: center;
+			  align-items: center;
+			  margin: 0 30rpx;
+			  // margin-bottom: 10px;
+			}
+			
+			.output {
+			  margin-top: 10px;
+			}
+
+			//输入框
+			.inputbox {
+				display: flex;
+				margin-top: 10rpx;
+				justify-content: space-between;
+				
+				.point{
+					font-size: 100rpx;
+					margin-top: -60rpx;
+				}
+				
+				.inputtype {
+					width: 70rpx;
+					// margin-left: 30rpx;
+				}
+			}
+
+		}
+
+		//按钮
+		.bottom-button {
+			border-radius: 0px 0px 0px 0px;
+			margin-left: 2%;
+			width: 96%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.button {
+				margin-top: 100rpx;
+				width: 682rpx;
+				height: 70rpx;
+				background: #BD1A2D;
+				border-radius: 22px 22px 22px 22px;
+				color: #FFFFFF;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
 </style>
\ No newline at end of file

homePage/parkingService/plateManagement/index.vue

@@ -8,7 +8,6 @@
 					<u-button plain class="button" shape="circle" size="mini" hover-class="none" @click="gotoaddplate">+</u-button>
 					<view class="text">添加车辆</view>
 				</view>
-				
 			</view>
 			<!-- 第二部分 下方文字 -->
 			<view class="word">
@@ -24,13 +23,16 @@
 
 <script>
 	export default{
+		data() {
+			return {
+				plate:'',
+				
+			}
+		},
 		methods:{
 			// 跳转
 			gotoaddplate(){
 				console.log('跳转')
-				// this.$u.route({
-				// 	url:'/homePage/parkingService/addplate/index.vue'
-				// })
 				uni.navigateTo({
 					url:'/homePage/parkingService/addplate/index'
 				})