txCar/pages/index/addCar.vue

<template>
	<view class="content">

		<!-- 填写车辆信息 -->
		<view class="carMessage">

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


			</view>

			<view class="mesView" @click="goCarModel()">
				<view class="leftTitle">车型</view>
				<view class="carModBtn noSelectColor" v-if="!carModelInfo.value">请选择车型</view>
				<view class="carModBtn selectColor carMod" v-else>{{carModelInfo.value}}</view>
				<image src="../../static/img/rightArrow.png" class="rightArrow"></image>
			</view>

			<view class="mesView">
				<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/rightArrow.png" class="rightArrow"></image>
			</view>

			<view class="mesView">
				<view class="leftTitle">行驶里程</view>
				<input class="mileageInput selectColor" type="number" v-model="mileage" placeholder="请输入"
					placeholder-style="color:#999999" />
				<view class="kmStr">km</view>
			</view>


		</view>


		<view class="bottomView">
			<view class="saveCar" @click="saveCar()">
				<image src="../../static/img/icon_tianjiacheliang.png" mode="" style="width: 44rpx; height: 36rpx; margin-right: 10rpx;"></image>
				<view>保存爱车</view>
				</view>
		</view>
        <view>
			 <w-picker
			        :visible.sync="visible"
			        mode="selector"
			        value="2"
			        default-type="value"
			        :default-props="defaultProps"
			        :options="sbPlate"
			        @confirm="onConfirm($event,'selector')"
			        @cancel="onCancel"
			        ref="selector" 
			    ></w-picker>
		</view>

	</view>
</template>

<script>
	import plateInput from "@/components/uni-plate-input/uni-plate-input.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			plateInput,wPicker
		},

		data() {
			return {

				plateNo: '',
				plateShow: false,
				carModelInfo: '',
				time: '',
				mileage: '',
				carId: '',
				isEditCar: false,
				currentdate:'',
				plate_type:'',
                sbPlate:[],
				visible:false,
				defaultProps:{"label":"value","value":"ids"},
				vin:'',
			}
		},
		onLoad(opt) {
			uni.removeStorageSync('carModelInfo');
			
			this.getNowFormatDate();	
			
			console.log(opt);
			this.isEditCar = opt.isEditCar
			this.carId = opt.id
			if (this.isEditCar == 'true') {
				
				this.getEditData()
				uni.setNavigationBarTitle({
					title:'编辑爱车'
				})
			}
		},
		onShow() {
			var carModelInfo = uni.getStorageSync("carModelInfo");
			if (carModelInfo) {
				this.carModelInfo = carModelInfo;
			}
		},
		methods: {
			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('worldKeepCar/worldHome/queryMyTMemberCarDetail', {
					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.modelYear = res.data.annualmoney;
					carModelInfo.carModelInfo.carModel = res.data.carModel;
					carModelInfo.carModelInfo.guidePrice = res.data.guidePrice;
					

					
					// 展示时
					this.plateNo = res.data.plateNumber;
					carModelInfo.value = res.data.carModel;
					if (res.data.acarTime) {
						this.time = res.data.acarTime.slice(0,res.data.createTime.length-8);
					}
					this.mileage = res.data.milage;

					this.carModelInfo = carModelInfo;
					this.vin = res.data.vIN
					
					console.log('this carModelInfo',this.carModelInfo);
				})
			},
			goCarModel() {
				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.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.carModelInfo == '') {
					uni.showToast({
						title: '请选择车型',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if (this.time == '') {
					uni.showToast({
						title: '请选择购车时间',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if (this.mileage == '') {
					uni.showToast({
						title: '请输入行驶里程',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if (this.isEditCar == 'true') {
					this.updateTMemberCar()
				}
				else {
					this.addTMemberCar()
				}
				
			},
			
			addTMemberCar(){
				this.$http('worldKeepCar/worldHome/addTMemberCar', {
					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,
					salesName: 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,
					acarTime: this.time,
					guidePrice: this.carModelInfo.carModelInfo.guidePrice,
					vIN:this.vin,
				}, '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
						});
					}
				
				})
			},
			updateTMemberCar(){
				this.$http('worldKeepCar/worldHome/updateTMemberCar', {
					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,
					salesName: 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,
					acarTime: this.time,
					guidePrice: this.carModelInfo.carModelInfo.guidePrice,
					vIN:this.vin,
					id: this.carId,
				}, '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-color: #F4F5F7;
		padding-top: 20rpx;
	}



	.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: 120rpx;
		font-size: 28rpx;
		color: #666666;
	}


	.noSelectColor {
		color: #999999;

	}

	.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;
	}
	.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;
	}

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

	}

	.bottomView {
		background-color: #FFFFFF;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
	}

	.saveCar {

		background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
		margin: 23rpx 30rpx;
		height: 74rpx;
		
		border-radius: 37rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		
		align-items: center;
		display: flex;
		justify-content: center;
	}
</style>