Vue仿支付宝支付功能

2024-02-27 19:52:35

先给大家上个效果图：

<div class="goods-psd">
  <p class="apply-title">
   请输入支付密码
  </p>
  <p style="margin: 0.2rem">确认支付 <span>{{password}}</span> </p>
  <div class="psd-container">
   <input class="psd-input" type="password" readonly v-for="(value,index) in passwordGroup" :key="index" :value="value.value">
  </div>
 </div>
 <div class="input-pan">
  <div class="pan-num" v-for="(value,num) in number" :key="num" @click="inputPsd(value)">{{value}}</div>
 </div>
</div>

不管逻辑有没有搞懂，先把样式写出来总是没错啦~

思路梳理

1.输入框使用for循环，循环出6个input； 2.下面的按键使用for循环，便于后期存储记录； 3.将所输入的密码放入到pasgroup数组中； 4.定义输入框的下标，将pasgroup数组内容按照下标依次放入input内； 5.开始代码啦~

代码

data () {
  return {
   popupVisible1: true,
   realInput: '',
   password: '111',
   passwordGroup: [],
   number: ['1','2','3','4','5','6','7','8','9','取消','0','删除'],
   pasgroup: [],
   currentInputIndex:-1
  }
 }

在data内定义好我们需要的元素

initPasswordGroup () {
 this.passwordGroup=[];
 for(var i=0;i<6;i++){
  this.passwordGroup.push({
    value:null
  })
 }
}

循环出input，将其内容赋值为value:null，在界面上显示出6个输入框

watch: {
  currentInputIndex (val) {
   if(val == 5){
    console.log(this.pasgroup)
   }else if(val <= -1){
    this.currentInputIndex = -1
   }
  }
 }

监听数组下标的变化，当下标到5的时候打印出该数组

inputPsd (value) {
   switch (value) {
    case '取消':
     this.currentInputIndex = -1
     this.pasgroup = []
     this.initPasswordGroup ()
     break;
    case '删除':
     this.pasgroup.pop()
     console.log(this.pasgroup)
     // this.currentInputIndex 下标值,删除添加时改变
     this.passwordGroup[this.currentInputIndex].value = null
     this.currentInputIndex--
     console.log(this.passwordGroup)
     break;
    default:
     this.pasgroup.push(value)
     this.currentInputIndex++
     this.passwordGroup[this.currentInputIndex].value = value
   }
  },

获取到所点击的元素，当点击‘取消'时清空input 输入框内的内容，清除数组；当点击‘删除'时，下标值依次减减，将value重置为null；当点击其他数字时，下标值依次增加，将数组pasgroup[]里面的内容写进passwordGroup[]里面，在输入框中展示。

总结

以上所述是小编给大家介绍的Vue仿支付宝支付功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是
解决vue js IOS H5focus无法自动弹出键盘的问题

IOS不自动弹出键盘,必须手动触发一下focus才行,不能自动调用,所以需要诱导用户点击某个按钮触发focus,最终修改的方法,默认隐藏密码输入框,隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内,并且调用focus的方法代码如下,有问题欢迎评论 <template> <div class="pwdpush-box"> <h4 class="enter-pass
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期
vue写h5页面的方法总结

下面就是小编带给大家的如何用vue写h5页面方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看. 1.当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配. 2.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用.方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的
Vue的H5页面唤起支付宝支付功能

目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付.另在此说一下这个 returnUrl , 它是支付后支付宝回调的页面.具体可以根据自身业务,后台写死或者由前端控制. methods () {
vue中用H5实现文件上传的方法实例代码

整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def
详解Vue开发微信H5微信分享签名失败问题解决方案

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.
用vuex写了一个购物车H5页面的示例代码

通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理. 如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的
Vue仿支付宝支付功能

先给大家上个效果图: <div class="goods-psd"> <p class="apply-title"> 请输入支付密码 </p> <p style="margin: 0.2rem">确认支付 <span>{{password}}</span> </p> <div class="psd-container"> <i
IOS 仿支付宝支付屏幕亮度变化机制

1.首先,在需要实现的界面viewDidLoad中先保存亮度没有变化之前的亮度,因为这个界面消失之后还要变回原来的亮度,变化亮度也相当于用户的一种设置,所以也要保存一下这个状态,因为之后当APP在active和非active切换时候需要知道是否需要为用户做这个功能 // 保存原来的亮度 [[NSUserDefaults standardUserDefaults] setObject:@([UIScreen mainScreen].brightness) forKey:@"brightness&q
Vue实现微信支付功能遇到的坑

微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需项目用VUE+EL搭建而成,支付用EL的radio来做的 <el-radio v-model="radio" label="weixin" > <i class="iconfont icon-weixin"></i> <div class="list"> <h5>微信支付</h5> &l
Vue 仿百度搜索功能实现代码

无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us
Android仿支付宝支付密码输入框

本文实例为大家分享了Android实现一个仿支付宝支付密码的输入框,主要实现如下: PasswordView.java package com.jackie.alipay.password; import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphic
Android中PathMeasure仿支付宝支付动画

前言在 Android 自定义 View 中,Path 可能用的比较多,PathMeasure 可能用的比较少,就我而言,以前也没有使用过 PathMeasure 这个 api,看到别人用 PathMeasure 和 ValueAnimator 结合在一起完成了很好的动画效果,于是我也学习下 PathMeasure ,此处记录下. PathMeasure 构造器: forceClosed 含义: // 创建一个 Path 对象 path = new Path(); path.moveTo(20
ThinkPHP框架下整合支付宝支付功能图文教程

本文实例讲述了ThinkPHP框架下整合支付宝支付功能.分享给大家供大家参考,具体如下: 背景近期项目需要接入支付宝支付功能,其中开发使用了ThinkPHP3.2.3框架,通过参考开发平台文档可以知道,网站开发有两种场景,一种是手机网站支付,直接唤醒支付宝app进入支付操作:另一种多是 PC 端显示支付二维码的形式,然后使用手机的支付宝app扫描. 此处主要介绍手机网站支付的实现,后期补充扫码支付. 一.接入配置 1).接入步骤根据"快速接入"中的流程,两者大同小异,都是进行: 第
SpringMVC+Spring+Mybatis实现支付宝支付功能的示例代码

本博客详细介绍了如何使用ssm框架实现支付宝支付功能.本文章分为两大部分,分别是「支付宝测试环境代码测试」和「将支付宝支付整合到ssm框架」,详细的代码和图文解释,自己实践的时候一定仔细阅读相关文档. 教程源代码:https://github.com/OUYANGSIHAI/sihai-maven-ssm-alipay 一.支付宝测试环境代码测试: 1.下载电脑网站的官方demo以及查看参考相关文档: 地址:https://docs.open.alipay.com/270/106291/ 2.下
django中使用事务及接入支付宝支付功能

之前一直想记录一下在项目中使用到的事务以及支付宝支付功能,自己一直犯懒没有完,趁今天有点兴致,在这记录一下. 商城项目必备的就是支付订单的功能,所以就会涉及到订单的保存以及支付接口的引入.先来看看订单的保存,在数据库模型涉及之初,将订单分成了两个表,一个为订单表,记录订单的基本信息,如订单号,用户信息,运费之类,一个为订单商品表,记录该订单中的商品信息.在保存订单时,肯定会涉及到两个表的新建和保存,其实还有一张表也需要进行一些修改,那就是商品表,当一个订单保存成功,意味着本次交易成功,商品售出,

Vue仿支付宝支付功能

相关推荐

随机推荐