停车场车位锁添加车牌优化1

common/apiurl.js

@@ -76,7 +76,9 @@ const apiurl = {
 	// 包月微信支付
 	monthlyWxPayApi: '/client/monthpay/gzbank/poly',
 	// 获取条款须知
-	getSystermsApi: '/client/systerms/getByType/'
+	getSystermsApi: '/client/systerms/getByType/',
+	//车位锁新增车牌信息
+	bindVehicleNoApi: '/client/orderinfo/bindVehicleNo'
 }
 
 export {

common/http.api.js

@@ -49,6 +49,8 @@ const install = (Vue, vm) => {
 	let feePay = (params = {}) => vm.$u.put(apiurl.feePayUrl+params.vehicleId);
 	let payGzbank = (params = {}) => vm.$u.post(apiurl.payGzbankUrl, params);
 	
+	let bindVehicleNo = (params = {}) => vm.$u.post(apiurl.bindVehicleNoApi,params);
+	
 	//贵州银行支付
 	let gzbank = (params = {}) => vm.$u.post(apiurl.gzbankurl, params);
 	// 订单查询
@@ -103,7 +105,8 @@ const install = (Vue, vm) => {
 		getOrderRefundDetails,
 		ordinaryWxPay,
 		monthlyWxPay,
-		getSysterms
+		getSysterms,
+		bindVehicleNo
 	};
 }
 

pages/parkingLock/parkingLock.scss

@@ -252,4 +252,39 @@
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
   }
+}
+.new-plate-number{	
+	margin-bottom: 70rpx;
+}
+.message-input-wrap{
+	margin: 0 -40rpx;
+}
+.message-input-wrap /deep/ .u-input ~ uni-view:last-of-type .u-char-item{
+	background-color: #E8FFE8;
+}
+.really-license-txt{
+	color: #008CFF;
+}
+.really-license-txt1{
+	color: #008CFF;
+	margin: 20rpx;
+}
+.popup-vehicleNo-title{
+	font-size: 48rpx;
+	text-align: center;
+	padding-top: 20rpx;
+}
+.popup-vehicleNo-center{
+	width: 95%;
+	height: 2rpx;
+	border-top: solid rgb(146, 146, 146) 2rpx;
+	margin: 30rpx 20rpx 50rpx 20rpx;
+}
+.popup-vehicleNo-select{
+	text-align: center;
+	color: #777777;;
+}
+.vehicleNo-btn{
+	display: flex;
+	margin: 40rpx 0;
 }

pages/parkingLock/parkingLock.vue

@@ -42,6 +42,14 @@
 					<view>应缴金额</view>
 					<view class="really-money">{{orderInfo.payAmount}} 元</view>
 				</view>
+				<view class="parking-lock-info-item" v-if="orderInfo.vehicleNo==''">
+					<view>车牌信息</view>
+					<view class="really-license" ><text class="really-license-txt" @click="addvehicleNo">添加车牌</text></view>
+				</view>
+				<view class="parking-lock-info-item" v-else>
+					<view>车牌信息</view>
+					<view class="really-license">{{orderInfo.vehicleNo}} <text @click="changevehicleNo" class="really-license-txt1">更换</text></view>
+				</view>
 			</view>
 			<view class="parking-lock-pay-btn">
 				<button type="default" @click="payMoney">立即支付</button>
@@ -96,6 +104,25 @@
 					<view class="rect5"></view>
 				</view>
 		</u-popup>
+		<u-popup class="popup-vehicleNo" v-model="ShowaddvehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
+			<view class="popup-vehicleNo-title">添加车牌</view>
+			<view class="popup-vehicleNo-center"></view>
+			<view class="popup-vehicleNo-content">
+				<view class="new-plate-number">
+					<view class="message-input-wrap" @click="messageInputClick">
+						<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
+					</view>				
+					<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
+				</view>
+			</view>
+			<view class="popup-vehicleNo-select" v-if="orderInfo.vehicleNo==''">暂无绑定车牌</view>
+			<view class="popup-vehicleNo-select" v-else>绑定车牌</view>
+			<view class="vehicleNo-btn">
+				<u-button type="primary" @click="handleAddCar">确认</u-button>
+				<u-button type="primary" plain @click="ShowaddvehicleNo=false">取消</u-button>
+			</view>
+		</u-popup>
+		<u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
 	</view>
 </template>
 
@@ -108,6 +135,20 @@
 		},
 		data() {
 			return {
+				keyboardshow: false,
+				colorShow: false,
+				colorList:[
+					{text:'蓝色',colorCode:0}
+					,{text:'黄色',colorCode:1}
+					,{text:'黑色',colorCode:2}
+					,{text:'白色',colorCode:3}
+					,{text:'绿色',colorCode:4}
+					,{text:'其他',colorCode:99}
+				],
+				vehicleColor:0,
+				newPlateNumber:'',
+				//添加车牌弹窗
+				ShowaddvehicleNo: false,
 				// 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
 				parkingLockStatus: 1,
 				// 支付方式选择弹框
@@ -165,6 +206,74 @@
 			}
 		},
 		methods: {
+			//更换车牌信息
+			changevehicleNo(){
+				
+			},
+			// 添加车辆
+			handleAddCar(){
+				if(!this.$u.test.carNo(this.newPlateNumber)){
+					this.$refs.uToast.show({
+						title: '请正确填写车牌号',
+						type: 'error',
+					});
+					return
+				}
+				let param = {
+					orderId: this.orderId,
+					vehicleNo: this.newPlateNumber,
+					vehicleColor: this.vehicleColor,
+				};
+				this.$u.api.bindVehicleNo(param)
+					.then(res=>{
+						if (res.code === 200) {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'success',
+							});
+							this.getOrderDetails(this.orderId);
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error',
+							});
+						}
+					})
+					.catch(err=>{
+						this.$refs.uToast.show({
+							title: '操作失败!',
+							type: 'error',
+						});
+					});
+			},
+			//新增车牌
+			addvehicleNo(){
+				this.ShowaddvehicleNo = true;
+			},
+			
+			// 点击输入框
+			messageInputClick(){
+				this.keyboardshow = true;
+			},
+			// 按键被点击(点击退格键不会触发此事件)
+			keyboardChange(val) {
+				// 将每次按键的值拼接到value变量中，注意+=写法
+				this.newPlateNumber += val;
+			},
+			// 退格键被点击
+			backspace() {
+				// 删除value的最后一个字符
+				if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
+			},
+			// 键盘输入完成后确认
+			keyboardConfirm(){
+				this.colorShow = true;
+			},
+			// 确认颜色
+			confirmColor(e){
+				this.vehicleColor = this.colorList[e].colorCode;
+			},
+			
 			payMoney() {
 				this.payWayPop = true
 			},