精华内容
下载资源
问答
  • vue根据银行账号识别银行卡信息
    2022-02-28 14:05:01

    在需求中,经常会遇到需要填写银行卡账号的情况,身为前端,为了用户体验及简化流程,在提交后端前,需要对银行卡账号进行校验。

    下载插件bankcardinfo

    npm i bankcardinfo
    cnpm i bankcardinfo
    

    在main.js中引入

    import getBankcardinfo from 'bankcardinfo'
    Vue.prototype.$getBankcardinfo = getBankcardinfo
    

    在需要识别的板块添加代码

    this.$getBankcardinfo.getBankBin('银行卡账号', (err, data) => {
       if (!err) {
           console.log("银行卡信息",data)
         }
       })
    

    最后得到结果在这里插入图片描述

    更多相关内容
  • 1、根据银行卡名称改变背景颜色: (1)、步骤一: (2)、步骤二:注意:在data里面写下面...2、根据银行卡名称改变对应图标: (1)、步骤一: (2)、步骤二:注意:在data里面写下面的src 这样就渲染出来了,完成! ...
    1、根据银行卡名称改变背景颜色:

    (1)、步骤一:
    在这里插入图片描述
    (2)、步骤二:注意:在data里面写下面的obj
    在这里插入图片描述
    (3)、步骤三:自己根据需要设置CSS样式
    在这里插入图片描述

    2、根据银行卡名称改变对应图标:

    (1)、步骤一:
    在这里插入图片描述
    (2)、步骤二:注意:在data里面写下面的src
    在这里插入图片描述

    这样就渲染出来了,完成!

    展开全文
  • 37个银行的ioc格式图标,提供APP,前端使用!(注:格式为ioc)
  • 银行图标logo

    2016-08-19 13:43:24
    22个银行图标,用户开发选择银行logo用。
  • 各大银行图标

    热门讨论 2013-04-08 18:19:00
    在线支付系统中的所有图标已经整理好了,包括与页面的大小都OK了!
  • 每一个网页项目都少不了导航栏,...数组里边存放着{title:”银行”,url:” “,url1:” “},将图片的 src与isSelect进行绑定,并进行判断,如果等于当前的title时即为选中当前的导航,显示选中时的图片url1。 <d
  • 码农常用干货:银行Logo,银行名称,银行编码,银行列表。...vue文件是项目中手机端页面源码,有字母检索和模糊搜索。 json文件是银行名称和编码的数据。 图片使用银行编码命名的且统一了JPG格式,方便使用
  • 根据银行卡号查询银行名称、开户行、银行logo、ICO等、已封装JSON
  • 银行logo.rar(117个)

    2019-08-09 11:52:35
    全国各大银行logo
  • 在未知银行卡位数的情况下要显示出银行卡的实际位数,其中后四位数字显示,其他位数以星号代替js实现:var idNum = document.getElementById("idNum").value;var lastFour = idNum.slice(-4);var newArr = new Array...

    先上效果图:

    一.HTML部分:

    实现功能:

    1.在未知银行卡位数的情况下要显示出银行卡的实际位数,其中后四位数字显示,其他位数以星号代替

    js实现:var idNum = document.getElementById("idNum").value;

    var lastFour = idNum.slice(-4);

    var newArr = new Array(idNum.length-3).join("*")+lastFour;

    newArr = newArr.replace(/\s/g,'').replace(/(.{4})/g,"$1 ");

    效果如图:

    2.不管银行卡号多长,只需显示前后四位,中间位数只显示8位*,并且要求四位为一空格。

    js实现:

    var reg = /^(\d{4})\d+(\d{4})$/;

    str = idNum.replace(reg,"$1 **** **** $2");

    效果如图:

    3. 同2,要是想将银行卡号只显示后四位,又想固定显示长度,只需将以上正则里面的$1 换成****即可。

    后记:随笔只是平时的一些功能点总结,不足之处请多多指教哦!

    2019.06.03 更新:

    ============在vue项目中需要实现这种效果又该怎么处理呢============

    这时候,我直接使用了vue的computed计算属性

    html写法:

    html

    模拟的后端接口数据:

    对后端接口数据进行处理:

    最终的效果图:

    效果图

    在以上效果图中,细心的童鞋应该已经发现了,根据不同的银行,可以显示不同的背景图和银行的小icon.具体做法是先在文件中传入图片,再根据后台传过来的code区分应该显示哪个银行的背景色和小图标。

    1.先在项目的image文件中传入图片

    2.html写法:

    3.computed 写法

    展开全文
  • 背景:在vue项目中,我们经常会使用UI组件,有时,我们需要在UI组件中,进行自定义的图标显示。相关情况如下图所示: 点击选择银行,触发选择开户行组件,各个银行列表前,添加自定义的图标,点击...

    背景:在vue项目中,我们经常会使用UI组件,有时,我们需要在UI组件中,进行自定义的图标显示。相关情况如下图所示:

           点击选择银行,触发选择开户行组件,各个银行列表前,添加自定义的图标,点击任意一个银行列表显示在付款银行列表栏。

    一、相关页面结构

    <!--付款银行栏-->
    <div class="div-cell" @click="showBank()">
        <div class="line-cell2 clearBt">
            <div class="line-cell-hd2 float_lt">
                <label class="line-cell-label">付款银行</label>
            </div>
            <div class="line-cell-bd2 float-rt textRight g-arrows-bottom">
                <i class="payCardSelect" v-if="!PAY.KFBANK">选择银行</i>
                <span class="payCard">{{KFBANKName}}</span>
            </div>
        </div>
    </div>
    
    <!--银行列表组件-->
    <mt-popup position="bottom" v-model="bankFlag" :closeOnClickModal="clickfalse" class="bankPicker">
        <div class="pickerBtns clearBt">
            <span class="float_lt" @click="PopParent(0)">取消</span>
            <span class="bankPickerTitle">选择开户行</span>
            <!--<span class="float_rt" @click="PopParent(1)">确认</span>-->
        </div>
        <div class="bankDiv">
            <div v-for="item in bankList2" :key="item.id" class="bankPickerCell">
                <div @click="PopParent(1,item)">
                    <img :src="showImg(item.value)" alt="" class="action-sheet-cell-img"/>
                    {{item.name}}
                </div>
            </div>
        </div>
    </mt-popup>

    二、vue中的methods方法

    //vue函数方法区域
    methods:{
        showBank(){///触发银行列表组件
            this.bankFlag = true;
        },
        showImg(name){//银行列表图标路径
            return require("@/assets/images/card/"+name+".png")
        },
        PopParent(){//选择银行确定选项
            this.bankFlag = false;
            if(status == "1"){
                this.KFBANKName = item.name;
                this.PAY.KFBANK = item.value;
            }
        },
        //调用银行卡023查询接口,存储bankList2数组
        queryBank(){
            let that = this;
            var busi={
                  codeType:'bank',
                  codeValue:that.PAY.productToken,
                  polno:that.PAY.policyCode,
            }
            that.TOOL.apiAxios('POST','ZYT_TB_023',busi,function(){
                if(status == '1'){
                    if(res.item.codeTypeList.length != 0){
                         for(var i in res.item.codeTypeList){
                                var obj = {
                                    name:'',
                                    value:'',
                                    limitDesc:'',
                                    singleUpperLimit:'',
                                    showsmscode:'',
                                }
                                obj.name = res.item.codeTypeList[i].codeName;
                                obj.value = res.item.codeTypeList[i].codeValue;
                                obj.limitDesc = res.item.codeTypeList[i].limitDesc;
                                obj.singleUpperLimit = res.item.codeTypeList[i].singleUpperLimit;
                                obj.showsmscode = res.item.codeTypeList[i].showsmscode;
                                that.bankList2.push(obj);
                                that.limitDesc.push(obj);
                                that.singleUpperLimit.push(obj);
                         }
                    }
                }else if(status == '0'){
                    MessageBox.alert(res.error.msg,'错误');
                }
            })
        },
    }

           总结:在vue项目中使用mint-ui组件,添加自定义图标,方法如上所示。关键在于,图标路径的引用问题。

           后记,顺便mark一篇博客,mint-ui引用iconfont图标 。

    展开全文
  • 根据银行卡号得到所属银行以及银行logo 银行logo下载地址 链接:https://share.weiyun.com/5VxcV92 密码:8twbwh 1. 根据银行卡号获取银行编码 ...cardNo=银行卡卡号&cardB...
  • 1、获得access_token(可以前端向百度发送请求获取,也可以后端获取,传token给前端,建议...本文实现项目效果如下:仅以获得证件号码为例,其他同理,点击 红色框 中图标即可调用 摄像头 或打开 本地文件夹 HTTP 方...
  • Vue 2 项目和插件使用

    2022-03-21 23:24:18
    1、创建 store 实例,在新创建的 js 文件中加入如下代码: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // store 状态的保存 bankName: "中央银行" }...
  • vue中图片转化base64

    千次阅读 2020-09-22 14:42:49
    } } else { Toast({ message: "银行印鉴卡格式为PNG或JPG且小于5M", position: "middle", duration: 1500, }); } }, image2Base64(img) { var canvas = document.createElement("canvas"); canvas.width = img....
  • vue根据后台字段动态显示图片

    千次阅读 2019-09-30 09:54:09
    本事例就以银行图标显示为例,根据后台返回银行类型字段显示本地对应银行图标 具体实现 1、首先在模板写上图片标签,当然只写一个动态的就足够了 <img :src="imgSrc" alt="银行图标"> 2、创建 js 文件处...
  • bank-icon-cn 这是 官方使用的银行图标库。 这里有大多数的中国的银行标识(PNG,SVG,Sketch...),当然,你也可以向我提供现在这里没有的。 另外,推荐一个相关的字体项目:
  • vue开源项目

    2020-12-22 08:25:25
    原标题:vue开源项目包括一些ui库和比较完整的小项目。ui库会对主要的单选框,多选框,级联选择器,滑块,日期/时间选择器,进度条,分页,弹框,通知,导航菜单,步骤条等截图比较一、前台UI组件库1.Element优点:...
  • vue切换按钮(关闭消失型)

    千次阅读 2020-12-19 09:40:51
    弹窗:{{rules[type].title}}Q{{list.question}}A{{list.answer}}按钮:不瘦玩法押钱减重分钱vuejs:var app = new Vue({el: '#chose-class-v',data: {rules:[{title:'压钱',image_bg:'1',iconName:'icon-icongroup'...
  • 最近做一个项目的移动端页面,需要完成一个卡列表,不同银行显示不同颜色的问题,一开始考虑过通过识别银行图标色调生成,但最后为了考虑开发成本,只做几种通用的色调。 具体就是用v-for命令遍历,代码 <div ...
  • vue+elementui微信支付状态问题 常见的支付也就微信支付宝和银行卡等支付方式,近期项目中有用到支付,主要是pc端一个业务包需要顾客去支付,支付成功之后就可以使用相关服务。 顾客选择相关类型的业务,然后计算出...
  • vue-element-admin项目

    2021-05-21 11:28:50
    vue-element-adminvue-element-admin介绍功能前序准备目录结构项目运行机制和代码注释main.jsApp.vuepermission.jsVuex结构scssicons安装ContributionVue 生态圈Vue 全家桶vuex基础vuex基础-介绍vuex有哪几种属性?...
  • Vuetify是一个Vue UI库,包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。Vuetify有超过100个组件元素,带有响应式网格系统,完全支持事件处理。通过每周的补丁和持续的...
  • 银行金融领域,上线较早的业务系统由于历史原因和人员变动,遗留下诸如前端架构未能统一,老crm还是传统erp风格,jsp页面上使用jQuery + YUI等问题。vue框架下的项目因为历史问题也存在不少技术包袱,如:core版本...
  • ——assets/js中创建一个js文件用于存放测试数据为testData.js const list = [ { "id": "9787112071661", "isbn": "978-7-112-07166-1", "lb": "sm", "title": "建筑工程基础知识", "author": [ ...
  • '', // 公积金账号 bankCardNumber: '', // 银行卡号 openingBank: '', // 开户行 educationalType: '', // 学历类型 graduateSchool: '', // 毕业学校 enrolmentTime: '', // 入学时间 graduationTime: '', // ...
  • [收藏]VUE优秀UI组件库合集

    万次阅读 多人点赞 2018-06-14 16:13:12
    [收藏]VUE优秀UI组件库合集...前言:vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考,期待开发者们推出更多优秀的组件库。 一、相关框架介绍  ---------...
  • 造成卡顿原因 及解决方法(解释可能有误!!!) 自行通过F12进入调试窗口,可以发现点标注Marker会以div元素在dom树中渲染出来,需要...另外,如果对点的图标没什么要求的也可以直接使用百度地图的 海量点(PointColl

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 285
精华内容 114
关键字:

vue 银行图标