📌個人主頁：個人主頁
?🧀 推薦專欄：小程序開發(fā)成神之路 --【這是一個為想要入門和進階小程序開發(fā)專門開啟的精品專欄！從個人到商業(yè)的全套開發(fā)教程，實打?qū)嵉母韶浄窒?#xff0c;確定不來看看？ 😻😻】
📝作者簡介：從web開發(fā)，再到大數(shù)據(jù)算法，踩過了無數(shù)的坑，用心總結(jié)經(jīng)驗教訓(xùn)，助你在技術(shù)生涯一臂之力！若想獲取更多精彩內(nèi)容，敬請訂閱專欄或者關(guān)注😁😂🤣😃😆😉😊😋😍😘🥰
??您的小小關(guān)注是我持續(xù)輸出的動力！??

---

干貨內(nèi)容推薦

🥇入門和進階小程序開發(fā)，不可錯誤的精彩內(nèi)容🥇 ：

• 《小程序開發(fā)必備功能的吐血整理【個人中心界面樣式大全】》

• 《微信小程序 | 動手實現(xiàn)雙十一紅包雨》

• 《微信小程序 | 人臉識別的最終解決方案》

• 《來接私活吧？小程序接私活必備功能-婚戀交友【附完整代碼】》

• 《吐血整理的幾十款小程序登陸界面【附完整代碼】》

---

文章目錄

• 干貨內(nèi)容推薦
• 一、需求背景
• 二、效果預(yù)覽
• • 2.1 不帶動畫直接輸入型
  • 2.2 輸入框帶動畫型
• 三、完整源碼
• • 3.【樣式2.1】源碼
  • • （1）界面元素
    • （2）腳本邏輯
    • （3）界面樣式
  • 3.【樣式2.2】源碼
  • • （1）界面元素
    • （2）腳本邏輯
    • （3）界面樣式

---

一、需求背景

在小程序流量的刺激下，廣大商超也逐步建立起了自己的私域流量。小程序中除了入駐廣大商家的商業(yè)服務(wù)外，圍繞商業(yè)服務(wù)而展開的基礎(chǔ)服務(wù)也必不可少。

其中停車服務(wù)便是其中的一個大頭，一套智能的停車場繳費系統(tǒng)同樣是必不可少。在設(shè)計該系統(tǒng)時，我們要兼容各類汽車拍照的型號，比如說燃油車的拍照和電動車和混動車的拍照規(guī)則不同。將牌照識別系統(tǒng)和在車輛進場后的車位編號相綁定這是后續(xù)智能化的基礎(chǔ)。

---

二、效果預(yù)覽

2.1 不帶動畫直接輸入型

2.2 輸入框帶動畫型

三、完整源碼

3.【樣式2.1】源碼

（1）界面元素

<template><div><div class="p-i" :style="bgheight"><div class="column"><img class="p-i__img" :src="LOGO" mode="aspectFit"><keyboard@keyboard="keyboardChange":show.sync="show"active-border="#0deafe"base-border="38f8f8f"></keyboard></div><div class="p-i__con column text-center"><div class="p-i__info text-center">提示：請確保您填寫車牌號的正確性，以免后續(xù)</div><div class="p-i__info text-center">誤交費給您造成不必要的麻煩。</div><div class="p-i__ben text-center" @click="TapScale">停車繳費標準</div><div class="p-i__over"><div class="text-center"><div class="p-i__over-name">剩余停車位</div><div class="p-i__over-value">{{space}}</div></div></div></div><div class="p-i__footer flex-center" @click="call()"><div class="p-i__footer-text">客服電話：{{tel}}</div></div></div></div> </template>

（2）腳本邏輯

import keyboard from "@/components/mpvue-keyboard/mpvue-keyboard"; import { obj2style } from "@/components/mpvue-keyboard/index"; import LOGO from "@/components/mpvue-keyboard/parking-logo.png"; export default {data() {return {tel: 888888,space: 999,show: true,LOGO: LOGO};},components: { keyboard },computed: {bgheight() {let style = {};const { screenHeight } = uni.getSystemInfoSync();style["height"] = screenHeight - uni.getStorageSync("CustomBar") + "px";return obj2style(style);}},methods: {keyboardChange(e) {uni.showToast({icon: "none",title: e,mask: true,duration: 2000});},call() {uni.makePhoneCall({phoneNumber: this.tel});},TapScale() {}},mounted() {} };

（3）界面樣式

$gfrom: #04010e; // 漸變色起始顏色 $gmiddle: #091149; // 漸變色過度顏色 $gend: #0c2c5c; // 漸變色結(jié)束顏色 .p-i {background: -webkit-gradient(linear,left top,left bottom,from($gfrom),color-stop(0.5, $gmiddle),to($gend));width: 100%;overflow: hidden;&__img {position: relative;margin: 0 auto;margin-top: 130rpx;width: 323rpx;height: 58rpx;}&__con {width: 100%;padding: 10rpx 30rpx;margin-top: 130rpx;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}&__info {width: 100%;height: 48rpx;font-size: 30rpx;font-weight: normal;font-stretch: normal;letter-spacing: 0rpx;color: #a0c0ff;}&__ben {width: 100%;margin-top: 40rpx;height: 38rpx;text-decoration: underline;font-size: 36rpx;font-weight: normal;font-stretch: normal;line-height: 48rpx;letter-spacing: 0px;color: #ffffff;}&__over {position: relative;width: 100%;top: 60rpx;}&__over-img {position: absolute;left: 50%;transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);width: 380rpx;height: 380rpx;}&__over-name {position: relative;top: 140rpx;height: 29rpx;font-size: 30rpx;font-weight: normal;font-stretch: normal;line-height: 48rpx;letter-spacing: 0px;color: #a99dc6;z-index: 10;}&__over-value {position: relative;top: 170rpx;height: 45rpx;font-size: 60rpx;font-weight: normal;font-stretch: normal;line-height: 48rpx;letter-spacing: 0px;color: #ffffff;}&__footer {position: absolute;width: 100%;bottom: 60rpx;left: 50%;transform: translate(-50%, 0);}&__footer-img {width: 26rpx;height: 27rpx;}&__footer-text {margin-left: 10rpx;font-size: 28rpx;font-weight: normal;font-stretch: normal;letter-spacing: 0px;color: #ffffff;} } .text-center {text-align: center; } .column {display: flex;display: -webkit-flex;flex-direction: column;-webkit-flex-direction: column; }

3.【樣式2.2】源碼

（1）界面元素

<view class="so-mask"><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"><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 class="so-plate-foot"><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="$emit('close')">取消</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>

（2）腳本邏輯

export default {name: 'uni-plate-input',data() {return {type: 1, //車牌類型currentInputIndex: 0, //當前編輯的輸入框currentInputValue: ['', '', '', '', '', '', ''],fillBlock:[{num:11},{num:12},{num:13},{num:14},{num:15},{num:16}], //避免:key報錯keyboardHeightInit:false,keyboardHeight:'auto',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: ['港', '澳', '學(xué)', '領(lǐng)', '警']};},props: {plate: {type: String}},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) returnthis.$nextTick(()=>{this.changeKeyboardHeight()})}},methods: {//車牌類型切換typeChange(e) {const {value} = e.detail;this.type = parseInt(value)this.currentInputIndex = 0if(value==1){this.currentInputValue = ['','','','','','','']}else{this.currentInputValue = ['','','','','','','','']}},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 = falseif(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:'none'})this.$emit('export',plate)},changeKeyboardHeight(){const that = thisconst 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 = plateKeythis.currentInputIndex = plateKey.length-1}setTimeout(() => { //在動畫結(jié)束之后才開始獲取this.$nextTick(()=>{this.changeKeyboardHeight()})}, 500);} };

（3）界面樣式

.so-mask {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background: rgba(0, 0, 0, 0.5);z-index: 998 }.so-plate {box-sizing: border-box;position: absolute;bottom: 0;width: 100%;left: 0;background: #fff;padding: 25upx 25upx 0 25upx }.so-plate-head {display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center }.so-plate-type {-webkit-box-flex: 1;flex: 1;display: block }.so-plate-type label {display: inline-block;min-height: 32upx;font-size: 26upx;margin-right: 10upx }.so-plate-body {box-sizing: border-box;padding: 30upx 0;display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center }.so-plate-word {border: 1upx solid #ccc;border-radius: 10upx;height: 0;margin: 0 5upx;box-sizing: border-box;padding-bottom: calc(4.28571429%);width: calc(4.28571429%);position: relative }.so-plate-word.active {border-color: #007aff;box-shadow: 0 0 15upx 0 #007aff }.so-plate-word text {position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);font-weight: 700;font-size: 32upx }.so-plate-dot {width: 15upx;height: 15upx;background: #ccc;border-radius: 50%;margin: 0 5upx }.so-plate-keyboard {background: #eee;margin-left: -25upx;margin-right: -25upx;padding: 20upx 25upx 10upx 25upx;box-sizing: border-box;-webkit-transition: all .3s;transition: all .3s }.so-plate-keyboard>view {display: -webkit-box;display: flex;flex-wrap: wrap;-webkit-box-pack: justify;justify-content: space-between }.so-plate-key {display: block;background: #fff;border-radius: 10upx;box-shadow: 0 0 8upx 0 #bbb;width: 80upx;height: 80upx;margin: 5upx 0;font-size: 32upx;text-align: center;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;position: relative }.so-plate-key.hover {background: #efefef }.so-plate-key.fill-block {width: 80upx;height: 80upx;background: none;box-shadow: none }.so-plate-btn {display: inline-block;background: #fff;border-radius: 10upx;box-shadow: 0 0 10upx 0 #bbb;font-size: 28upx;text-align: center;margin: 0 0 0 10upx }.so-plate-btn-group {display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;background: #eee;margin-left: -25upx;margin-right: -25upx;box-sizing: border-box;padding: 0 25upx 10upx 25upx }.so-plate-btn--cancel {margin: 0 }.so-plate-btn--submit {background: #5773f9;color: #fff }.so-plate-btn--delete {color: #fd6b6d }.animation-scale-up {-webkit-animation-duration: .2s;animation-duration: .2s;-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scale-up;animation-name: scale-up }@-webkit-keyframes scale-up {0% {opacity: .8;-webkit-transform: scale(.8);transform: scale(.8)}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1)} }@keyframes scale-up {0% {opacity: .8;-webkit-transform: scale(.8);transform: scale(.8)}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1)} }

總結(jié)

以上是生活随笔為你收集整理的微信小程序|智能停车系统中车牌计费功能实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。