<!--
|
* @Author: 小明丶
|
* @Date: 2020-10-21 19:42:42
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2021-01-04 15:47:59
|
* @Description:
|
-->
|
!<template>
|
<div class="verification-page">
|
<van-nav-bar
|
title="打款验证"
|
left-arrow
|
@click-left="onClickLeft"
|
style="line-height: 43px"
|
>
|
<i
|
class="iconfont iconzuojiantou"
|
slot="left"
|
style="font-size: 25px"
|
></i>
|
</van-nav-bar>
|
<div class="ipt-box">
|
<p class="ipt-p">收款金额验证</p>
|
<span class="ipt-tip">¥</span>
|
<input type="text" v-model="payAmt" class="ipt" placeholder="请输入验证金额" maxlength="4">
|
</div>
|
<div class="tip-box">
|
<p class="tip-p">我们将向您的对公结算银行卡进行一笔小额转账以确保银行卡信息准确无误，请将我们的打款金额输入至输入框后点击确认完成验证</p>
|
</div>
|
<button class="confirm-btn" @click="hanldClick">确认</button>
|
<van-dialog v-model="show" title="打款提示" confirm-button-color="#896EDB">
|
<div style="text-align:center;box-size:border-box;padding:20px 10px;font-size:14px">
|
<p>打款金额输入错误，请重新输入</p>
|
</div>
|
</van-dialog>
|
<van-dialog v-model="show2" title="打款提示" @confirm="handConfirm" confirm-button-color="#896EDB">
|
<div style="text-align:center;box-size:border-box;padding:20px 10px;font-size:14px">
|
<p>打款金额输入错误，两次验证错误，我们将重新打款进行验证，请稍后</p>
|
</div>
|
</van-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { Toast, Dialog } from "vant";
|
|
Vue.use(Toast);
|
Vue.use(Dialog);
|
export default {
|
data(){
|
return {
|
show:false,
|
show2:false,
|
payAmt:'',//验证金额
|
timer:'',
|
isValid:'',//验证金额结果
|
cont:1 // 计数器
|
}
|
},
|
created(){},
|
mounted(){},
|
methods:{
|
handConfirm(){
|
this.$router.push({
|
path:'/tonglian/open-result',
|
query:{
|
verificationDone:'done',
|
...this.$route.query
|
}
|
})
|
},
|
/**
|
* @description 返回至个人中心首页
|
* @returns void
|
* **/
|
onClickLeft(){
|
if(this.$route.query.isApp == 1){
|
this.$router.push({
|
path:'/app/home'
|
});
|
}else{
|
this.$router.push({
|
path:'/main/mine'
|
});
|
}
|
|
},
|
/**
|
* @description 提交验证
|
* @returns void
|
* **/
|
hanldClick(){
|
/**
|
* 1.发起验证请求
|
* 2.验证成功后返回状态页面
|
*
|
* **/
|
this.cont = this.cont + 1
|
this.$api.tltMerOpenPayAuth({
|
payAmt: Number(this.payAmt)
|
}).then(res=>{
|
this.isValid = res.body.isValid
|
this.cont = res.body.matchNum
|
if(this.isValid){
|
this.$router.push({
|
path:'/tonglian/open-result',
|
query:{
|
verificationDone:'done',
|
...this.$route.query
|
}
|
})
|
}else{
|
if(this.cont == 2){
|
this.show2 = true
|
|
}else{
|
this.show = true
|
}
|
}
|
})
|
},
|
},
|
beforeRouteLeave (to, from, next) {
|
// ...
|
Toast.clear()
|
clearInterval(this.timer)
|
next()
|
}
|
}
|
</script>
|
<style lang="less">
|
.verification-page{
|
&{
|
min-height: 100vh;
|
background-color: #f5f5f7;
|
}
|
.ipt-box{
|
&{
|
padding: 15px 20px;
|
box-sizing: border-box;
|
background: #fff;
|
width: 100%;
|
margin-top: 15px;
|
}
|
.ipt-p{
|
margin-bottom: 10px;
|
}
|
.ipt-tip{
|
font-size: 30px;
|
font-weight: 550;
|
margin-right: 10px;
|
}
|
.ipt{
|
border: 0;
|
outline: none;
|
font-size:20px;
|
height: 30px;
|
line-height: 30px;
|
width: 80%;
|
}
|
input::-webkit-input-placeholder { /* WebKit browsers */
|
font-size: 20px;
|
color: #999999;
|
}
|
|
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
font-size: 20px;
|
color: #999999;
|
}
|
|
input::-moz-placeholder { /* Mozilla Firefox 19+ */
|
font-size: 20px;
|
color: #999999;
|
}
|
|
input:-ms-input-placeholder { /* Internet Explorer 10+ */
|
font-size: 20px;
|
color: #999999;
|
}
|
}
|
.tip-box{
|
&{
|
box-sizing: border-box;
|
width: 100%;
|
padding: 15px 20px;
|
}
|
.tip-p{
|
color: #999999;
|
}
|
}
|
.confirm-btn{
|
width: 94%;
|
height: 44px;
|
background: #896EDB;
|
border-radius: 22px;
|
margin-left: 3%;
|
margin-top: 100px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
}
|
}
|
</style>
|
