Directory
-
- 1 Introduction
- 2.Code
-
- 2-1 subpage
- 2-2 Main page
1. Preface
Requirement: When I define a timer on the sub-page and click to get the verification code, the timer starts counting down. If the timer does not finish, I exit and close the sub-page and enter the sub-page again. The timer will be refreshed at this time, but My requirement is that when entering the sub-page again, as long as the last timer has not finished, it will continue. Then, at this time, the event of the main page can be triggered by exposing attribute events.
Specific idea: define a processing timer event in the main page definition. When you click on the sub-page to get the verification code, the countdown starts and the exposed event is called at the same time.
Then, at this time, the main page will trigger the timer event, and then extract the countdown data (of course there must be other ways to handle it, but I am not very good at the front end. I can only think of this method, and I hope you can give me some advice. )
2. Code
2-1 subpage
2.1.1 Define attributes and expose them
props: {<!-- -->
withdrawals: {<!-- -->
type: Object,
default() {<!-- -->
return {<!-- -->}
},
},
withdrawalWaitTime:{<!-- -->
type: Number,
default: 0
},
handWithdrawalWaitTime:{<!-- -->
type: Function,
default: null
},
closeWithdrawals: {<!-- -->
type: Function,
default: null
}
}
2.1.2 Define a timing for each processing in the hook function. Each time you come from the main page, it will carry a timing parameter withdrawalWaitTime. Based on this value, a specific countdown will be performed.
async mounted() {<!-- -->
await this.fetchData()
this.handMobile()
this.handWithdrawalWaitTime2()
},
methods: {<!-- -->
handWithdrawalWaitTime2(){<!-- -->
this.isWithdrawalsVerify = true
this.coolDownTime = this.withdrawalWaitTime
this.interval = setInterval(() => {<!-- -->
this.coolDownTime--;
console.log(`coolDownTime:${<!-- -->this.coolDownTime}`)
if (this.coolDownTime <= 0) {<!-- -->
this.isWithdrawalsVerify = false;
clearInterval(this.interval)
}
}, 1000)
},
}
2.13 Subpage page button
<basic-el-row>
<basic-el-col>
<el-form-item label="SMS verification code"
prop="messageCheckCode"
v-if="this.withdrawals.withdrawMsgCheck === 'ENABLE'">
<el-input
v-model="withdrawalsParam.messageCheckCode"
clearable
maxlength="60"></el-input>
</el-form-item>
</basic-el-col>
<basic-el-col>
<el-button type="primary" plain
:disabled="isWithdrawalsVerify"
@click="sendWithdrawCode"
v-if="this.withdrawals.withdrawMsgCheck === 'ENABLE'">
<span v-show="!isWithdrawalsVerify">Get</span>
<div v-show="isWithdrawalsVerify & amp; & amp; this.coolDownTime > 0">
<span class="codeText">
{<!-- -->{ this.coolDownTime }}
</span>
<span style="margin-left: 8px">Seconds</span>
</div>
</el-button>
</basic-el-col>
</basic-el-row>
2.1.4 Click event, call the exposed function event (this.handWithdrawalWaitTime()), which will trigger the corresponding main page event
sendWithdrawCode() {<!-- -->
this.$refs['withdrawals-form'].validateField('withdrawalsAmount')
.then((valid) => {<!-- -->
if (valid) {<!-- -->
this.withdrawSendCodeParam = {<!-- -->
memberId: this.withdrawals.id,
withdrawalsAmount: this.withdrawalsParam.withdrawalsAmount
}
this.isWithdrawalsVerify = true;
this.coolDownTime = 120;
withdrawSendCode(this.withdrawSendCodeParam).then((response) => {<!-- -->
this.$message.success("The request to send the SMS verification code was successful, please pay attention to check")
}).catch((error) => {<!-- -->
this.withdrawalsParam = this.tempWithdrawalsParam
console.error('send withdraw code error', error)
})
this.handWithdrawalWaitTime()
this.interval = setInterval(() => {<!-- -->
this.coolDownTime--;
if (this.coolDownTime <= 0) {<!-- -->
this.isWithdrawalsVerify = false;
clearInterval(this.interval)
}
}, 1000)
}
});
}
2-2 Main page
2.2.1 The main page introduces sub-pages in the form of components, defines a drawer, and passes in attributes and events. When the sub-page clicks to obtain the verification code, the handWithdrawalWaitTime() event will be triggered and the timing parameters will be carried there.
<basic-drawer
v-model="withdrawalsVisible"
title="Balance inquiry information"
:footer="false">
<withdrawals :closeWithdrawals="closeWithdrawalsVisible"
:withdrawals="withdrawalsParam"
:withdrawal-wait-time="withdrawalWaitTime"
:hand-withdrawal-wait-time="handWithdrawalWaitTime">
</withdrawals>
</basic-drawer>
Main page events will be executed synchronously with the timing of sub-pages
handWithdrawalWaitTime(){<!-- -->
this.withdrawalWaitTime = 120
this.withdrawalInterval = setInterval(() => {<!-- -->
this.withdrawalWaitTime--;
if (this.withdrawalWaitTime <= 0) {<!-- -->
this.isEditMobile = false;
clearInterval(this.withdrawalInterval)
}
}, 1000)
},
When passing from the main page, the sub-page will also continue to time.
