JiangxiMiniProgram/pages/indexEntry/enroll/registInfo/comp/oldDrive.vue

<template>
	<view class="carBox">
		<view class="carh1">学驾车型</view>
		<view v-for="(item,index) in carTypeArr" :key="index" class="carLi">
			<view class="carType">{{item.lab}}</view>
			<view class="carName_row">
				<view class="carName" v-for="(item2,index2) in item.arr" :key="index2"  @click="pickerCarClick(item2)" :class="{active: pickerCarArr.indexOf(item2) > -1}">{{item2}}</view>
			</view>
		</view>
		<view class="payBtn_row">
			<view class="btnBorder btn" @click="pickerCar()">重置</view>
			<view class="btnBg btn"  @click="pickerCar(1)">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carTypeArr: [
					{lab: '小车',arr: ['C1','C2','C3']},
					{lab: '货车',arr: ['A2','B2',]},
					{lab: '客车',arr: ['A1','A3','B1']},
					{lab: '摩托车',arr: ['D','E','F']},
					{lab: '其它',arr: ['C4','C5','C6']},
				],
				pickerCarArr: [],
			}
		},
		methods: {
			pickerCar(num) {
				if(num==1) {
					if(!this.pickerCarArr.length) return this.$u.toast('请选择学驾车型')
					let oldDriveModel = this.pickerCarArr.join(',')
					this.$emit('pickerOldDrive', oldDriveModel)
				}else {
					this.pickerCarArr = []
					this.form.oldDriveModel = ''
				}
			},
			pickerCarClick(item) {
				let index = this.pickerCarArr.indexOf(item)
				if(index>-1) {
					this.pickerCarArr.splice(index, 1);
				}else {
					this.pickerCarArr.push(item)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carBox {
		width: 100%;
		.carh1 {
			font-size: 26rpx;
			font-weight: 700;
			text-align: center;
			padding: 30rpx 0 0  0;
		}
		.carLi {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 0 32rpx;
		}
		.carType {
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			padding: 28rpx 12rpx 12rpx 0;
		}
		.carName_row {
			display: flex;
			.carName {
				margin-right: 40rpx;
				width: 88rpx;
				height: 56rpx;
				background: #F6F7F8;
				border-radius: 28rpx;
				line-height: 56rpx;
				text-align: center;
				color: #686B73;
				&.active {
					background: #ECF7FE;
					border: 1px solid #3593FB;
					color: #1989FA;
				}
			}
		}
	}
	.payBtn_row {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		.btn {
			width: 48%;
		}
	}
</style>