78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="top" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
|
|
<view class="card-wrapper">
|
|
<image class="icon-close" src="/static/iconImg/icon-x.svg" mode="scaleToFill" @tap="close" />
|
|
<view class="title">请输入支付密码</view>
|
|
<view class="sub-title">退款</view>
|
|
<view class="refund-money">￥{{ vdata.refundAmount }}</view>
|
|
<JPasswordInput v-if="vdata.isShowPwdInput" margin="0 50rpx" :focus="true" ref="pwdInput" @inputChange="inputChange" />
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, reactive, ref, nextTick } from 'vue'
|
|
const vdata = reactive({
|
|
refundAmount: 0,
|
|
isShowPwdInput: false,
|
|
})
|
|
const proms = {}
|
|
const popup = ref(null)
|
|
const pwdInput = ref(null)
|
|
const open = (money, callBack) => {
|
|
vdata.refundAmount = money
|
|
vdata.callBack = callBack
|
|
popup.value.open()
|
|
|
|
vdata.isShowPwdInput = false
|
|
nextTick(() => {
|
|
vdata.isShowPwdInput = true
|
|
})
|
|
|
|
|
|
}
|
|
const close = () => {
|
|
popup.value.close()
|
|
vdata.isShowPwdInput = false
|
|
}
|
|
// 输入框 e 输入的数字
|
|
const inputChange = (e) => {
|
|
if (e.length >= 6) return vdata.callBack(e)
|
|
}
|
|
const clearInput = () => pwdInput.value.clearInput()
|
|
defineExpose({ open, clearInput, close })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-wrapper {
|
|
margin: 0 50rpx;
|
|
padding-bottom: 50rpx;
|
|
margin-top: 162rpx;
|
|
background-color: $J-bg-ff;
|
|
border-radius: $J-b-r32;
|
|
.icon-close {
|
|
padding: 30rpx;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.title {
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
.sub-title {
|
|
margin-top: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #808080;
|
|
}
|
|
.refund-money {
|
|
margin-bottom: 70rpx;
|
|
text-align: center;
|
|
font-size: 50rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
</style>
|