修改用车类型

pages/login/completeInfo.vue

@@ -1,384 +1,540 @@
-<template>
-	<view>
-		<ujp-navbar title="完善信息">
-			
+<template>
+	<view>
+		<ujp-navbar title="完善信息">
+
+
+			<view slot="right" @click="gotoLink" style=" margin-right: 10px;"> 跳过</view>
+
+		</ujp-navbar>
+		<view class="data">
+			<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">
+				<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>
+			</view>
+			<p class="car-num" @tap="keyShow=!keyShow">车牌号码<span
+					style="color: #9e9e9e;float: right;padding-right: 10px;">(点击{{keyShow?'收起':'唤起'}}键盘)</span></p>
+			
+			<view class="key-input" @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>
+			<p class="car-num" v-show="!keyShow">车辆用途</p>
+			<view class="car-type" v-show="!keyShow">
 				
-				<view slot="right"  @click="gotoLink" style=" margin-right: 10px;"> 跳过</view>
-			
-		</ujp-navbar>
-		<view class="data">
-			<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 class="card"  v-for="(item,i) in carlist" :key="i"
+				 @click="usage=item.value"
+				 :class="{
+					cardselect:usage==item.value,
+					cardno:usage!=item.value
+				}">
+				<view class="cardgo" >
+					<view class="cardinfo">
+						<img  
+						src="@/assets/img/riFill-check-fill.svg" alt="">
+						
+					</view>
 				</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" >
-				<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>
-			</view>
-			<p class="car-num"  @tap="keyShow=!keyShow" >车牌号码<span style="color: #9e9e9e;float: right;padding-right: 10px;">(点击唤起键盘)</span></p>
-<!-- 			<p class="car-num"  style="padding: 10px 0 0 40px;" >根据平台要求，车牌号码输入后暂时<span style="color:red">不可以修改</span>，后续修改需要联系客服人员，请认真填写</p>
- -->			
-			<view class="key-input"
-			 
-			 @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" >
-				<u-checkbox-group>
-					<u-checkbox class="tips" v-model="form.defaultFlag" @change="checkboxChange()" shape="circle" >设为默认车辆</u-checkbox>
-				</u-checkbox-group>
-			</view> -->
-			
-			<u-button class="login-btn" v-show="!keyShow"
-			  @click="keepCar"
-			 type="success" shape="circle" >完成</u-button>
-			 
-			 <ucarkeyboard ref="uKeyboard"
-			  style="    z-index: 999;"
-			  :style="!keyShow?'display: none':''" 
-			  mode="car" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-show="keyShow" @change="valChange" @backspace="backspace">
-			 <view style="
-			 	text-align: center;
-			 	font-size: 18px;
-			 ">
-			 <span style="color: #fff;">车牌号:{{form.carNum}}</span>
-			 <span 
-			  @tap="keyShow=!keyShow"
-			 style="
-			 	float: right;
-			 	padding-right: 10px;
-			 	color: #41a863;
-			 " >确定</span>
-			 </view>
-			 
-			 </ucarkeyboard>
-		</view>
-	</view>
-</template>
-
-<script>
-	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,umessageInput
-		},
-		data() {
-			return {
-					selectIndex:-1,
-				maxlength:8,
-				keyShow: false,
-				isLogin:false,
-				code:"",
-				codeId:"",			
-				form: {
-					nickName: '',
-					headImg: '',
-					carNum: '鄂',
-					defaultFlag: true,
+					<view class="title">{{item.name}}</view>
+					<p class="carimgp">
+						<img class="carimg"
+						:src="item.img" alt="">
+						
+					</p>
+				</view>
+			</view>
+			<view class="default" v-show="!keyShow">
+				<view style="width: 350px;">
+					<u-checkbox-group>
+						<u-checkbox class="tips" active-color="green" v-model="value" shape="circle"
+							@change="checkboxChange()"></u-checkbox>
+					</u-checkbox-group>
+					<span>我已阅读并同意</span>
+					<span @click="gotoUrl('pages/article/details?code=GRXXCLSQS')"
+						style="color: #3fbd70;">《个人信息处理授权书》</span>
+
+				</view>
+				<u-button class="login-btn"  @click="keepCar" type="success" shape="circle">完成</u-button>
+				
+			</view>
+		
+
+
+			<ucarkeyboard ref="uKeyboard" style="    z-index: 999;" :style="!keyShow?'display: none':''" mode="car"
+				:confirmBtn="false" :mask-close-able="false" :tooltip="false" v-show="keyShow" @change="valChange"
+				@backspace="backspace">
+				<view style="
+			 	text-align: center;
+			 	font-size: 18px;
+			 ">
+					<span style="color: #fff;">车牌号:{{form.carNum}}</span>
+					<span @tap="keyShow=!keyShow" style="
+			 	float: right;
+			 	padding-right: 10px;
+			 	color: #41a863;
+			 ">确定</span>
+				</view>
+
+			</ucarkeyboard>
+		</view>
+	</view>
+</template>
+
+<script>
+	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'
+	var car1=require("@/assets/img/cartype/car1.png")
+	var car2=require("@/assets/img/cartype/car2.png")
+	var car3=require("@/assets/img/cartype/car3.png")
+	var car4=require("@/assets/img/cartype/car4.png")
+	export default {
+		components: {
+			ucarkeyboard,
+			umessageInput
+		},
+		data() {
+			return {
+				value: false,
+				selectIndex: -1,
+				maxlength: 8,
+				keyShow: false,
+				isLogin: false,
+				code: "",
+				codeId: "",
+				form: {
+					nickName: '',
+					headImg: '',
+					carNum: '鄂',
+					defaultFlag: true,
 				},
-			}
-		},
-		onLoad(op) {
-			if (op.jpcode) {
-				var str1 = op.jpcode.slice(0, 19);
-				var str2 = op.jpcode.slice(20, 21);
-				var str3 = op.jpcode.slice(22);
-		
-				if (str1 == 'jp_team51_charge_id') {
-					if (str2 == 'A') {
-						this.code = str2;
-						this.codeId = str3;
+				usage:"",
+				carlist:[
+					{
+						value:1,
+						name:"出租车",
+						img:car1
+					},
+					{
+						value:2,
+						name:"专快车",
+						img:car2
+					},
+					{
+						value:3,
+						name:"物流车/商用车",
+						img:car3
+					},
+					{
+						value:4,
+						name:"私家车",
+						img:car4
 					}
+				]
+				
+			}
+		},
+		onLoad(op) {
+			if (op.jpcode) {
+				var str1 = op.jpcode.slice(0, 19);
+				var str2 = op.jpcode.slice(20, 21);
+				var str3 = op.jpcode.slice(22);
+
+				if (str1 == 'jp_team51_charge_id') {
+					if (str2 == 'A') {
+						this.code = str2;
+						this.codeId = str3;
+					}
+				}
+			}
+			if (op.login) {
+				this.isLogin = true;
+			}
+		},
+		onReady() {
+			this.$refs.uKeyboard.changeCarInputMode();
+			this.getUserInfo();
+		},
+		methods: {
+			getUserInfo() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				loginApi.findByOpenId({
+					openId: this.carhelp.getOpenId()
+				}).then((res) => {
+					uni.hideLoading();
+					this.form.nickName = res.data.regUser.nickName;
+					this.form.headImg = res.data.regUser.headImg;
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			uploadPhoto() {
+				let _self = this;
+
+				const crop = {
+					quality: 100,
+					width: 600,
+					height: 600,
+					resize: true
+				};
+
+				// 上传图片
+				uni.chooseImage({
+					count: 1,
+					crop,
+					success: async (res) => {
+						//(res);
+						let tempFile = res.tempFiles[0],
+							avatar_file = {
+								// #ifdef H5
+								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
+								// #endif
+								// #ifndef H5
+								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
+								// #endif
+							},
+							filePath = res.tempFilePaths[0]
+
+						// #ifndef APP-PLUS
+						//(`filePath=${filePath}`)
+
+						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
+						let fileData = await new Promise((callback) => {
+							uni.navigateTo({
+								url: '/pages/user/cropImage?path=' + filePath +
+									`&options=${JSON.stringify(crop)}`,
+								animationType: "fade-in",
+								events: {
+									success: url => {
+										callback(url)
+									}
+								}
+							});
+						})
+						// #endif
+
+						//返回 base64 图片
+						//(fileData);
+
+						var token = _self.carhelp.getToken()
+
+						uni.showLoading({
+							title: '上传中'
+						});
+
+						uni.request({
+							url: process.car.BASE_URL + "uploadBase64",
+							method: 'POST',
+							data: {
+								photoBase64Data: fileData
+							},
+							header: {
+								'Authorization': token,
+								'content-type': 'application/x-www-form-urlencoded'
+							},
+							success: (res) => {
+								let jsonData = res.data;
+								_self.form.headImg = jsonData.data;
+
+								uni.hideLoading();
+							}
+						});
+					}
+				});
+			},
+			gotoLink() {
+				if (this.code == 'A') {
+					uni.redirectTo({
+						url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
+					})
+				} else if (this.isLogin) {
+					uni.redirectTo({
+						url: '/pages/index/index'
+					})
+				}
+			},
+			checkboxChange() {
+				this.value = !this.value;
+			},
+			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 && 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);
+
+				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) {
+					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();
+				if (this.form.carNum.length == 0 && aaa) {
+					this.$refs.uKeyboard.changeCarInputMode();
+				}
+			},
+			keepCar() {
+				if (this.form.carNum.length != 8) {
+					uni.showToast({
+						title: "请填写新能源车牌"
+					})
+					return
 				}
-			}
-			if(op.login){
-				this.isLogin=true;
-			}
-		},
-		onReady() {
-			this.$refs.uKeyboard.changeCarInputMode();
-			this.getUserInfo();
-		},
-		methods: {
-			getUserInfo() {
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})		
-				loginApi.findByOpenId({
-					openId: this.carhelp.getOpenId()
-				}).then((res) => {
-					uni.hideLoading();
-					this.form.nickName = res.data.regUser.nickName;
-					this.form.headImg = res.data.regUser.headImg;
-				}).catch(error => {
+				if (!this.usage) {
 					uni.showToast({
-						title: error,
-						icon: "none"
-					})
-				})
-			},
-			uploadPhoto() {
-				let _self = this;
-				
-				const crop = {
-					quality: 100,
-					width: 600,
-					height: 600,
-					resize: true
-				};
-				
-				// 上传图片
-				uni.chooseImage({
-					count: 1,
-					crop,
-					success: async (res) => {
-						//(res);
-						let tempFile = res.tempFiles[0],
-							avatar_file = {
-								// #ifdef H5
-								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
-								// #endif
-								// #ifndef H5
-								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
-								// #endif
-							},
-							filePath = res.tempFilePaths[0]
-							
-						// #ifndef APP-PLUS
-						//(`filePath=${filePath}`)
-						
-						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
-						let fileData = await new Promise((callback) => {
-							uni.navigateTo({
-								url: '/pages/user/cropImage?path=' + filePath +
-									`&options=${JSON.stringify(crop)}`,
-								animationType: "fade-in",
-								events: {
-									success: url => {
-										callback(url)
-									}
-								}
-							});
-						})
-						// #endif
-						
-						//返回 base64 图片
-						//(fileData);
-						
-						var token = _self.carhelp.getToken()
-						
-						uni.showLoading({
-							title: '上传中'
-						});
-						
-						uni.request({
-						    url: process.car.BASE_URL + "uploadBase64",
-							method: 'POST',
-						    data: {
-						        photoBase64Data: fileData
-						    },
-						    header: {
-						        'Authorization': token,
-								'content-type': 'application/x-www-form-urlencoded'
-						    },
-						    success: (res) => {
-								let jsonData = res.data;
-						        _self.form.headImg = jsonData.data;
-								
-								uni.hideLoading();
-						    }
-						});
-					}
-				});
-			},
-			gotoLink(){
-				if (this.code == 'A') {
-					uni.redirectTo({
-						url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
+						title: "请选择车辆用途"
 					})
-				} else if (this.isLogin){
-					uni.redirectTo({
-						url: '/pages/index/index'
-					})
-				}
-			},
-			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&&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);
-							
-				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){
-					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();
-				if(this.form.carNum.length == 0 && aaa) {
-					this.$refs.uKeyboard.changeCarInputMode();
-				}
-			},
-			keepCar() {
-				if(this.form.carNum.length != 8) {
+				if (!this.value) {
 					uni.showToast({
-						title:"请填写新能源车牌"
+						title: "请阅读并同意《个人信息处理授权书》"
 					})
 					return
 				}
+				
+				
 				//(this.form)
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})
-				userApi.perfectPersonInformation(this.form).then((res) => {
-					uni.hideLoading();
-					
-					this.gotoLink()
-				}).catch(error => {
-					uni.showToast({
-						title: error,
-						icon: "none"
-					})
-				})
-			}
-		}
-		
-	}
-</script>
-<style>
-	page{
-		background: #fff;
-	}
-</style>
-<style lang="scss" scoped>
-	.u-char-item{
-		width: 29px !important;
-	}
-	.skip{
-		margin-left: 81.3%;
+				this.form.usage=this.usage;
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				userApi.perfectPersonInformation(this.form).then((res) => {
+					uni.hideLoading();
+
+					this.gotoLink()
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			}
+		}
+
+	}
+</script>
+<style>
+	page {
+		background: #fff;
+	}
+</style>
+<style lang="scss" scoped>
+	.u-char-item {
+		width: 29px !important;
+	}
+
+	.skip {
+		margin-left: 81.3%;
+	}
+
+	.data-icon {
+		height: 28px;
+		width: 28px;
+		background-color: #00B962;
+		border-radius: 14px;
+		border: 2px solid #fff;
+		text-align: center;
+		line-height: 24px;
+		position: absolute;
+		z-index: 999;
+		right: 0;
+		bottom: 0px
+	}
+
+	.data-img {
+		margin: 10px auto;
+		height: 108px;
+		width: 108px;
+		position: relative;
+	}
+
+	.data-input {
+		margin: 0 80rpx;
+	}
+
+	.login-btn {
+		margin-top: 12px;
+		background-color: #00B962 !important;
+		border-color: #00B962 !important;
+		color: #fff !important;
+	}
+
+	.car-num {
+		padding: 10px 0 0 40px;
+		line-height: 18px;
+	}
+
+	.key-input {
+		padding-top: 19px;
+	}
+
+	.default {
+		margin: 16px 28px;
+	}
+
+	/deep/.u-char-item {
+		width: 30px !important;
+		height: 40px !important;
+		font-size: 18px !important;
 	}
-	.data-icon{
-		height: 28px;
-		width: 28px;
-		background-color: #00B962;
-		border-radius: 14px;
-		border: 2px solid #fff;
-		text-align: center;
-		line-height: 24px;
-		position: absolute;
-		z-index: 999;
-		right: 0;
-		bottom:0px
-	}
-	.data-img{
-		margin: 10px auto;
-		height: 108px;
-		width: 108px;
-		position: relative;
-	}
-	.data-input{
-		margin: 0 40px;
-	}
-	.login-btn {
-		margin: 28px ;
-		background-color:#00B962!important;
-		border-color: #00B962!important;
-		color:#fff!important;
-	}
-	.car-num{
-		padding: 10px 0 0 40px;
-		line-height: 18px;
-	}
-	.key-input {
-		padding-top: 19px;
+	.car-type{
+		    display: flex;
+		    flex-direction: row;
+			margin: 0 40rpx;
+			flex-wrap: wrap;
 	}
 	
-	.default {
-		margin: 16px 28px;
+	.card {
+		 width: 45%;
+		 margin-right: 5px;
+		  margin-left: 5px;
+		overflow: hidden;
+		padding: 20rpx;
+		margin-top: 10px;
+		height: 150rpx;
+		.title{
+			
+			font-weight: bold;
+		}
+		.carimgp{
+			float: right;
+		}
+		.carimg{
+			width: 180rpx;
+			height: 64rpx;
+		}
+		
 	}
-	/deep/.u-char-item {
-		width: 30px !important;
-		height: 40px !important;
-		font-size: 18px !important;
+	.cardselect {
+		border-radius: 8px;
+		border: 2px solid rgba(0, 185, 98, 1);
+		.title{
+			color:#00B962;
+			font-weight: bold;
+		}
+		.cardgo{
+				position: relative;
+			 
+				.cardinfo{
+					    background-color: #57ad55;
+					width: 36rpx;
+					height: 36rpx;
+					position: absolute;
+					    top: -12px;
+					    right: -12px;
+						    border-radius: 0 0 0 4px;
+							img{
+								width: 36rpx;
+							}
+				}
+		}
 	}
-</style>
+	.cardno {
+		border: 2px solid #f6f6f6;
+		border-radius: 8px;
+		    background-color: #f6f6f6;
+		.title{
+			
+			font-weight: bold;
+		}
+		.cardgo{
+			position: relative;
+						 
+			.cardinfo{
+				    background-color: #f6f6f6;
+				width: 36rpx;
+				height: 36rpx;
+				position: absolute;
+				    top: -12px;
+				    right: -12px;
+					    border-radius: 0 0 0 4px;
+						img{
+							width: 36rpx;
+						}
+			}
+		}
+		
+	}
+</style>

pages/user/car/carAdd.vue

@@ -78,7 +78,10 @@
 			}
 		},
 		onReady() {
-			this.$refs.uKeyboard.changeCarInputMode();
+			if(this.$refs.uKeyboard){
+				this.$refs.uKeyboard.changeCarInputMode();
+			}
+			
 			
 			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
 				this.elderStatus = true;

pages/user/car/carDet.vue

@@ -4,20 +4,70 @@
  		</ujp-navbar>
 		<!-- <p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
 		 -->
-		<view class="key-input">
+		 <p class="car-num" @tap="keyShow=!keyShow">车牌号码<span
+		 		style="color: #9e9e9e;float: right;padding-right: 10px;">(点击{{keyShow?'收起':'唤起'}}键盘)</span></p>
+		 
+		<view class="key-input"  @tap="keyShow=true">
 			<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">
-			<!-- <u-checkbox-group>
-				<u-checkbox class="tips" v-model="form.defaultFlag" shape="circle" @change="checkboxChange()">设为默认车辆</u-checkbox>
-			</u-checkbox-group> -->
+		<p class="car-num" v-show="!keyShow">车辆用途</p>
+		<view class="car-type" v-show="!keyShow">
+			
+			<view class="card"  v-for="(item,i) in carlist" :key="i"
+			 @click="usage=item.value"
+			 :class="{
+				cardselect:usage==item.value,
+				cardno:usage!=item.value
+			}">
+			<view class="cardgo" >
+				<view class="cardinfo">
+					<img  
+					src="@/assets/img/riFill-check-fill.svg" alt="">
+					
+				</view>
+			</view>
+				<view class="title">{{item.name}}</view>
+				<p class="carimgp">
+					<img class="carimg"
+					:src="item.img" alt="">
+					
+				</p>
+			</view>
+		</view>
+		
+		<ucarkeyboard ref="uKeyboard" mode="car"
+		  style="    z-index: 999;" :style="!keyShow?'display: none':''"
+		 :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace">
+			
+			<view style="
+				text-align: center;
+				font-size: 18px;
+			">
+								<span style="color: #fff;">车牌号:{{form.carNum}}</span>
+								<span @tap="keyShow=!keyShow" style="
+				float: right;
+				padding-right: 10px;
+				color: #41a863;
+			">确定</span>
+							</view>
+		</ucarkeyboard>
+		<view class="default"  v-show="!keyShow" >
+			 <view style="width: 350px;">
+			 	<u-checkbox-group>
+			 		<u-checkbox class="tips" active-color="green" v-model="value" shape="circle"
+			 			@change="checkboxChange()"></u-checkbox>
+			 	</u-checkbox-group>
+			 	<span>我已阅读并同意</span>
+			 	<span @click="gotoUrl('pages/article/details?code=GRXXCLSQS')"
+			 		style="color: #3fbd70;">《个人信息处理授权书》</span>
+			 
+			 </view>
+			 <u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
+			 
 		</view>
-		<u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
 	</view>
 </template>
 
@@ -26,6 +76,11 @@
 	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
 	import umessageInput from '@/components/UmessageInput.vue'
 
+	var car1=require("@/assets/img/cartype/car1.png")
+	var car2=require("@/assets/img/cartype/car2.png")
+	var car3=require("@/assets/img/cartype/car3.png")
+	var car4=require("@/assets/img/cartype/car4.png")
+	
 	export default {
 		components: {
 			ucarkeyboard,umessageInput
@@ -34,14 +89,38 @@
 			return {
 				isLogin:false,
 				maxlength:8,
-				keyShow: true,
+				keyShow: false,
+				value: false,
 				code:"",
 				codeId:"",
 				form: {
 					carNum: '鄂',
 					defaultFlag: true,
 				},
-				selectIndex:-1
+				selectIndex:-1,
+				usage:"",
+				carlist:[
+					{
+						value:1,
+						name:"出租车",
+						img:car1
+					},
+					{
+						value:2,
+						name:"专快车",
+						img:car2
+					},
+					{
+						value:3,
+						name:"物流车/商用车",
+						img:car3
+					},
+					{
+						value:4,
+						name:"私家车",
+						img:car4
+					}
+				]
 			}
 		},
 		onLoad(op) {
@@ -83,7 +162,7 @@
 			},
 			
 			checkboxChange() {
-				this.form.defaultFlag = !this.form.defaultFlag;
+				this.value = !this.value;
 			},
 			getSelectIndex(i){
 				this.selectIndex=i;
@@ -170,10 +249,24 @@
 					})
 					return
 				}
+				if (!this.usage) {
+					uni.showToast({
+						title: "请选择车辆用途"
+					})
+					return
+				}
+				if (!this.value) {
+					uni.showToast({
+						title: "请阅读并同意《个人信息处理授权书》"
+					})
+					return
+				}
+				this.form.usage=this.usage;
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
+				
 				userApi.addRegUserCar(this.form).then((res) => {
 					uni.hideLoading();
 					
@@ -209,15 +302,98 @@
 	.key-input {
 		padding-top: 24px;
 	}
-
+	.car-num {
+		padding: 10px 0 0 40px;
+		line-height: 18px;
+	}
 	.default {
 		margin: 16px 28px;
 	}
 
 	.login-btn {
-		margin: 28px;
+		//margin: 28px;
+		margin-top: 12px;
 		background-color: #00B962 !important;
 		border-color: #00B962 !important;
 		color: #fff !important;
 	}
+	
+	.car-type{
+		    display: flex;
+		    flex-direction: row;
+			margin: 0 40rpx;
+			flex-wrap: wrap;
+	}
+	
+	.card {
+		 width: 45%;
+		 margin-right: 5px;
+		  margin-left: 5px;
+		overflow: hidden;
+		padding: 20rpx;
+		margin-top: 10px;
+		height: 150rpx;
+		.title{
+			
+			font-weight: bold;
+		}
+		.carimgp{
+			float: right;
+		}
+		.carimg{
+			width: 180rpx;
+			height: 64rpx;
+		}
+		
+	}
+	.cardselect {
+		border-radius: 8px;
+		border: 2px solid rgba(0, 185, 98, 1);
+		.title{
+			color:#00B962;
+			font-weight: bold;
+		}
+		.cardgo{
+				position: relative;
+			 
+				.cardinfo{
+					    background-color: #57ad55;
+					width: 36rpx;
+					height: 36rpx;
+					position: absolute;
+					    top: -12px;
+					    right: -12px;
+						    border-radius: 0 0 0 4px;
+							img{
+								width: 36rpx;
+							}
+				}
+		}
+	}
+	.cardno {
+		border: 2px solid #f6f6f6;
+		border-radius: 8px;
+		    background-color: #f6f6f6;
+		.title{
+			
+			font-weight: bold;
+		}
+		.cardgo{
+			position: relative;
+						 
+			.cardinfo{
+				    background-color: #f6f6f6;
+				width: 36rpx;
+				height: 36rpx;
+				position: absolute;
+				    top: -12px;
+				    right: -12px;
+					    border-radius: 0 0 0 4px;
+						img{
+							width: 36rpx;
+						}
+			}
+		}
+		
+	}
 </style>