MP-XiaoXing/components/plate-number-picker/plate-number-picker.vue

<template>
	<view class="cu-modal bottom-modal " :class="modalName">
		<view class="cu-dialog">
			<view class="cu-bar bg-white solid-top shadow-top">
				<view class="action text-green" @tap="hideModal">确定</view>
				<view class="action text-blue" @tap="deleteInput">删除</view>
			</view>
			<view class="padding-xs">
				<view class="grid " v-if="showPlateList">
					<view class="padding-sm margin-xs solid bg-white" v-for="item in ChineseList" @tap="select(item)" :key="item.id">
						<text class="text-lg">
							{{item.name}}
						</text>
					</view>
				</view>
				<view class="grid " v-if="showInputList">
					<view class="padding-sm margin-xs solid bg-white" v-for="item in inputList" @tap="selectText(item)" :key="item.id">
						<text class="text-lg">
							{{item.name}}
						</text>
					</view>
					<view class="padding-sm  margin-xs solid bg-orange light" @tap="clearAll">
						<text>
							重输
						</text>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		props: {
			// modalName: 'bottomModal',
			modalName: {
				type: String,
				default: ''
			},
			showPlateList: {
				type: Boolean,
				default: true
			},
			showInputList: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

				carNumber: '',
				plateNo: '',
				plateText: '',
				ChineseList: [{
						name: '京',
						id: 1
					},
					{
						name: '津',
						id: 2
					},
					{
						name: '冀',
						id: 3
					},
					{
						name: '晋',
						id: 4
					},
					{
						name: '蒙',
						id: 5
					},
					{
						name: '辽',
						id: 6
					},
					{
						name: '吉',
						id: 7
					},
					{
						name: '黑',
						id: 8
					},
					{
						name: '沪',
						id: 9
					},
					{
						name: '苏',
						id: 10
					},
					{
						name: '浙',
						id: 11
					},
					{
						name: '皖',
						id: 12
					},
					{
						name: '闽',
						id: 13
					},
					{
						name: '赣',
						id: 14
					},
					{
						name: '鲁',
						id: 15
					},
					{
						name: '豫',
						id: 16
					},
					{
						name: '鄂',
						id: 17
					},
					{
						name: '湘',
						id: 18
					},
					{
						name: '粤',
						id: 19
					},
					{
						name: '桂',
						id: 20
					},
					{
						name: '琼',
						id: 21
					},
					{
						name: '渝',
						id: 22
					},
					{
						name: '川',
						id: 23
					},
					{
						name: '贵',
						id: 24
					},
					{
						name: '云',
						id: 25
					},
					{
						name: '藏',
						id: 26
					},
					{
						name: '陕',
						id: 27
					},
					{
						name: '甘',
						id: 28
					},
					{
						name: '青',
						id: 29
					},
					{
						name: '宁',
						id: 30
					},
					{
						name: '新',
						id: 31
					}
				],
				inputList: [{
						name: '1',
						id: 1
					},
					{
						name: '2',
						id: 2
					},
					{
						name: '3',
						id: 3
					},
					{
						name: '4',
						id: 4
					},
					{
						name: '5',
						id: 5
					},
					{
						name: '6',
						id: 6
					},
					{
						name: '7',
						id: 7
					},
					{
						name: '8',
						id: 8
					},
					{
						name: '9',
						id: 9
					},
					{
						name: '0',
						id: 10
					},
					{
						name: 'A',
						id: 11
					},
					{
						name: 'B',
						id: 12
					},
					{
						name: 'C',
						id: 13
					},
					{
						name: 'D',
						id: 14
					},
					{
						name: 'E',
						id: 15
					},
					{
						name: 'F',
						id: 16
					},
					{
						name: 'G',
						id: 17
					},
					{
						name: 'H',
						id: 18
					},
					{
						name: 'I',
						id: 19
					},
					{
						name: 'J',
						id: 20
					},
					{
						name: 'K',
						id: 21
					},
					{
						name: 'L',
						id: 22
					},
					{
						name: 'M',
						id: 23
					},
					{
						name: 'N',
						id: 24
					},
					{
						name: 'O',
						id: 25
					},
					{
						name: 'P',
						id: 26
					},
					{
						name: 'Q',
						id: 27
					},
					{
						name: 'R',
						id: 28
					},
					{
						name: 'S',
						id: 29
					},
					{
						name: 'T',
						id: 30
					},
					{
						name: 'U',
						id: 31
					},
					{
						name: 'V',
						id: 32
					},
					{
						name: 'W',
						id: 33
					},
					{
						name: 'X',
						id: 34
					},
					{
						name: 'Y',
						id: 35
					},
					{
						name: 'Z',
						id: 36
					}
				]
			}
		},
		watch: {
			plateText: {
				immediate: true,
				handler(newVal, oldVal) {
					this.plateText = newVal
					if(!newVal){
						this.showPlateList = true
						this.showInputList = false
					}
				},
			}
		},
		methods: {
			clearAll() {
				this.$emit('clearAll')
			},
			select(item) {
				this.$emit('selectName', item.name)
			},
			selectText(item) {
				this.$emit('selectNo', item.name)
			},
			deleteInput() {
				this.$emit('onDeleteInput')
			},
			hideModal() {
				this.$emit('hideModal')
			},
			onDeleteInput() {
				this.$emit('onDeleteInput')
			}


		}
	}
</script>

<style scoped>
	.cu-modal {
		background: transparent;
	}

	.shadow-top {
		box-shadow: 0px -3px 0px rgba(26, 26, 26, 0.1);
	}
</style>