1. Toy模板网首页
  2. > Toy博客

微信小程序实现输入车牌号码的功能vue版（附效果图）

7月前 作者：qyhua 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序实现输入车牌号码的功能vue版（附效果图）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1，车牌第一位时选择录入图：

微信小程序实现输入车牌号码的功能vue版（附效果图）

2，输入车牌第二位及后面的号码选择图

微信小程序实现输入车牌号码的功能vue版（附效果图）

3 ，换普通车牌图

微信小程序实现输入车牌号码的功能vue版（附效果图）

下面是完整代码文章来源地址https://www.toymoban.com/news/detail-509165.html

<template>
    <view class="container">
        <!-- 车牌号码输入框 -->
        <view class="carNumber" style="margin-top: 50rpx;">
            <view class="weui-cells__title"></view>
            <view v-if="showNewPower" class="title-row"><span class="btn-to-title">新能源车牌</span><span class="btn-to"
                    @click="showNewPower=false">切换</span></view>
            <view v-if="!showNewPower" class="title-row"><span class="btn-to-title">普通车牌</span><span class="btn-to"
                    @click="showNewPower=true">切换</span></view>
            <view class="carNumber-items">
                <view class="carNumber-items-box" @click='openKeyboard'>
                    <view class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</view>
                    <view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view>
                </view>
             
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[2] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[3] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[4] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[5] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[6] || ''}}</view>

                <!-- 新能源 -->
                <view v-if="!showNewPower" class="carNumber-item carNumber-item-newpower" @click='showPowerBtn'>
                    <view class="carNumber-newpower-add">+</view>
                    <view>新能源</view>
                </view>
                <view v-if="showNewPower" class="carNumber-item" @click='openKeyboard'>
                    {{carnum[7]||''}}
             </view>

            </view>

        </view>

        <!-- 提交车牌 -->
        <button class="carNumberBtn bgColor" @click='submitNumber' type="default">确定</button>

        <!-- 虚拟键盘 -->
        <view class="keyboard" v-show='KeyboardState'>
            <view class="keyboardClose">
                <view class="keyboardClose_btn" @click='closeKeyboard'>关闭</view>
            </view>
            <!-- 省份简写键盘 -->
            <view class="keyboard-item" v-show="!carnum[0]">
                <view class="keyboard-line" v-for="(item,index) in provinces" :key="index">

                    <view v-if="index==0" style="text-align: left;padding-left: 3%;">
                        <text>常用</text>&emsp;
                        <view class="keyboard-btn" v-for="(item,index2) in item" :key="index2" :data-val="item"
                            @click='bindChoose'>{{item}}</view>

                    </view>
                    <view v-if="index>0" class="keyboard-btn" v-for="(item,index2) in item" :key="index2"
                        :data-val="item" @click='bindChoose'>{{item}}</view>

                </view>
                <view class="keyboard-del" @click='bindDelChoose'>
                    <text>删除</text>
                </view>
            </view>
            <!-- 车牌号码选择键盘 -->
            <view class="keyboard-item iscarnumber" v-show="carnum[0]">
                <view class="keyboard-line" v-for="(item,index) in numbers" :key="index">
                    <view v-if="index==0" style="text-align: left;padding-left: 3%;">
                        <text>常用</text>&emsp;
                        <view class="keyboard-btn" v-for="(item,index2) in item" :key="index2" :data-val="item"
                            @click='bindChoose'>{{item}}</view>
                    </view>
                    <view v-if="index>0" class="keyboard-btn" v-for="(item,index2) in item" :key="index2"
                        :data-val="item" @click='bindChoose'>{{item}}</view>
                </view>
                <view class="keyboard-del" @click='bindDelChoose'>
                    <text>删除</text>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import comm from '../../static/data/commFunc.js'
    import cfg from '../../static/data/config.js'
    var r = cfg.router;
    export default {
        data() {
            return {
                plateNo: "",
                // 省份简写
                provinces: [
                    ['粤'],
                    ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
                    ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
                    ['桂', '琼', '渝', '川', '贵', '云', '藏'],
                    ['陕', '甘', '青', '宁', '新'],
                ],
                // 车牌输入
                numbers: [
                    ["S", "B", "L", "A"],
                    ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
                    ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
                    ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
                    ["W", "X", "Y", "Z", "港", "澳", "学"]
                ],
                carnum: [],
                showNewPower: true,
                KeyboardState: true,
            };
        },
        onShareAppMessage(res) {
            return {
                title: 'xxx',
                path: '/pages/pages/home'
            }
        },
        onShow() {
            let memberPlateNo = comm.getCache("memberPlateNo")
            if (memberPlateNo) {
                this.plateNo = memberPlateNo;
                this.carnum = memberPlateNo.split('', 8);
                if (this.carnum.length == 7) {
                    this.showNewPower = false;
                } else if (this.carnum.length == 8) {
                    this.showNewPower = true;
                }

            }
        },
        methods: {
            bindChoose(e) {

                if (!this.carnum[7]) {
                    var arr = [];
                    arr[0] = e.target.dataset.val;
                    this.carnum = this.carnum.concat(arr)

                }
            },
            bindDelChoose() {
                if (this.carnum.length != 0) {
                    if (this.carnum.length > 0) {
                        let p = this.carnum.length - 1;
                        let carArr = [];
                        for (var i = 0; i < p; i++) {
                            carArr.push(this.carnum[i]);
                        }
                        this.carnum = carArr;
                    }
                }
            },
            showPowerBtn() {
                this.showNewPower = true;
                this.KeyboardState = true;
            },
            closeKeyboard() {
                this.KeyboardState = false;
            },
            openKeyboard() {
                this.KeyboardState = true;
            },
            importPlateNo(e) {
                this.plateNo = e.detail.value
            },
            submitNumber() {
                var that = this;
                if (that.carnum[6]) {
                    wx.showLoading();
                    var number;
                    if (!that.showNewPower) {
                        if (that.carnum[6]) {
                            number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] +
                                that.carnum[5] + that.carnum[6];
                            that.plateNo = number;
                            that.summit();
                        } else {
                            wx.showToast({
                                title: '请填写完整的车牌号码',
                                duration: 2000
                            })
                        }
                    } else {
                     if (that.carnum[7]) {
                            number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] +
                                that.carnum[5] + that.carnum[6] + that.carnum[7];
                            that.plateNo = number;
                         that.summit();
                        } else {
                            wx.showToast({
                                title: '请填写完整的车牌号码',
                                duration: 2000
                            })
                        }
                    }
                } else {
                    wx.showToast({
                        title: '请填写完整的车牌号码',
                        duration: 2000
                    })
                }
            },
            summit() {
                let plateNo = this.plateNo;
                let data = {
                    plateNo: plateNo
                }
                 // 调用后台，需要根据实际情况替换。
                comm.request("POST", "/xxx/xxx", data, (res) => {
                    wx.hideLoading();
                    if (res.data.ret_code == 200) {
                        comm.setCache("memberPlateNo", plateNo);
                        wx.showModal({
                            content: '绑定成功',
                            showCancel: false,
                            success() {
                                wx.navigateBack()
                            }
                        })
                    } else {
                        wx.showModal({
                            content: res.data.ret_msg,
                            showCancel: false,
                            success() {

                            }
                        })
                    }

                })

            }
        }
    }
</script>

<style lang="less">
    .my_car {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 250rpx;
    }

    .my_car image {
        width: 364rpx;
        height: 334rpx;
    }

    .add_car_btn {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50rpx;
    }

    .add_car_btn image {
        width: 324rpx;
        height: 112rpx;
    }

    .add_car {
        width: 92%;
        margin-left: 4%;
        background-color: #F5F5F5;
        display: flex;
        align-items: center;
    }

    .page {
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .weui-cells__title {
        margin-top: .77em;
        margin-bottom: .3em;
        padding-left: 15px;
        padding-right: 15px;
        color: #999;
        font-size: 14px;

    }

    /* 虚拟键盘 */
    .keyboard {
        height: auto;
        background: #d1d5d9;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    .keyboard-item {
        padding: 10rpx 0 5rpx 0;
        position: relative;
        display: block;
    }

    /* 关闭虚拟键盘 */
    .keyboardClose {
        height: 70rpx;
        background-color: #f7f7f7;
        overflow: hidden;
    }

    .keyboardClose_btn {
        float: right;
        line-height: 70rpx;
        font-size: 15px;
        padding-right: 30rpx;
    }

    /* 虚拟键盘-省缩写 */

    /* 虚拟键盘-行 */
    .keyboard-line {
        margin: 0 auto 30rpx;
        text-align: center;
    }

    .iscarnumber .keyboard-line {
        text-align: left;
        margin-left: 5rpx;
    }

    /* 虚拟键盘-单个按钮 */
    .keyboard-btn {
        font-size: 17px;
        color: #333333;
        background: #fff;
        display: inline-block;
        padding: 18rpx 0;
        width: 63rpx;
        text-align: center;
        box-shadow: 0 2rpx 0 0 #999999;
        border-radius: 10rpx;
        margin: 5rpx 6rpx;
    }

    /* 虚拟键盘-删除按钮 */
    .keyboard-del {
        font-size: 17px;
        color: #333333;
        background: #A7B0BC;
        display: inline-block;
        padding: 15rpx 55rpx;
        box-shadow: 0 2rpx 0 0 #999999;
        border-radius: 10rpx;
        margin: 5rpx;
        position: absolute;
        bottom: 37rpx;
        right: 6rpx;
    }

    .keyboard-del-font {
        font-size: 25px;
        width: 40rpx;
        height: 40rpx;
        display: block;
    }

    /* 车牌号码 */
    .carNumber-items {
        text-align: center;
    }

    .carNumber-items-box {
        width: 158rpx;
        height: 90rpx;
        border: 2rpx solid #CCCCCC;
        border-radius: 4rpx;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 30rpx;
    }

    .carNumber-items-box-list {
        width: 76rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        display: inline-block;
        font-size: 18px;
        margin: 10rpx 0;
        vertical-align: middle;
    }

    .carNumber-items-province {
        border-right: 1rpx solid #ccc;
    }

    .carNumber-items-box::after {
        content: "";
        width: 6rpx;
        height: 6rpx;
        position: absolute;
        right: -22rpx;
        top: 40rpx;
        border-radius: 50%;
        background-color: #ccc;
    }

    .carNumber-item {
        width: 76rpx;
        height: 90rpx;
        font-size: 18px;
        text-align: center;
        border: 2rpx solid #CCCCCC;
        border-radius: 4rpx;
        line-height: 90rpx;
        display: inline-block;
        margin: 0 4rpx;
        vertical-align: middle;
    }

    /* 新能源 */
    .carNumber-item-newpower {
        border: 2rpx dashed #A8BFF3;
        background-color: #F6F9FF;
        color: #A8BFF3;
        font-size: 12px;
        line-height: 45rpx;
    }
    /* 新能源 +号 */
    .carNumber-newpower-add {
        font-size: 18px;
    }

    /* 确认按钮 */
    .carNumberBtn {
        background: #5CC78F !important;
        color: #fff !important;
        border-radius: 40rpx;
        margin: 30px auto;
        width: 290px;
        height: 43px;
        line-height: 43px;
        border-radius: 21.5px;
        text-align: center;
        font-size: 18px;
    }

    /* 切换车牌按钮 */
    .btn-to {
        text-align: left;
        margin-left: 3%;
        color: #A8BFF3;
        font-size: 20px;
        border: 2rpx solid #A8BFF3;
        border-radius: 10rpx;

    }

    /* 切换车牌标题 */
    .btn-to-title {
        text-align: left;
        padding-left: 3%;
        font-size: 20px;
    }

    /* 切换车牌行 */
    .title-row {
        margin-bottom: 20px;
    }
</style>

到了这里，关于微信小程序实现输入车牌号码的功能vue版（附效果图）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【h5+微信小程序】vue2实现h5扫码登录功能

    需要实现在同域名的h5页面上增加一个微信扫码登录的功能，如果用户已经有小程序的账号，可以直接登录。 使用 ：vue2+微信小程序原生开发 可以实现上述功能的 前提 是：同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。域名已经配置。 可以用什么来区分

    2024年02月14日
    浏览(45)
  • 【微信小程序】新版获取手机号码实现一键登录（uniapp语法）(完整版附源码)

    【微信小程序】新版获取手机号码实现一键登录（uniapp语法）(完整版附源码)

    需求 如图，点击按钮，获取用户手机号实现一键登录，当然，用户也可以自行输入其他手机号进行登录 问题 要想获取用户手机号并不复杂，但由于近几年微信小程序获取手机号的api进行了更新，当前很多帖子使用的仍是旧的方式，先调wx.login()获取code,iv,等等加密数据, 给到

    2024年02月05日
    浏览(36)
  • 车牌输入框 封装 （小程序 vue)

    车牌输入框 封装 （小程序 vue)

    .wxml .js .json .wxss

    2024年02月11日
    浏览(30)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能，用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能，用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框，用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能，用户可以通过文本输

    2024年02月12日
    浏览(41)
  • vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    微信js-sdk官方文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 想要实现的效果： 1.登录微信公众平台，进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2.通过npm引入js-sdk 安装成功后，可以在package.json中找到\\\"weixin-js-sdk\\\" 3.在main.js中，将js-sdk挂载

    2024年02月11日
    浏览(35)
  • 基于Uniapp、SSM与Vue的微信小程序走失人员报备平台——志愿者功能实现与影响分析

    基于Uniapp、SSM与Vue的微信小程序走失人员报备平台——志愿者功能实现与影响分析

    摘要： 本文旨在探讨基于Uniapp、SSM框架和Vue.js技术的微信小程序走失人员报备平台的开发过程，特别是志愿者功能模块的实现及其对走失人员找回工作的影响。通过该平台，志愿者能够便捷地收集、报备走失人员信息，从而有效助力社会公益事业的发展。文章首先介绍了走失

    2024年04月28日
    浏览(39)
  • 微信小程序-授权登录(手机号码)

    微信小程序-授权登录(手机号码)

    template     view class=\\\"work-container\\\"         view class=\\\"login\\\"             view class=\\\"content\\\"                 button class=\\\"button_wx\\\" open-type=\\\"getPhoneNumber\\\" @getphonenumber=\\\"getPhoneNumber\\\"                     u-icon name=\\\"weixin-fill\\\" color=\\\"#FFFFFF\\\" size=\\\"50\\\"/u-icon                     

    2024年02月06日
    浏览(41)

  • 微信小程序授权手机号码登录

    因公司项目需要做微信小程序相关项目，故记录一下相关开发要点。 使用的是binarywang工具包，版本为4.1.0。 后端框架使用springboot 更多其他功能使用推荐查看https://github.com/binarywang/binarywang 3.1 微信小程序开发的相关配置 在application.yml文件中配置 3.2创建配置文件 代码如下（示

    2024年02月09日
    浏览(43)
  • 微信小程序如何获取用户手机号码？

    微信小程序如何获取用户手机号码？

    需求 在开发一款微信小程序时，通常需要用户进行微信登录，并获取用户的手机号码作为用户的唯一标识（userId）。虽然可以通过wx.login来获取用户的openid，但有时候需要获取用户的手机号码以提供更完善的个性化服务，因此探索获取用户手机号码的方式成为开发中的一个重

    2024年04月22日
    浏览(31)

  • 微信小程序登录及获取手机号码

    前端：微信先授权登录后再授权获取手机号码 后端：先微信登录获取openid返回前端，前端再传递手机号码code给后端获取手机号码并在本地数据量注册用户信息，需提供2个接口 第一步：先通过code微信授权登录获取openid 第二步：根据app_id和app_secret获取access_token 第三步：根据

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包