mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-29 03:43:56 +08:00
Manager code login (#276)
* update：增加前端设计图 * 前端代码优化 * update:底部信息纠正 * 增加：flyio * update:去除org.quartz * update:登陆功能 * aliyunTTS常联token * 新增aliyunTTS长期Token方式 * 超时错误处理 * 本地编译文件 * 验证码获取 * 验证码获取测试 * 验证码展示 * 登录成功 * delete 测试代码 * 注册页面 * Register 风格统一 * web验证码登录注册 * 登录注册功能 * update:登陆注册api结果优化 * delete:删除未用到的代码 --------- Co-authored-by: hrz <1710360675@qq.com> Co-authored-by: CGD <3030332422@qq.com> Co-authored-by: 欣南科技 <huangrongzhuang@xin-nan.com>
This commit is contained in:
lucky_feng
co-authored by
hrz
CGD
欣南科技
hrz
CGD
欣南科技
parent
a8c6c7cb36
commit
0a26ad8925
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<el-container style="height: 100%;">
|
||||
<!-- 保持相同的头部 -->
|
||||
<el-header>
|
||||
<div style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
|
||||
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;"/>
|
||||
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;"/>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-main style="position: relative;">
|
||||
<div class="login-box">
|
||||
<!-- 修改标题部分 -->
|
||||
<div style="display: flex;align-items: center;gap: 20px;margin-bottom: 39px;padding: 0 30px;">
|
||||
<img src="@/assets/login/hi.png" alt="" style="width: 34px;height: 34px;"/>
|
||||
<div class="login-text">注册</div>
|
||||
<div class="login-welcome">
|
||||
WELCOME TO REGISTER
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 30px;">
|
||||
<!-- 用户名输入框 -->
|
||||
<div class="input-box">
|
||||
<img src="@/assets/login/username.png" alt="" class="input-icon"/>
|
||||
<el-input v-model="form.username" placeholder="请输入用户名"/>
|
||||
</div>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<div class="input-box">
|
||||
<img src="@/assets/login/password.png" alt="" class="input-icon"/>
|
||||
<el-input v-model="form.password" type="password" placeholder="请输入密码"/>
|
||||
</div>
|
||||
|
||||
<!-- 新增确认密码 -->
|
||||
<div class="input-box">
|
||||
<img src="@/assets/login/password.png" alt="" class="input-icon"/>
|
||||
<el-input v-model="form.confirmPassword" type="password" placeholder="请确认密码"/>
|
||||
</div>
|
||||
|
||||
<!-- 验证码部分保持相同 -->
|
||||
<div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
|
||||
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
|
||||
<img src="@/assets/login/shield.png" alt="" class="input-icon"/>
|
||||
<el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;"/>
|
||||
</div>
|
||||
<img v-if="captchaUrl"
|
||||
:src="captchaUrl"
|
||||
alt="验证码"
|
||||
style="width: 150px; height: 40px; cursor: pointer;"
|
||||
@click="fetchCaptcha"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 修改底部链接 -->
|
||||
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;margin-top: 20px;">
|
||||
<div style="cursor: pointer;" @click="goToLogin">已有账号？立即登录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改按钮文本 -->
|
||||
<div class="login-btn" @click="register">立即注册</div>
|
||||
|
||||
<!-- 保持相同的协议声明 -->
|
||||
<div style="font-size: 14px;color: #979db1;">
|
||||
注册即同意
|
||||
<div style="display: inline-block;color: #5778FF;cursor: pointer;">《用户协议》</div>
|
||||
和
|
||||
<div style="display: inline-block;color: #5778FF;cursor: pointer;">《隐私政策》</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
<!-- 保持相同的页脚 -->
|
||||
<el-footer>
|
||||
<div style="font-size: 12px;font-weight: 400;color: #979db1;">
|
||||
©2025 xiaozhi-esp32-server
|
||||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {goToPage, showDanger, showSuccess} from '@/utils'
|
||||
import Api from '@/apis/api';
|
||||
|
||||
export default {
|
||||
name: 'register',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
captcha: '',
|
||||
uuid: ''
|
||||
},
|
||||
captchaUrl: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCaptcha();
|
||||
},
|
||||
methods: {
|
||||
// 复用验证码获取方法
|
||||
fetchCaptcha() {
|
||||
this.form.uuid = Date.now().toString()
|
||||
Api.user.getCaptcha(this.form.uuid, (res) => {
|
||||
if (res.status === 200) {
|
||||
const blob = new Blob([res.data], {type: res.data.type});
|
||||
this.captchaUrl = URL.createObjectURL(blob);
|
||||
|
||||
} else {
|
||||
console.error('验证码加载异常:', error);
|
||||
showDanger('验证码加载失败，点击刷新');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 注册逻辑
|
||||
register() {
|
||||
if (!this.form.username.trim()) {
|
||||
showDanger('用户名不能为空')
|
||||
return
|
||||
}
|
||||
if (!this.form.password.trim()) {
|
||||
showDanger('密码不能为空')
|
||||
return
|
||||
}
|
||||
if (this.form.password !== this.form.confirmPassword) {
|
||||
showDanger('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
if (!this.form.captcha.trim()) {
|
||||
showDanger('验证码不能为空')
|
||||
return
|
||||
}
|
||||
Api.user.register(this.form, ({data}) => {
|
||||
console.log(data)
|
||||
if (data.code === 0) {
|
||||
showSuccess('注册成功！')
|
||||
goToPage('/login')
|
||||
} else {
|
||||
showDanger(data.msg || '注册失败')
|
||||
this.fetchCaptcha()
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
goToLogin() {
|
||||
goToPage('/login')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './auth.scss'; // 修改为导入新建的SCSS文件
|
||||
</style>
|
||||
Reference in New Issue
Block a user