uniapp 仿微信支付UI开发的支付组件

最新推荐文章于 2024-07-23 21:15:02 发布

Kishn

最新推荐文章于 2024-07-23 21:15:02 发布

阅读量1.1k

点赞数

文章标签： uni-app vue

本文链接：https://blog.csdn.net/weixin_44104659/article/details/115515827

版权

本文介绍了使用uni-app框架开发一款仿微信支付的UI组件，虽然样式较为简单，但已具备基本功能。文章通过代码展示实现过程，并附有完成效果的截图。

摘要由CSDN通过智能技术生成

仅实现功能，样式比较粗糙
先上效果图：
在这里插入图片描述

代码：

<template>
	<view class="page">

		<button type="default" @click="goNextStep">立即支付</button>
		
		<view :class="{'flag': flag }"  class="dialog" v-if="showPayModel">
			<view class="title">请输入支付密码</view>
			<view class="close-icon" @click="closeDialog"></view>
			<view class="body">
				<view class="">支付金额</view>
				<view class="">¥3000</view>
				<view class="password-box"  @click="clickPassword">
					<view class="password-item" v-for="(item,index) in passwordBox" :key='index'> <view style="opacity: 1;">{
   {
   item.value}}</view></view>
				</view>
				<input v-if="showInput" id="passwordInput" :class="{'input' : inputFlag}" class="password-input" type="text" :value="inputValue"  :auto-focus="true"  @input="inputNum" :focus="inputFocus" maxlength="6" hold-keyboard type="number"/>
				<view class="bottom-text">找回密码</view> 
			</view>
		</view>
		<view class