parking_inspection/pages/ownerInquiry/ownerInquiry.vue

<template>
	<view class="inquiry">
		<view class="inquiry-input" @click="keyboardShow = true">
			<u-code-input v-model="cardNum" :maxlength="8" size="25" :disabledKeyboard="true"></u-code-input>
			<u-keyboard ref="uKeyboard" mode="car" :show="keyboardShow" @change="keyboardChange"
				@confirm="keyboardConfirm" @backspace="keyboardBackspace"></u-keyboard>
			<u-picker :show="colorShow" :columns="colorList" keyName="text" @confirm="colorConfirm"></u-picker>
		</view>
		<view class="inquiry-button">
			<u-button type="primary" text="查询" @click="searchRecords"></u-button>
		</view>
		<view class="inquiry-tips">通过输入车牌号查询车主的停车记录</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNum: '',
				colorCode: '',
				keyboardShow: false,
				colorList: [
					[{
						text: '蓝色',
						colorCode: 0
					}, {
						text: '黄色',
						colorCode: 1
					}, {
						text: '黑色',
						colorCode: 2
					}, {
						text: '白色',
						colorCode: 3
					}, {
						text: '绿色',
						colorCode: 4
					}, {
						text: '其他',
						colorCode: 99
					}]
				],
				colorShow: false
			}
		},
		methods: {
			keyboardChange(val) {
				if (this.cardNum.length < 7) {
					this.cardNum += val
				}
				console.log(this.cardNum)
			},
			keyboardConfirm(val) {
				this.keyboardShow = false
				this.colorShow = true
			},
			keyboardBackspace() {
				if (this.cardNum.length) this.cardNum = this.cardNum.substr(0, this.cardNum.length - 1);
			},
			colorConfirm(val) {
				this.colorCode = val.value[0].colorCode
				this.colorShow = false
			},
			searchRecords() {
				if (this.cardNum.length === 7 && (this.colorCode || this.colorCode == 0)) {
					uni.$u.route({
						url: 'pages/ownerInquiry/queryResults/queryResults'
					})
				} else if (this.cardNum.length < 7 && this.colorCode){
					this.$refs.uToast.show({
						type: 'warning',
						title: '提示',
						message: "请选择正确的车牌号",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.cardNum.length === 7 && this.colorCode === '') {
					this.$refs.uToast.show({
						type: 'warning',
						title: '提示',
						message: "请选择车牌颜色",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						title: '提示',
						message: "请选择车牌号和车牌颜色",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inquiry {
		padding: 0 40rpx;

		&-input {
			padding-top: 420rpx;
			text-align: center;
			width: calc(100% - 40rpx);
			margin: 0 auto;
		}

		&-button {
			margin-top: 100rpx;
		}

		&-tips {
			color: #bbb;
			font-size: 28rpx;
			margin-top: 100rpx;
			text-align: center;
		}
	}
</style>