mirror of
https://gitee.com/beecue/fastbee.git
synced 2026-03-21 22:14:50 +08:00
feat(三方登录)：新增微信登录功能和三方登录页面配置
This commit is contained in:
Zhunianya
@@ -93,12 +93,6 @@ export function bindLogin(data) {
|
||||
});
|
||||
}
|
||||
|
||||
export function getErrorMsg(errorId) {
|
||||
return request({
|
||||
url: '/auth/getErrorMsg/' + errorId,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 三方登录注册绑定
|
||||
@@ -113,3 +107,103 @@ export function bindRegister(data) {
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
//短信登录获取验证码
|
||||
export function getSmsLoginCaptcha(phoneNumber) {
|
||||
return request({
|
||||
url: '/notify/smsLoginCaptcha?phoneNumber=' + phoneNumber,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 短信登录
|
||||
export function smsLogin(data) {
|
||||
return request({
|
||||
url: '/auth/sms/login',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
export function getErrorMsg(errorId) {
|
||||
return request({
|
||||
url: '/auth/getErrorMsg/' + errorId,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 忘记密码发送短信
|
||||
export function getSmsForgetPassword(phoneNumber) {
|
||||
return request({
|
||||
url: '/notify/smsForgetPassword?phoneNumber=' + phoneNumber,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 忘记密码重置用户密码
|
||||
export function forgetPwdReset(data) {
|
||||
return request({
|
||||
url: '/system/user/forgetPwdReset',
|
||||
method: 'put',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// ========== OAUTH 2.0 相关 ==========
|
||||
|
||||
export function getAuthorize(clientId) {
|
||||
return request({
|
||||
url: '/oauth2/authorize?clientId=' + clientId,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
export function authorize(responseType, clientId, redirectUri, state, autoApprove, checkedScopes, uncheckedScopes) {
|
||||
// 构建 scopes
|
||||
const scopes = {};
|
||||
for (const scope of checkedScopes) {
|
||||
scopes[scope] = true;
|
||||
}
|
||||
for (const scope of uncheckedScopes) {
|
||||
scopes[scope] = false;
|
||||
}
|
||||
// 发起请求
|
||||
return request({
|
||||
url: '/oauth2/authorize',
|
||||
headers: {
|
||||
'Content-type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
params: {
|
||||
response_type: responseType,
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectUri,
|
||||
state: state,
|
||||
auto_approve: autoApprove,
|
||||
scope: JSON.stringify(scopes),
|
||||
},
|
||||
method: 'post',
|
||||
});
|
||||
}
|
||||
|
||||
//登录
|
||||
export function oauthLogin(data) {
|
||||
return request({
|
||||
url: '/auth/ssoLogin',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
//修改语言
|
||||
export function changeLanguage(lang) {
|
||||
return request({
|
||||
url: '/changeLanguage',
|
||||
method: 'get',
|
||||
headers: {
|
||||
isToken: false,
|
||||
},
|
||||
params: {
|
||||
lang: lang,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
386
vue/src/views/iot/platform/index.vue
Normal file
386
vue/src/views/iot/platform/index.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<div class="iot-platform">
|
||||
<el-card v-show="showSearch" class="search-card">
|
||||
<el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="85px" class="search-form">
|
||||
<el-form-item prop="platform">
|
||||
<el-select v-model="queryParams.platform" clearable placeholder="请选择平台">
|
||||
<el-option v-for="dict in dict.type.iot_social_platform" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="status">
|
||||
<el-select v-model="queryParams.status" clearable placeholder="请选择状态">
|
||||
<el-option v-for="dict in dict.type.iot_social_platform_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div style="float: right">
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-row :gutter="10" style="margin-bottom: 16px">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:platform:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:platform:edit']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:platform:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['iot:platform:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="platformList" :border="false" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
|
||||
<el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
|
||||
<el-table-column align="left" label="平台名称" prop="platform" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.iot_social_platform" :value="scope.row.platform" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" prop="status" width="80">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.iot_social_platform_status" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="平台申请ID" align="center" prop="clientId" min-width="180" />
|
||||
<el-table-column label="跳转地址" align="left" prop="redirectUri" min-width="250" :show-overflow-tooltip="true" />
|
||||
<el-table-column align="left" label="绑定登录uri" prop="bindUri" :show-tooltip-when-overflow="true" :render-header="(h, column) => renderHeaderMethods(h, column, columnTips.bindId)" min-width="250" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="跳转登录uri"
|
||||
prop="redirectLoginUri"
|
||||
:show-tooltip-when-overflow="true"
|
||||
:render-header="(h, column) => renderHeaderMethods(h, column, columnTips.redirectLogin)"
|
||||
min-width="250"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="错误提示uri"
|
||||
prop="errorMsgUri"
|
||||
:show-tooltip-when-overflow="true"
|
||||
:render-header="(h, column) => renderHeaderMethods(h, column, columnTips.errorId)"
|
||||
min-width="250"
|
||||
/>
|
||||
<el-table-column align="center" label="创建时间" prop="createTime" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="125">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:platform:edit']">修改</el-button>
|
||||
<el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:platform:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination style="margin-bottom: 20px" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
|
||||
<!-- 添加或修改第三方登录平台控制对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="630px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
|
||||
<el-form-item label="平台名称" prop="platform">
|
||||
<el-select v-model="form.platform" placeholder="请选择平台" style="width: 400px">
|
||||
<el-option v-for="dict in dict.type.iot_social_platform" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="平台状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" style="width: 400px">
|
||||
<el-option v-for="dict in dict.type.iot_social_platform_status" :key="dict.value" :label="dict.label" :value="Number(dict.value)"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="平台申请ID" prop="clientId">
|
||||
<el-input v-model="form.clientId" placeholder="请输入平台申请ID" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="平台密钥" prop="secretKey">
|
||||
<el-input v-model="form.secretKey" placeholder="请输入平台密钥" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="认证跳转地址" prop="redirectUri">
|
||||
<el-input v-model="form.redirectUri" placeholder="请输入认证跳转地址" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定注册urL" prop="bindUri">
|
||||
<el-input v-model="form.bindUri" placeholder="请输入绑定注册 url, http://localhost/login?bindId=" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转登录URL" prop="redirectLoginUri">
|
||||
<el-input v-model="form.redirectLoginUri" placeholder="请输入跳转登录 url, http://localhost/login?loginId=" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="错误提示URL" prop="errorMsgUri">
|
||||
<el-input v-model="form.errorMsgUri" placeholder="请输入错误提示 url, http://localhost/login?errorId=" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addPlatform, delPlatform, getPlatform, listPlatform, updatePlatform } from '@/api/iot/platform';
|
||||
|
||||
export default {
|
||||
name: 'Platform',
|
||||
dicts: ['iot_social_platform', 'iot_social_platform_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 第三方登录平台控制表格数据
|
||||
platformList: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
platform: null,
|
||||
status: null,
|
||||
},
|
||||
columnTips: {
|
||||
bindId: '绑定登录uri, http://localhost/login?bindId=,域名换成对应域名即可，本地开发不需要更改',
|
||||
redirectLogin: '跳转登录uri,http://localhost/login?loginId=,域名换成对应域名即可，本地开发不需要更改',
|
||||
errorId: '错误提示获取uri,http://localhost/login?errorId=,域名换成对应域名即可，本地开发不需要更改',
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
platform: [
|
||||
{
|
||||
required: true,
|
||||
message: '第三方平台不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
message: ' 0:启用 ,1:禁用不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
clientId: [
|
||||
{
|
||||
required: true,
|
||||
message: '第三方平台申请Id不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
secretKey: [
|
||||
{
|
||||
required: true,
|
||||
message: '第三方平台密钥不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
redirectUri: [
|
||||
{
|
||||
required: true,
|
||||
message: '用户认证后跳转地址不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
bindUri: [
|
||||
{
|
||||
required: true,
|
||||
message: '绑定注册登录uri,http://localhost/login?bindId=不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
redirectLoginUri: [
|
||||
{
|
||||
required: true,
|
||||
message: '跳转登录uri,http://localhost/login?loginId=不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
errorMsgUri: [
|
||||
{
|
||||
required: true,
|
||||
message: '错误提示uri,http://localhost/login?errorId=不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
renderHeaderMethods(h, { column }, content) {
|
||||
return h('div', [
|
||||
h('span', column.label),
|
||||
h(
|
||||
'el-tooltip',
|
||||
{
|
||||
props: {
|
||||
effect: 'dark',
|
||||
content: content,
|
||||
placement: 'top',
|
||||
},
|
||||
},
|
||||
[
|
||||
h('i', {
|
||||
class: 'el-icon-question',
|
||||
style: 'color:#486FF2;margin-left:5px;',
|
||||
}),
|
||||
]
|
||||
),
|
||||
]);
|
||||
},
|
||||
/** 查询第三方登录平台控制列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listPlatform(this.queryParams).then((response) => {
|
||||
this.platformList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
socialPlatformId: null,
|
||||
platform: null,
|
||||
status: null,
|
||||
clientId: null,
|
||||
secretKey: null,
|
||||
redirectUri: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateTime: null,
|
||||
updateBy: null,
|
||||
remark: null,
|
||||
bindUri: null,
|
||||
redirectLoginUri: null,
|
||||
errorMsgUri: null,
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm');
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.socialPlatformId);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = '添加平台控制';
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const socialPlatformId = row.socialPlatformId || this.ids;
|
||||
getPlatform(socialPlatformId).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = '修改平台控制';
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.socialPlatformId != null) {
|
||||
updatePlatform(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addPlatform(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('新增成功');
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const socialPlatformIds = row.socialPlatformId || this.ids;
|
||||
this.$modal
|
||||
.confirm('是否确认删除平台控制编号为"' + socialPlatformIds + '"的数据项')
|
||||
.then(function () {
|
||||
return delPlatform(socialPlatformIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess('删除成功');
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
'iot/platform/export',
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`platform_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
getRowKeys(row) {
|
||||
return row.socialPlatformId;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iot-platform {
|
||||
padding: 20px;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 15px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: -22.5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +1,108 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-row>
|
||||
<el-col :xs="24">
|
||||
<div
|
||||
style="color: #fff; background-color: #0f73ee; width: 100%; height: 200px; text-align: center; padding: 15px; font-family: '微软雅黑'">
|
||||
<div style="font-size: 42px; padding-top: 40px; width: 300px; margin: 0 auto">
|
||||
<img :src="logo" alt="logo" style="width: 100px; height: 100px; float: left" />
|
||||
<div style="float: left; margin-top: 13px; width: 200px; text-align: left">
|
||||
<div>FastBee</div>
|
||||
<div style="letter-spacing: 1.5px; font-size: 20px; font-weight: 600; margin-top: -8px; margin-left: 3px">
|
||||
开源物联网平台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login">
|
||||
<el-row>
|
||||
<el-col :xs="24">
|
||||
<div style="color: #fff; background-color: #0f73ee; width: 100%; height: 200px; text-align: center; padding: 15px; font-family: '微软雅黑'">
|
||||
<div style="font-size: 42px; padding-top: 40px; width: 300px; margin: 0 auto">
|
||||
<img :src="logo" alt="logo" style="width: 100px; height: 100px; float: left" />
|
||||
<div style="float: left; margin-top: 13px; width: 200px; text-align: left">
|
||||
<div>FastBee</div>
|
||||
<div style="letter-spacing: 1.5px; font-size: 20px; font-weight: 600; margin-top: -8px; margin-left: 3px">开源物联网平台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<el-form-item>
|
||||
<div class="alert-box-wrap" v-if="loginForm.bindId != null">
|
||||
<div v-if="loginForm.bindId != null" class="alert-message-wrap">
|
||||
<i class="el-icon-warning" />
|
||||
如果你已经有账号,请直接输入账号进行绑定，
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="10.5">
|
||||
<div v-if="loginForm.bindId != null" class="alert-message-wrap">
|
||||
如果还没有账号，请先去</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4"> -->
|
||||
<router-link v-if="loginForm.bindId != null" :to="{ path: '/register', query: this.$route.query }"
|
||||
style="margin-left: 10px; font-size: 14px; font-family: '微软雅黑'; color: rgba(41, 96, 197, 0.856);">
|
||||
注册
|
||||
</router-link>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="captchaOnOff" prop="code">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
|
||||
</el-input>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<el-form-item>
|
||||
<div class="alert-box-wrap" v-if="loginForm.bindId != null">
|
||||
<div v-if="loginForm.bindId != null" class="alert-message-wrap">
|
||||
<i class="el-icon-warning" />
|
||||
如果你已经有账号,请直接输入账号进行绑定，
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="10.5">
|
||||
<div v-if="loginForm.bindId != null" class="alert-message-wrap">如果还没有账号，请先去</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4"> -->
|
||||
<router-link
|
||||
v-if="loginForm.bindId != null"
|
||||
:to="{ path: '/register', query: this.$route.query }"
|
||||
style="margin-left: 10px; font-size: 14px; font-family: '微软雅黑'; color: rgba(41, 96, 197, 0.856)"
|
||||
>
|
||||
注册
|
||||
</router-link>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="captchaOnOff" prop="code">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
|
||||
</el-input>
|
||||
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>
|
||||
|
||||
<el-form-item style="width: 100%">
|
||||
<div style="margin-bottom: 10px">
|
||||
<el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%"
|
||||
<el-form-item style="width: 100%">
|
||||
<div style="margin-bottom: 10px">
|
||||
<!-- <el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%"
|
||||
@click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row>
|
||||
<div>
|
||||
<el-link href="https://fastbee.cn/" :underline="false" target="_blank" style="float: left">返回官网</el-link>
|
||||
<el-link href="https://fastbee.cn/doc" :underline="false" target="_blank" style="float: left; margin-left: 20px">查看文档</el-link>
|
||||
<router-link v-if="!bindAccount" :to="{ path: '/register', query: this.$route.query }"
|
||||
style="float: left;margin-left:20px;">注册账号</router-link>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>
|
||||
Copyright © 2021-2025
|
||||
<a target="_blank" href="http://fastbee.cn">FastBee</a>
|
||||
All Rights Reserved.
|
||||
</span>
|
||||
</el-button> -->
|
||||
<div v-if="!bindId">
|
||||
<el-button class="btn" :loading="loading" type="primary" @click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-button class="btn" :loading="loading" type="primary" @click.native.prevent="handleBindLogin">
|
||||
<span v-if="!loading">绑定并登录</span>
|
||||
<span v-else>绑定中...</span>
|
||||
</el-button>
|
||||
<el-button style="margin: 16px 0 0 0" class="btn" @click.native.prevent="handleBackLogin">
|
||||
<span>返回登录</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row>
|
||||
<div>
|
||||
<el-link href="https://fastbee.cn/" :underline="false" target="_blank" style="float: left">返回官网</el-link>
|
||||
<el-link href="https://fastbee.cn/doc" :underline="false" target="_blank" style="float: left; margin-left: 20px">查看文档</el-link>
|
||||
<router-link v-if="!bindAccount" :to="{ path: '/register', query: this.$route.query }" style="float: left; margin-left: 20px">注册账号</router-link>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="other-login">
|
||||
<span class="text">其他登录方式：</span>
|
||||
<svg-icon class="icon" icon-class="wechat" style="color: #07c160" @click="handleGotoWeChatLogin" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>
|
||||
Copyright © 2021-2025
|
||||
<a target="_blank" href="http://fastbee.cn">FastBee</a>
|
||||
All Rights Reserved.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -98,328 +114,443 @@ import { encrypt, decrypt } from '@/utils/jsencrypt';
|
||||
import { setToken } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
codeUrl: '',
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: '',
|
||||
bindId: '',
|
||||
// loginId: '',
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入您的账号',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入您的密码',
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'change',
|
||||
message: '请输入验证码',
|
||||
},
|
||||
],
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
bindAccount: false,
|
||||
// 注册开关
|
||||
register: true,
|
||||
redirect: undefined,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true,
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
codeUrl: '',
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: '',
|
||||
bindId: '',
|
||||
// loginId: '',
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入您的账号',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入您的密码',
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'change',
|
||||
message: '请输入验证码',
|
||||
},
|
||||
],
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
bindAccount: false,
|
||||
// 注册开关
|
||||
register: true,
|
||||
redirect: undefined,
|
||||
bindId: '',
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const loginId = this.$route.query.loginId;
|
||||
if (loginId === undefined || loginId === null) {
|
||||
this.checkBind();
|
||||
this.getCode();
|
||||
this.checkErrorMsg();
|
||||
this.getCookie();
|
||||
} else {
|
||||
this.redirectSocialLogin(loginId);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirectLogin(loginId) {
|
||||
this.loading = true;
|
||||
this.$store
|
||||
.dispatch('RedirectLogin', loginId)
|
||||
.then(() => {
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
})
|
||||
.catch(() => { });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
this.$router.push({
|
||||
query: {},
|
||||
});
|
||||
});
|
||||
},
|
||||
redirectSocialLogin() {
|
||||
const query = this.$route.query;
|
||||
const loginId = query.loginId;
|
||||
socialLogin(loginId).then((res) => {
|
||||
// 保存token
|
||||
this.loading = true;
|
||||
setToken(res.token);
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
})
|
||||
.catch(() => { });
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
checkBind() {
|
||||
const query = this.$route.query;
|
||||
const bindId = query.bindId;
|
||||
if (bindId === undefined || bindId === null) {
|
||||
this.bindAccount = false;
|
||||
} else {
|
||||
this.bindAccount = true;
|
||||
checkBindId(bindId).then((res) => {
|
||||
this.bindAccount = res.bindAccount === undefined ? true : res.bindAccount;
|
||||
if (this.bindAccount) {
|
||||
this.loginForm.bindId = bindId;
|
||||
} else {
|
||||
this.loginForm.bindId = '';
|
||||
this.$router.push({
|
||||
query: {},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
checkErrorMsg() {
|
||||
const errorId = this.$route.query.errorId;
|
||||
if (errorId !== undefined && errorId !== null) {
|
||||
getErrorMsg(errorId)
|
||||
.then((res) => { })
|
||||
.catch((err) => {
|
||||
this.$router.push({ query: {} });
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
getCode() {
|
||||
getCodeImg().then((res) => {
|
||||
//this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||||
this.captchaOnOff = res.captchaEnabled;
|
||||
if (this.captchaOnOff) {
|
||||
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get('username');
|
||||
const password = Cookies.get('password');
|
||||
const rememberMe = Cookies.get('rememberMe');
|
||||
const loginId = Cookies.get('loginId');
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
loginId: loginId === undefined ? this.loginForm.loginId : loginId,
|
||||
};
|
||||
},
|
||||
qqLogin() {
|
||||
window.location.href = 'http://localhost:8080/auth/render/qq';
|
||||
},
|
||||
weChatLogin() {
|
||||
const baseURL = process.env.VUE_APP_BASE_API;
|
||||
window.location.href = baseURL + '/auth/render/wechat_open_web';
|
||||
},
|
||||
authLogin() {
|
||||
this.$alert('第三方登录正在集成中...', '提示消息', {
|
||||
confirmButtonText: '确定',
|
||||
callback: (action) => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${action}`,
|
||||
});
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
});
|
||||
},
|
||||
handleBind() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set('username', this.loginForm.username, {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('password', encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove('username');
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.loginForm.bindId = this.$route.query.bindId;
|
||||
bindLogin(this.loginForm)
|
||||
.then((res) => {
|
||||
// 保存token
|
||||
setToken(res.token);
|
||||
this.$router
|
||||
.push({
|
||||
path: '/',
|
||||
})
|
||||
.catch(() => { });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.loading = false;
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
created() {
|
||||
const { loginId } = this.$route.query;
|
||||
if (!loginId) {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
this.checkBind();
|
||||
this.checkError();
|
||||
} else {
|
||||
this.redirectSocialLogin(loginId);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set('username', this.loginForm.username, {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('password', encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove('username');
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
methods: {
|
||||
redirectLogin(loginId) {
|
||||
this.loading = true;
|
||||
this.$store
|
||||
.dispatch('RedirectLogin', loginId)
|
||||
.then(() => {
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => { });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
this.$router.push({
|
||||
query: {},
|
||||
});
|
||||
});
|
||||
},
|
||||
// 微信登录
|
||||
handleGotoWeChatLogin() {
|
||||
const baseUrl = process.env.VUE_APP_BASE_API;
|
||||
window.location.href = baseUrl + '/auth/render/wechat_open_web';
|
||||
},
|
||||
// 返回登录页（绑定登录或者登录）
|
||||
handleGotoLogin() {
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
}
|
||||
this.clearValidate('loginForm');
|
||||
this.formIndex = 1;
|
||||
this.isHaveBind = false;
|
||||
this.errorText = '';
|
||||
},
|
||||
// 返回登录（登录）
|
||||
handleBackLogin() {
|
||||
this.bindId = '';
|
||||
this.$router.push('/login');
|
||||
},
|
||||
// 检测绑定信息
|
||||
checkBind() {
|
||||
const { bindId } = this.$route.query;
|
||||
if (bindId) {
|
||||
checkBindId(bindId).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.isHaveBind = true;
|
||||
} else {
|
||||
this.isHaveBind = false;
|
||||
}
|
||||
if (this.isHaveBind) {
|
||||
this.bindId = bindId;
|
||||
} else {
|
||||
this.bindId = '';
|
||||
this.$router.push({
|
||||
query: {},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 绑定账号并登录
|
||||
handleBindLogin() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set('username', this.loginForm.username, {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('password', encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove('username');
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
const params = { ...this.loginForm, uuid: this.uuid, bindId: this.bindId };
|
||||
bindLogin(params)
|
||||
.then((res) => {
|
||||
setToken(res.token); // 保存token
|
||||
this.$router
|
||||
.push({
|
||||
path: '/',
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 检查错误信息
|
||||
checkError() {
|
||||
const { errorId } = this.$route.query;
|
||||
if (errorId) {
|
||||
getErrorMsg(errorId).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.errorText = res.msg;
|
||||
} else {
|
||||
this.errorText = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 重定向到登录
|
||||
redirectLogin() {
|
||||
const { loginId } = this.$route.query;
|
||||
socialLogin(loginId).then((res) => {
|
||||
setToken(res.token); // 保存token
|
||||
this.$router.push({
|
||||
path: this.redirect || '/',
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
redirectSocialLogin() {
|
||||
const query = this.$route.query;
|
||||
const loginId = query.loginId;
|
||||
socialLogin(loginId).then((res) => {
|
||||
// 保存token
|
||||
this.loading = true;
|
||||
setToken(res.token);
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
})
|
||||
.catch(() => {});
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
checkBind() {
|
||||
const query = this.$route.query;
|
||||
const bindId = query.bindId;
|
||||
if (bindId === undefined || bindId === null) {
|
||||
this.bindAccount = false;
|
||||
} else {
|
||||
this.bindAccount = true;
|
||||
checkBindId(bindId).then((res) => {
|
||||
this.bindAccount = res.bindAccount === undefined ? true : res.bindAccount;
|
||||
if (this.bindAccount) {
|
||||
this.loginForm.bindId = bindId;
|
||||
} else {
|
||||
this.loginForm.bindId = '';
|
||||
this.$router.push({
|
||||
query: {},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
getCode() {
|
||||
getCodeImg().then((res) => {
|
||||
//this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||||
this.captchaOnOff = res.captchaEnabled;
|
||||
if (this.captchaOnOff) {
|
||||
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getCookie() {
|
||||
const username = Cookies.get('username');
|
||||
const password = Cookies.get('password');
|
||||
const rememberMe = Cookies.get('rememberMe');
|
||||
const loginId = Cookies.get('loginId');
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
loginId: loginId === undefined ? this.loginForm.loginId : loginId,
|
||||
};
|
||||
},
|
||||
qqLogin() {
|
||||
window.location.href = 'http://localhost:8080/auth/render/qq';
|
||||
},
|
||||
weChatLogin() {
|
||||
const baseURL = process.env.VUE_APP_BASE_API;
|
||||
window.location.href = baseURL + '/auth/render/wechat_open_web';
|
||||
},
|
||||
authLogin() {
|
||||
this.$alert('第三方登录正在集成中...', '提示消息', {
|
||||
confirmButtonText: '确定',
|
||||
callback: (action) => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${action}`,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
handleBind() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set('username', this.loginForm.username, {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('password', encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove('username');
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.loginForm.bindId = this.$route.query.bindId;
|
||||
bindLogin(this.loginForm)
|
||||
.then((res) => {
|
||||
// 保存token
|
||||
setToken(res.token);
|
||||
this.$router
|
||||
.push({
|
||||
path: '/',
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.loading = false;
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set('username', this.loginForm.username, {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('password', encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove('username');
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bindAccountTitle {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin: 30px auto 0 auto;
|
||||
padding: 15px;
|
||||
z-index: 1000;
|
||||
max-width: 350px;
|
||||
margin: 30px auto 0 auto;
|
||||
padding: 15px;
|
||||
z-index: 1000;
|
||||
max-width: 350px;
|
||||
|
||||
input {
|
||||
height: 38px;
|
||||
background-color: #f1f1f1;
|
||||
color: #666;
|
||||
}
|
||||
input {
|
||||
height: 38px;
|
||||
background-color: #f1f1f1;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-code {
|
||||
width: 33%;
|
||||
float: right;
|
||||
width: 33%;
|
||||
float: right;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
height: 38px;
|
||||
}
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.alert-box-wrap {
|
||||
border: 1px solid #f78e21;
|
||||
border: 1px solid #f78e21;
|
||||
|
||||
.alert-message-wrap {
|
||||
font-size: 14px;
|
||||
font-family: '微软雅黑';
|
||||
color: rgba(197, 41, 41, 0.856);
|
||||
margin-left: 10px;
|
||||
}
|
||||
.alert-message-wrap {
|
||||
font-size: 14px;
|
||||
font-family: '微软雅黑';
|
||||
color: rgba(197, 41, 41, 0.856);
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 26px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.other-login {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 12px 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user