原生微信小程序-两次设置支付密码校验,密码设置二次确认

这篇具有很好参考价值的文章主要介绍了原生微信小程序-两次设置支付密码校验,密码设置二次确认。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果

原生微信小程序-两次设置支付密码校验,密码设置二次确认,mpvue&原生微信小程序,微信小程序,小程序,密码二次确认,设置密码

具体代码

1、wxml

<view style="{{themeColor}}">
  <view class='container'>
    <view class="password_content">
      <view wx:if='{{type == 1}}'>
        <view class="title">
          <view class="main_title">设置支付密码</view>
          <view class="sub_title">请设置支付密码,用于支付验证</view>
        </view>
        <input bindinput="getCode" class="input-number" type="number" focus="{{isFocus}}" maxlength="6" />
      </view>
      <view wx:if='{{type == 2}}'>
        <view class="title">
          <view class="main_title">设置支付密码</view>
          <view class="sub_title">请再次设置支付密码,用于支付验证</view>
        </view>
        <input bindinput="getCode" class="input-number" type="number" focus="{{isFocus}}" maxlength="6" />
      </view>
      <view class="code-box" bindtap="getFocus">
        <view class="input-box">{{code[0]}}</view>
        <view class="input-box">{{code[1]}}</view>
        <view class="input-box">{{code[2]}}</view>
        <view class="input-box">{{code[3]}}</view>
        <view class="input-box">{{code[4]}}</view>
        <view class="input-box">{{code[5]}}</view>
      </view>
    </view>
  </view>
</view>

2、js


import request from '../../../utils/request'
const app = getApp()
Page({
  data: {
    type: 1, //默认第一次输入密码
    onePassdWord: '', //请输入密码
    twoPassdWord: '', //再次输入密码
    themeColor: app.globalData.themeColor
  },

  onLoad(query) {
  },

  onShow() {
    wx.setNavigationBarColor({
      backgroundColor: app.globalData.color,
      frontColor: '#ffffff'
    })
  },
  getFocus() {
    console.log('this.data.type--getFocus', this.data.type);
    this.setData({
      isFocus: true,
    });
  },
  // 获取输入数字
  getCode(e) {
    const type = this.data.type;
    const passdWord = e.detail.value; //获取到的密码
    this.setData({
      code: e.detail.value
    });
    console.log('获取输入数字', this.data.code)
    // 获取输入框值的长度
    let value_length = e.detail.value.length;
    if (value_length == 6) {
      console.log(666, passdWord, type);
      if (type == 1) {
        console.log(5555, type);
        this.setData({
          type: 2,
          code: '',
          isFocus: true,
          onePassdWord: passdWord,
        })
      } else {
        console.log(888, type);
        this.setData({
          twoPassdWord: passdWord,
        })
      }
      // console.log(999, this.data.onePassdWord, this.data.twoPassdWord);
      if (this.data.onePassdWord.length == 6 && this.data.twoPassdWord.length == 6) {
        if (this.data.onePassdWord === this.data.twoPassdWord) {
          this.upPaymentPassword()
          // console.log('两次密码一样');
        } else {
          wx.showToast({
            title: '两次密码不一致,请重新设置。',
            icon: 'error',
            duration: 2000
          })
          this.setData({
            type: 1,
            code: '',
            onePassdWord: '',
            twoPassdWord: '',
            isFocus: true,
          })
        }
      }
    }
  },
  async upPaymentPassword() {
    const res = await request('******', 'POST', { password: this.data.twoPassdWord })
    if (res.success) {
      wx.showToast({
        title: '密码设置成功',
        icon: 'success',
        duration: 2000
      })
      wx.redirectTo({ url: `/subpackages/withdraw/index` });
    }
  }
});

3、wxss

page {
  box-sizing: border-box;
  height: 100%;
  background-color: #f7f8fa;
}

.container {
  width: 100%;
  height: 100%;
  color: #000;
}

.container .password_content {
  text-align: center;
  margin-top: 160rpx;
}

.container .password_content .title {
  text-align: center;
}

.password_content .title .main_title {
  font-size: 40rpx;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.password_content .title .sub_title {
  font-size: 30rpx;
  text-align: center;
  font-weight: bold;
  margin-bottom: 60rpx;
}

.container .sub-title .btn {
  margin-left: 20rpx;
  color: var(--themeColor);
}

.container .code-box {
  width: 510rpx;
  height: 80rpx;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 80rpx;
}

.container .code-box .input-box {
  height: 80rpx;
  width: 80rpx;
  box-sizing: border-box;
  background-color: #e7e7e7;
  text-align: center;
  line-height: 80rpx;
  font-size: 34rpx;
}

.container .input-number {
  opacity: 0;
  position: absolute;
  z-index: -1;
  height: 0rpx;
  width: 0rpx;
}

.container .time-box {
  margin-top: 50rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: #000;
}

.container .time-box .regain {
  color: var(--themeColor);
}

.container .time-box .regain-info .time {
  color: var(--themeColor);
}

相关文章

基于ElementUi再次封装基础组件文档


基于ant-design-vue再次封装基础组件文档


vue3+ts基于Element-plus再次封装基础组件文档文章来源地址https://www.toymoban.com/news/detail-782841.html

到了这里,关于原生微信小程序-两次设置支付密码校验,密码设置二次确认的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:微信小程序中首页onLoad()函数加载两次问题(已解决)

    我在学习微信小程序的开发的过程中,在学到云开发时,首页要加载服务器数据,发现onLoad函数被加载了两次,如图 然后来搜,发现问题出在了onShow函数这,这个函数只有在此页面第一次加载时才会被调用,而这个函数里不知道什么时候加上了这行代码 this.onLoad() (可能是开

    2024年02月16日
    浏览(35)
  • 【微信小程序支付功能】uniapp实现微信小程序支付功能

    场景 :要实现公司微信小程序的电商模块微信支付功能 一.实现步骤和思路 在登录状态,登录的时候获取到code,利用code获取到 openid: https://blog.csdn.net/weixin_45308405/article/details/128868377?spm=1001.2014.3001.5501 在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付

    2024年02月11日
    浏览(55)
  • 已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次

    原因: fullscreenchange事件会在进入全屏和退出全屏时各触发一次。所以全屏切换期间会触发两次该事件。 解决方案: js Copy code 在监听fullscreenchange事件时,使用变量进行防抖处理。比如设置一个变量来记录上一次的全屏状态,只有当状态真正发生改变时才执行处理逻辑。 使用

    2024年02月07日
    浏览(50)
  • 【微信支付】java-微信小程序支付-V3接口

    最开始需要在微信支付的官网注册一个商户; 在管理页面中申请关联小程序,通过小程序的 appid 进行关联;商户号和appid之间是多对多的关系 进入微信公众平台,功能-微信支付中确认关联 具体流程请浏览官方文档:接入前准备-小程序支付 | 微信支付商户平台文档中心 流程走

    2024年02月06日
    浏览(53)
  • 【微信小程序】表单校验

    小程序开发过程中,很多地方要做表单校验,而小程序并不能像vue那样有专门的校验函数,只能自己手写做出类似的效果。 以修改密码为例,需要校验以下三个输入框: 原理: 利用输入框的 bindblur 方法,根据校验的条件判断来控制错误信息的显示隐藏 实现代码:

    2024年02月13日
    浏览(45)
  • 微信小程序——支付

    小程序支付是专门被定义使用在小程序中的支付产品。目前在小程序中能且只能使用小程序支付的方式来唤起微信支付。 先判断协议字段返回,再判断业务返回,最后判断交易状态 除被扫支付场景以外,商户系统先调用统一下单接口在微信支付服务后台生成预支付交易单,

    2024年02月07日
    浏览(91)
  • 微信小程序支付流程

    申请微信支付,配置小程序秘钥,设置秘钥和下载证书,配置HTTPS服务器即可。 具体步骤 1、申请微信支付。小程序认证以后,可以在小程序后台,微信支付菜单栏,申请微信支付。填写企业信息和对公账户,微信支付会打一笔随机金额到对公账户,输入金额完成验证后,在

    2024年02月13日
    浏览(44)
  • app第三方支付,微信小程序支付

    最近公司开发一个app,需要从app跳转到小程序去微信支付,当时在网上看了好长时间没有看到适合自己的,在这里记录一下,也方便自己以后可以再复习一下,毕竟本人脑子不太好使,只能记下来。 app跳转页面携带参数到小程序 小程序接收参数,拉起微信支付

    2024年02月16日
    浏览(70)
  • 微信小程序接入微信支付

    微信支付前提是:注册了微信平台后,必须开通企业商户号,需要把工商登记证明,企业银行账户开户证明,组织机构代码等提交上去进行审核https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal 开通商户号之后,我们需要得到密钥,和证书等相关信息,根据如下文档生成:

    2024年02月14日
    浏览(55)
  • 微信小程序调用微信支付

    最近开发到小程序调用微信支付功能,看了下微信支付商户官网API文档再结合项目本身情况因是本人第一次接触走了很多弯路所以记录下开发的过程。 本次微信支付用的是老版本XML格式的,所有的支付功能直接复制就可以用了。无需大量改动把相应的商户appid 和商户支付秘钥

    2024年02月11日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包