!155 增加手机验证码登录

Merge pull request !155 from 酱包/feature/1.6.2-smsLogin

yudao-framework/yudao-spring-boot-starter-mybatis/src/main/java/cn/iocoder/yudao/framework/mybatis/core/query/QueryWrapperX.java

@@ -140,6 +140,10 @@ public class QueryWrapperX<T> extends QueryWrapper<T> {
             case ORACLE_12C:
                 super.eq("ROWNUM", 1);
                 break;
+            case SQL_SERVER:
+            case SQL_SERVER2005:
+                super.select("TOP 1 *"); // 由于 SQL Server 是通过 SELECT TOP 1 实现限制一条，所以只好使用 * 查询剩余字段
+                break;
             default:
                 super.last("LIMIT 1");
         }

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/controller/app/auth/AppAuthController.java

@@ -1,7 +1,6 @@
 package cn.iocoder.yudao.module.member.controller.app.auth;
 
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
-import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
 import cn.iocoder.yudao.framework.security.core.annotations.PreAuthenticated;
 import cn.iocoder.yudao.module.member.controller.app.auth.vo.*;
 import cn.iocoder.yudao.module.member.service.auth.MemberAuthService;
@@ -35,7 +34,6 @@ public class AppAuthController {
     @ApiOperation("使用手机 + 密码登录")
     public CommonResult<AppAuthLoginRespVO> login(@RequestBody @Valid AppAuthLoginReqVO reqVO) {
         String token = authService.login(reqVO, getClientIP(), getUserAgent());
-        // 返回结果
         return success(AppAuthLoginRespVO.builder().token(token).build());
     }
 
@@ -49,7 +47,7 @@ public class AppAuthController {
 
     @PostMapping("/send-sms-code")
     @ApiOperation(value = "发送手机验证码")
-    public CommonResult<Boolean> sendSmsCode(@RequestBody @Valid AppAuthSendSmsReqVO reqVO) {
+    public CommonResult<Boolean> sendSmsCode(@RequestBody @Valid AppAuthSmsSendReqVO reqVO) {
         authService.sendSmsCode(getLoginUserId(), reqVO);
         return success(true);
     }

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/controller/app/auth/vo/AppAuthSmsSendReqVO.java

@@ -10,10 +10,10 @@ import lombok.experimental.Accessors;
 
 import javax.validation.constraints.NotNull;
 
-@ApiModel("用户 APP - 发送手机验证码 Response VO")
+@ApiModel("用户 APP - 发送手机验证码 Request VO")
 @Data
 @Accessors(chain = true)
-public class AppAuthSendSmsReqVO {
+public class AppAuthSmsSendReqVO {
 
     @ApiModelProperty(value = "手机号", example = "15601691234")
     @Mobile

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/convert/auth/AuthConvert.java

@@ -31,7 +31,7 @@ public interface AuthConvert {
     SocialUserBindReqDTO convert(Long userId, Integer userType, AppAuthSocialQuickLoginReqVO reqVO);
     SocialUserUnbindReqDTO convert(Long userId, Integer userType, AppSocialUserUnbindReqVO reqVO);
 
-    SmsCodeSendReqDTO convert(AppAuthSendSmsReqVO reqVO);
+    SmsCodeSendReqDTO convert(AppAuthSmsSendReqVO reqVO);
     SmsCodeUseReqDTO convert(AppAuthResetPasswordReqVO reqVO, SmsSceneEnum scene, String usedIp);
     SmsCodeUseReqDTO convert(AppAuthSmsLoginReqVO reqVO, Integer scene, String usedIp);
 

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/service/auth/MemberAuthService.java

@@ -2,8 +2,6 @@ package cn.iocoder.yudao.module.member.service.auth;
 
 import cn.iocoder.yudao.framework.security.core.service.SecurityAuthFrameworkService;
 import cn.iocoder.yudao.module.member.controller.app.auth.vo.*;
-import cn.iocoder.yudao.module.member.controller.app.social.vo.AppSocialUserBindReqVO;
-import cn.iocoder.yudao.module.member.controller.app.social.vo.AppSocialUserUnbindReqVO;
 
 import javax.validation.Valid;
 
@@ -36,7 +34,6 @@ public interface MemberAuthService extends SecurityAuthFrameworkService {
      */
     String smsLogin(@Valid AppAuthSmsLoginReqVO reqVO, String userIp, String userAgent);
 
-
     /**
      * 社交登录，使用 code 授权码
      *
@@ -85,6 +82,6 @@ public interface MemberAuthService extends SecurityAuthFrameworkService {
      * @param userId 用户编号
      * @param reqVO 发送信息
      */
-    void sendSmsCode(Long userId, AppAuthSendSmsReqVO reqVO);
+    void sendSmsCode(Long userId, AppAuthSmsSendReqVO reqVO);
 
 }

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/service/auth/MemberAuthServiceImpl.java

@@ -288,7 +288,7 @@ public class MemberAuthServiceImpl implements MemberAuthService {
     }
 
     @Override
-    public void sendSmsCode(Long userId, AppAuthSendSmsReqVO reqVO) {
+    public void sendSmsCode(Long userId, AppAuthSmsSendReqVO reqVO) {
         // TODO 要根据不同的场景，校验是否有用户
         smsCodeApi.sendSmsCode(AuthConvert.INSTANCE.convert(reqVO).setCreateIp(getClientIP()));
     }

yudao-module-system/yudao-module-system-api/src/main/java/cn/iocoder/yudao/module/system/enums/ErrorCodeConstants.java

@@ -17,6 +17,7 @@ public interface ErrorCodeConstants {
     ErrorCode AUTH_LOGIN_CAPTCHA_CODE_ERROR = new ErrorCode(1002000004, "验证码不正确");
     ErrorCode AUTH_THIRD_LOGIN_NOT_BIND = new ErrorCode(1002000005, "未绑定账号，需要进行绑定");
     ErrorCode AUTH_TOKEN_EXPIRED = new ErrorCode(1002000006, "Token 已经过期");
+    ErrorCode AUTH_MOBILE_NOT_EXISTS = new ErrorCode(1002000007, "手机号不存在");
 
     // ========== 菜单模块 1002001000 ==========
     ErrorCode MENU_NAME_DUPLICATE = new ErrorCode(1002001000, "已经存在该名字的菜单");

yudao-module-system/yudao-module-system-api/src/main/java/cn/iocoder/yudao/module/system/enums/sms/SmsSceneEnum.java

@@ -18,9 +18,9 @@ public enum SmsSceneEnum implements IntArrayValuable {
 
     MEMBER_LOGIN(1, "user-sms-login", "会员用户 - 手机号登陆"),
     MEMBER_UPDATE_MOBILE(2, "user-sms-reset-password", "会员用户 - 修改手机"),
-    MEMBER_FORGET_PASSWORD(3, "user-sms-update-mobile", "会员用户 - 忘记密码");
+    MEMBER_FORGET_PASSWORD(3, "user-sms-update-mobile", "会员用户 - 忘记密码"),
 
-    // 如果未来希望管理后台支持手机验证码登陆，可以通过添加 ADMIN_MEMBER_LOGIN 枚举
+    ADMIN_MEMBER_LOGIN(21, "admin-sms-login", "后台用户 - 手机号登录");
 
     public static final int[] ARRAYS = Arrays.stream(values()).mapToInt(SmsSceneEnum::getScene).toArray();
 

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/controller/admin/auth/AuthController.java

@@ -1,7 +1,6 @@
 package cn.iocoder.yudao.module.system.controller.admin.auth;
 
 import cn.iocoder.yudao.framework.common.enums.CommonStatusEnum;
-import cn.iocoder.yudao.framework.common.enums.UserTypeEnum;
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
 import cn.iocoder.yudao.framework.common.util.collection.SetUtils;
 import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
@@ -92,6 +91,25 @@ public class AuthController {
         return success(AuthConvert.INSTANCE.buildMenuTree(menuList));
     }
 
+    // ========== 短信登录相关 ==========
+
+    @PostMapping("/sms-login")
+    @ApiOperation("使用短信验证码登录")
+    @OperateLog(enable = false) // 避免 Post 请求被记录操作日志
+    public CommonResult<AuthLoginRespVO> smsLogin(@RequestBody @Valid AuthSmsLoginReqVO reqVO) {
+        String token = authService.smsLogin(reqVO, getClientIP(), getUserAgent());
+        // 返回结果
+        return success(AuthLoginRespVO.builder().token(token).build());
+    }
+
+    @PostMapping("/send-sms-code")
+    @ApiOperation(value = "发送手机验证码")
+    @OperateLog(enable = false) // 避免 Post 请求被记录操作日志
+    public CommonResult<Boolean> sendLoginSmsCode(@RequestBody @Valid AuthSmsSendReqVO reqVO) {
+        authService.sendSmsCode(reqVO);
+        return success(true);
+    }
+
     // ========== 社交登录相关 ==========
 
     @GetMapping("/social-auth-redirect")
@@ -109,7 +127,7 @@ public class AuthController {
     @ApiOperation("社交快捷登录，使用 code 授权码")
     @OperateLog(enable = false) // 避免 Post 请求被记录操作日志
     public CommonResult<AuthLoginRespVO> socialQuickLogin(@RequestBody @Valid AuthSocialQuickLoginReqVO reqVO) {
-        String token = authService.socialLogin(reqVO, getClientIP(), getUserAgent());
+        String token = authService.socialQuickLogin(reqVO, getClientIP(), getUserAgent());
         // 返回结果
         return success(AuthLoginRespVO.builder().token(token).build());
     }

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/controller/admin/auth/vo/auth/AuthSmsLoginReqVO.java

@@ -0,0 +1,38 @@
+package cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import org.hibernate.validator.constraints.Length;
+
+import javax.validation.constraints.NotEmpty;
+import javax.validation.constraints.Pattern;
+
+@ApiModel("管理后台 - 短信验证码的呢老姑 Request VO")
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class AuthSmsLoginReqVO {
+
+    @ApiModelProperty(value = "手机号", required = true, example = "yudaoyuanma")
+    @NotEmpty(message = "手机号不能为空")
+    @Length(min = 11, max = 11, message = "手机号格式错误，仅支持大陆手机号")
+    @Pattern(regexp = "^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$", message = "账号格式为数字以及字母")
+    private String mobile;
+
+
+
+    @ApiModelProperty(value = "短信验证码", required = true, example = "1024", notes = "验证码开启时，需要传递")
+    @NotEmpty(message = "验证码不能为空", groups = CodeEnableGroup.class)
+    private String code;
+
+    /**
+     * 开启验证码的 Group
+     */
+    public interface CodeEnableGroup {}
+
+}

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/controller/admin/auth/vo/auth/AuthSmsSendReqVO.java

@@ -0,0 +1,33 @@
+package cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth;
+
+import cn.iocoder.yudao.framework.common.validation.InEnum;
+import cn.iocoder.yudao.framework.common.validation.Mobile;
+import cn.iocoder.yudao.module.system.enums.sms.SmsSceneEnum;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.validation.constraints.NotEmpty;
+import javax.validation.constraints.NotNull;
+
+@ApiModel("管理后台 - 发送手机验证码 Request VO")
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class AuthSmsSendReqVO {
+
+    @ApiModelProperty(value = "手机号", required = true, example = "yudaoyuanma")
+    @NotEmpty(message = "手机号不能为空")
+    @Mobile
+    private String mobile;
+
+    @ApiModelProperty(value = "短信场景", required = true, example = "1")
+    @NotNull(message = "发送场景不能为空")
+    @InEnum(SmsSceneEnum.class)
+    private Integer scene;
+
+}

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/convert/auth/AuthConvert.java

@@ -3,6 +3,9 @@ package cn.iocoder.yudao.module.system.convert.auth;
 import cn.iocoder.yudao.framework.common.enums.UserTypeEnum;
 import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
 import cn.iocoder.yudao.framework.security.core.LoginUser;
+import cn.iocoder.yudao.module.system.api.sms.dto.code.SmsCodeSendReqDTO;
+import cn.iocoder.yudao.module.system.api.sms.dto.code.SmsCodeSendReqDTO;
+import cn.iocoder.yudao.module.system.api.sms.dto.code.SmsCodeUseReqDTO;
 import cn.iocoder.yudao.module.system.api.social.dto.SocialUserBindReqDTO;
 import cn.iocoder.yudao.module.system.api.social.dto.SocialUserUnbindReqDTO;
 import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.*;
@@ -73,7 +76,10 @@ public interface AuthConvert {
     }
 
     SocialUserBindReqDTO convert(Long userId, Integer userType, AuthSocialBindLoginReqVO reqVO);
-
     SocialUserBindReqDTO convert(Long userId, Integer userType, AuthSocialQuickLoginReqVO reqVO);
 
+    SmsCodeSendReqDTO convert(AuthSmsSendReqVO reqVO);
+
+    SmsCodeUseReqDTO convert(AuthSmsLoginReqVO reqVO, Integer scene, String usedIp);
+
 }

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/framework/security/config/SecurityConfiguration.java

@@ -24,6 +24,9 @@ public class SecurityConfiguration {
                 registry.antMatchers(buildAdminApi("/system/auth/social-auth-redirect")).permitAll();
                 registry.antMatchers(buildAdminApi("/system/auth/social-quick-login")).permitAll();
                 registry.antMatchers(buildAdminApi("/system/auth/social-bind-login")).permitAll();
+                // 登录登录的接口
+                registry.antMatchers(buildAdminApi("/system/auth/sms-login")).permitAll();
+                registry.antMatchers(buildAdminApi("/system/auth/send-sms-code")).permitAll();
                 // 验证码的接口
                 registry.antMatchers(buildAdminApi("/system/captcha/**")).permitAll();
                 // 获得租户编号的接口

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/service/auth/AdminAuthService.java

@@ -24,6 +24,23 @@ public interface AdminAuthService extends SecurityAuthFrameworkService {
      */
     String login(@Valid AuthLoginReqVO reqVO, String userIp, String userAgent);
 
+    /**
+     * 短信验证码发送
+     *
+     * @param reqVO 发送请求
+     */
+    void sendSmsCode(AuthSmsSendReqVO reqVO);
+
+    /**
+     * 短信登录
+     *
+     * @param reqVO 登录信息
+     * @param userIp 用户 IP
+     * @param userAgent 用户 UA
+     * @return 身份令牌，使用 JWT 方式
+     */
+    String smsLogin(AuthSmsLoginReqVO reqVO, String userIp, String userAgent) ;
+
     /**
      * 社交快捷登录，使用 code 授权码
      *
@@ -32,7 +49,7 @@ public interface AdminAuthService extends SecurityAuthFrameworkService {
      * @param userAgent 用户 UA
      * @return 身份令牌，使用 JWT 方式
      */
-    String socialLogin(@Valid AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent);
+    String socialQuickLogin(@Valid AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent);
 
     /**
      * 社交绑定登录，使用 code 授权码 + 账号密码

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/service/auth/AdminAuthServiceImpl.java

@@ -8,13 +8,13 @@ import cn.iocoder.yudao.framework.common.util.validation.ValidationUtils;
 import cn.iocoder.yudao.framework.security.core.LoginUser;
 import cn.iocoder.yudao.framework.security.core.authentication.MultiUsernamePasswordAuthenticationToken;
 import cn.iocoder.yudao.module.system.api.logger.dto.LoginLogCreateReqDTO;
-import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.AuthLoginReqVO;
+import cn.iocoder.yudao.module.system.api.sms.SmsCodeApi;
-import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.AuthSocialBindLoginReqVO;
+import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.*;
-import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.AuthSocialQuickLoginReqVO;
 import cn.iocoder.yudao.module.system.convert.auth.AuthConvert;
 import cn.iocoder.yudao.module.system.dal.dataobject.user.AdminUserDO;
 import cn.iocoder.yudao.module.system.enums.logger.LoginLogTypeEnum;
 import cn.iocoder.yudao.module.system.enums.logger.LoginResultEnum;
+import cn.iocoder.yudao.module.system.enums.sms.SmsSceneEnum;
 import cn.iocoder.yudao.module.system.service.common.CaptchaService;
 import cn.iocoder.yudao.module.system.service.logger.LoginLogService;
 import cn.iocoder.yudao.module.system.service.permission.PermissionService;
@@ -39,6 +39,7 @@ import java.util.Objects;
 import java.util.Set;
 
 import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception;
+import static cn.iocoder.yudao.framework.common.util.servlet.ServletUtils.getClientIP;
 import static cn.iocoder.yudao.module.system.enums.ErrorCodeConstants.*;
 import static java.util.Collections.singleton;
 
@@ -72,6 +73,9 @@ public class AdminAuthServiceImpl implements AdminAuthService {
     @Resource
     private Validator validator;
 
+    @Resource
+    private SmsCodeApi smsCodeApi;
+
     @Override
     public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
         // 获取 username 对应的 AdminUserDO
@@ -108,6 +112,34 @@ public class AdminAuthServiceImpl implements AdminAuthService {
         return createUserSessionAfterLoginSuccess(loginUser, LoginLogTypeEnum.LOGIN_USERNAME, userIp, userAgent);
     }
 
+    @Override
+    public void sendSmsCode(AuthSmsSendReqVO reqVO) {
+        // 登录场景，验证是否存在
+        if (userService.getUserByMobile(reqVO.getMobile()) == null) {
+            throw exception(AUTH_MOBILE_NOT_EXISTS);
+        }
+        // 发送验证码
+        smsCodeApi.sendSmsCode(AuthConvert.INSTANCE.convert(reqVO).setCreateIp(getClientIP()));
+    }
+
+    @Override
+    public String smsLogin(AuthSmsLoginReqVO reqVO, String userIp, String userAgent) {
+        // 校验验证码
+        smsCodeApi.useSmsCode(AuthConvert.INSTANCE.convert(reqVO, SmsSceneEnum.ADMIN_MEMBER_LOGIN.getScene(), userIp));
+
+        // 获得用户信息
+        AdminUserDO user = userService.getUserByMobile(reqVO.getMobile());
+        if (user == null) {
+            throw exception(USER_NOT_EXISTS);
+        }
+
+        // 创建 LoginUser 对象
+        LoginUser loginUser = buildLoginUser(user);
+
+        // 缓存登陆用户到 Redis 中，返回 sessionId 编号
+        return createUserSessionAfterLoginSuccess(loginUser, LoginLogTypeEnum.LOGIN_MOBILE, userIp, userAgent);
+    }
+
     private void verifyCaptcha(AuthLoginReqVO reqVO) {
         // 如果验证码关闭，则不进行校验
         if (!captchaService.isCaptchaEnable()) {
@@ -190,7 +222,7 @@ public class AdminAuthServiceImpl implements AdminAuthService {
     }
 
     @Override
-    public String socialLogin(AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent) {
+    public String socialQuickLogin(AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent) {
         // 使用 code 授权码，进行登录。然后，获得到绑定的用户编号
         Long userId = socialUserService.getBindUserId(UserTypeEnum.ADMIN.getValue(), reqVO.getType(),
                 reqVO.getCode(), reqVO.getState());

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/service/user/AdminUserService.java

@@ -97,6 +97,15 @@ public interface AdminUserService {
      */
     AdminUserDO getUserByUsername(String username);
 
+    /**
+     * 通过手机号获取用户
+     *
+     * @param mobile 手机号
+     * @return 用户对象信息
+     */
+    AdminUserDO getUserByMobile(String mobile);
+
+
     /**
      * 获得用户分页列表
      *

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/service/user/AdminUserServiceImpl.java

@@ -203,6 +203,16 @@ public class AdminUserServiceImpl implements AdminUserService {
         return userMapper.selectByUsername(username);
     }
 
+    /**
+     * 通过手机号获取用户
+     * @param mobile
+     * @return
+     */
+    @Override
+    public AdminUserDO getUserByMobile(String mobile) {
+        return userMapper.selectByMobile(mobile);
+    }
+
     @Override
     public PageResult<AdminUserDO> getUserPage(UserPageReqVO reqVO) {
         return userMapper.selectPage(reqVO, getDeptCondition(reqVO.getDeptId()));

yudao-ui-admin/.env.dev

@@ -5,7 +5,7 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.225.2'
+VUE_APP_BASE_API = 'http://localhost:48080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

yudao-ui-admin/src/api/login.js

@@ -75,3 +75,27 @@ export function socialBindLogin(type, code, state, username, password) {
     }
   })
 }
+
+// 获取登录验证码
+export function sendSmsCode(mobile, scene) {
+  return request({
+    url: '/system/auth/send-sms-code',
+    method: 'post',
+    data: {
+      mobile,
+      scene
+    }
+  })
+}
+
+// 短信验证码登录
+export function smsLogin(mobile, code) {
+  return request({
+    url: '/system/auth/sms-login',
+    method: 'post',
+    data: {
+      mobile,
+      code
+    }
+  })
+}

yudao-ui-admin/src/assets/styles/login.scss

@@ -0,0 +1,387 @@
+/* ===== PC DESIGN ===== */
+$W: 1000;
+$H: 1920;
+$picW: 438;
+$picH: 560;
+$formW: 320;
+$tabW: $formW / 2;
+$rowH: 56;
+$buttonH: 50;
+
+// container
+$containerBgColor: #e6ebf2;
+$containerBgImage: '../assets/images/bg.png';
+// container-logo
+$logoWidth: 417px;
+$logoHeight: 64px;
+$logoImage: '../assets/logo/login-logo.png';
+// container-content
+$contentWidth: round($W / $H * 100) * 1vw;
+$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
+$contentBgColor: #ffffff;
+// container-content-pic
+$picWidth: round($picW / $H * 100) * 1vw;
+$picHeight: inherit;
+$picImage: '../assets/images/pic.png';
+// container-content-field
+$fieldWidth: $contentWidth - $picWidth;
+$fieldHeight: inherit;
+// container-content-field-form
+$formWidth: $formW * 1px;
+$tabWidth: $tabW * 1px;
+$rowHeight: $rowH * 1px;
+$buttonHeight: $buttonH * 1px;
+
+// - - - - - 页面基础设置
+.container {
+  .login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+    img {
+      cursor: pointer;
+      width:100%;max-width:100px; height:auto;
+      vertical-align: middle;
+    }
+  }
+  // 元素
+  width: inherit;
+  height: inherit;
+  min-width: 1080px;
+  min-height: 620px;
+  background-color: $containerBgColor;
+  background-image: url($containerBgImage);
+  background-size: cover;
+  // 定位
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // 文字
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  .logo {
+    // 元素
+    width: $logoWidth;
+    height: $logoHeight;
+    background-image: url($logoImage);
+    background-size: contain;
+    // 定位
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    margin-left: -$logoWidth/2;
+  }
+  .content {
+    // 元素
+    width: $contentWidth;
+    height: $contentHeight;
+    background-color: #ffffff;
+    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
+    border-radius: 20px;
+    // 定位
+    position: relative;
+    .pic {
+      // 元素
+      width: $picWidth;
+      height: $picHeight;
+      background-image: url($picImage);
+      background-repeat: no-repeat;
+      background-size: cover;
+      border-radius: 20px 0 0 20px;
+      // 定位
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .field {
+      width: $fieldWidth;
+      height: $fieldHeight;
+      // 定位
+      position: absolute;
+      top: 0;
+      left: $picWidth;
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      .pc-title{ width: 100%; clear: both;}
+      .mobile-title,
+      .mobile-switch {
+        display: none;
+      }
+      .form {
+        box-sizing: border-box;
+        width: $formWidth;
+        // - - - tab
+        :deep(.el-tabs__content) {
+          padding: 20px 0 0;
+        }
+        :deep(.el-tabs__item) {
+          // 元素
+          width: $tabWidth;
+          height: $rowHeight;
+          padding: 0;
+          // 文字
+          line-height: $rowHeight;
+          color: #666666;
+        }
+        :deep(.el-tabs__item.is-active) {
+          font-weight: bold;
+          color: #2F53EB;
+        }
+        :deep(.el-tabs__active-bar) {
+          height: 3px;
+          border-radius: 2px;
+        }
+        // - - - input
+        :deep(.el-input__inner) {
+          // 元素
+          width: 100%;
+          height: $rowHeight;
+          background: #f5f5f5;
+          border: 0;
+          border-radius: 28px;
+          // 文字
+          text-align: center;
+          line-height: 19px;
+          color: #262626;
+        }
+        .code:deep(.el-input__inner) {
+          padding: 0 24px;
+          // 文字
+          text-align: left;
+        }
+        :deep(.el-input__inner::-webkit-input-placeholder) { /* WebKit browsers */
+          font-weight: 400;
+          color: #8C8C8C;
+        }
+        :deep(.el-input__inner:-moz-placeholder) { /* Mozilla Firefox 4 to 18 */
+          font-weight: 400;
+          color: #8C8C8C;
+        }
+        :deep(.el-input__inner::-moz-placeholder) { /* Mozilla Firefox 19+ */
+          font-weight: 400;
+          color: #8C8C8C;
+          opacity:1;
+        }
+        :deep(.el-input__inner:-ms-input-placeholder) { /* Internet Explorer 10+ */
+          font-weight: 400;
+          color: #8C8C8C !important;
+        }
+        :deep(.el-form-item) {
+          position: relative;
+          .button-code {
+            // 元素
+            height: $rowHeight;
+            box-sizing: border-box;
+            // 定位
+            position: absolute;
+            top: 0;
+            right: 20px;
+            z-index: 1;
+            // 文字
+            line-height: 20px;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #2F53EB;
+            span {
+              padding-left: 15px;
+              border-left: 2px solid #D9D9D9;
+            }
+          }
+        }
+        :deep(.el-form-item__error) {
+          padding-left: 24px;
+        }
+        .button {
+          width: 100%;
+          height: $buttonHeight;
+          background: rgba(24, 144, 255, 0.2);
+          border: 0;
+          border-radius: 24px;
+          margin-bottom: 20px;
+          // 文字
+          line-height: 26px;
+          font-size: 20px;
+          color: #FFFFFF;
+        }
+        .button-active {
+          background: #2F53EB;
+          box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
+        }
+      }
+    }
+  }
+  .footer {
+    // 元素
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #8c8c8c;
+    // 定位
+    position: absolute;
+    bottom: 30px;
+    a,
+    a:hover,
+    a:active {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+// - - - - - PC 最小尺寸设置
+@media screen and (min-width: 599px) and (max-width: 1366px) {
+  .container {
+    .content {
+      width: 710px;
+      height: 397px;
+      .pic {
+        width: 314px;
+      }
+      .field {
+        width: calc(710px - 314px);
+        left: 314px;
+        .form {
+          width: 320px;
+          :deep(.el-input__inner) {
+            width: 320px;
+            height: 56px;
+          }
+          .button {
+            height: 50px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* ===== MOBILE DESIGN ===== */
+$mobileW: 375;
+$mobileH: 812;
+$mobileContentW: 327;
+$mobileContentH: 376;
+$mobileFormW: 280;
+$mobileRowH: 48;
+$mobileButtonH: 48;
+
+// container
+$mobileContainerBgImage: '../assets/images/bg-mobile.png';
+// container-content
+$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
+$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
+// container-content-field-form
+$mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
+$mobileRowHeight: $mobileRowH * 1px;
+$mobileButtonHeight: $mobileButtonH * 1px;
+$iconBgImage: '../assets/images/icon.png';
+
+// - - - - - 移动端设置
+@media screen and (max-width: 599px) {
+  .container {
+    // 元素
+    background-image: url($mobileContainerBgImage);
+    min-width: 280px;
+    min-height: 568px;
+    // 文字
+    font-size: 17px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    .logo {
+      display: none;
+    }
+
+    .content {
+      // 元素
+      width: $mobileContentWidth;
+      height: $mobileContentHeight;
+      min-width: 250px;
+      min-height: 340px;
+      // 定位
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .pic {
+        display: none;
+      }
+      .field {
+        // 元素
+        width: inherit;
+        min-height: inherit;
+        // 定位
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        .mobile-title {
+          // 元素
+          margin: 0 0 20px;
+          display: block;
+        }
+        .form {
+          width: $mobileFormWidth;
+          // - - - tab
+          :deep(.el-tabs__header) {
+            display: none;
+          }
+          :deep(.el-tabs__content) {
+            padding: 0;
+          }
+          // - - - input
+          :deep(.el-input__inner) {
+            height: $mobileRowHeight;
+            line-height: 24px;
+            // 文字
+            text-align: center;
+            color: #262626;
+          }
+          :deep(.el-form-item) {
+            .button-code {
+              // 元素
+              height: $mobileRowHeight;
+            }
+          }
+          .button {
+            height: $mobileButtonHeight;
+            line-height: 24px;
+            color: #FFFFFF;
+          }
+        }
+        .mobile-switch {
+          display: block;
+          line-height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #595959;
+          margin: 0;
+          .icon {
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            background-image: url($iconBgImage);
+            background-size: cover;
+          }
+        }
+        .mobile-switch:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    .footer {
+      // 元素
+      font-size: 12px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      line-height: 17px;
+      color: #333333;
+      opacity: 0.6;
+      // 定位
+      position: absolute;
+      bottom: 20px;
+    }
+  }
+
+}

yudao-ui-admin/src/store/modules/user.js

@@ -1,4 +1,4 @@
-import {login, logout, getInfo, socialQuickLogin, socialBindLogin} from '@/api/login'
+import {login, logout, getInfo, socialQuickLogin, socialBindLogin, smsLogin} from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
@@ -86,7 +86,21 @@ const user = {
         })
       })
     },
-
+    // 登录
+    SmsLogin({ commit }, userInfo) {
+      const mobile = userInfo.mobile.trim()
+      const mobileCode = userInfo.mobileCode
+      return new Promise((resolve, reject) => {
+        smsLogin(mobile,mobileCode).then(res => {
+          res = res.data;
+          setToken(res.token)
+          commit('SET_TOKEN', res.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {

yudao-ui-admin/src/views/login.vue

@@ -1,61 +1,115 @@
 <template>
-  <div class="login">
+  <div class="container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <div class="logo"></div>
-      <h3 class="title">芋道后台管理系统</h3>
+    <!-- 登录区域 -->
-      <el-form-item prop="tenantName" v-if="tenantEnable">
+    <div class="content">
-        <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
+      <!-- 配图 -->
-          <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
+      <div class="pic"></div>
-        </el-input>
+      <!-- 表单 -->
-      </el-form-item>
+      <div class="field">
-      <el-form-item prop="username">
+        <!-- [移动端]标题 -->
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+        <h2 class="mobile-title">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <h3 class="title">芋道后台管理系统</h3>
-        </el-input>
+        </h2>
-      </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="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnable">
-        <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="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
 
-      <el-form-item style="width:100%;">
+        <!-- 表单 -->
-          <div class="oauth-login" style="display:flex">
+        <div class="form-cont">
-            <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
+          <el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
-              <img :src="item.img" height="25px" width="25px" alt="登录" >
+            <el-tab-pane label="账号密码登录" name="uname">
-              <span>{{item.title}}</span>
+            </el-tab-pane>
-            </div>
+            <el-tab-pane label="短信验证码登录" name="sms">
+            </el-tab-pane>
+          </el-tabs>
+          <div>
+            <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
+              <el-form-item prop="tenantName" v-if="tenantEnable">
+                <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
+                  <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon"/>
+                </el-input>
+              </el-form-item>
+              <!-- 账号密码登录 -->
+              <div v-if="loginForm.loginType === 'uname'">
+                <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="el-input__icon 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="el-input__icon input-icon"/>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="code" v-if="captchaEnable">
+                  <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="el-input__icon input-icon"/>
+                  </el-input>
+                  <div class="login-code">
+                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+                  </div>
+                </el-form-item>
+                <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
+              </div>
+
+              <!-- 短信验证码登录 -->
+              <div v-if="loginForm.loginType === 'sms'">
+                <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="短信验证码"
+                            @keyup.enter.native="handleLogin">
+                    <template slot="icon">
+                      <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>
+
+              <!-- 下方的登录按钮 -->
+              <el-form-item style="width:100%;">
+                <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+                    @click.native.prevent="handleLogin">
+                  <span v-if="!loading">登 录</span>
+                  <span v-else>登 录 中...</span>
+                </el-button>
+              </el-form-item>
+
+              <!--  社交登录 -->
+             <el-form-item style="width:100%;">
+                  <div class="oauth-login" style="display:flex">
+                    <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
+                      <img :src="item.img" height="25px" width="25px" alt="登录" >
+                      <span>{{item.title}}</span>
+                    </div>
+                </div>
+              </el-form-item>
+            </el-form>
+          </div>
         </div>
-      </el-form-item>
+      </div>
-    </el-form>
+    </div>
-    <!--  底部  -->
+    <!-- footer -->
-    <div class="el-login-footer">
+    <div class="footer">
-      <span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
+      Copyright © 2020-2022 iocoder.cn All Rights Reserved.
     </div>
   </div>
 </template>
 
 <script>
-import { getCodeImg,socialAuthRedirect } from "@/api/login";
+import {getCodeImg, sendSmsCode, socialAuthRedirect} from "@/api/login";
-import { getTenantIdByName } from "@/api/system/tenant";
+import {getTenantIdByName} from "@/api/system/tenant";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import {decrypt, encrypt} from '@/utils/jsencrypt'
 import {SystemUserSocialTypeEnum} from "@/utils/constants";
-import { getTenantEnable } from "@/utils/ruoyi";
+import {getTenantEnable} from "@/utils/ruoyi";
 
 export default {
   name: "Login",
@@ -64,26 +118,45 @@ export default {
       codeUrl: "",
       captchaEnable: true,
       tenantEnable: true,
+      mobileCodeTimer: 0,
       loginForm: {
+        loginType: "uname",
         username: "admin",
         password: "admin123",
+        mobile: "",
+        mobileCode: "",
         rememberMe: false,
         code: "",
         uuid: "",
         tenantName: "芋道源码",
       },
-      loginRules: {
+      scene: 21,
+
+      LoginRules: {
         username: [
-          { required: true, trigger: "blur", message: "用户名不能为空" }
+          {required: true, trigger: "blur", message: "用户名不能为空"}
         ],
         password: [
-          { required: true, trigger: "blur", message: "密码不能为空" }
+          {required: true, trigger: "blur", message: "密码不能为空"}
+        ],
+        code: [{required: true, trigger: "change", message: "验证码不能为空"}],
+        mobile: [
+          {required: true, trigger: "blur", message: "手机号不能为空"},
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[0-9]\d{9}$/.test(value) == false) {
+                callback(new Error("手机号格式错误"));
+              } else {
+                callback();
+              }
+            }, trigger: "blur"
+          }
         ],
-        code: [{ required: true, trigger: "change", message: "验证码不能为空" }],
         tenantName: [
-          { required: true, trigger: "blur", message: "租户不能为空" },
+          {required: true, trigger: "blur", message: "租户不能为空"},
           {
             validator: (rule, value, callback) => {
+              // debugger
               getTenantIdByName(value).then(res => {
                 const tenantId = res.data;
                 if (tenantId && tenantId >= 0) {
@@ -97,8 +170,10 @@ export default {
             },
             trigger: 'blur'
           }
-        ],
+        ]
       },
+
+
       loading: false,
       redirect: undefined,
       // 枚举
@@ -142,11 +217,17 @@ export default {
       const password = Cookies.get("password");
       const rememberMe = Cookies.get('rememberMe')
       const tenantName = Cookies.get('tenantName');
+      const mobile = Cookies.get('mobile');
+      const mobileCode = Cookies.get('mobileCode');
+      const loginType = Cookies.get('loginType');
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
         tenantName: tenantName === undefined ? this.loginForm.tenantName : tenantName,
+        mobile: mobile === undefined ? this.loginForm.mobile : mobile,
+        mobileCode: mobileCode === undefined ? this.loginForm.mobileCode : mobileCode,
+        loginType: loginType === undefined ? this.loginForm.loginType : loginType,
       };
     },
     handleLogin() {
@@ -155,10 +236,10 @@ export default {
           this.loading = true;
           // 设置 Cookie
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("username", this.loginForm.username, {expires: 30});
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
-            Cookies.set('tenantName', this.loginForm.tenantName, { expires: 30 });
+            Cookies.set('tenantName', this.loginForm.tenantName, {expires: 30});
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
@@ -166,8 +247,10 @@ export default {
             Cookies.remove('tenantName');
           }
           // 发起登陆
-          this.$store.dispatch("Login", this.loginForm).then(() => {
+          console.log("发起登录", this.loginForm);
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+          this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
+            this.$router.push({path: this.redirect || "/"}).catch(() => {
+            });
           }).catch(() => {
             this.loading = false;
             this.getCode();
@@ -187,74 +270,34 @@ export default {
         // 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";
 
-<style rel="stylesheet/scss" lang="scss">
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 500px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-.login-code-img {
-  height: 38px;
-}
 .oauth-login {
   display: flex;
+  align-items: cen;
   cursor:pointer;
 }
 .oauth-login-item {

yudao-ui-admin/src/views/socialLogin.vue

@@ -1,28 +1,63 @@
 <template>
-  <div class="login">
+  <div class="container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <div class="logo"></div>
-      <h3 class="title">绑定账号</h3>
+    <!-- 登录区域 -->
-      <el-form-item prop="username">
+    <div class="content">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+      <!-- 配图 -->
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+      <div class="pic"></div>
-        </el-input>
+      <!-- 表单 -->
-      </el-form-item>
+      <div class="field">
-      <el-form-item prop="password">
+        <!-- [移动端]标题 -->
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+        <h2 class="mobile-title">
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <h3 class="title">芋道后台管理系统</h3>
-        </el-input>
+        </h2>
-      </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          <span v-if="!loading">提 交</span>
-          <span v-else>提 交 中...</span>
-        </el-button>
-      </el-form-item>
 
-    </el-form>
+        <!-- 表单 -->
-    <!--  底部  -->
+        <div class="form-cont">
-    <div class="el-login-footer">
+          <el-tabs class="form" v-model="loginForm.loginType " style=" float:none;">
-      <span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
+            <el-tab-pane label="绑定账号" name="uname">
+            </el-tab-pane>
+          </el-tabs>
+          <div>
+            <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
+              <!-- 账号密码登录 -->
+              <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="el-input__icon 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="el-input__icon input-icon"/>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="code" v-if="captchaEnable">
+                <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="el-input__icon input-icon"/>
+                </el-input>
+                <div class="login-code">
+                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+                </div>
+              </el-form-item>
+              <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
+              <!-- 下方的登录按钮 -->
+              <el-form-item style="width:100%;">
+                <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+                           @click.native.prevent="handleLogin">
+                  <span v-if="!loading">登 录</span>
+                  <span v-else>登 录 中...</span>
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- footer -->
+    <div class="footer">
+      Copyright © 2020-2022 iocoder.cn All Rights Reserved.
     </div>
   </div>
 </template>
@@ -36,6 +71,7 @@ export default {
   data() {
     return {
       loginForm: {
+        loginType: "uname",
         username: "admin",
         password: "admin123",
         rememberMe: false, // TODO 芋艿：后面看情况，去掉这块
@@ -87,10 +123,12 @@ export default {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
       const rememberMe = Cookies.get('rememberMe')
+      const loginType = Cookies.get('loginType');
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        loginType: loginType === undefined ? this.loginForm.loginType : loginType,
       };
     },
     handleLogin() {
@@ -123,64 +161,5 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.login {
+@import "~@/assets/styles/login.scss";
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
-
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-.login-code-img {
-  height: 38px;
-}
 </style>