|
@@ -1,71 +0,0 @@
|
|
-<template>
|
|
|
|
- <div class="countdown-timer" v-if="!isCountdownFinished">
|
|
|
|
- <div>{{ remainingTime }}</div>
|
|
|
|
- <div>浏览得积分 +{{ score }}</div>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-export default {
|
|
|
|
- name: 'CountdownTimer',
|
|
|
|
- props: {
|
|
|
|
- duration: {
|
|
|
|
- type: Number,
|
|
|
|
- require: true
|
|
|
|
- },
|
|
|
|
- onEnd: {
|
|
|
|
- type: Function,
|
|
|
|
- require: true
|
|
|
|
- },
|
|
|
|
- score: {
|
|
|
|
- type: Number,
|
|
|
|
- default: 100
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- count: 100,
|
|
|
|
- remainingTime: this.duration,
|
|
|
|
- isCountdownFinished: false // 倒计时是否结束
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.startTimer()
|
|
|
|
- },
|
|
|
|
- beforeUnmount() {
|
|
|
|
- this.stopTimer()
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- startTimer() {
|
|
|
|
- this.timer = setInterval(() => {
|
|
|
|
- if (this.remainingTime > 0) {
|
|
|
|
- this.remainingTime--
|
|
|
|
- // this.count = this.count - 6.67
|
|
|
|
- } else {
|
|
|
|
- this.stopTimer()
|
|
|
|
- this.isCountdownFinished = true // 设置倒计时结束状态
|
|
|
|
- this.onEnd()
|
|
|
|
- }
|
|
|
|
- }, 1000)
|
|
|
|
- },
|
|
|
|
- stopTimer() {
|
|
|
|
- clearInterval(this.timer)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style scoped>
|
|
|
|
-.countdown-timer {
|
|
|
|
- position: fixed;
|
|
|
|
- right: 20px;
|
|
|
|
- top: 30%;
|
|
|
|
- text-align: center;
|
|
|
|
- transform: translateY(-50%);
|
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
- color: white;
|
|
|
|
- padding: 10px;
|
|
|
|
- border-radius: 5px;
|
|
|
|
- font-size: 16px;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|