BJ_web_developers / jy_parkingOS

  <template>
  
  	<view class="so-mask">
  

  		<view class="bg-icon" :class="set">

  			<image :src="carBg" mode="" class="bac" />
  			<view class="bg-text">
  				<view class="bg-text-top">输 入 车 牌 号</view>
  				<view class="bg-text-bottom">输入完整车牌号，查询停车信息</view>
  			</view>
  		</view>
  
  		<view class="so-plate animation-scale-up">
  			<view class="so-plate-head">
  				<view class="so-plate-type">
  					<radio-group @change="typeChange">
  						<label>
  							<radio value="1" :checked="type===1" />
  							普通车牌
  						</label>
  						<label>
  							<radio value="2" :checked="type===2" />
  							新能源车牌
  						</label>
  					</radio-group>
  				</view>
  			</view>
  			<view class="so-plate-body" @click="plateShowOrHide = true">

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch"
  					data-index="0">

  					<text>{{ currentInputValue[0] }}</text>
  				</view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch"
  					data-index="1">

  					<text>{{ currentInputValue[1] }}</text>
  				</view>
  				<view class="so-plate-dot"></view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch"
  					data-index="2">

  					<text>{{ currentInputValue[2] }}</text>
  				</view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch"
  					data-index="3">

  					<text>{{ currentInputValue[3] }}</text>
  				</view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch"
  					data-index="4">

  					<text>{{ currentInputValue[4] }}</text>
  				</view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch"
  					data-index="5">

  					<text>{{ currentInputValue[5] }}</text>
  				</view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch"
  					data-index="6">

  					<text>{{ currentInputValue[6] }}</text>
  				</view>

  				<view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch"
  					v-if="type == 2" data-index="7">

  					<text>{{ currentInputValue[7] }}</text>
  				</view>
  			</view>
  
  
  		</view>
  
  		<view style="padding: 0 10px;position: fixed;bottom: 0;left:0">
  			<view class="so-plate-foot" v-show="plateShowOrHide">

  				<view class="so-plate-keyboard" :style="{height:keyboardHeight}">

  					<view id="keyboard">
  						<block v-if="inputType == 1">

  							<view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el"
  								:data-value="el" @tap="chooseKey">{{ el }}</view>

  						</block>
  						<block v-if="inputType == 1">
  							<text class="so-plate-key fill-block"></text>
  							<text class="so-plate-key fill-block"></text>
  						</block>
  						<block v-if="inputType >= 3">

  							<view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el"
  								:data-value="el" @tap="chooseKey">{{ el }}</view>

  						</block>
  						<block v-if="inputType >= 2">

  							<view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el"
  								:data-value="el" @tap="chooseKey">{{ el }}</view>

  						</block>
  						<block v-if="inputType == 3">
  							<text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
  						</block>
  						<block v-if="inputType == 4">

  							<view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el"
  								:data-value="el" @tap="chooseKey">{{ el }}</view>

  						</block>
  						<text v-if="inputType == 4" class="so-plate-key fill-block"></text>
  					</view>
  				</view>
  				<view class="so-plate-btn-group">
  					<view>
  						<button class="so-plate-btn so-plate-btn--cancel" @tap="plateShowOrHide = false">取消</button>
  					</view>
  					<view>
  						<button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
  						<button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
  
  					</view>
  
  				</view>
  			</view>
  		</view>
  	</view>
  </template>
  <script>

  	import carBg from 'static/inputCarNumber_pic/carBg.png'

  	export default {
  		name: 'uni-plate-input',
  		data() {
  			return {
  				plateShowOrHide: false,
  				type: 1, //车牌类型
  				currentInputIndex: 2, //当前编辑的输入框
  				currentInputValue: ['苏', 'B', '', '', '', '', ''],
  				fillBlock: [{
  					num: 11
  				}, {
  					num: 12
  				}, {
  					num: 13
  				}, {
  					num: 14
  				}, {
  					num: 15
  				}, {
  					num: 16
  				}], //避免:key报错
  				keyboardHeightInit: false,
  				keyboardHeight: 'auto',
  				carBg: '',
  				provinceText: [
  					'粤',
  					'京',
  					'冀',
  					'沪',
  					'津',
  					'晋',
  					'蒙',
  					'辽',
  					'吉',
  					'黑',
  					'苏',
  					'浙',
  					'皖',
  					'闽',
  					'赣',
  					'鲁',
  					'豫',
  					'鄂',
  					'湘',
  					'桂',
  					'琼',
  					'渝',
  					'川',
  					'贵',
  					'云',
  					'藏',
  					'陕',
  					'甘',
  					'青',
  					'宁',
  					'新'
  				],
  				numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
  				wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U',
  					'V', 'W', 'X', 'Y', 'Z'
  				],
  				lastWordText: ['港', '澳', '学', '领', '警']
  			};
  		},
  		props: {
  			// plate: {
  			//     type: String
  			// }
  		},
  		onLoad() {
  			this.type = 1;
  			this.currentInputValue = ['苏', 'B', '', '', '', '', ''];
  			this.currentInputIndex = 2;
  		},
  		onShow() {
  			this.carBg = carBg
  		},
  		computed: {
  			//输入框类型
  			inputType() {
  				switch (this.currentInputIndex) {
  					case 0:
  						return 1;
  						break;
  					case 1:
  						return 2;
  						break;
  					case 2:
  						return 3;
  						break;
  					case 3:
  						return 3;
  						break;
  					case 4:
  						return 3;
  						break;
  					case 5:
  						return 3;
  						break;
  					case 6:
  						return this.type == 2 ? 3 : 4;
  						break;
  					case 7:
  						return 4;
  						break;
  					default:
  						return 1;
  						break;
  				}
  			}
  		},
  		watch: {
  			// currentInputIndex:function(n,o){
  			//     if(!this.keyboardHeightInit) return
  			//     this.$nextTick(()=>{
  			//         this.changeKeyboardHeight()
  			//     })
  			// }
  		},
  		methods: {
  			//车牌类型切换
  			typeChange(e) {
  				const {
  					value
  				} = e.detail;
  				this.type = parseInt(value)
  				this.currentInputIndex = 0
  				if (value == 1) {

  					this.currentInputValue = ['苏', 'B', '', '', '', '', '']

  				} else {

  					this.currentInputValue = ['苏', 'B','', '', '', '', '', '']

  				}
  			},
  			inputSwitch(e) {
  				const {
  					index
  				} = e.currentTarget.dataset;
  				this.currentInputIndex = parseInt(index);
  			},
  			chooseKey(e) {
  				const {
  					value
  				} = e.currentTarget.dataset;
  				this.$set(this.currentInputValue, this.currentInputIndex, value);
  				if (this.type == 1 && this.currentInputIndex < 6) {
  					this.currentInputIndex++
  				}
  				if (this.type == 2 && this.currentInputIndex < 7) {
  					this.currentInputIndex++
  				}
  			},
  			deleteKey() {
  				this.$set(this.currentInputValue, this.currentInputIndex, '')
  				if (this.currentInputIndex != 0) this.currentInputIndex--
  			},
  			exportPlate() {
  				const plate = this.currentInputValue.join('')
  				let err = false
  				if (this.type === 1 && plate.length != 7) {
  					err = true
  				} else if (this.type === 2 && plate.length != 8) {
  					err = true
  				}
  				if (err) return uni.showToast({
  					title: '请输入完整的车牌号码',
  					icon: 'error'
  				})

  				console.log(plate)

  				uni.navigateTo({
  					url: '../parkPay/parkPay?carNumber=' + plate
  				})
  			},
  			changeKeyboardHeight() {
  				const that = this
  				const query = uni.createSelectorQuery().in(this);
  				query.select('#keyboard').boundingClientRect();
  				query.exec(function(res) {
  					if (res && res[0]) {
  						that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
  						that.keyboardHeightInit = true
  					}
  				});
  			}
  		},
  		mounted() {
  			console.log(this.plate);
  			const plateKey = this.plate.split('')
  			if (plateKey.length === 7) {
  				this.type = 1
  			} else if (plateKey.length === 8) {
  				this.type = 2
  			}
  			if (plateKey.length === 7 || plateKey.length === 8) {
  				this.currentInputValue = plateKey
  				this.currentInputIndex = plateKey.length - 1
  			}

  			setTimeout(() => { //在动画结束之后才开始获取
  				this.$nextTick(() => {
  					this.changeKeyboardHeight()
  				})
  			}, 500);
  		}
  	};

  </script>
  <style scoped lang="less">
  	@import 'uni-plate-input';

  
  	.bg-icon {

  		/*padding: 10px 0;*/
  		height: 60px;
  		/*background: url("../../static/inputCarNumber_pic/carBg.png") no-repeat;*/
  		/*background-size: 100% 100%;*/
  		color: #FFF;
  	}

  
  	.bac {

  		position: absolute;
  		width: 100%;
  		height: 60px;
  	}

  
  	.bg-text {

  		width: 100%;
  		position: absolute;

  		top: 10px;

  		text-align: center;
  
  	}
  </style>