uniapp使用uni-popup组件实现密码支付功能

<view class="content">
				<text>余额:¥{{money}}</text>
				<text>转账金额</text>
				<view class="f-ac border-bottom">
					<text style="font-size: 80rpx;">¥</text>
					<input class="w-100" placeholder="输入金额" placeholder-style="color: #CFCFCF;" type="number" v-model="amount" />
				</view>
				<view class="w-100 f-jc">
					<text class="btn-confirm"  @click="openPay">转账</text>
				</view>
			</view>
<uni-popup ref="commandPopup" type="center">
			<view class="command-use">
				<image src="../../static/images/activity/closed.png" mode="" @tap="closePopup"></image> <!-- 右上角关闭的图片 -->
				<view class="command-box flex1">
					<view class="command-title">支付密码</view>
					<view class="command-title" style="font-size: 28rpx;">扫码转账</view>
					<view class="command-title" style="font-size: 48rpx;color: #434343;font-weight: 800;">¥ {{all}}</view>
				</view>
				<input type="password" v-model="payCode" placeholder="请输入支付密码" placeholder-class="placeholder-style"/>
				<!-- <view class="command-btn"> -->
					<!-- <view class="cancel" @tap="closePopup">取消</view> -->
					<view class="confirm" @tap="commandSure">确定</view>
				<!-- </view> -->
			</view>
		</uni-popup>
methods: {
		openPay() {
			if (!this.checkPrice(this.all)) { return false } //判断金额是否符合要求,all为输入的金额		
			this.$refs.commandPopup.open()
		},
		closePopup() {
			this.payCode = ""
			this.$refs.commandPopup.close()
		},
		commandSure(){
			uni.request({
				url: '接口地址',
				method: 'POST',
				data: {
					'password': this.payCode
				},
				header: {
					'Authorization': '自定义请求头信息'
				},
				success: (res) => {
					let data = res.data
					uni.showLoading({
						title: '请求中...'
					})
					if (data.code == 1) {
						this.handlePay()
					}else if(data.code == 3012) {
						uni.showModal({
							content: "您还没设置支付密码!",
							showCancel: false,
							success: () => {
								uni.hideLoading()
								uni.navigateTo({
									url:'../../mine/setting/changePayCode'
								})
								this.$refs.commandPopup.close()
							}
						});
					} else {
						uni.showModal({
							content: data.msg,
							showCancel: false,
							success: () => {
								uni.hideLoading()
							}
						});
						return false
					}
				}
			});
		}
}

//判断输入金额的正则表达式
checkPrice(price) {
			if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(price) || price == 0) {
				this.$util.modal({
					title: '提示',
					showCancel: false,
					content: '请输入正确的金额'
				})
				return false
			}
			
			if (price < 1) {
				this.$util.modal({
					title: '提示',
					showCancel: false,
					content: '最低金额为1'
				})
				return false
			}
			return true
		}

基本实现如下:

 支付成功则跳转uni.navigateBack跳转上一级

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值