调整

components/Ucarkeyboard-mod.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+		<view class="u-keyboard-grids">
+			<block>
+				<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
+					<view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
+					 v-for="(item, j) in group" :key="j">
+						{{ item }}
+					</view>
+				</view>
+				<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
+				 hover-class="u-hover-class">
+					
+					删除
+				</view>
+				<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
+					<text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
+					/
+					<text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "u-keyboard",
+		props: {
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+				abc: false
+			};
+		},
+		computed: {
+			areaList() {
+				let data = [
+					'京',
+					'沪',
+					'粤',
+					'津',
+					'冀',
+					'豫',
+					'云',
+					'辽',
+					'黑',
+					'湘',
+					'皖',
+					'鲁',
+					'苏',
+					'浙',
+					'赣',
+					'鄂',
+					'桂',
+					'甘',
+					'晋',
+					'陕',
+					'蒙',
+					'吉',
+					'闽',
+					'贵',
+					'渝',
+					'川',
+					'青',
+					'琼',
+					'宁',
+					'挂',
+					'藏',
+					'港',
+					'澳',
+					'新',
+					'使',
+					'学'
+				];
+				let tmp = [];
+				// 打乱顺序
+				if (this.random) data = this.$u.randomArray(data);
+				// 切割成二维数组
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			},
+			EngKeyBoardList() {
+				let data = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					0,
+					'Q',
+					'W',
+					'E',
+					'R',
+					'T',
+					'Y',
+					'U',
+					'I',
+					'O',
+					'P',
+					'A',
+					'S',
+					'D',
+					'F',
+					'G',
+					'H',
+					'J',
+					'K',
+					'L',
+					'Z',
+					'X',
+					'C',
+					'V',
+					'B',
+					'N',
+					'M'
+				];
+				let tmp = [];
+				if (this.random) data = this.$u.randomArray(data);
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			}
+		},
+		methods: {
+			// 点击键盘按钮
+			carInputClick(i, j) {
+				let value = '';
+				// 不同模式，获取不同数组的值
+				if (this.abc) value = this.EngKeyBoardList[i][j];
+				else value = this.areaList[i][j];
+				this.$emit('change', value);
+			},
+			// 修改汽车牌键盘的输入模式，中文|英文
+			changeCarInputMode() {
+				this.abc = !this.abc;
+			},
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	// @import "../../libs/css/style.components.scss";
+
+	.u-keyboard-grids {
+		background: rgb(215, 215, 217);
+		padding: 24rpx 0;
+		position: relative;
+	}
+
+	.u-keyboard-grids-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.u-keyboard-grids-btn {
+		text-decoration: none;
+		width: 62rpx;
+		flex: 0 0 64rpx;
+		height: 80rpx;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		font-size: 36rpx;
+		text-align: center;
+		line-height: 80rpx;
+		background-color: #fff;
+		margin: 8rpx 5rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		font-weight: 500;
+		justify-content: center;
+	}
+
+	.u-carinput-hover {
+		background-color: rgb(185, 188, 195) !important;
+	}
+
+	.u-keyboard-back {
+		position: absolute;
+		width: 96rpx;
+		right: 22rpx;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: rgb(185, 188, 195);
+		 
+		display: flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+		box-shadow: 0 2rpx 0rpx #888992;
+	}
+
+	.u-keyboard-change {
+		font-size: 24rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		position: absolute;
+		width: 96rpx;
+		left: 22rpx;
+		line-height: 1;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: #ffffff;
+		
+		display: flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+	}
+
+	.u-keyboard-change .inactive.zh {
+		transform: scale(0.85) translateY(-10rpx);
+	}
+
+	.u-keyboard-change .inactive.en {
+		transform: scale(0.85) translateY(10rpx);
+	}
+
+	.u-keyboard-change .active {
+		color: rgb(237, 112, 64);
+		font-size: 30rpx;
+	}
+
+	.u-keyboard-change .zh {
+		transform: translateY(-10rpx);
+	}
+
+	.u-keyboard-change .en {
+		transform: translateY(10rpx);
+	}
+</style>

components/Ucarkeyboard.vue

@@ -25,7 +25,7 @@
 			<u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
 		</block>
 		<block v-else>
-			<u-car-keyboard :random="random" @backspace="backspace" ref="thiscar" @change="change"></u-car-keyboard>
+			<ucarkeyboardmod :random="random" @backspace="backspace" ref="thiscar" @change="change"></ucarkeyboardmod>
 		</block>
 	</view>
 </template>
@@ -54,7 +54,14 @@
 	 * @event {Function} backspace 键盘退格键被点击
 	 * @example <u-keyboard mode="number" v-model="show"></u-keyboard> 
 	 */
+	
+	import ucarkeyboardmod from '@/components/Ucarkeyboard-mod.vue'
+	
+	
 	export default {
+		components: {
+			ucarkeyboardmod
+		},
 		name: "u-keyboard",
 		props: {
 			// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘

components/UmessageInput.vue

@@ -0,0 +1,333 @@
+<template>
+	<view class="u-char-box">
+		<view class="u-char-flex">
+			<input v-show="false"  :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
+			<view v-for="(item, index) in loopCharArr" :key="index">
+				<view 
+				
+				@click="selectIndexBtn(index)"
+				
+				:class="[breathe && (charArrLength == index&&selectIndex==-1||selectIndex==index) ? 'u-breathe' : '', 'u-char-item',
+				charArrLength === index && mode == 'box' ? 'u-box-active' : '',
+				mode === 'box' ? 'u-box' : '']" :style="{
+					fontWeight: bold ? 'bold' : 'normal',
+					fontSize: fontSize + 'rpx',
+					width: width + 'rpx',
+					height: width + 'rpx',
+					color: inactiveColor,
+					borderColor:((selectIndex==-1)&& charArrLength === index && mode == 'box')||selectIndex==index ? activeColor : inactiveColor
+				}">
+					<view class="u-placeholder-line" :style="{
+							display: (selectIndex==-1)&&charArrLength === index ? 'block' : 'none',
+							height: width * 0.5 +'rpx'
+						}"
+						v-if="mode !== 'middleLine'"
+					></view>
+					<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
+					 class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
+					 class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
+					<block v-else>
+						<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
+					</block>
+					
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * messageInput 验证码输入框
+	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+	 * @tutorial https://www.uviewui.com/components/messageInput.html
+	 * @property {String Number} maxlength 输入字符个数（默认4）
+	 * @property {Boolean} dot-fill 是否用圆点填充（默认false）
+	 * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
+	 * @property {String Number} value 预置值
+	 * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
+	 * @property {Boolean} focus 是否自动获取焦点（默认false）
+	 * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认60）
+	 * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
+	 * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+	 * @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
+	 * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
+	 * @event {Function} change 输入内容发生改变时触发，具体见官网说明
+	 * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
+	 * @example <u-message-input mode="bottomLine"></u-message-input>
+	 */
+	export default {
+		name: "u-message-input",
+		props: {
+			// 最大输入长度
+			maxlength: {
+				type: [Number, String],
+				default: 4
+			},
+			// 是否用圆点填充
+			dotFill: {
+				type: Boolean,
+				default: false
+			},
+			// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
+			mode: {
+				type: String,
+				default: "box"
+			},
+			// 预置值
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			// 当前激活输入item，是否带有呼吸效果
+			breathe: {
+				type: Boolean,
+				default: true
+			},
+			// 是否自动获取焦点
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			// 字体是否加粗
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: 60
+			},
+			// 激活样式
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 未激活的样式
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 输入框的大小，单位rpx，宽等于高
+			width: {
+				type: [Number, String],
+				default: '80'
+			},
+			// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+			disabledKeyboard: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			// maxlength: {
+			// 	// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
+			// 	immediate: true,
+			// 	handler(val) {
+			// 		this.maxlength = Number(val);
+			// 	}
+			// }, 
+			value: {
+				immediate: true,
+				handler(val) {
+					// 转为字符串
+					val = String(val);
+					
+					this.selectIndex=-1
+					this.$emit('selectIndex', this.selectIndex)
+						
+					console.log(this.selectIndex)
+					// 超出部分截掉
+					this.valueModel = val.substring(0, this.maxlength);
+				}
+			},
+		},
+		data() {
+			return {
+				selectIndex:-1,
+				valueModel: ""
+			}
+		},
+		computed: {
+			// 是否显示呼吸灯效果
+			animationClass() {
+				return (index) => {
+					
+					if ((this.selectIndex==-1&&this.breathe && this.charArr.length == index)||this.selectIndex==index) 
+					return 'u-breathe';
+					else return '';
+				}
+			},
+			// 用于显示字符
+			charArr() {
+				return this.valueModel.split('');
+			},
+			charArrLength() {
+				return this.charArr.length;
+			},
+			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+			loopCharArr() {
+				return new Array(this.maxlength);
+			}
+		},
+		methods: {
+			selectIndexBtn(index){
+				if(index<this.charArr.length){
+					this.selectIndex=index;
+					this.$emit('selectIndex', index)
+				}
+				
+			},
+			getVal(e) {
+				let {
+					value
+				} = e.detail
+				this.valueModel = value;
+				// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
+				if (String(value).length > this.maxlength) return;
+				// 未达到maxlength之前，发送change事件，达到后发送finish事件
+				this.$emit('change', value);
+				if (String(value).length == this.maxlength) {
+					this.$emit('finish', value);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	//@import "../../libs/css/style.components.scss";
+
+	@keyframes breathe {
+		0% {
+			opacity: 0.3;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0.3;
+		}
+	}
+
+	.u-char-box {
+		text-align: center;
+	}
+
+	.u-char-flex {
+		//@include vue-flex;
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		position: relative;
+	}
+
+	.u-input {
+		position: absolute;
+		top: 0;
+		left: -100%;
+		width: 200%;
+		height: 100%;
+		text-align: left;
+		z-index: 9;
+		opacity: 0;
+		background: none;
+	}
+
+	.u-char-item {
+		position: relative;
+		width: 90rpx;
+		height: 90rpx;
+		margin: 10rpx 10rpx;
+		font-size: 60rpx;
+		font-weight: bold;
+		color: #303133;
+		line-height: 90rpx;
+		// @include vue-flex;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.u-middle-line {
+		border: none;
+	}
+
+	.u-box {
+		box-sizing: border-box;
+		border: 2rpx solid #cccccc;
+		border-radius: 6rpx;
+	}
+
+	.u-box-active {
+		overflow: hidden;
+		animation-timing-function: ease-in-out;
+		animation-duration: 1500ms;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+		border: 2rpx solid rgb(41, 121, 255);
+	}
+
+	.u-middle-line-active {
+		background: rgb(41, 121, 255);
+	}
+
+	.u-breathe {
+		animation: breathe 2s infinite ease;
+	}
+
+	.u-placeholder-line {
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 2rpx;
+		height: 40rpx;
+		background: #333333;
+		animation: twinkling 1.5s infinite ease;
+	}
+
+	.u-animation-breathe {
+		animation-name: breathe;
+	}
+
+	.u-dot {
+		font-size: 34rpx;
+		line-height: 34rpx;
+	}
+
+	.u-middle-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	// .u-buttom-line-active {
+	// 	background: $u-type-primary;
+	// }
+
+	.u-bottom-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%);
+	}
+</style>

pages/login/completeInfo.vue

@@ -7,14 +7,14 @@
 			
 		</ujp-navbar>
 		<view class="data">
-			<view class="data-img">
+			<view class="data-img" v-show="!keyShow">
 				<view class="data-icon">
 					<u-icon name="camera-fill" custom-prefix="custom-icon" color="#fff" size="32"></u-icon>
 				</view>
 				<u-avatar :src="form.headImg+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="216" @click="uploadPhoto" /></u-avatar>
 			</view>
 			
-			<view class="data-input">
+			<view class="data-input" >
 				<u-form :model="form" ref="uForm" >
 					<u-form-item label-position="top" label="昵称"><u-input v-model="form.nickName" placeholder="请填写昵称"/></u-form-item>
 				</u-form>
@@ -24,15 +24,20 @@
  -->			
 			<view class="key-input"
 			 
-			 @tap="keyShow=!keyShow">
-				<u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
-			</view>
+			 @tap="keyShow=true">
+			 
+			 <umessageInput :focus="true"
+			 @selectIndex="getSelectIndex"
+			 :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></umessageInput>
+			 		
+<!-- 				<u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
+ -->			</view>
 			
-			<view class="default" >
+			<!-- <view class="default" >
 				<u-checkbox-group>
 					<u-checkbox class="tips" v-model="form.defaultFlag" @change="checkboxChange()" shape="circle" >设为默认车辆</u-checkbox>
 				</u-checkbox-group>
-			</view>
+			</view> -->
 			
 			<u-button class="login-btn" v-show="!keyShow"
 			  @click="keepCar"
@@ -46,7 +51,7 @@
 			 	text-align: center;
 			 	font-size: 18px;
 			 ">
-			 <span>车牌号:{{form.carNum}}</span>
+			 <span style="color: #fff;">车牌号:{{form.carNum}}</span>
 			 <span 
 			  @tap="keyShow=!keyShow"
 			 style="
@@ -65,14 +70,16 @@
 	import * as userApi from '@/apis/user.js'
 	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
 	import * as loginApi from '@/apis/login.js'
+	import umessageInput from '@/components/UmessageInput.vue'
 	
 	
 	export default {
 		components: {
-			ucarkeyboard
+			ucarkeyboard,umessageInput
 		},
 		data() {
 			return {
+					selectIndex:-1,
 				maxlength:8,
 				keyShow: false,
 				isLogin:false,
@@ -214,23 +221,76 @@
 			checkboxChange() {
 				this.form.defaultFlag = !this.form.defaultFlag;
 			},
+			getSelectIndex(i){
+				this.selectIndex=i;
+				if(i==0){
+					var aaa =	this.$refs.uKeyboard.changeCarInputValue();
+					
+					if( aaa) {
+						this.$refs.uKeyboard.changeCarInputMode();
+					}
+				}
+			},
+			
 			// 按键被点击(点击退格键不会触发此事件)
 			valChange(val) {
-				if(this.form.carNum.length>=this.maxlength){
+				if(this.form.carNum.length>=this.maxlength&&this.selectIndex==-1){
 					return
 				}
+				
+				if(this.selectIndex==-1){
+					this.form.carNum += val;
+				}else{
+					const replaceStr = (str, index, char) => {
+					 const strAry = str.split('');
+					 if(index<strAry.length){
+						  strAry[index] = char;
+					 }
+					
+					 return strAry.join('');
+					 }
+					 
+					this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,val) ;
+					this.selectIndex=-1;
+				}
 				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
-				this.form.carNum += val;
-				//(this.form.carNum);
 				
-				if(this.form.carNum.length == 1) {
+				//(this.form.carNum);
+							
+				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
+				if((this.form.carNum.length == 0) && aaa) {
+					this.$refs.uKeyboard.changeCarInputMode();
+				}else if(!aaa){
 					this.$refs.uKeyboard.changeCarInputMode();
 				}
 			},
 			// 退格键被点击
 			backspace() {
 				// 删除form.carNum的最后一个字符
-				if (this.form.carNum.length) this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
+				if(this.form.carNum.length){
+					if(this.selectIndex==-1){
+						
+						this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
+						
+					}else{
+						const replaceStr = (str, index, char) => {
+						 const strAry = str.split('');
+						 if(index<strAry.length){
+							  strAry[index] = char;
+						 }
+						
+						 return strAry.join('');
+						 }
+						 
+						this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,'') ;
+						
+						//this.selectIndex=-1;
+					}
+				}
+				
+				
+				
+				
 				//(this.form.carNum);
 				
 				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
@@ -291,7 +351,7 @@
 		bottom:0px
 	}
 	.data-img{
-		margin: 30px auto;
+		margin: 10px auto;
 		height: 108px;
 		width: 108px;
 		position: relative;
@@ -306,7 +366,7 @@
 		color:#fff!important;
 	}
 	.car-num{
-		padding: 40px 0 0 40px;
+		padding: 10px 0 0 40px;
 		line-height: 18px;
 	}
 	.key-input {

pages/user/car/carAdd.vue

@@ -1,33 +1,36 @@
 <template>
-	<view>
-		<ujp-navbar title="车辆管理">
+	<view >
+		<ujp-navbar title="车辆修改">
 			<view class="slot-wrap">
 				<span class="navBtn oldTextjp2" oldstyle="font-size: 16px;" @click="showDelete">删除</span>
 			</view>
 		</ujp-navbar>
-		<view>
-			<u-modal v-model="show" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" 
-				:content="content" :confirm-text="confirmText"></u-modal>
-		</view>
-		
-		<view class="carDet">
-			<u-form :model="form" ref="uForm">
-				<ucarkeyboard ref="uKeyboard" mode="car" @confirm="confirm" @cancel="cancel" v-show="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
-				<u-form-item label="车牌号码" label-width="200rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
-					<u-input input-align="right" placeholder="请输入车牌号" v-model="form.carNum" :custom-style="elderStatus ? {fontSize: '18px'} : {}" @click="keyClick" />
-				</u-form-item>
-				<u-form-item v-show="false" label="车辆类型" label-width="200rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
-					<u-input input-align="right" v-model="carName" :custom-style="elderStatus ? {fontSize: '18px'} : {}" placeholder="请输入正确车牌号" disabled />
-				</u-form-item>
-				<!-- <u-form-item label="设为默认车辆" label-width="230rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
-					<u-switch slot="right" v-model="form.defaultFlag"></u-switch>
-				</u-form-item> -->
-			</u-form>
-		</view>
-		<u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
-		
-<!-- 		<p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
- -->		
+			
+ <view v-if="false">
+	 <view>
+	 			<u-modal v-model="show" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" 
+	 				:content="content" :confirm-text="confirmText"></u-modal>
+	 		</view>
+	 		
+	 		<view class="carDet">
+	 			<u-form :model="form" ref="uForm">
+	 				<ucarkeyboard ref="uKeyboard" mode="car" @confirm="confirm" @cancel="cancel" v-show="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
+	 				<u-form-item label="车牌号码" label-width="200rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
+	 					<u-input input-align="right" placeholder="请输入车牌号" v-model="form.carNum" :custom-style="elderStatus ? {fontSize: '18px'} : {}" @click="keyClick" />
+	 				</u-form-item>
+	 				<u-form-item v-show="false" label="车辆类型" label-width="200rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
+	 					<u-input input-align="right" v-model="carName" :custom-style="elderStatus ? {fontSize: '18px'} : {}" placeholder="请输入正确车牌号" disabled />
+	 				</u-form-item>
+	 				<!-- <u-form-item label="设为默认车辆" label-width="230rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
+	 					<u-switch slot="right" v-model="form.defaultFlag"></u-switch>
+	 				</u-form-item> -->
+	 			</u-form>
+	 		</view>
+	 		<u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
+	 		
+	 <!-- 		<p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
+	  -->	
+ </view>
 	</view>
 </template>
 

pages/user/car/carDet.vue

@@ -5,7 +5,11 @@
 		<!-- <p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
 		 -->
 		<view class="key-input">
-			<u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
+			<umessageInput :focus="true" 
+			@selectIndex="getSelectIndex"
+			:value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></umessageInput>
+		
+		
 		</view>
 		<ucarkeyboard ref="uKeyboard" mode="car" :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
 		<view class="default">
@@ -20,10 +24,11 @@
 <script>
 	import * as userApi from '@/apis/user.js'
 	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
+	import umessageInput from '@/components/UmessageInput.vue'
 
 	export default {
 		components: {
-			ucarkeyboard
+			ucarkeyboard,umessageInput
 		},
 		data() {
 			return {
@@ -36,6 +41,7 @@
 					carNum: '鄂',
 					defaultFlag: true,
 				},
+				selectIndex:-1
 			}
 		},
 		onLoad(op) {
@@ -59,6 +65,7 @@
 			this.$refs.uKeyboard.changeCarInputMode();
 		},
 		methods: {
+			
 			gotoLink(){
 				if (this.code == 'A') {
 					uni.redirectTo({
@@ -74,26 +81,80 @@
 					})
 				}
 			},
+			
 			checkboxChange() {
 				this.form.defaultFlag = !this.form.defaultFlag;
 			},
+			getSelectIndex(i){
+				this.selectIndex=i;
+				if(i==0){
+					var aaa =	this.$refs.uKeyboard.changeCarInputValue();
+					
+					if( aaa) {
+						this.$refs.uKeyboard.changeCarInputMode();
+					}
+				}
+			},
 			// 按键被点击(点击退格键不会触发此事件)
 			valChange(val) {
-				if(this.form.carNum.length>=this.maxlength){
+				
+				if(this.form.carNum.length>=this.maxlength&&this.selectIndex==-1){
 					return
 				}
+				
+				if(this.selectIndex==-1){
+					this.form.carNum += val;
+				}else{
+					const replaceStr = (str, index, char) => {
+					 const strAry = str.split('');
+					 if(index<strAry.length){
+						  strAry[index] = char;
+					 }
+					
+					 return strAry.join('');
+					 }
+					 
+					this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,val) ;
+					this.selectIndex=-1;
+				}
 				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
-				this.form.carNum += val;
-				//(this.form.carNum);
 				
-				if(this.form.carNum.length == 1) {
+				//(this.form.carNum);
+			
+				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
+				if((this.form.carNum.length == 0) && aaa) {
+					this.$refs.uKeyboard.changeCarInputMode();
+				}else if(!aaa){
 					this.$refs.uKeyboard.changeCarInputMode();
 				}
 			},
 			// 退格键被点击
 			backspace() {
 				// 删除form.carNum的最后一个字符
-				if (this.form.carNum.length) this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
+				if(this.form.carNum.length){
+					if(this.selectIndex==-1){
+						
+						this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
+						
+					}else{
+ 						const replaceStr = (str, index, char) => {
+						 const strAry = str.split('');
+						 if(index<strAry.length){
+							  strAry[index] = char;
+						 }
+						
+						 return strAry.join('');
+						 }
+						 
+						this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,'') ;
+						
+						//this.selectIndex=-1;
+					}
+				}
+				
+				
+				
+				
 				//(this.form.carNum);
 				
 				var aaa =	this.$refs.uKeyboard.changeCarInputValue();

pages/user/car/index.vue

@@ -1,20 +1,23 @@
 <template>
 	<view>
-		<ujp-navbar title="车辆管理"></ujp-navbar>
-		<view class="carNone" v-if="carList.length == 0">
-			<img src="static/img/none2.svg" alt="">
-			<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无绑定车辆</p>
-			<view class="carNone-btn" @click="addCar">
-				添加车牌
+		<ujp-navbar title="车辆管理页面"></ujp-navbar>
+		<view v-if="false">
+			<view class="carNone" v-if="carList.length == 0">
+				<img src="static/img/none2.svg" alt="">
+				<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无绑定车辆</p>
+				<view class="carNone-btn" @click="addCar">
+					添加车牌
+				</view>
 			</view>
-		</view>
-		<view class="car" v-else>
-			<view class="car-item" v-for="(item,index) in carList" :key="item.id" @click="toCarAdd(item)">
-				<span v-if="item.defaultFlag">默认</span>
-				<font>{{item.carNum}}</font>
+			<view class="car" v-else>
+				<view class="car-item" v-for="(item,index) in carList" :key="item.id" @click="toCarAdd(item)">
+					<span v-if="item.defaultFlag">默认</span>
+					<font>{{item.carNum}}</font>
+				</view>
+				<view class="car-btn oldTextjp2" oldstyle="font-size: 18px;" @click="addCar">添加车牌</view>
 			</view>
-			<view class="car-btn oldTextjp2" oldstyle="font-size: 18px;" @click="addCar">添加车牌</view>
 		</view>
+		
 	</view>
 </template>