|
@@ -30,9 +30,16 @@
|
|
|
clearable
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="username" label="邮箱:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
|
+ <el-form-item prop="username" label="用户名:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
|
<el-input
|
|
|
v-model="registerForm.username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="email" label="邮箱:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
|
+ <el-input
|
|
|
+ v-model="registerForm.email"
|
|
|
placeholder="请输入邮箱"
|
|
|
clearable
|
|
|
/>
|
|
@@ -50,7 +57,12 @@
|
|
|
@paste="onPaste"
|
|
|
:ref="el => inputRefs[index] = el"
|
|
|
/>
|
|
|
- <el-button @click="getAuthCode">获取验证码</el-button>
|
|
|
+ <el-button
|
|
|
+ :disabled="countdown > 0"
|
|
|
+ @click="getAuthCode"
|
|
|
+ >
|
|
|
+ {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
|
|
|
<el-form-item prop="password" label="设置密码:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
@@ -131,9 +143,9 @@
|
|
|
@keyup.enter="handleRegister"
|
|
|
label-position = "left"
|
|
|
>
|
|
|
- <el-form-item prop="username" label="邮箱:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
|
+ <el-form-item prop="email" label="邮箱:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
|
<el-input
|
|
|
- v-model="registerForm.username"
|
|
|
+ v-model="registerForm.email"
|
|
|
placeholder="请输入邮箱"
|
|
|
clearable
|
|
|
/>
|
|
@@ -151,7 +163,12 @@
|
|
|
@paste="onPaste"
|
|
|
:ref="el => inputRefs[index] = el"
|
|
|
/>
|
|
|
- <el-button @click="getAuthCode2">获取验证码</el-button>
|
|
|
+ <el-button
|
|
|
+ :disabled="countdown > 0"
|
|
|
+ @click="getAuthCode2"
|
|
|
+ >
|
|
|
+ {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
|
|
|
<el-form-item prop="password" label="设置密码:" :label-width = "registerlabel" style="margin-bottom: 20px;">
|
|
@@ -200,8 +217,8 @@
|
|
|
</template>
|
|
|
|
|
|
<div class="register-success">
|
|
|
- <div style="font-size: 18px;">登录账号: </div>
|
|
|
- <div style="font-size: 16px;">{{ registerForm.username }}</div>
|
|
|
+ <!-- <div style="font-size: 18px;">登录账号: </div>
|
|
|
+ <div style="font-size: 16px;">{{ registerForm.username }}</div> -->
|
|
|
<el-button
|
|
|
class="register-btn"
|
|
|
@click="goToLogin"
|
|
@@ -226,6 +243,7 @@ import { ElMessage } from 'element-plus'
|
|
|
import router from "@/router"
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import { request,enPassword } from "@/utils/request"
|
|
|
+import secureStorage from '@/utils/secureStorage'
|
|
|
|
|
|
import { getToken, setToken, setUserId} from "@/utils/token"
|
|
|
|
|
@@ -245,13 +263,18 @@ const timer = ref(null); // 存储定时器
|
|
|
const codeLength = 6
|
|
|
const codeList = ref(Array(codeLength).fill('')) // ['','','','','','']
|
|
|
|
|
|
+// 倒计时状态
|
|
|
+const countdown = ref(0)
|
|
|
+let timer2 = null
|
|
|
+
|
|
|
// 获取多个 el-input 的引用
|
|
|
const inputRefs = ref([])
|
|
|
|
|
|
// 注册表单数据
|
|
|
const registerForm = reactive({
|
|
|
company: '',
|
|
|
- username: '',
|
|
|
+ username: secureStorage.get('registerUsername') || '',
|
|
|
+ email: '',
|
|
|
password: '',
|
|
|
repassword: ''
|
|
|
})
|
|
@@ -262,6 +285,10 @@ const loading = ref(false)
|
|
|
// 表单验证规则
|
|
|
const registerRules = reactive({
|
|
|
username: [
|
|
|
+ { required: true, message: '', trigger: 'blur' },
|
|
|
+ { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
{ required: true, message: '', trigger: 'blur' },
|
|
|
{
|
|
|
pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
|
|
@@ -323,21 +350,32 @@ const onPaste = (event) => {
|
|
|
event.preventDefault()
|
|
|
}
|
|
|
|
|
|
+// 开始倒计时
|
|
|
+const startCountdown = () => {
|
|
|
+ countdown.value = 60
|
|
|
+ timer2 = setInterval(() => {
|
|
|
+ countdown.value--
|
|
|
+ if (countdown.value <= 0) {
|
|
|
+ clearInterval(timer2)
|
|
|
+ timer2 = null
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
|
|
|
// 获取验证码(注册)
|
|
|
const getAuthCode = () => {
|
|
|
- if(!registerForm.username) {
|
|
|
+ if(!registerForm.email) {
|
|
|
return;
|
|
|
}
|
|
|
const params = {
|
|
|
transCode: "A00001",
|
|
|
- mailOrPhone: registerForm.username,
|
|
|
+ mailOrPhone: registerForm.email,
|
|
|
type: '1',
|
|
|
channel: '2'
|
|
|
}
|
|
|
request(params)
|
|
|
.then((res) => {
|
|
|
-
|
|
|
+ startCountdown()
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
ElMessage.error("获取验证码失败");
|
|
@@ -345,18 +383,18 @@ const getAuthCode = () => {
|
|
|
}
|
|
|
// 获取验证码(找回密码)
|
|
|
const getAuthCode2 = () => {
|
|
|
- if(!registerForm.username) {
|
|
|
+ if(!registerForm.email) {
|
|
|
return;
|
|
|
}
|
|
|
const params = {
|
|
|
transCode: "A00001",
|
|
|
- mailOrPhone: registerForm.username,
|
|
|
+ mailOrPhone: registerForm.email,
|
|
|
type: '2',
|
|
|
channel: '2'
|
|
|
}
|
|
|
request(params)
|
|
|
.then((res) => {
|
|
|
-
|
|
|
+ startCountdown()
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
ElMessage.error("获取验证码失败");
|
|
@@ -382,13 +420,14 @@ const handleRegister = () => {
|
|
|
transCode: "A00003",
|
|
|
userName: registerForm.username,
|
|
|
password: enPassword(registerForm.password),
|
|
|
- mailOrPhone: registerForm.username,
|
|
|
+ mailOrPhone: registerForm.email,
|
|
|
channel: "2",
|
|
|
verificationCode: code,
|
|
|
}
|
|
|
request(params)
|
|
|
.then((res) => {
|
|
|
- pagechange.value = 'registerSuccess';
|
|
|
+ secureStorage.set('registerUsername', registerForm.username)
|
|
|
+ router.push({ path: "/register", query:{ page: 'registerSuccess' } })
|
|
|
loginTimer();
|
|
|
})
|
|
|
.catch((err) => {
|
|
@@ -412,7 +451,7 @@ const loginTimer = () => {
|
|
|
if (timer.value) {
|
|
|
clearTimeout(timer.value);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
timer.value = setTimeout(() => {
|
|
|
try {
|
|
|
goToLogin();
|
|
@@ -428,6 +467,9 @@ const goToLogin = () => {
|
|
|
clearTimeout(timer.value); // 跳转前清除定时器
|
|
|
timer.value = null;
|
|
|
}
|
|
|
+
|
|
|
+ secureStorage.remove('registerUsername')
|
|
|
+
|
|
|
router.push({ path: '/login' })
|
|
|
}
|
|
|
|
|
@@ -456,7 +498,7 @@ const handleRePwd = () => {
|
|
|
const params = {
|
|
|
transCode: "B00026",
|
|
|
newPassword: enPassword(registerForm.password),
|
|
|
- mailOrPhone: registerForm.username,
|
|
|
+ mailOrPhone: registerForm.email,
|
|
|
verificationCode: code,
|
|
|
}
|
|
|
request(params)
|
|
@@ -486,6 +528,7 @@ onUnmounted(() => {
|
|
|
if (timer.value) {
|
|
|
clearTimeout(timer.value);
|
|
|
}
|
|
|
+ if (timer2) clearInterval(timer)
|
|
|
});
|
|
|
</script>
|
|
|
|