|
|
@@ -0,0 +1,379 @@
|
|
|
+<template xmlns="">
|
|
|
+ <div class="container">
|
|
|
+ <!-- <div class="logo"></div> -->
|
|
|
+ <!-- 登录区域 -->
|
|
|
+ <div class="content">
|
|
|
+ <!-- 配图 -->
|
|
|
+ <div class="pic"></div>
|
|
|
+ <!-- 表单 -->
|
|
|
+ <div class="field">
|
|
|
+ <!-- [移动端]标题 -->
|
|
|
+ <h2 class="mobile-title">
|
|
|
+ <h3 class="title">爱思系统</h3>
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <!-- 表单 -->
|
|
|
+ <div class="form-cont">
|
|
|
+ <div class="form" style=" float:none;margin-bottom: 20px;">
|
|
|
+ <el-steps :active="loginForm.loginType" simple>
|
|
|
+ <el-step title="注册账号" icon="el-icon-user"></el-step>
|
|
|
+ <el-step title="创建团队" icon="el-icon-edit"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width: 320px;">
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
|
|
|
+
|
|
|
+ <!-- 注册账号 -->
|
|
|
+ <div v-if="loginForm.loginType == 1">
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
|
|
|
+ <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="mobileCode">
|
|
|
+ <el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码"
|
|
|
+ class="sms-login-mobile-code-prefix"
|
|
|
+ @keyup.enter.native="handleLogin">
|
|
|
+ <template>
|
|
|
+ <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
|
|
|
+ </template>
|
|
|
+ <template slot="append">
|
|
|
+ <span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode" style="cursor: pointer;">获取验证码</span>
|
|
|
+ <span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="service-laws">
|
|
|
+ 点击注册表明你已阅读并同意
|
|
|
+ <a class="terms" href="https://www.jiandaoyun.com/index/term" target="_blank">《服务条款》</a>
|
|
|
+ 和
|
|
|
+ <a class="terms" href="https://www.jiandaoyun.com/index/term/privacy" target="_blank">《隐私声明》</a>
|
|
|
+ </div>
|
|
|
+ <!-- 下方的下一步按钮 -->
|
|
|
+ <el-form-item style="width:100%;">
|
|
|
+ <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
|
|
+ @click.native.prevent="getNext()">
|
|
|
+ <span v-if="!loading">下 一 步</span>
|
|
|
+ <span v-else>操 作 中...</span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 去登录 -->
|
|
|
+ <div class="register-tip">
|
|
|
+ 已有账号？
|
|
|
+ <span class="register-btn" @click="doLogin()">直接登录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 创建团队 -->
|
|
|
+ <div v-if="loginForm.loginType == 2">
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入企业名称">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-select v-model="loginForm.mobile" placeholder="请选择需求" style="width: 100%;">
|
|
|
+ <el-option label="企业使用" value="企业使用"></el-option>
|
|
|
+ <el-option label="个人使用" value="个人使用"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-select v-model="loginForm.mobile" placeholder="请选择所属行业" style="width: 100%;">
|
|
|
+ <el-option label="互联网/软件" value="互联网/软件"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 下方的进入产品按钮 -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
|
|
+ @click.native.prevent="getCode">
|
|
|
+ <span v-if="!loading">进 入 产 品</span>
|
|
|
+ <span v-else>操 作 中...</span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 去登录 -->
|
|
|
+ <div class="register-tip">
|
|
|
+ 你可以
|
|
|
+ <span class="register-btn" @click="doLogin()">加入企业/团队</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {sendSmsCode, socialAuthRedirect} from "@/api/login";
|
|
|
+import {getTenantIdByName} from "@/api/system/tenant";
|
|
|
+import {SystemUserSocialTypeEnum} from "@/utils/constants";
|
|
|
+import {getCaptchaEnable, getTenantEnable} from "@/utils/ruoyi";
|
|
|
+import {
|
|
|
+ getPassword,
|
|
|
+ getRememberMe, getTenantName,
|
|
|
+ getUsername,
|
|
|
+ removePassword, removeRememberMe, removeTenantName,
|
|
|
+ removeUsername,
|
|
|
+ setPassword, setRememberMe, setTenantId, setTenantName,
|
|
|
+ setUsername
|
|
|
+} from "@/utils/auth";
|
|
|
+
|
|
|
+import Verify from '@/components/Verifition/Verify';
|
|
|
+import {resetUserPwd} from "@/api/system/user";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Login",
|
|
|
+ components: {
|
|
|
+ Verify
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ codeUrl: "",
|
|
|
+ captchaEnable: true,
|
|
|
+ tenantEnable: true,
|
|
|
+ mobileCodeTimer: 0,
|
|
|
+ loginForm: {
|
|
|
+ loginType: 1,
|
|
|
+ // username: "admin",
|
|
|
+ // password: "admin123",
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ captchaVerification: "",
|
|
|
+ mobile: "",
|
|
|
+ mobileCode: "",
|
|
|
+ rememberMe: false,
|
|
|
+ tenantName: "芋道源码",
|
|
|
+ },
|
|
|
+ scene: 21,
|
|
|
+
|
|
|
+ LoginRules: {
|
|
|
+ username: [
|
|
|
+ {required: true, trigger: "blur", message: "用户名不能为空"}
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {required: true, trigger: "blur", message: "密码不能为空"}
|
|
|
+ ],
|
|
|
+ mobile: [
|
|
|
+ {required: true, trigger: "blur", message: "手机号不能为空"},
|
|
|
+ {
|
|
|
+ validator: function (rule, value, callback) {
|
|
|
+ if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) {
|
|
|
+ callback(new Error("手机号格式错误"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }, trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tenantName: [
|
|
|
+ {required: true, trigger: "blur", message: "租户不能为空"},
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // debugger
|
|
|
+ getTenantIdByName(value).then(res => {
|
|
|
+ const tenantId = res.data;
|
|
|
+ if (tenantId && tenantId >= 0) {
|
|
|
+ // 设置租户
|
|
|
+ setTenantId(tenantId)
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback('租户不存在');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ redirect: undefined,
|
|
|
+ // 枚举
|
|
|
+ SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 租户开关
|
|
|
+ this.tenantEnable = getTenantEnable();
|
|
|
+ if (this.tenantEnable) {
|
|
|
+ getTenantIdByName(this.loginForm.tenantName).then(res => { // 设置租户
|
|
|
+ const tenantId = res.data;
|
|
|
+ if (tenantId && tenantId >= 0) {
|
|
|
+ setTenantId(tenantId)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 验证码开关
|
|
|
+ this.captchaEnable = getCaptchaEnable();
|
|
|
+ // 重定向地址
|
|
|
+ this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
|
|
|
+ // this.getCookie();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 下一步
|
|
|
+ getNext(){
|
|
|
+ this.loginForm.loginType=2;
|
|
|
+ },
|
|
|
+ //跳转登录
|
|
|
+ doLogin() {
|
|
|
+ this.$router.push({path: '/login'})
|
|
|
+ },
|
|
|
+ getCode() {
|
|
|
+ // 情况一，未开启：则直接登录
|
|
|
+ if (!this.captchaEnable) {
|
|
|
+ this.handleLogin({})
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
|
|
|
+ // 弹出验证码
|
|
|
+ this.$refs.verify.show()
|
|
|
+ },
|
|
|
+ getCookie() {
|
|
|
+ const username = getUsername();
|
|
|
+ const password = getPassword();
|
|
|
+ const rememberMe = getRememberMe();
|
|
|
+ const tenantName = getTenantName();
|
|
|
+ this.loginForm = {
|
|
|
+ ...this.loginForm,
|
|
|
+ username: username ? username : this.loginForm.username,
|
|
|
+ password: password ? password : this.loginForm.password,
|
|
|
+ rememberMe: rememberMe ? getRememberMe() : false,
|
|
|
+ tenantName: tenantName ? tenantName : this.loginForm.tenantName,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ handleLogin(captchaParams) {
|
|
|
+ this.$refs.loginForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ // 设置 Cookie
|
|
|
+ if (this.loginForm.rememberMe) {
|
|
|
+ setUsername(this.loginForm.username)
|
|
|
+ setPassword(this.loginForm.password)
|
|
|
+ setRememberMe(this.loginForm.rememberMe)
|
|
|
+ setTenantName(this.loginForm.tenantName)
|
|
|
+ } else {
|
|
|
+ removeUsername()
|
|
|
+ removePassword()
|
|
|
+ removeRememberMe()
|
|
|
+ removeTenantName()
|
|
|
+ }
|
|
|
+ this.loginForm.captchaVerification = captchaParams.captchaVerification
|
|
|
+ // 发起登陆
|
|
|
+ // console.log("发起登录", this.loginForm);
|
|
|
+ this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
|
|
|
+ this.$router.push({path: "/"}).catch(() => {
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async doSocialLogin(socialTypeEnum) {
|
|
|
+ // 设置登录中
|
|
|
+ this.loading = true;
|
|
|
+ let tenant = false;
|
|
|
+ if (this.tenantEnable) {
|
|
|
+ await this.$prompt('请输入租户名称', "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消"
|
|
|
+ }).then(async ({value}) => {
|
|
|
+ await getTenantIdByName(value).then(res => {
|
|
|
+ const tenantId = res.data;
|
|
|
+ tenant = true
|
|
|
+ if (tenantId && tenantId >= 0) {
|
|
|
+ setTenantId(tenantId)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ // 取消登录按钮 loading状态
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ return false
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ tenant = true
|
|
|
+ }
|
|
|
+ if(tenant){
|
|
|
+ // 计算 redirectUri
|
|
|
+ const redirectUri = location.origin + '/social-login?'
|
|
|
+ + encodeURIComponent('type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/")); // 重定向不能丢
|
|
|
+ // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
|
|
|
+ // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
|
|
|
+ // 进行跳转
|
|
|
+ socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {
|
|
|
+ // console.log(res.url);
|
|
|
+ window.location.href = res.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** ========== 以下为升级短信登录 ========== */
|
|
|
+ getSmsCode() {
|
|
|
+ if (this.mobileCodeTimer > 0) return;
|
|
|
+ this.$refs.loginForm.validate(valid => {
|
|
|
+ if (!valid) return;
|
|
|
+ sendSmsCode(this.loginForm.mobile, this.scene, this.loginForm.uuid, this.loginForm.code).then(res => {
|
|
|
+ this.$modal.msgSuccess("获取验证码成功")
|
|
|
+ this.mobileCodeTimer = 60;
|
|
|
+ let msgTimer = setInterval(() => {
|
|
|
+ this.mobileCodeTimer = this.mobileCodeTimer - 1;
|
|
|
+ if (this.mobileCodeTimer <= 0) {
|
|
|
+ clearInterval(msgTimer);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "~@/assets/styles/login.scss";
|
|
|
+.service-laws {
|
|
|
+ color: #525967;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.service-laws .terms {
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+a {
|
|
|
+ outline: none;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.register-tip{
|
|
|
+ color: #141e31;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin: 10px 0 10px;
|
|
|
+}
|
|
|
+.register-btn{
|
|
|
+ color: #1890ff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.oauth-login {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor:pointer;
|
|
|
+}
|
|
|
+.oauth-login-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.oauth-login-item img {
|
|
|
+ height: 25px;
|
|
|
+ width: 25px;
|
|
|
+}
|
|
|
+.oauth-login-item span:hover {
|
|
|
+ text-decoration: underline red;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.sms-login-mobile-code-prefix {
|
|
|
+ :deep(.el-input__prefix) {
|
|
|
+ top: 22%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
