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

仅实现功能，样式比较粗糙
先上效果图：



代码：

<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> 
			&l