123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- <template>
- <view>
- <view class="car-input-container">
- <view class="car-input-box"
- v-for="(item,index) in inputList" :key="index" @click="plateInput(index)">
- <view class="car-input-item"
- :class="[curInput == index?'sel-item':'',(maxNum-1) == index?'last-item':'']" >
- <view :class="curInput == index?'sel-item-line':''"></view>
- <img :src="xnyImgBase64" class="new-item-img" v-if="(maxNum-1) == index"/>
- {{item}}
- </view>
- </view>
- </view>
-
- <view class="car-number-container" v-if="showKeyPop1">
- <view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
- <view class="plate-popup-list">
- <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index" @click="tapKeyboard(item)">{{item}}</view>
- </view>
- <view class="plate-popup-list">
- <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index" @click="tapKeyboard(item)">{{item}}</view>
- </view>
- <view class="plate-popup-list">
- <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index" @click="tapKeyboard(item)">{{item}}</view>
- </view>
- <view class="plate-popup-list">
- <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index" @click="tapKeyboard(item)">{{item}}</view>
- <!-- 删除 -->
- <view class="plate-popup-item province-item del" @click="onPlateDelTap">
- <image :src="deleteImgBase64" />
- </view>
- </view>
- </view>
-
- <view class="car-number-container" v-if="showKeyPop2">
- <view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
- <view class="plate-popup-list">
- <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
- v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
- {{item}}
- </view>
- </view>
- <view class="plate-popup-list">
- <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
- v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
- {{item}}
- </view>
- </view>
- <view class="plate-popup-list">
- <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
- v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
- {{item}}
- </view>
- </view>
- <view class="plate-popup-list">
- <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
- v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
- {{item}}
- </view>
- <!-- 删除 -->
- <view class="plate-popup-item del" @click="onPlateDelTap">
- <image :src="deleteImgBase64" />
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'car-number-input',
- emits: ['numberInputResult'],
- props: {
- defaultStr:{
- type: String,
- default: ''
- },
- plateNum: {
- type: String,
- default: ''
- },
- // maxNum: {
- // type: Number,
- // default: 8
- // },
- },
- data() {
- return {
- inputList:[" "," "," "," "," "," "," "," "],
- curInput:-1,
- maxNum:8,
- showKeyPop1:false,
- showKeyPop2:false,
- keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
- keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
- keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
- keyProvince4: ['陕', '甘', '青', '宁', '新', 'W' ],
- keyEnInput1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
- keyEnInput2: ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"],
- keyEnInput3: ["A", "S", "D", "F", "G", "H", "J", "K", "L", "警"],
- keyEnInput4: ["Z", "X", "C", "V", "B", "N", "M", "港", "澳"],
- lockInput: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
- xnyImgBase64:"data:image/png;base64,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PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDktMTlUMTU6MDQ6NDQrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDktMTlUMTU6MDQ6NDQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA5LTE5VDE1OjA0OjQ0KzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmNjMmVkZmYwLTk0NjktNGJhNC1hODc2LWVkYmJlZjRhYjk0MyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmJkYTBhZTk3LWFmZWYtOWI0Ni1iOGFhLWZjOTMyMmM5OTk0NCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjM1N2JlZGY2LTI5YWUtNGJmNS04YjQwLTVlMWQ5YjNlMmJmZiIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRpc3BsYXkiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDozNTdiZWRmNi0yOWFlLTRiZjUtOGI0MC01ZTFkOWIzZTJiZmYiIHN0RXZ0OndoZW49IjIwMjItMDktMTlUMTU6MDQ6NDQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6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",
- deleteImgBase64:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABIBJREFUaEPtWFtoHFUY/v/d9cWAERH1xQvqg60gIl5AFPTBYJrW/OekG5X40FpaabVWxCqCVqt4reCFVn2IbR684ZD5Z0fb4KVQUFtRQp8qXpCCkaKICj4kojvz21PPluNmsnPZTUJg521nz3c7/zlz/hmEJX7hEvcP3QCLXcFuBboVaHMGCi8hIuoHgGva1M8ML5VKv8VxfDAIgkkXVCgAEb2LiLdmVu/swENRFK0Nw/BbQ5s7ABHtQsRNnfWUn61SqZzved6PuQIQ0ROI+KgjdyC/dDEEIp4hIpc56L3MvDJzACLagogvNQhE5JOpqakVk5OT/xSzlB+ltb5KRL50kNdmCqCUGgGANx3zh+M47g/D8Jf8NtpDaK33iMgay3J/agCl1M0A8AEAlE9sGsSjURStrNVqX7dnpRiaiB5HxMcMWkS2twxgS2bMn2Xl/gCAW5j5s2Ly7aMyB9BaXygi7wPAcisrAKCYuda+jeIMmQKMjIycNj09bWb+ekdqHTPvLi7dGWSmAFprFhFyJLcy8wtFLGitXxSRY8y8Yy68PVuqAHAdM3/XSic1ABGNIuI6h+QpZn6kiHkiuh0R37ZYj5mHm3mUUq8DwF32/gFmvrFwAKXUswDwkEOwi5nvKWLeYAYHB5eXSqUjDv5/IZoPxlKpNDA+Pr6vUACl1FYAeN4Bv8XMdxQ138AppczSeK85BBFtRMRXnfsbmdlUo+WVuISUUncCwBsOcm9vb+/qsbGxv9IIs/yfFAIATLATFyJu833/ySxcswJUq9WL6/X69w748yiKhsMwPJaFMOuYhBAN8zt939+clWdWAPfG8Vk5Esfx8HydsnMtp6zmzbikAJcj4mGH5NNKpTLsed7PeYjTxmqtB0TE7IVTm8YmPp3m4kvcA0T0HCI+6KzJoFwur/Y8L0ozluV/IroBET0AONOO/wYALmne2Bm5knuhhOf/bmZ2z4Ms/LPGDA0NXRlF0Tginmf//CmO4xXmkQkAz+QN0fIgIyJGRPcE3sHMJyuTN0FfX19PT0/PVwCwzGJNMzjAzIfMb631ZhF5xan8mO/7a1vppAU4HQBCRHR7oIeZ2Rxwua+mF5C/RWRVEAQfuURa6zUissfe+5WZG51vol6WVuIiRDQd56XOzKz3fX80d4L/ZvkLETlbRB4IgmA8iYOICBG3mJai7V7IPqqutiHOsYKx8bLYrbT1lu2Fxr6JhQBwSqO8pr1prN8i1egEJnUJuSIJ78LmW8xAEAQ/dMJMEY5cAYyAUupeAHjZ2Q8HZ2Zm+icmJv4sYqBdTO4ANsR2ANjmiNeY2X3ctusrM75QABtiJwDc7SiNMvP6zModGqiUOgoAF1i64dTPKk174h0AuM2597SIfNwhby1pzJc5RFzlfBMybfi5uQJUq9VyvV6fAICbFsJ0Kw0R2RQEwWu5AtilZE5KE+KKRQwRMvOg0c8dwIZYhoj3Hf/asGEBQ/wOAB+KyP4gCE6+PRYKsICmU6W6AVKnaJ4HdCswzxOcSt+tQOoUzfOAJV+BfwFJgQjZBThXGAAAAABJRU5ErkJggg=="
- }
- },
- watch: {
- defaultStr(val) {
- if(val != "" && val != null){
- const valList = val.split("")
- for (let i in valList) {
- this.inputList[i] = valList[i]
- }
- this.inputList.splice()
- }
- },
- curInput(val){
- this.showOrHidePop(val)
-
- this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "O", "P", "军"]
- switch(val){
- case 1:
- this.lockInput = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "学", "军", "警", "港", "澳"]
- break
- case 2:
- this.lockInput = ["O", "学", "军", "警", "港", "澳"]
- break
- case 3:
- this.lockInput = ["O", "学", "军", "警", "港", "澳"]
- break
- case 4:
- this.lockInput = ["O", "学", "军", "警", "港", "澳"]
- break
- case 5:
- this.lockInput = ["O", "学", "军", "警", "港", "澳"]
- break
- case 6:
- this.lockInput = ["O"]
- this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"]
- break
- case 7:
- this.lockInput = ["O", "学", "军", "警", "港", "澳"]
- break
- default:
- this.lockInput = []
- break
- }
- }
- },
- created() {
- if(this.defaultStr != "" && this.defaultStr != null){
- const valList = this.defaultStr.split("")
- for (let i in valList) {
- this.inputList[i] = valList[i]
- }
- }
- },
- methods: {
- plateInput(e){
- this.curInput = e
- this.showOrHidePop(e)
- },
- showOrHidePop(val){
- if(val == -1){
- this.showKeyPop1 = false
- this.showKeyPop2 = false
- this.$emit("show",false)
- }else if(val == 0){
- this.showKeyPop1 = true
- this.showKeyPop2 = false
- this.$emit("show",true)
- }else{
- this.showKeyPop1 = false
- this.showKeyPop2 = true
- this.$emit("show",true)
- }
-
- },
- tapKeyboard(e){
- if(this.lockInput.includes(e)){
- return
- }
-
- this.inputList[this.curInput] = e
- if(this.curInput < this.maxNum-2){
- this.curInput++
- }else{
- this.curInput = -1
- }
-
- this.emitResult()
- },
- closeKeyboard(){
- this.curInput = -1
- },
- onPlateDelTap(){
- this.inputList[this.curInput] = " "
- this.curInput--
-
- this.emitResult()
- },
- emitResult(){
- const returnResult = this.inputList.join("")
- this.$emit('numberInputResult', returnResult.replace(/\s+/g,''));
- }
- }
- };
- </script>
- <style scoped lang="scss">
- .car-input-container{
- position: relative;
- .car-input-box{
- display: inline-block;
- width: 12.5%;
- height: 39px;
- vertical-align: middle;
- .car-input-item{
- position: relative;
- border: 1px solid #E2E2E2;
- height: 40px;
- line-height: 40px;
- margin-left: 3px;
- text-align: center;
- font-size: 14px;
- .sel-item-line{
- position: absolute;
- bottom: 3px;
- left: 15%;
- height: 2px;
- background-color: #2979ff;
- width: 70%;
- }
- .new-item-img{
- position: absolute;
- top: -6px;
- left: 50%;
- margin-left: -15px;
- height: 13px;
- width: 30px;
- z-index: 9;
- }
- }
- .sel-item{
- color: #2979ff;
- }
- .last-item{
- border: 1px solid #18bc37;
- }
- }
- }
- .car-number-container{
- position: fixed;
- z-index: 999;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 254px;
- background-color: #e8e8e8;
- -webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
- box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
- overflow: hidden;
- text-align: center;
- .plate-close{
- height: 40px;
- line-height: 40px;
- text-align: right;
- background-color: #FFF;
- .plate-close-btn{
- font-size: 13.5px;
- color: #555;
- margin-right: 15px;
- }
- }
- //键盘主体内容-单行
- .plate-popup-list {
- margin: 0 auto;
- overflow: hidden;
- display: inline-block;
- display: table;
-
- &:last-child {
- margin-bottom: 2px;
- }
- }
- //键盘主体内容-单个
- .plate-popup-item {
- float: left;
- font-size: 16px;
- width: 8vw;
- margin: 0 1vw;
- margin-top: 8px;
- height: 40px;
- line-height: 40px;
- background: #FFFFFF;
- border-radius: 5px;
- color: #4A4A4A;
- box-shadow: 0 0 3px #c1c1c1;
- image {
- width: 20px;
- height: 20px;
- margin: 10px auto;
- }
- }
- .plate-popup-item:active{
- background-color: #EAEAEA;
- }
- .plate-popup-item.del{
- background-color: #dadada;
- }
- .province-item{
- width: 8.8vw;
- }
- .lock-item{
- color: #AAA;
- }
- }
- </style>
|