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="!carMod">请添加您的爱车</view>
				<view class="carModBtn selectColor" v-else>{{carMod}}</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">
					<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">保存爱车</view>
		</view>


	</view>
</template>

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

		data() {
			return {
				homeData: '',
				shopId: '',
				plateNo: '',
				plateShow: false,
				joinFirst: false,
				carMod: '',
				time: '',
				mileage: '',

			}
		},
		onLoad() {

			



		},
		methods: {
			goCarModel(){
				uni.navigateTo({
					url:'carModel'
				})
			},
			setPlate(plate) {
				if (plate.length >= 7) this.plateNo = plate;
				this.plateShow = false;
			},

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

			

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

	}

	.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;
		line-height: 74rpx;
		border-radius: 37rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;

	}
</style>