仅实现功能，样式比较粗糙
先上效果图：
代码：
<template><viewclass="page"><button type="default" @click="goNextStep">立即支付</button><view:class="{'flag': flag }"class="dialog" v-if="showPayModel"><viewclass="title">请输入支付密码</view><viewclass="close-icon" @click="closeDialog"></view><viewclass="body"><viewclass="">支付金额</view><viewclass="">¥3000</view><viewclass="password-box" @click="clickPassword"><viewclass="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"/><viewclass="bottom-text">找回密码</view></view></view><viewclass="dialog-bg" v-if="showPayModel"></view></view></template><script>exportdefault{data(){return{
hasEnoughMoney:true,// 是否有足够的金额
showPayModel:false,// 支付弹窗
flag:false,
password:[],
passwordBox:[{
value:'',
label:1,},{
value:'',
label:1,},{
value:'',
label:1,},{
value:'',
label:1,},{
value:'',
label:1,},{
value:'',
label:1,}],
inputFocus:false,// input焦点
inputFlag:false,
showInput:false,
inputValue:''}},
watch:{password(newVal,oldVal){// newVal 为用户实际输入的密码
console.log(newVal)if(newVal.length===6){// 校验密码
uni.showLoading({
mask:true})// 取消键盘聚焦this.changeDialogStatus(false)setTimeout(()=>{
uni.hideLoading()},2000);// 密码正确 交易成功setTimeout(()=>{
uni.showToast({
title:'支付成功'})this.changeDialogStatus(false)this.showPayModel=false},2000)// 密码错误 重新输入// setTimeout(() => {// uni.showToast({// title: '密码错误，请重新输入',// icon: 'none'// })// this.initPassword()// this.changeDialogStatus(true)// },2000)}}},
methods:{goNextStep(){if(!this.hasEnoughMoney){
uni.showModal({
confirmText:'去充值',
confirmColor:'blue',
title:'钱包余额不足',
content:'请先去重置在支付'})}else{this.showPayModel=truethis.changeDialogStatus(true)}},changeDialogStatus(status){if(status){this.showInput=truethis.inputFocus=truethis.flag=truethis.inputFlag=true}else{this.showInput=falsethis.inputFocus=falsethis.flag=false}},inputNum(e){let inputValue= e.detail.valuelet password= inputValue.split('')this.password= passwordfor(let i=0; i< password.length; i++){this.passwordBox[i].value='*'}},clickPassword(){this.changeDialogStatus(true)},// 弹窗关闭按钮closeDialog(){this.flag=falsethis.showPayModel=false},// 重置输入密码initPassword(){let init=this.$options.data()this.password= init.passwordthis.passwordBox= init.passwordBoxthis.inputValue=''}},created(){// this.clickInput()}}</script><style scoped lang="scss">.page{
overflow: hidden;
overflow-y: hidden;}.dialog-bg{
position: absolute;
height:100vh;
width:100vw;
box-sizing: border-box;
background-color: #333333;
opacity:.6;
top:0;
z-index:10;}.dialog{
position: absolute;
top:50vh;
left:50%;
transform:translate(-50%,-50%);
width:70vw;
height:26vh;
display: flex;
flex-direction: column;
background-color: white;
z-index:100;
border-radius:5px;.title{
text-align: center;
padding:10rpx;
border-bottom:1px solid #e8e8e8;}.close-icon{
position: absolute;
right:29rpx;
top:27rpx;
font-size:0px;
display:block;}.close-icon::before,.close-icon::after{
content:'';
width:15px;
height:2px;
background:#8e8e8e;
display:block;}.close-icon::before{
transform:rotate(45deg);}.close-icon::after{
transform:translateY(-2px)rotate(-45deg);}.body{
height:100%;
display: flex;
flex-direction: column;
align-items: center;
font-size:12px;
justify-content: space-around;}.password-box{
display: flex;
flex-direction: row;
justify-content: center;}.password-input{
position: relative;// top: 2000px;
z-index:-1;
opacity:-1;// width : 80%;}.password-item{
width:50rpx;
height:50rpx;
border:1rpx solid #e8e8e8;
text-align: center;
line-height:50rpx;}.bottom-text{
position: relative;
margin-left:240rpx;}}.flag{
top:30vh;}.input{
width:0;}</style>