Skip to content

P
pptist
Commit eae0d90f authored by 罗超's avatar 罗超
Browse files
Options

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

parent 8de42d27
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 33 deletions
src/services/UserService.ts
View file @ eae0d90f
......@@ -18,10 +18,16 @@ class UserServices{
return Api.Post("travel_login_password",msg)
}
static async RegistUserByPassAsync(account:string,pwd:string,nickname:string,token:string,tid:string=''):Promise<HttpResponse>{
let msg:any = {account,pwd,nickname,"v_token":token}
// static async RegistUserByPassAsync(account:string,pwd:string,nickname:string,token:string,tid:string=''):Promise<HttpResponse>{
// 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
return Api.Post("travel_user_regist_pwd",msg)
return Api.Post("travel_user_regist",msg)
}
static async GetProductAsync():Promise<HttpResponse>{
......@@ -67,9 +73,9 @@ class UserServices{
let msg = {}
return Api.Post("travel_sample_count",msg)
}
static async CreateTemplateTokenAsync():Promise<HttpResponse>{
let msg = {}
return Api.Post("travel_temp_token",msg)
static async SendRegistCodeAsync(mail:string):Promise<HttpResponse>{
let msg = {mail}
return Api.Post("travel_regist_mail",msg)
}
}
export default UserServices;
\ No newline at end of file
src/views/Auth/Login.vue
View file @ eae0d90f
......@@ -27,7 +27,7 @@
<div style="font-size: 36px; " class="text-dark">登录</div>
<div class="text-info text-small">你的创作空间</div>
<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">
<img src="../../assets/img/wechat.png" alt="">
<span class="q-ml-md">使用微信扫码登录</span>
......@@ -36,11 +36,11 @@
<img src="../../assets/img/phone.png" alt="">
<span class="q-ml-md">使用短信验证登录</span>
</div>
</div>
<el-divider> <span class="text-info">或者账号登录</span> </el-divider>
</div> -->
<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-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="password">
<el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password class="q-mt-lg"/>
......@@ -59,7 +59,7 @@
</template>
<template v-if="multipleUsers && multipleUsers.length>0">
<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>
<div class="q-ml-lg">
<div class="text-weight-bold" style="font-size: 20px;">{{ x.nickname }}</div>
......@@ -118,7 +118,7 @@ if(localStorage.getItem("invite")){
}
const rules = reactive<FormRules<RuleForm>>({
account: [
{ required: true, message: '请输入你的账号', trigger: 'blur' },
{ required: true, message: '请输入你的账号/邮箱', trigger: 'blur' },
{ min: 6, message: '请输入正确的账号', trigger: 'blur' },
],
password: [
......@@ -128,14 +128,15 @@ const rules = reactive<FormRules<RuleForm>>({
})
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
if (!formEl || loading.value) return
loading.value=true
await formEl.validate(async (valid) => {
if (valid) {
await userLoginHandler()
}
loading.value=false
})
loading.value=false
}
const cancelInviteHandler = ()=>{
inviteInfo.value = null
......
src/views/Auth/Regist.vue
View file @ eae0d90f
......@@ -10,11 +10,24 @@
<div class="text-small" style="color:#404B5B;margin-top:0.99vw">创建账户，开启行程设计第一步</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-item label="" prop="nickname">
<!-- <el-form-item label="" prop="nickname">
<el-input v-model="model.nickname" placeholder="昵称" class="q-mt-lg" />
</el-form-item>
<el-form-item label="" prop="account">
</el-form-item> -->
<!-- <el-form-item label="" prop="account">
<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 label="" prop="password">
<el-input v-model="model.password" type="password" placeholder="设置密码" autocomplete="new-password" show-password/>
......@@ -47,21 +60,30 @@ import { ApiResult } from '@/configs/axios';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
interface RuleForm {
account: string
//account: string
password: string
nickname: string
//nickname: string
confirmPwd:string
mail:string,
code:string
}
const model = ref<{account:string,password:string,nickname:string,confirmPwd:string}>({
account:'',
const model = ref<{password:string,confirmPwd:string,mail:string,code:string}>({
//account:'',
password:'',
nickname:'',
confirmPwd:''
//nickname:'',
confirmPwd:'',
mail:'',
code:''
})
const validateToken = ref('')
const registFormRef = ref<FormInstance>()
const invisibleHcaptcha = ref<VueHcaptcha|null>(null)
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) => {
if (value === '') {
......@@ -72,22 +94,38 @@ const validateConfirmPassword = (rule: any, value: any, callback: any) => {
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>>({
account: [
{ required: true, message: '请输入你的账号', trigger: 'blur' },
{ min: 6, message: '账号至少是6位', trigger: 'blur' },
{ max: 16, message: '账号最长只能是16位', trigger: 'blur' },
],
nickname: [
{ required: true, message: '请输入你的昵称', trigger: 'blur' },
{ max: 8, message: '昵称最长只能是8位', trigger: 'blur' },
],
// account: [
// { required: true, message: '请输入你的账号', trigger: 'blur' },
// { min: 6, message: '账号至少是6位', trigger: 'blur' },
// { max: 16, message: '账号最长只能是16位', trigger: 'blur' },
// ],
// nickname: [
// { required: true, message: '请输入你的昵称', trigger: 'blur' },
// { max: 8, message: '昵称最长只能是8位', trigger: 'blur' },
// ],
password: [
{ required: true, message: '请输入你的密码', trigger: 'blur' },
{ min: 6,max:20, message: '密码的长度应为6-20位', trigger: 'blur' },
],
confirmPwd:[
{ 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) => {
}
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){
ElMessage.success({message:'注册成功，正在跳转'})
setTimeout(() => {
......@@ -127,6 +165,19 @@ const verifyHandler = (token:string,ekey:string)=>{
const redicetToLogin = ()=>{
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>
<style>
.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