h5、微信小程序、uniapp创建用密码支付窗口支付

最新推荐文章于 2023-09-17 22:53:34 发布
最新推荐文章于 2023-09-17 22:53:34 发布
阅读量639 收藏 3
点赞数
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45472548/article/details/113980664
版权
这个代码段展示了使用Vue.js实现静态页面中支付密码输入框的交互逻辑，包括点击显示/关闭、忘记密码功能、输入焦点切换、密码强度实时显示以及错误提示。当用户输入6位密码后，会进行支付密码验证。如果验证失败，会显示错误提示并允许用户重试。
摘要由CSDN通过智能技术生成

静态页面(vue、html、view)

 <!--密码-->
					   <view class="xs" v-if="guanbimm==true"  @click="guanbi_input">
					   </view>
					   <view v-if="guanbimm==true" class="wallets-password" >
					   	<view class="input-content-wrap">
					   		<view class="top">
					   			<view @click="mxmmguanbi" class="close">×</view>
					   			<view class="txt">请输入支付密码</view>
					   			<view @click="wjmm" class="forget">忘记密码</view>
					   		</view>
					   		<view class="actual_fee">
					   			<text>消费{{goods.moxing_duihuan}}积分</text>
					   
					   		</view>
					      
					   		<view @click="set_Focus" class="input-password-wrap">
					   			<view class="password_dot">
					   				<i v-if="wallets_password.length>=1"></i>
					   			</view>
					   			<view class="password_dot">
					   				<i v-if="wallets_password.length>=2"></i>
					   			</view>
					   			<view class="password_dot">
					   				<i v-if="wallets_password.length>=3"></i>
					   			</view>
					   			<view class="password_dot">
					   				<i v-if="wallets_password.length>=4"></i>
					   			</view>
					   			<view class="password_dot">
					   				<i v-if="wallets_password.length>=5"></i>
					   			</view>
					   			<view class="password_dot">
					   				<i v-if="wallets_password.length>=6"></i>
					   			</view>
					   		</view>
					   	</view>
					   <input @input="set_wallets_password" class="input-content" type="number" :focus="isFocus" maxlength="6"  />
					   </view>
					   
					   <block v-if="chongshi==true">
					   	<view class="xs" v-if="chongshi==true">
					   	</view>
					   	<view class="modal-dialog1">
					   		<view class="modal-title">您输入密码错误，请重新输入正确的密码！</view>
					   		<view @click="mxmmguanbi_1"  class="payment-btn" :class="[isIphoneX?'payment-bottom':'']" style="color:#00a2ff; font-size:30upx; width: 100%;text-align: center; border: 1upx solid #d4d4d4;">重试</view>
					   	</view>
					   </block>

CSS

.modal-dialog1 {
	  width: 46%;
	  overflow: hidden;
	  position: fixed;
	  top: 34%;
	  left: 24%;
	  z-index: 9999;
	  background: #fff;
	  margin: 0 auto;
	  border-radius: 14upx;
	  margin-left: 15upx;
	  height: 22%;
	  padding-left: 24upx;
	  padding-right: 24upx;
	  z-index: 999999;
	  
	}
	.modal-title {
	  padding-top: 24upx;
	  font-size: 26upx;
	  color: #030303;
	  text-align: center;
	}
	
	.modal-content {
	  padding: 20upx 10upx;
	  }
	.payment-btn {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: 0;
	  height: 90upx;
	  line-height: 90upx;
	  font-size: 28upx;
	  border-radius: 0;
	  font-size: 32upx;
	  margin: 0 auto;
	}
	.xs{
	  width: 100%;
	  height: 100%;
	  opacity: 0.5;
	  background: #000000;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 99999;
	}
	
	.wallets-password {
	  position: absolute;
	  left: 50%;
	  top: 64rpx;
	  z-index: 99999;
	}
	
	 .wallets-password .input-content-wrap {
	  position: absolute;
	  top: 200upx;
	  left: 50%;
	  display: flex;
	  flex-direction: column;
	  width: 600upx;
	  margin-left: -300upx;
	  background: #fff;
	  border-radius: 20upx;
	}
	
	 .wallets-password .input-content-wrap .top {
	  display: flex;
	  align-items: center;
	  height: 90upx;
	  border-bottom: 2upx solid #ddd;
	  justify-content: space-around;
	}
	
	 .wallets-password .input-content-wrap .top .close {
	  font-size: 44upx;
	  color: #999;
	  font-weight: 100;
	  position: absolute;
	  left: 18upx;
	  top: 2%;
	
	}
	
	 .wallets-password .input-content-wrap .top .forget {
	  color: #00a2ff;
	  font-size: 22upx;
	  position: absolute;
	  right: 4%;
	  float: right;  
	}
	
	 .wallets-password .input-content-wrap .actual_fee {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #333;
	  height: 100upx;
	  margin: 0 23upx;
	
	  font-weight: bold;
	  border-bottom: 2upx solid #ddd;
	}
	
	.wallets-password .input-content-wrap .actual_fee span {
	  font-size: 24upx;
	}
	
	 .wallets-password .input-content-wrap .actual_fee text {
	  font-size: 36upx;
	}
	
	 .wallets-password .input-content-wrap .input-password-wrap {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 150upx;
	}
	
	.wallets-password .input-content-wrap .input-password-wrap .password_dot {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	  color: #000;
	  box-sizing: border-box;
	  width: 90upx;
	  height: 90upx;
	  border: 2upx solid #ddd;
	  border-left: none 0;
	}
	.wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
	  border-left: 2upx solid #ddd;
	}
	
	 .wallets-password .input-content-wrap .input-password-wrap .password_dot i {
	  background: #000;
	  border-radius: 50%;
	  width: 20upx;
	  height: 20upx;
	}
	.wallets-password .input-content {
	  position: fixed;
	  opacity: 0;
	  left: -100%;
	  top: 600upx;
	  background: #f56;
	  z-index: -999;
	}
	
	.wallets-password .input-content.active {
	  z-index: -99;
	}

JS

data() {
			return {
			    guanbimm:false,
				zhifu:false,//显示提示支付内容
				isFocus:false,
				chongshi:false,
				wallets_password:'',//支付密码
			}
	   }

methods:{

//密码操作
			
			wjmm(e){
			     uni.navigateTo({
			     	url:'/setcontent/xiugaizhifumm'
			     })
			},
			 mxmmguanbi(e){
				this.wallets_password='';
				this.guanbimm=false; 
				this.flag = !1;
					  
			
			},
				  
			mxmmguanbi_1(e){
				this.wallets_password='';
				this.isFocus=false;
				this.guanbimm=true;
				this.chongshi=false;
			
			
			},
			guanbi_input() {//取消聚焦
				this.isFocus=false;
					   
			  },
			set_Focus() {//聚焦input
			console.log(this.isFocus);
				if(this.isFocus)
				{
					this.isFocus=false;
				}
				else{
					this.isFocus=true;
				}
				this.guanbimm=true;
				this.chongshi=false;
			
			  },


			//账号支付密码
			  set_wallets_password(e){
				  // console.log(e);
			           
					  this.wallets_password=e.detail.value;  
					  
					  
					  if (this.wallets_password.length == 6) {//密码长度6位时，自动验证钱包支付结果
						var that=this;
					
						var userInfo= uni.getStorageSync('userInfo');
						//验证支付密码
						uni.request({
						    url: api['apiroot']+'order/pay-passworrd', 
							  data: {
										pay_password:that.wallets_password,
										
										
										
										access_token:userInfo['access_token'],
										_version:'2.8.9',
										_platform:'wx',
							        },
							method :"POST",
							dataType:'json', //默认 json格式
						    header: {
						        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
						    },
						    success: (res) => {
								console.log(res);
							 if(res.data.code==500){
								 this.mxmmguanbi();
								 uni.showModal({
								     title: '温馨提示',
								     content: '您还没设置支付密码,现在跳转到设置支付密码？',
								     success: function (res) {
								         if (res.confirm) {
								             uni.navigateTo({
								                 url: '/setcontent/xiugaizhifumm',
								             });
								         } else if (res.cancel) {
								             
								         }
								     }
								 });
							 }
							 else{
								 
								 if(res.data.code==1){
								 	that.chongshi=true;
								 	that.guanbimm=false;
								 }
								 else{
								 	that.paysuccess('BALANCE_PAY');//余额支付
								 	that.guanbimm=0;
								 }
								 
							 }
								
								
						
							},
						})
					
					   
					  }
			   },


       //账号密码输入成功(WECHAT_PAY//微信支付；BALANCE_PAY//余额支付)
			
		
			paysuccess(e){
				var that=this;
			    console.log(e);
				var pay_times=that.pay_times+1;

				uni.request({
				    url: api['apiroot']+'order/pay-data', 
					data:{
						access_token:that.userInfo['access_token'],
						order_id:that.order_id,
						pay_type:e,
						parent_user_id:0,
						condition: 2,
						order_id_list:'',
						pay_times:pay_times,
						_platform:'wx',
						_version:'2.8.9',
						
					
						
					},
				   
					method :"GET",
					dataType:'json', //默认 json格式
				    header: {
				         'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res);
						if(res.data.code==0){
							if(e=="BALANCE_PAY"){
									uni.reLaunch({
										url: '/pages/money/paySuccess?order_id='+that.order_id+'&price='+that.order_detail.pay_price,
									});
							}else if(e=="WECHAT_PAY"){
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp:res.data.data.timeStamp,
								    nonceStr: res.data.data.nonceStr,
								    package:  res.data.data.package,
								    signType: res.data.data.signType,
								    paySign:  res.data.data.paySign,
								    success: function (res) {
										
										uni.request({
										    url: api['apiroot']+'order/pay-success', 
											data:{
												access_token:that.userInfo['access_token'],
												order_id:that.order_id,
												pay_times:pay_times,
												
											},
										   
											method :"GET",
											dataType:'json', //默认 json格式
										    header: {
										         'custom-header': 'hello' //自定义请求头信息
										    },
										    success: (res) => {
												
												 if(pay_times==2){
													console.log(res.data.weikuan);
													uni.request({
													    url: api['apiroot']+'order/edit-weikuan', 
														data:{
															access_token:that.userInfo['access_token'],
															order_id:that.order_id,
															weikuan:res.data.weikuan,
															order_no:that.order_detail['order_no'],
															
														},
													   
														method :"GET",
														dataType:'json', //默认 json格式
													    header: {
													         'custom-header': 'hello' //自定义请求头信息
													    },
															
													    success: (res) => {
															
														},
													})
													
												}
													uni.reLaunch({
														url: '/pages/money/paySuccess?order_id='+that.order_id+'&price='+that.order_detail.pay_price,
													});
												},
										})
								       
								    },
								    fail: function (err) {
								       
										uni.showModal({
										    title: '温馨提示',
										    content: '订单尚未支付',
											showCancel:false,
										    success: function (res) {
										        if (res.confirm) {
										            uni.redirectTo({
										            	url: '/pages/order/order',
										            })
										        } 
										    }
										});
								    }
								});
							}
							
						}
						else{
							uni.showToast({
							    title: '支付失败',
							    duration: 2000
							});
						}
						
						
						  
					 
					  }
					
					  
						
				
				})
			},
	}
码农PHP666
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp(全端兼容) - 最新详细实现支付键盘功能组件，从底部弹出数字键盘输入支付密码进行付款交互效果，自定义支付密码键盘仿微信、支付宝支付键盘，1~9密码数字键盘，电商支付（详细示例代码复制运行
高级前端工程师
07-11 2054
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp微信小程序平台实现自定义支付密码键盘，uniapp 密码支付，数字键盘,安全键盘,交易键盘,交易密码,交易密码输入框，uniapp自定义支付键盘: uniapp自定义支付键盘，uniapp小程序端实现键盘输入支
h5 仿支付宝密码输入框 html 不使用框架
07-04
没有做手机适配，现在是实现了仿支付宝输入效果。代码是html+css+js写的，不是app的代码，
HTML5 支付密码功能
码农挚友的博客
10-27 440
添加链接描述 HTML5 支付密码功能(用到了jQuery) <div class="common-part pay-part"> <div class="common-dialog pay-dialog"> <div class="dialog-title">请输入支付密码</div> <div class="pay-money">$10000.00</div>
微信小程序Demo：页面效果（底部弹出、支付密码...)
09-01
微信小程序Demo：页面效果（底部弹出、支付密码...)项目地址：http://www.wxapp-union.com/thread-10125-1-1.html
H5仿微信支付密码样式
07-05
H5仿微信支付密码样式
h5 仿支付宝密码输入框 html
07-04
没有做手机适配，现在是实现了仿支付宝输入效果。代码是html+css+js写的，不是app的代码，
微信支付，H5支付(uniapp)
m0_70673959的博客
07-04 697
微信公众号内跳转H5页面，使用微信浏览器跳转微信支付。
uniapp进行H5微信支付
qq_35547053的博客
10-22 4522
// 微信 wxPay() { let me = this uni.getProvider({ service: 'payment', success: res => { if (~res.provider.indexOf('wxpay')) { //先判断用户是否有微信支付环境（是否安装了微信app） uni.showLoading({ title: '正在调起微信支付' }) let..
uin-app微信小程序开发
weixin_70380078的博客
06-21 5180
uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。在开始连接数据库之前，首先需要考虑的是选择哪种类型的数据库。五：在打开的命令框中找到对应的解压文件夹，如：d盘输入 D:，E盘就输入 E:。
uniapp微信小程序实现《优购商城项目》
qq_64102392的博客
06-14 4609
对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。
微信小程序如何获取用户头像和昵称
10-16
微信小程序获取用户头像和昵称是小程序开发中的常见需求，它主要涉及到微信小程序的前端页面与后端API的交互。具体的知识点包括： 1. 微信小程序基础框架介绍 首先，了解微信小程序的基础框架是非常重要的。微信小...
微信小程序6位支付密码输入框
01-27
注: 本项目代码仅供参考,不建议使用在生产环境 最近问题: 部分手机input的type=number时，键盘无法弹出 参考: https://developers.weixin.qq.com/community/develop/doc/00046ac5eb48d03c7f48e32ec56800?highLine=键盘 ➢ 6位支付密码组件 微信小程序6位支付密码输入框 component为6位支付输入框组件 index为引用组件的页面 具体参数和事件设置，请参考小程序官方文档-组件 ➢ 参数设置 ➢ 代码片段地址（新增明文/暗文切换） 代码片段地址：wechatide://minicode/uSYM88mq6lYa ➢ 使用请参考官方文档： https://mp.weixin.qq.com/debug/wxadoc/dev/dev
6位数字支付密码
11-18
纯白色数字键盘（仿IOS 支付宝微信支付键盘）。 微信支付的输入框，6位数字
Uni-app运用HBuilderX和微信web开发者工具做微信小程序
m0_75260695的博客
06-14 7151
Uni-app的介绍:uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5以及各种小程序、快应用等多个平台.HBuilderX中的H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。简称HX。HX是轻如编辑器、强如IDE的合体版本。微信web开发者工具的介绍:为帮助开发者更方便、更安全地开发和调试基于微信的网页，我们推出了微信 web 开发者工具。
微信小程序之支付密码输入demo
weixin_30455661的博客
07-19 894
　　在小程序中实现支付密码的输入，要解决几个问题：　　1、小程序要想唤起键盘，必须要借助input控件。通过input控件和其属性focus来唤起和隐藏输入键盘。 　　2、要让input控件不可见。让光标和输入的字符都不可见，这里是把input控件定位到左边不可见范围。 先看实现后的效果图： 实现demo代码： 1、页面代码 <view catchtap='sho...
uni-app自定义交易密码弹框
weixin_47551643的博客
04-12 761
自定义交易密码弹框
微信小程序——实战：发起微信支付，并根据支付结果显示页面
semoon的博客
03-19 7627
微信小程序——实战：发起微信支付，并根据支付结果显示页面 1.界面 2.项目结构 3.核心代码 1.trade.js封装前端流水号 module.exports = { tradeno: function() { var e = new Date().getTime(); return "fk" + parseInt(1e11 * Math.random(...
uniapp 仿微信支付UI开发的支付组件
weixin_44104659的博客
04-08 1124
仅实现功能，样式比较粗糙 先上效果图： 代码： <template> <view class="page"> <button type="default" @click="goNextStep">立即支付</button> <view :class="{'flag': flag }" class="dialog" v-if="showPayModel"> <view class="title">请输入支付
uniapp 开发App使用微信H5支付解决方案（包含前后端，后端用的thinkphp）
最新发布
oyh6857451的博客
09-17 5951
我们在用uniapp开发app常常需要接入支付功能，但是有时候出于包体积或审核的因素，并不想接入支付相关的sdk，这个时候，就可以考虑使用h5支付实现。可能会遇到iOS跳转微信完成支付后无法自动返回app，是因为UrlSchemes没有配置好。微信h5支付返回的mweb_url，前端直接访问，会报错：商家参数格式有误，请联系商家解决
uniapp h5 微信支付jsapi
07-19
总结起来，Uniapp可以在H5平台中使用微信支付JSAPI来实现微信支付功能，开发者需要引入微信支付的JS文件，通过uni.request方法获取支付参数，调用wx.requestPayment方法调起支付，处理支付结果的回调函数，并确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值