|
|
@@ -0,0 +1,255 @@
|
|
|
+<!-- 目前先征用为绕过门户账号登录的内部通道了hhh -->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="login-style">
|
|
|
+ <div class="box-vessel">
|
|
|
+ <div class="vessel-title">
|
|
|
+ 开发者账号注册
|
|
|
+ </div>
|
|
|
+ <div class="vessel-desc" style="text-align: center; font: 300; color: #66ccff; margin-bottom: 16px;"> 🚀 内部测试通道 无需门户账号</div>
|
|
|
+ <el-form
|
|
|
+ :model="data"
|
|
|
+ :rules="rules"
|
|
|
+ ref="form"
|
|
|
+ label-width="0"
|
|
|
+ >
|
|
|
+ <el-form-item prop="account">
|
|
|
+ <el-input
|
|
|
+ v-model="data.account"
|
|
|
+ placeholder="请输入账号"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ v-model="data.password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="role">
|
|
|
+ <el-select v-model="data.role" placeholder="请选择角色">
|
|
|
+ <!-- <el-option label="管理员" value="ADMIN"></el-option> -->
|
|
|
+ <el-option label="教师" value="TEACHER"></el-option>
|
|
|
+ <el-option label="学生" value="STUDENT"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="description">
|
|
|
+ <el-input
|
|
|
+ v-model="data.description"
|
|
|
+ placeholder="请输入描述"
|
|
|
+
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="btn-box">
|
|
|
+ <!-- <el-button class="login-button" @click="handleLogin">登录</el-button> -->
|
|
|
+ <div class="login-button" style="background-color: #50a879;" @click="handleCreateAccount">🛸 注册！</div>
|
|
|
+ <div class="back" @click="handleBack">返回</div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script setup lang="ts">
|
|
|
+ // import "@/views/LoginPage/component/index.scss"
|
|
|
+ import {reactive} from "vue";
|
|
|
+ import router from "@/router";
|
|
|
+ import {ElMessage} from "element-plus";
|
|
|
+ import {useStore} from "@/store";
|
|
|
+ import useApis from "@/apis";
|
|
|
+
|
|
|
+ const store = useStore();
|
|
|
+ const apis = useApis();
|
|
|
+
|
|
|
+ const data = reactive({
|
|
|
+ account: '',
|
|
|
+ password: '',
|
|
|
+ role: '',
|
|
|
+ description: '',
|
|
|
+ });
|
|
|
+
|
|
|
+ const rules = reactive({
|
|
|
+ account: [
|
|
|
+ { required: true, message: '账号不能为空', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: '密码不能为空', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ description: [
|
|
|
+ { required: true, message: '请说明账号用途', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ //管理员登录相关 暂时弃用
|
|
|
+ const handleLogin = () => {
|
|
|
+
|
|
|
+ //1.判断是不是管理员账号
|
|
|
+ if(data.account != "ADMIN"){
|
|
|
+ ElMessage({
|
|
|
+ message: '用户名或密码错误',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2.登录
|
|
|
+ apis.login({officialNumber: data.account, password: data.password})
|
|
|
+ .then((_res:any) => {
|
|
|
+ const data = _res.data.data
|
|
|
+ if (_res.data.code === 200) {
|
|
|
+ store.setUser(data);
|
|
|
+ store.setToken(data?.token)
|
|
|
+ localStorage.setItem('Authorization', data?.token);
|
|
|
+ localStorage.setItem('User', data);
|
|
|
+ // router.push("/")
|
|
|
+ ElMessage({
|
|
|
+ message: '登录成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ router.push(`/manager/course`)
|
|
|
+ } else if(_res.data.code === 400){
|
|
|
+ ElMessage({
|
|
|
+ message: '用户名或密码错误',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((_err:any) => {
|
|
|
+ ElMessage({
|
|
|
+ message: '网络错误',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ console.log("登陆失败", _err)
|
|
|
+ })
|
|
|
+ };
|
|
|
+ // TODO: 开发者账号注册相关
|
|
|
+ //登录
|
|
|
+
|
|
|
+ const emit = defineEmits(['register','back']);
|
|
|
+
|
|
|
+ //提交注册
|
|
|
+ const handleCreateAccount = () => {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleBack = () => {
|
|
|
+ emit('back');
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss">
|
|
|
+ .login-style {
|
|
|
+
|
|
|
+ .box-vessel {
|
|
|
+ padding: 20px 32px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
+ // box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.20);
|
|
|
+ .vessel-title{
|
|
|
+ font-size: 24px;
|
|
|
+ // margin-top: 16px;
|
|
|
+ text-shadow: 0px -1px 16px rgba(0, 0, 0, 0.20);
|
|
|
+ }
|
|
|
+ .vessel-desc{
|
|
|
+ margin-top: auto ;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-button-active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: var(--main-color);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(#1677ff, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ // height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ // flex: 1 0 0;
|
|
|
+
|
|
|
+ .login-button{
|
|
|
+ width: 60%;
|
|
|
+ color: #fff;
|
|
|
+ // background-color: var(--main-color);
|
|
|
+ border-radius: 50px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ line-height: 32px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.03);
|
|
|
+ box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.20);
|
|
|
+
|
|
|
+ &.hover {
|
|
|
+ background-color: rgba(#1677ff, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: rgba(#1677ff, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .back{
|
|
|
+ text-align: center;
|
|
|
+ color:#8e8e8e;
|
|
|
+ font-size: 14px;
|
|
|
+ // margin-top: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .forget {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: right;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--main-color)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .sign {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #8e8e8e;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .verify-code {
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: space-between; /* 两端对齐 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ flex: 1; /* 让表单项占据剩余空间 */
|
|
|
+ margin-right: 10px; /* 给表单项和按钮之间添加一些间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ white-space: nowrap; /* 防止按钮文本换行 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <script lang="ts">
|
|
|
+ export default {
|
|
|
+ name: "AdminRegisterForm"
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
xiaoyu10