safetyHome_wxapp/pages/mine/addCar.vue

<!-- 绑定新的车辆 -->
<template>
	<view class="">
		<view>
			<view class="item">
				<view class="topTile">车辆类型</view>
				<view class="content" @tap="chooseType">
					<view v-text="type" class="carType" :class="{typeActive:typeNum}">
					</view>
					<image src="../../static/icon_combo_nor@2x.png" style="width: 20rpx;height: 12rpx;margin-top: 15rpx;margin-right: 18rpx;"></image>
				</view>
			</view>
			<view class="item">
				<view class="topTile">车牌号</view>
				<view class="content">
					<view class="carNum">
						<input type="text" v-model="carNum"  placeholder="请输入车牌号" placeholder-class="holder" style="width: 100%;height: 100%;"/>
					</view>
					<!-- <image src="../../static/icon_combo_nor@2x.png" style="width: 20rpx;height: 12rpx;margin-top: 15rpx;margin-right: 18rpx;"></image> -->
				</view>
			</view>
		</view>
		<!-- 车辆类型 -->
		 <lb-picker ref="type" :list="typeData" @confirm="confirm">
		 	<!-- <view slot="cancle-text">取消</view>
		 	  <view slot="confirm-text" >确定</view> -->
		 </lb-picker>
		 <!-- 保存 -->
		 <view class="btn" :class="{active:type && carNum}">保存</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default{
		data(){
			return{
				type:'请选择车辆类型',//车辆类型
				typeNum:'',
				carNum:'',//车牌号
				typeData:[{label:'机动车',value:1,child:[]},{label:'电动车',value:2,child:[]},],
			}
		},
		methods:{
			// 车辆类型选择确定
			confirm(data){
				this.type=data.item.label
				this.typeNum=data.item.value
			},
			// 选择车辆类型
			chooseType(){
				this.$refs.type.show()
			
			},
		},
		components: {
			LbPicker
		},
	}
</script>

<style>
	.btn{
		width:702rpx;
		height:90rpx;
		background:rgba(163,197,237,1);
		opacity:1;
		border-radius:18rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		line-height:90rpx;
		color:rgba(255,255,255,1);
		text-align: center;
		position: fixed;
		bottom: 56rpx;
		left:26rpx ;
	}
	.active{
		background:rgba(41,138,253,1);
	}
	.item{
		width: 662rpx;
		height: 135rpx;
		border-bottom:2rpx solid rgba(247,247,247,1);
		margin: 0 auto;
	}
	.carType{
		width:202rpx;
		height:40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
	.carNum{
		width:202rpx;
		height:40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.content{
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
	}
	.topTile{
		width:132rpx;
		height:44rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-top: 32rpx;
	}
	.holder{
		color:rgba(153,153,153,1);
	}
	.typeActive{
		color:rgba(51,51,51,1);
	}
</style>