wxThird/pages/user/addCar/addCar.vue

<template>
	<view class="content">
        <homenav :iStatusBarHeight="iStatusBarHeight" :bgColor="bgColor" :title="'我的车库'" :cj="3"></homenav>
		<!-- 填写车辆信息 -->
		<!-- <view class="carMessage">
			
			

			<view class="mesView">
				<view class="leftTitle"><span class="stars">*</span> 车牌号</view>
				<input class="plateNumber" placeholder-style="color:#999999" placeholder="请输入车牌号" disabled="true"
					@tap="plateShow=true,bb()" v-model.trim="plateNo" />
				<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow=false" />

			
			</view>
			<view class="line"></view>
			
			<view class="mesView">
				<view class="leftTitle">VIN</view>
				
					 <view class="vinInput selectColor" @click="aaa">
						<span v-if="vin">{{vin}}</span>
						<span v-else style="color:#999999">请输入VIN</span>
					</view>
				<view class="kmStr"></view> 
			</view>
			<view class="line"></view>

			<view class="mesView" @click="goCarModel()">
				<view class="leftTitle"><span class="stars">*</span>车型</view>
				<view class="carModBtn noSelectColor" v-if="!carModelInfo.value">请选择车型</view>
				<view class="carModBtn selectColor carMod" v-else>{{carModelInfo.value}}</view>
				<image src="../../../static/img/big_rightArrow.png" class="big_rightArrow"></image>
			</view>
			<view class="line"></view>
			
			<view class="mesView" @click="bb">
				<view class="leftTitle"><span class="stars">*</span>行驶里程</view>
				<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
					placeholder-style="color:#999999" />
				<view class="kmStr">km</view>
			</view>
			<view class="line"></view>
			
			<view class="mesView" @click="bb">
				<view class="leftTitle">注册登记时间</view>
				<picker class="timeBtn" @change="bindChange" mode="date" :end="currentdate" :value="time">
					<view class="uni-input selectColor" v-if="time">{{time}}</view>
					<view class="uni-input noSelectColor" v-else>请选择</view>
				</picker>
				<image src="../../../static/img/big_rightArrow.png" class="big_rightArrow"></image>
			</view>


		</view>
		 -->
		<view class="newBox">
			<!-- 车辆款型 -->
			<view class="modelBox">
				<view class="mbTop">
					<view class="mbTopTxt1">车辆款型</view>
					<view class="mbTopTxt2">完善信息为你精准匹配服务</view>
				</view>
				<view class="mbCont">
					<image :src="carModelInfo.carModelInfo.logo" mode="" class="logo"></image>
					<view class="mbContBox">
						<view style="display: flex;justify-content: space-between;">
							<view class="brand">{{carModelInfo.carModelInfo.brand?carModelInfo.carModelInfo.brand:''}}
							 &nbsp;{{carModelInfo.carModelInfo.carModel?carModelInfo.carModelInfo.carModel:''}}
							</view>
						    <view class="lineRgiht" @click="goModel">
						    	<view class="lineRtxt">重新选择</view>
						    	<image src="../../../static/img2/jt1.png" mode="" class="jtIcon"></image>
						    </view>
						</view>
						<view class="carMTxt">{{carModelInfo.value?carModelInfo.value:''}}</view>
					</view>
				</view>
			</view>
			<!-- 车辆款型 -->
			<!-- 基信信息 -->
			<view class="modelBox" style="margin-top: 20rpx;">
				<view class="mbTop">
					<view class="mbTopTxt1">基本信息</view>
				</view>
				<view class="plateNumberMs">车牌号*</view>
				<view class="plateNumberBox" @tap="plateShow=true,bb()">
					<view class="sheng">{{plateNoArr.length?plateNoArr[0]:''}}</view>
					<view class="zhimu">{{plateNoArr.length?plateNoArr[1]:''}}</view>
					<view class="zhimu">{{plateNoArr.length?plateNoArr[2]:''}}</view>
					<view class="zhimu">{{plateNoArr.length?plateNoArr[3]:''}}</view>
					<view class="zhimu">{{plateNoArr.length?plateNoArr[4]:''}}</view>
					<view class="zhimu">{{plateNoArr.length?plateNoArr[5]:''}}</view>
					<view class="zhimu">{{plateNoArr.length?plateNoArr[6]:''}}</view>
					<view class="zhimu" v-if="plateNoArr.length==8">{{plateNoArr.length==8?plateNoArr[7]:''}}</view>
					<view class="xny" v-if="plateNoArr.length!=8">新能源</view>
				</view>
				<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow=false" />
				<view class="jbLine">
					<view class="jbLineTitle">VIN</view>
					<view class="jbLineCont" @click="aaa">
						<span class="jbLineSpan" v-if="vin">{{vin}}</span>
						<span v-else style="color:#999999">请输入VIN</span>
						<!-- <input type="text" v-model="vin" class="jbLineInput" placeholder="请输入VIN"/> -->
						<image src="../../../static/img2/jt1.png" mode="" class="jtIcon2"></image>
					</view>
				</view>
				<view class="jbLine">
					<view class="jbLineTitle">当前里程</view>
					<view class="jbLineCont">
						<input  type="number" v-model="mileage" class="jbLineInput" placeholder="请输入当前里程"/>
						<image src="../../../static/img2/jt1.png" mode="" class="jtIcon2"></image>
					</view>
				</view>
				<view class="jbLine">
					<view class="jbLineTitle">注册登记时间</view>
					<view class="jbLineCont">
						<picker class="timeBtn" @change="bindChange" mode="date" :end="currentdate" :value="time">
							<view class="uni-input selectColor" v-if="time">{{time}}</view>
							<view class="uni-input noSelectColor" v-else>请选择</view>
						</picker>
						<image src="../../../static/img2/jt1.png" mode="" class="jtIcon2"></image>
					</view>
				</view>
				<view class="jbMS">我们绝不会泄漏您的个人信息，仅用于适配商品</view>
				
			</view>
			<!-- 基信信息 -->
		</view>
		<view class="complete" @click="saveCar()">完成车辆</view>
		
		
		


		<!-- <view class="bottomView">

			<view class="saveCar" :style="{background:'#'+themeColor}" @click="saveCar()">保存</view>

		</view> -->
		<tki-float-keyboard ref="keyb" :mode="keyMode" :type="keyType"
		:title="keyTitle" @del="keyDel"
		 @val="keyVal" @show="keyShow" @hide="keyHide"></tki-float-keyboard>

	</view>
</template>

<script>
	// 普通引入组件  https://ext.dcloud.net.cn/plugin?id=44
	import tkiFloatKeyboard from '@/components/tki-float-keyboard/tki-float-keyboard.vue'
	import plateInput from "@/components/uni-plate-input/uni-plate-input.vue"
	import homenav from "@/components/homenav/nav.vue"
	export default {
		components: {
			plateInput,tkiFloatKeyboard,homenav

		},

		data() {
			return {

				plateNo: '',
				plateShow: false,
				carModelInfo: '',
				time: '',
				mileage: '',
				carId: '',
				isEditCar: false,
				currentdate: '',
				plate_type: '',
				sbPlate: [],
				visible: false,
				defaultProps: {
					"label": "value",
					"value": "ids"
				},
				vin: '',
				type:'',
				themeColor:'',
                title: 'Hello',
                keyMode:'keyboard',
                keyTitle:'VIN',
                keyType:'1',
				iStatusBarHeight:'',
				plateNoArr:[],
			    bgColor:'#FFF8E2'
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			var carModelInfo = uni.getStorageSync("carModelInfo");
			if (carModelInfo) {
				this.carModelInfo = carModelInfo;
			}
			//uni.removeStorageSync('carModelInfo');
			 this.themeColor = uni.getStorageSync("themeColor");

			this.getNowFormatDate();

			console.log(opt);
			this.type=opt.type
			this.isEditCar = opt.isEditCar
			this.carId = opt.id
			if (this.isEditCar == 'true') {

				this.getEditData()
				uni.setNavigationBarTitle({
					title: '编辑爱车'
				})
				/* uni.setNavigationBarColor({
					frontColor: "#000000",
					backgroundColor: '#FFF8E2'
				}) */
			}
		},
		onShow() {
			/* var carModelInfo = uni.getStorageSync("carModelInfo");
			if (carModelInfo) {
				this.carModelInfo = carModelInfo;
			} */
		},
		methods: {
			goModel(){
				uni.navigateTo({
					url:'carModel'
				})
			},
			keyDel(v){
				 let d = this.vin	
			    this.vin = d.substring(0,d.length-1)
			},
			keyVal(v){
				console.log(v) 
				if(this.vin==null){
					this.vin=''
				}
				this.vin=this.vin + v.toString()
			},
			keyShow(){
					
			},
			keyHide(){
							 
			},
			bb(){
				this.$refs.keyb._keyHide() //隐藏键盘
			},
			aaa(){
			   this.$refs.keyb._keyShow() //显示键盘		 
			},
			onConfirm(e) {
				console.log(e)
				this.carModelInfo = e.obj
			},
			onCancel() {
				this.visible = false
			},
			getNowFormatDate() {

				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				var currentdate = year + seperator1 + month + seperator1 + day;
				this.currentdate = currentdate;
			},
			getEditData() {
				uni.showLoading({
					title: '加载中'
				})
				var carModelInfo = {
					carModelInfo: {

					}
				}
				this.$http('opencarInfoOwner/queryCarInfoDetail', {
					id: this.carId
				}, 'GET').then(res => {
					uni.hideLoading();
					carModelInfo.carModelInfo.logo = res.data.brandLogo;
					carModelInfo.carModelInfo.brand = res.data.brand;
					carModelInfo.carModelInfo.carSeries = res.data.series;
					carModelInfo.carModelInfo.displacement = res.data.displacement;
					carModelInfo.carModelInfo.transmissionType = res.data.transmissionType;
					carModelInfo.carModelInfo.productionYear = res.data.annualmoney;
					carModelInfo.carModelInfo.carModel = res.data.carModel;
					carModelInfo.carModelInfo.guidePrice = res.data.guidePrice;
					carModelInfo.carModelInfo.engineModel = res.data.engineType;
					carModelInfo.carModelInfo.nLevelID = res.data.nLevelID;
					carModelInfo.carModelInfo.salesName = res.data.saleName;


					// 展示时
					this.plateNo = res.data.plateNumber;
					this.plateNoArr=[ ...this.plateNo ];
					carModelInfo.value = res.data.carModel;
					if (res.data.buyDate) {
						this.time = res.data.buyDate.slice(0,10);
					}
					this.mileage = res.data.milage;

					this.carModelInfo = carModelInfo;
					this.vin = res.data.vIN

					console.log('this carModelInfo', this.carModelInfo);
				})
			},
			goCarModel() {
				this.bb()
				uni.navigateTo({
					url: 'carModel'
				})
			},
			setPlate(plate) {
				console.log(plate)
				if (plate.length >= 7) this.plateNo = plate;
				this.plateShow = false;
				if (plate.length == 7) {
					this.plate_type = 2
				} else {
					this.plate_type = 52
				}
				this.plateNoArr=[ ...plate ];
				console.log(this.plateNoArr)
				// this.queryCarmodelByPlateNumber()
			},
			queryCarmodelByPlateNumber() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('worldKeepCar/worldHome/queryCarmodelByPlateNumber', {
					license_plate: this.plateNo,
					plate_type: this.plate_type,

				}, 'GET').then(res => {
					uni.hideLoading();
					console.log(res);
					if (res.data) {
						this.vin = res.data.vin
						if (res.data.buyTime) {
							this.time = res.data.buyTime.slice(0, res.data.buyTime.length - 8);
						}

					}
					if (res.data.list && res.data.list.length > 0) {
						this.sbPlate = res.data.list
						//this.sbPlate=this.sbPlate.concat(this.sbPlate)
						if (this.sbPlate.length == 1) {
							//this.carModelInfo.value=res.data[0].value
							this.carModelInfo = res.data.list[0]
						} else {
							this.visible = true
						}
					}

				})
			},

			bindChange(e) {
				console.log(e);
				this.time = e.target.value
			},

			saveCar() {
				uni.showLoading({
					title: '保存中'
				})
				if (this.plateNo == '') {
					uni.showToast({
						title: '请填写车牌号',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				/* if(!this.mileage){
					uni.showToast({
						title: '请填写里程',
						icon: 'none',
						duration: 3000
					});
					return false;
				} */
				if(!this.carModelInfo.value){
					uni.showToast({
						title: '请选择车型',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if (this.isEditCar == 'true') {
					this.updateTMemberCar()
				} else {
					this.addTMemberCar()
				}

			},

			addTMemberCar() {
				
				var cardata = {
					plateNumber: this.plateNo,
					milage: this.mileage?this.mileage:0,
					brand: "",
					displacement: "",
					series: "",
					annualmoney: "",
					carModel: "",
					saleName: "",
					transmissionType: "",
					model: "",
					nLevelID: "",
					engineType: "",
					brandLogo: "",
					buyDate: this.time,
					guidePrice: "",
					vIN: this.vin,
				};
				if(this.carModelInfo){
					cardata = {
						plateNumber: this.plateNo,
						milage: this.mileage?this.mileage:0,
						brand: this.carModelInfo.carModelInfo.brand,
						displacement: this.carModelInfo.carModelInfo.displacement,
						series: this.carModelInfo.carModelInfo.carSeries,
						annualmoney: this.carModelInfo.carModelInfo.productionYear,
						carModel: this.carModelInfo.value,
						saleName: this.carModelInfo.carModelInfo.salesName,
						transmissionType: this.carModelInfo.carModelInfo.transmissionType,
						model: this.carModelInfo.carModelInfo.carModel,
						nLevelID: this.carModelInfo.carModelInfo.nLevelID,
						engineType: this.carModelInfo.carModelInfo.engineModel,
						brandLogo: this.carModelInfo.carModelInfo.logo,
						buyDate: this.time,
						guidePrice: this.carModelInfo.carModelInfo.guidePrice,
						vIN: this.vin,
					}
				}
				
				this.$http('opencarInfoOwner/addCarOwner', cardata, 'POST').then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 3000
						});
						uni.removeStorageSync('carModelInfo');
						if(this.type==1){
							uni.setStorage({
								key: 'indexaddcar',
								data: '1',
								 success: function () {
								    setTimeout(function() {
								    	uni.navigateBack({
								    
								    	})
								    }, 1000);
								 
								 }
							}); 
						}else{
							setTimeout(function() {
								uni.navigateBack({
							
								})
							}, 3000);
						}
						

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}

				})
			},
			updateTMemberCar() {
				var cardata = {
					plateNumber: this.plateNo,
					milage: this.mileage,
					brand: "",
					displacement: "",
					series: "",
					annualmoney: "",
					carModel: "",
					saleName: "",
					transmissionType: "",
					model: "",
					nLevelID: "",
					engineType: "",
					brandLogo: "",
					buyDate: this.time,
					guidePrice: "",
					vIN: this.vin,
					id:this.carId,
				};
				if(this.carModelInfo){
					cardata = {
						plateNumber: this.plateNo,
						milage: this.mileage,
						brand: this.carModelInfo.carModelInfo.brand,
						displacement: this.carModelInfo.carModelInfo.displacement,
						series: this.carModelInfo.carModelInfo.carSeries,
						annualmoney: this.carModelInfo.carModelInfo.productionYear,
						carModel: this.carModelInfo.value,
						saleName: this.carModelInfo.carModelInfo.salesName,
						transmissionType: this.carModelInfo.carModelInfo.transmissionType,
						model: this.carModelInfo.carModelInfo.carModel,
						nLevelID: this.carModelInfo.carModelInfo.nLevelID,
						engineType: this.carModelInfo.carModelInfo.engineModel,
						brandLogo: this.carModelInfo.carModelInfo.logo,
						buyDate: this.time,
						guidePrice: this.carModelInfo.carModelInfo.guidePrice,
						vIN: this.vin,
						id:this.carId,
					}
				}
				this.$http('opencarInfoOwner/addCarOwner', cardata, 'POST').then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 3000
						});
						uni.removeStorageSync('carModelInfo');
						setTimeout(function() {
							uni.navigateBack({

							})
						}, 3000);

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}

				})
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	    background: linear-gradient( 180deg, #FFF8E2 0%, #F4F4F4 100%);
		padding-top: 20rpx;
	}
.logo{
	width: 120rpx;height: 120rpx;border-radius: 50%;
}
.newBox{
	padding: 24rpx;
}
.modelBox{
	background: #FFFFFF;border-radius: 20rpx;
	padding: 30rpx;
}
.mbTop{
	display: flex;line-height: 42rpx;
}
.mbTopTxt1{
	font-weight: 500;
	font-size: 30rpx;color: #090909;
}
.mbTopTxt2{
	font-weight: 400;color: #999999;
	font-size: 22rpx;padding-left: 25rpx;
}
.lineRgiht{
	display: flex;
}
.lineRtxt{
	font-weight: 400;line-height: 45rpx;
	font-size: 22rpx;
	color: #9A9A9A;
	padding-right: 10rpx;
}
.jtIcon{
	width: 10rpx;height: 20rpx;margin-top: 15rpx;
}
.brand{
	font-weight: 500;
	font-size: 32rpx;
	color: #090909;
	line-height: 45rpx;
	width: 350rpx;
	overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
}
.mbCont{
	display: flex;
}
.mbContBox{
	width: 480rpx;padding-left: 25rpx;
}
.mbCont{
	padding-top: 25rpx;
}
.carMTxt{
		font-weight: 400;
		font-size: 24rpx;
		color: #9E9E9E;
		line-height: 33rpx;
		padding-top: 6rpx;
}
.plateNumberMs{
	font-weight: 500;padding-top: 26rpx;
	font-size: 26rpx;
	color: #000000;
}
.plateNumberBox{
	display: flex;padding-top: 12rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #EEEEEE;
}
.sheng{
	width: 64rpx;
	height: 68rpx;
	background: #FACC2D;
	border-radius: 6rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 68rpx;
	margin-right: 6rpx;
}
.zhimu{
	width: 60rpx;
	height: 64rpx;
	border-radius: 6rpx;
	border: 2rpx solid #FACC2D;
	font-size: 32rpx;
	color: #090909;
	text-align: center;
	line-height: 68rpx;
	margin-right: 6rpx;
}
.xny{
	width: 68rpx;
	height: 64rpx;
	border-radius: 6rpx;
	border: 2rpx dashed #FACC2D;
	font-size: 20rpx;
	color: #FACC2D;
	text-align: center;
	line-height: 68rpx;
}
.jbLine{
	border-bottom: 1px solid #EEEEEE;
	padding: 16rpx 0;
}
.jtIcon2{
	width: 10rpx;height: 20rpx;margin-top: 8rpx;
}
.jbLineTitle{
	font-weight: 500;
	font-size: 26rpx;
	color: #000000;
	line-height: 37rpx;
}
.jbLineCont{
	display: flex;justify-content: space-between;
}
.jbLineInput{
	font-size: 24rpx;
	color: #3C3C3C;
	line-height: 34rpx;
	height: 34rpx;
}
.jbLineCont{
	font-size: 24rpx;
	color: #3C3C3C;
	line-height: 34rpx;
}
.jbMS{
	font-weight: 400;
	font-size: 24rpx;
	color: #9A9A9A;padding-top: 30rpx;
}
.complete{
	width: 661rpx;text-align: center;
	height: 86rpx;line-height: 86rpx;
	background: #FCD903;
	border-radius: 43rpx;
	font-size: 32rpx;
	color: #110B01;
	margin: 0 auto;
	margin-top: 50rpx;
}


	.carMessage {
		margin: 0rpx 24rpx 40rpx;
		padding-top: 20rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.mesView {
		display: flex;
		align-items: center;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
	}

	.leftTitle {
		margin: 28rpx;
		width: 180rpx;
		font-size: 28rpx;
		color: #666666;
	}


	.noSelectColor {
		color: #999999;
        font-size: 24rpx;
	}

	.selectColor {
		color: #333333;

	}

	.carMod {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.big_rightArrow {
		margin-right: 28rpx;
		width: 14rpx;
		height: 23rpx;

	}

	.cityBtn {
		width: 65%;
		font-size: 28rpx;
	}

	.plateNumber {
		width: 55%;
		font-size: 28rpx;
	}


	.carModBtn {
		width: 65%;
		font-size: 28rpx;
	}

	.timeBtn {
		width: 65%;
		font-size: 28rpx;
	}

	.mileageInput {
		width: 20%;
		font-size: 28rpx;
	}
	.vinInput{
		width: 60%;
		font-size: 28rpx;
	}

	.kmStr {
		font-size: 28rpx;
		color: #333333;

	}

	.bottomView {
		background-color: #FFFFFF;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.saveCar {

		background-color: #EC0F0A;
		margin: 23rpx 30rpx;
		height: 74rpx;

		border-radius: 37rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;

		text-align: center;
		line-height: 74rpx;
	}
	.line{
		margin: 1rpx 28rpx;
		background-color: #EEEEEE;
		height: 1rpx;
	}
	.stars{
		color: #FF2400;
	}
</style>