Commit eae0d90f authored by 罗超's avatar 罗超

修改登录和注册,支持邮箱

parent 8de42d27
...@@ -18,10 +18,16 @@ class UserServices{ ...@@ -18,10 +18,16 @@ class UserServices{
return Api.Post("travel_login_password",msg) return Api.Post("travel_login_password",msg)
} }
static async RegistUserByPassAsync(account:string,pwd:string,nickname:string,token:string,tid:string=''):Promise<HttpResponse>{ // static async RegistUserByPassAsync(account:string,pwd:string,nickname:string,token:string,tid:string=''):Promise<HttpResponse>{
let msg:any = {account,pwd,nickname,"v_token":token} // let msg:any = {account,pwd,nickname,"v_token":token}
// if(tid!='') msg.tid = tid
// return Api.Post("travel_user_regist_pwd",msg)
// }
static async RegistUserAsync(mail:string,pwd:string,code:string,token:string,tid:string=''):Promise<HttpResponse>{
let msg:any = {mail,code,pwd,"v_token":token}
if(tid!='') msg.tid = tid if(tid!='') msg.tid = tid
return Api.Post("travel_user_regist_pwd",msg) return Api.Post("travel_user_regist",msg)
} }
static async GetProductAsync():Promise<HttpResponse>{ static async GetProductAsync():Promise<HttpResponse>{
...@@ -67,9 +73,9 @@ class UserServices{ ...@@ -67,9 +73,9 @@ class UserServices{
let msg = {} let msg = {}
return Api.Post("travel_sample_count",msg) return Api.Post("travel_sample_count",msg)
} }
static async CreateTemplateTokenAsync():Promise<HttpResponse>{ static async SendRegistCodeAsync(mail:string):Promise<HttpResponse>{
let msg = {} let msg = {mail}
return Api.Post("travel_temp_token",msg) return Api.Post("travel_regist_mail",msg)
} }
} }
export default UserServices; export default UserServices;
\ No newline at end of file
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div style="font-size: 36px; " class="text-dark">登录</div> <div style="font-size: 36px; " class="text-dark">登录</div>
<div class="text-info text-small">你的创作空间</div> <div class="text-info text-small">你的创作空间</div>
<template v-if="!multipleUsers || multipleUsers.length==0"> <template v-if="!multipleUsers || multipleUsers.length==0">
<div class="q-py-xl row items-center full-width"> <!-- <div class="q-py-xl row items-center full-width">
<div class="login-type row items-center col"> <div class="login-type row items-center col">
<img src="../../assets/img/wechat.png" alt=""> <img src="../../assets/img/wechat.png" alt="">
<span class="q-ml-md">使用微信扫码登录</span> <span class="q-ml-md">使用微信扫码登录</span>
...@@ -36,11 +36,11 @@ ...@@ -36,11 +36,11 @@
<img src="../../assets/img/phone.png" alt=""> <img src="../../assets/img/phone.png" alt="">
<span class="q-ml-md">使用短信验证登录</span> <span class="q-ml-md">使用短信验证登录</span>
</div> </div>
</div> </div> -->
<el-divider> <span class="text-info">或者账号登录</span> </el-divider> <el-divider> <span class="text-info">使用邮箱或者账号登录</span> </el-divider>
<el-form ref="loginFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg"> <el-form ref="loginFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg">
<el-form-item label="" prop="account"> <el-form-item label="" prop="account">
<el-input v-model="model.account" placeholder="账号" /> <el-input v-model="model.account" placeholder="账号/邮箱" />
</el-form-item> </el-form-item>
<el-form-item label="" prop="password"> <el-form-item label="" prop="password">
<el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password class="q-mt-lg"/> <el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password class="q-mt-lg"/>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</template> </template>
<template v-if="multipleUsers && multipleUsers.length>0"> <template v-if="multipleUsers && multipleUsers.length>0">
<el-divider> <span class="text-info">选择你需要登录的组织</span> </el-divider> <el-divider> <span class="text-info">选择你需要登录的组织</span> </el-divider>
<div v-for="x in multipleUsers" @click="()=>model.tid=x.tid" class="light-shadow q-pa-md row items-center full-width rounded q-mt-xl cursor-pointer q-mb-md transparent-borders" :class="{'primary-borders-thin':model.tid==x.tid}"> <div v-for="x in multipleUsers" :key="x.tid" @click="()=>model.tid=x.tid" class="light-shadow q-pa-md row items-center full-width rounded q-mt-xl cursor-pointer q-mb-md transparent-borders" :class="{'primary-borders-thin':model.tid==x.tid}">
<el-avatar :size="30" :src="x.logo"></el-avatar> <el-avatar :size="30" :src="x.logo"></el-avatar>
<div class="q-ml-lg"> <div class="q-ml-lg">
<div class="text-weight-bold" style="font-size: 20px;">{{ x.nickname }}</div> <div class="text-weight-bold" style="font-size: 20px;">{{ x.nickname }}</div>
...@@ -118,7 +118,7 @@ if(localStorage.getItem("invite")){ ...@@ -118,7 +118,7 @@ if(localStorage.getItem("invite")){
} }
const rules = reactive<FormRules<RuleForm>>({ const rules = reactive<FormRules<RuleForm>>({
account: [ account: [
{ required: true, message: '请输入你的账号', trigger: 'blur' }, { required: true, message: '请输入你的账号/邮箱', trigger: 'blur' },
{ min: 6, message: '请输入正确的账号', trigger: 'blur' }, { min: 6, message: '请输入正确的账号', trigger: 'blur' },
], ],
password: [ password: [
...@@ -128,14 +128,15 @@ const rules = reactive<FormRules<RuleForm>>({ ...@@ -128,14 +128,15 @@ const rules = reactive<FormRules<RuleForm>>({
}) })
const submitForm = async (formEl: FormInstance | undefined) => { const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl || loading.value) return
loading.value=true loading.value=true
await formEl.validate(async (valid) => { await formEl.validate(async (valid) => {
if (valid) { if (valid) {
await userLoginHandler() await userLoginHandler()
} }
})
loading.value=false loading.value=false
})
} }
const cancelInviteHandler = ()=>{ const cancelInviteHandler = ()=>{
inviteInfo.value = null inviteInfo.value = null
......
...@@ -10,11 +10,24 @@ ...@@ -10,11 +10,24 @@
<div class="text-small" style="color:#404B5B;margin-top:0.99vw">创建账户,开启行程设计第一步</div> <div class="text-small" style="color:#404B5B;margin-top:0.99vw">创建账户,开启行程设计第一步</div>
</div> </div>
<el-form ref="registFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg" :disabled="loading"> <el-form ref="registFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg" :disabled="loading">
<el-form-item label="" prop="nickname"> <!-- <el-form-item label="" prop="nickname">
<el-input v-model="model.nickname" placeholder="昵称" class="q-mt-lg" /> <el-input v-model="model.nickname" placeholder="昵称" class="q-mt-lg" />
</el-form-item> </el-form-item> -->
<el-form-item label="" prop="account"> <!-- <el-form-item label="" prop="account">
<el-input v-model="model.account" placeholder="账号" /> <el-input v-model="model.account" placeholder="账号" />
</el-form-item> -->
<el-form-item label="" prop="mail">
<el-input v-model="model.mail" placeholder="邮箱">
<template #suffix>
<el-button link :disabled="!mailRegex.test(model.mail)" :loading="sending" v-if="!isCountdown" @click="sendVerifyCode">{{ isSend?'重新发送':'发送验证码' }}</el-button>
<template v-else>
<el-countdown title="" format="ss" :value="countValue" value-style="font-size:14px;color:#f89c53;" class="inline q-mx-sm" @finish="()=>isCountdown=false" />s
</template>
</template>
</el-input>
</el-form-item>
<el-form-item label="" prop="code">
<el-input v-model="model.code" placeholder="验证码" />
</el-form-item> </el-form-item>
<el-form-item label="" prop="password"> <el-form-item label="" prop="password">
<el-input v-model="model.password" type="password" placeholder="设置密码" autocomplete="new-password" show-password/> <el-input v-model="model.password" type="password" placeholder="设置密码" autocomplete="new-password" show-password/>
...@@ -47,21 +60,30 @@ import { ApiResult } from '@/configs/axios'; ...@@ -47,21 +60,30 @@ import { ApiResult } from '@/configs/axios';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"; import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
interface RuleForm { interface RuleForm {
account: string //account: string
password: string password: string
nickname: string //nickname: string
confirmPwd:string confirmPwd:string
mail:string,
code:string
} }
const model = ref<{account:string,password:string,nickname:string,confirmPwd:string}>({ const model = ref<{password:string,confirmPwd:string,mail:string,code:string}>({
account:'', //account:'',
password:'', password:'',
nickname:'', //nickname:'',
confirmPwd:'' confirmPwd:'',
mail:'',
code:''
}) })
const validateToken = ref('') const validateToken = ref('')
const registFormRef = ref<FormInstance>() const registFormRef = ref<FormInstance>()
const invisibleHcaptcha = ref<VueHcaptcha|null>(null) const invisibleHcaptcha = ref<VueHcaptcha|null>(null)
const loading = ref(false) const loading = ref(false)
const sending = ref(false)
const isSend = ref(false)
const isCountdown = ref(false)
const countValue = ref<number>(0)
const mailRegex = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
const validateConfirmPassword = (rule: any, value: any, callback: any) => { const validateConfirmPassword = (rule: any, value: any, callback: any) => {
if (value === '') { if (value === '') {
...@@ -72,22 +94,38 @@ const validateConfirmPassword = (rule: any, value: any, callback: any) => { ...@@ -72,22 +94,38 @@ const validateConfirmPassword = (rule: any, value: any, callback: any) => {
callback() callback()
} }
} }
const validateMail = (rule:any,value:any,callback:any)=>{
if (value === '') {
callback(new Error('请输入你的邮箱账户'))
} else if (!mailRegex.test(value)) {
callback(new Error("请输入正确的邮箱账户"))
} else {
callback()
}
}
const rules = reactive<FormRules<RuleForm>>({ const rules = reactive<FormRules<RuleForm>>({
account: [ // account: [
{ required: true, message: '请输入你的账号', trigger: 'blur' }, // { required: true, message: '请输入你的账号', trigger: 'blur' },
{ min: 6, message: '账号至少是6位', trigger: 'blur' }, // { min: 6, message: '账号至少是6位', trigger: 'blur' },
{ max: 16, message: '账号最长只能是16位', trigger: 'blur' }, // { max: 16, message: '账号最长只能是16位', trigger: 'blur' },
], // ],
nickname: [ // nickname: [
{ required: true, message: '请输入你的昵称', trigger: 'blur' }, // { required: true, message: '请输入你的昵称', trigger: 'blur' },
{ max: 8, message: '昵称最长只能是8位', trigger: 'blur' }, // { max: 8, message: '昵称最长只能是8位', trigger: 'blur' },
], // ],
password: [ password: [
{ required: true, message: '请输入你的密码', trigger: 'blur' }, { required: true, message: '请输入你的密码', trigger: 'blur' },
{ min: 6,max:20, message: '密码的长度应为6-20位', trigger: 'blur' }, { min: 6,max:20, message: '密码的长度应为6-20位', trigger: 'blur' },
], ],
confirmPwd:[ confirmPwd:[
{ validator: validateConfirmPassword, trigger: 'blur' } { validator: validateConfirmPassword, trigger: 'blur' }
],
mail:[
{ validator: validateMail, trigger: 'blur' }
],
code:[
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ min: 6,max:6, message: '验证码应为6位', trigger: 'blur' },
] ]
}) })
...@@ -109,7 +147,7 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -109,7 +147,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
} }
const registHandler = async () =>{ const registHandler = async () =>{
const response = await UserServices.RegistUserByPassAsync(model.value.account,model.value.password,model.value.nickname,validateToken.value) const response = await UserServices.RegistUserAsync(model.value.mail,model.value.password,model.value.code,validateToken.value)
if(response.data.resultCode == ApiResult.SUCCESS){ if(response.data.resultCode == ApiResult.SUCCESS){
ElMessage.success({message:'注册成功,正在跳转'}) ElMessage.success({message:'注册成功,正在跳转'})
setTimeout(() => { setTimeout(() => {
...@@ -127,6 +165,19 @@ const verifyHandler = (token:string,ekey:string)=>{ ...@@ -127,6 +165,19 @@ const verifyHandler = (token:string,ekey:string)=>{
const redicetToLogin = ()=>{ const redicetToLogin = ()=>{
location.href='/login' location.href='/login'
} }
const sendVerifyCode = async () => {
if(!mailRegex.test(model.value.mail) || sending.value) return
sending.value= true
const response = await UserServices.SendRegistCodeAsync(model.value.mail)
if(response.data.resultCode == ApiResult.SUCCESS){
isCountdown.value = true
countValue.value = Date.now() + 1000 * 60
isSend.value = true
}
sending.value= false
}
</script> </script>
<style> <style>
.regist-box{ .regist-box{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment