You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.2 KiB
101 lines
2.2 KiB
<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>
|