|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <div class="website-login-box">
|
|
|
+ <div class="login-box">
|
|
|
+ <div class="close-icon-box">
|
|
|
+ <i class="el-icon-circle-close close-icon" @click="$emit('callback')"></i>
|
|
|
+ </div>
|
|
|
+ <div class="login-form">
|
|
|
+ <el-form :model="loginForm" :rules="loginRules" status-icon ref="loginForm" label-position="left">
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input type="text" prefix-icon="iconfont huifont-shoujihao" v-model="loginForm.phone"
|
|
|
+ placeholder="手机号" maxlength="11">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code" class="image-item">
|
|
|
+ <el-input type="text" prefix-icon="iconfont huifont-tuxingyanzhengma" v-model="loginForm.code"
|
|
|
+ placeholder="图片验证码" maxlength="4"></el-input>
|
|
|
+ <img v-if="codeImg" :src="codeImg" alt="图片验证码" class="code-image" @click="imgCodeFunc">
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phoneCode" class="phone-code">
|
|
|
+ <el-input type="number" prefix-icon="iconfont huifont-duanxinyanzhengma"
|
|
|
+ v-model="loginForm.phoneCode" placeholder="短信验证码"
|
|
|
+ oninput="if(value.length > 6) value=value.slice(0, 6)">
|
|
|
+ </el-input>
|
|
|
+ <div class="get-code-btn">
|
|
|
+ <el-button type="primary" size="samll" @click="getPhoneCode"
|
|
|
+ :disabled="codeName !== '获取验证码'">
|
|
|
+ {{codeName}}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button class="submit" type="primary" @click="loginSubmit" :loading="loginLoading">登录</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ login,
|
|
|
+ getImgCode,
|
|
|
+ sendPhoneCode,
|
|
|
+ getUserInfo,
|
|
|
+ selectOrangaized
|
|
|
+ } from '@/api/loginRegister';
|
|
|
+ import {
|
|
|
+ setToken,
|
|
|
+ setComment
|
|
|
+ } from '@/uitls/auth';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loginForm: {
|
|
|
+ phone: '',
|
|
|
+ code: '',
|
|
|
+ phoneCode: ''
|
|
|
+ },
|
|
|
+ loginLoading: false,
|
|
|
+ codeImg: '',
|
|
|
+ codeName: '获取验证码', //获取验证码text
|
|
|
+ isDisabled: false, //获取验证码按钮状态
|
|
|
+ loginRules: {
|
|
|
+ code: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入图片验证码',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ phone: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号',
|
|
|
+ trigger: 'blur'
|
|
|
+ }, {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (!/^1[123456789]\d{9}$/.test(value)) {
|
|
|
+ callback(new Error("请输入正确的手机号"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ phoneCode: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入短信验证码',
|
|
|
+ trigger: 'blur'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.imgCodeFunc();
|
|
|
+ if (this.$store.getters.codeNumber != 60) this.codeReset();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ imgCodeFunc() {
|
|
|
+ getImgCode().then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.codeImg = res.data.pngBase64;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPhoneCode() {
|
|
|
+ if (this.isDisabled) return;
|
|
|
+ this.$refs.loginForm.validateField('phone', valid => {
|
|
|
+ if (!valid) {
|
|
|
+ this.$refs.loginForm.validateField('code', valid => {
|
|
|
+ if (!valid) {
|
|
|
+ sendPhoneCode(this.loginForm.phone, this.loginForm.code).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.codeReset();
|
|
|
+ this.$message.success('发送成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ codeReset() {
|
|
|
+ //重置获取验证码倒计时
|
|
|
+ let codeNumber = this.$store.getters.codeNumber;
|
|
|
+ codeNumber--;
|
|
|
+ this.handleCode(codeNumber);
|
|
|
+ let codeRestFn = setInterval(() => {
|
|
|
+ codeNumber--;
|
|
|
+ this.handleCode(codeNumber);
|
|
|
+ if (codeNumber == 0) clearInterval(codeRestFn); //停止
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ handleCode(codeNumber) {
|
|
|
+ //code操作
|
|
|
+ this.codeName = codeNumber == 0 ? '获取验证码' : '重新获取' + codeNumber;
|
|
|
+ this.isDisabled = codeNumber == 0 ? false : true;
|
|
|
+ this.$store.dispatch('app/changeCodeNumber', codeNumber == 0 ? 60 : codeNumber);
|
|
|
+ },
|
|
|
+ loginSubmit() {
|
|
|
+ if (this.loginLoading) return;
|
|
|
+ this.loginLoading = true;
|
|
|
+ this.$refs['loginForm'].validate(valid => {
|
|
|
+ if (!valid) return this.loginLoading = false;
|
|
|
+ this.loginFunc();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loginFunc() {
|
|
|
+ let postData = {
|
|
|
+ phone: this.loginForm.phone,
|
|
|
+ phoneCode: this.loginForm.phoneCode
|
|
|
+ }
|
|
|
+ login(postData).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ setToken(res.data.token);
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let user = res.data;
|
|
|
+ let organization = user.organization;
|
|
|
+ if (!organization) {
|
|
|
+ organziation = user.organizationList[0];
|
|
|
+ selectOrangaized(organization)
|
|
|
+ }
|
|
|
+ this.$store.dispatch('app/changeOrganization', organization);
|
|
|
+ this.$store.dispatch('app/changeUser', user);
|
|
|
+ this.$store.dispatch('app/changeMenuData', user.workarkResource ? JSON
|
|
|
+ .parse(user.workarkResource) : []);
|
|
|
+ setComment(user.workarkMenu ? user.workarkMenu : JSON.stringify([]));
|
|
|
+ return this.successLogin('/work');
|
|
|
+ } else {
|
|
|
+ this.loginLoading = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.loginLoading = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ successLogin(url) {
|
|
|
+ this.loginLoading = false;
|
|
|
+ this.$router.push(url);
|
|
|
+ this.$message.success('登录成功');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .website-login-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-icon {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #c9cdd3;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-icon-box {
|
|
|
+ padding: 10px 10px 20px 10px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-box {
|
|
|
+ width: 440px;
|
|
|
+ background: $--color-white;
|
|
|
+ box-shadow: 0px 4px 16px 0px rgba(164, 178, 203, 0.15);
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 0px solid $--color-white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-title {
|
|
|
+ padding: 52px 52px 48px 52px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-title-value {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #333E4D;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-title-line {
|
|
|
+ width: 80px;
|
|
|
+ height: 5px;
|
|
|
+ background: #E3E7EE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ padding: 0 52px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep.el-form {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 15px 15px 15px 63px;
|
|
|
+ height: 52px;
|
|
|
+ line-height: 52px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon,
|
|
|
+ .el-range-separator {
|
|
|
+ line-height: 52px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__prefix {
|
|
|
+ left: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__prefix::before {
|
|
|
+ content: '';
|
|
|
+ top: 16px;
|
|
|
+ right: -16px;
|
|
|
+ height: 21px;
|
|
|
+ width: 1px;
|
|
|
+ background-color: $--input-border-color;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon.iconfont {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #596d8e;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon.huifont-mima {
|
|
|
+ opacity: 0.95;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ width: 190px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-image {
|
|
|
+ width: 131px;
|
|
|
+ height: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .get-code-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+</style>
|