154 lines
3.9 KiB
Vue
154 lines
3.9 KiB
Vue
<template>
|
||
<view class="commonPage commonPageBox">
|
||
<public-module></public-module>
|
||
<z-nav-bar title="数据迁移" bgColor="#258feb" fontColor="#fff"></z-nav-bar>
|
||
<view class="migrate-tips">迁移后不可恢复，请谨慎操作！</view>
|
||
|
||
<view class="code-wrap">
|
||
<view class="account">账号：{{ userInfo.tel || userInfo.email}}</view>
|
||
<view v-if="code" class="code-box">
|
||
<view class="code-number">{{ code }}</view>
|
||
<view><text>{{ remaining }}</text>有效<text class="uni-link" @click="handleRefresh">（刷新）</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="migrate-intro">
|
||
<view class="migrate-intro-title">迁移说明</view>
|
||
<view>1. 请在吴门国际APP中完成数据迁移，操作方式【我的】-【数据迁移】-【输入账号和移验证码】。</view>
|
||
<view>2. 数据迁移完成后，本账号数据将被清空，已购买的天医币、积分、课程、VIP等数据将转移到新账号。</view>
|
||
<view>3. 迁移过程可能需要几分钟时间，请耐心等待。</view>
|
||
<view>4. 如遇到问题，请联系客服获取帮助。</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from "@/config/requestConfig.js";
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
code: '',
|
||
remaining: '',
|
||
timer: null,
|
||
lastRefreshTime: 0, // 上次刷新时间戳
|
||
refreshCooldown: 10000 // 节流时间，3秒内只能刷新一次
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
created() {
|
||
this.countDown()
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁前清除定时器
|
||
if (this.timer) clearInterval(this.timer);
|
||
},
|
||
methods: {
|
||
getCode() {
|
||
this.$http
|
||
.post("common/user/getMigrationCode")
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.code = res.migrationCode;
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
},
|
||
async countDown() {
|
||
// 清除已有的定时器
|
||
if (this.timer) clearInterval(this.timer);
|
||
|
||
await this.getCode() // 获取验证码
|
||
|
||
// 初始化倒计时时间（3分钟 = 180秒）
|
||
let totalSeconds = 175;
|
||
|
||
// 立即更新第一次显示
|
||
this.updateRemainingTime(totalSeconds);
|
||
|
||
// 设置每秒执行的定时器
|
||
this.timer = setInterval(() => {
|
||
totalSeconds--;
|
||
if (totalSeconds <= 0) {
|
||
this.countDown()
|
||
return;
|
||
}
|
||
this.updateRemainingTime(totalSeconds);
|
||
}, 1000);
|
||
},
|
||
updateRemainingTime(totalSeconds) {
|
||
const minutes = Math.floor(totalSeconds / 60);
|
||
const seconds = totalSeconds % 60;
|
||
this.remaining = `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
|
||
},
|
||
// 带节流的刷新方法
|
||
handleRefresh() {
|
||
const now = Date.now();
|
||
// 如果距离上次刷新时间小于节流时间，不执行刷新
|
||
if (now - this.lastRefreshTime < this.refreshCooldown) {
|
||
uni.showToast({
|
||
title: `操作太频繁，请${Math.ceil((this.refreshCooldown - (now - this.lastRefreshTime)) / 1000)}秒后再试`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 更新上次刷新时间
|
||
this.lastRefreshTime = now;
|
||
|
||
// 执行刷新
|
||
this.countDown();
|
||
|
||
// 给用户反馈
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.migrate-tips {
|
||
color: #ff0000;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.code-wrap {
|
||
margin: 0 20px;
|
||
padding: 10px 15px;
|
||
background-color: #f0f0f0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
.code-box {
|
||
display: flex;
|
||
align-items: baseline;
|
||
padding-top: 10px;
|
||
|
||
.code-number {
|
||
font-weight: bold;
|
||
font-size: 28px;
|
||
color: #000;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.migrate-intro {
|
||
margin: 20px;
|
||
.migrate-intro-title {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
</style> |