|
|
@@ -1,452 +1,543 @@
|
|
|
<template>
|
|
|
<div class="login">
|
|
|
<div class="login-left">
|
|
|
- <img src="../assets/login-logo.png" />
|
|
|
+ <img src="../assets/login-logo.png" />
|
|
|
</div>
|
|
|
<div class="login-container">
|
|
|
- <div class="login-container-inner">
|
|
|
- <h2 class="title-big">登录</h2>
|
|
|
- <p class="title-name">欢迎来到二十一世纪英语智慧阅读平台</p>
|
|
|
- <div class="tabs-box">
|
|
|
- <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">验证码登录</a>
|
|
|
- <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">账号密码登录</a>
|
|
|
- </div>
|
|
|
- <el-form label-position="top" label-width="80px" ref="loginPwdForm" :model="loginPwdForm" class="form" :hide-required-asterisk="true" :rules="rulesPassword" v-show="tabsIndex===0">
|
|
|
- <el-form-item label="用户名/邮箱" prop="userName">
|
|
|
- <el-input v-model="loginPwdForm.userName" autocomplete="off" placeholder="用户名/邮箱" @blur="handleTrim('loginPwdForm','userName')" maxlength="100">
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" prop="password">
|
|
|
- <el-input v-model="loginPwdForm.password" :type="passwordFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('loginPwdForm','password')" maxlength="20">
|
|
|
- <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('passwordFlag')" v-if="passwordFlag"></i>
|
|
|
- <i slot="suffix" class="show-icon" @click="changeIcon('passwordFlag')" v-else>
|
|
|
- <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
- </i>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="userAgreeCheck" class="userAgree-box">
|
|
|
- <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
|
|
|
- <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- <a class="forgotPwd">忘记密码？</a>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item class="btn-box">
|
|
|
- <el-button type="primary" @click="onSubmitPassword('loginPwdForm')" size="small" :loading="loading">登录</el-button>
|
|
|
- <el-button @click="onCancel('loginPwdForm')" size="small">取消</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-show="tabsIndex===1">
|
|
|
- <el-form-item label="手机号" prop="phone">
|
|
|
- <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" maxlength="20">
|
|
|
- <template slot="prepend">+86</template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="验证码" prop="code" class="code-box">
|
|
|
- <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" maxlength="20">
|
|
|
- </el-input>
|
|
|
- <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode">
|
|
|
- {{ verificationCodeShow ? time+'s' : '发送验证码' }}
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="userAgreeCheck" class="userAgree-box">
|
|
|
- <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
|
|
|
- <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item class="btn-box">
|
|
|
- <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :loading="loading">登录</el-button>
|
|
|
- <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="login-container-inner">
|
|
|
+ <h2 class="title-big">登录</h2>
|
|
|
+ <p class="title-name">欢迎来到二十一世纪英语智慧阅读平台</p>
|
|
|
+ <div class="tabs-box">
|
|
|
+ <a
|
|
|
+ :class="[tabsIndex === 1 ? 'active' : '']"
|
|
|
+ @click="handleChangeTabs(1)"
|
|
|
+ >验证码登录</a
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ :class="[tabsIndex === 0 ? 'active' : '']"
|
|
|
+ @click="handleChangeTabs(0)"
|
|
|
+ >账号密码登录</a
|
|
|
+ >
|
|
|
</div>
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ label-width="80px"
|
|
|
+ ref="loginPwdForm"
|
|
|
+ :model="loginPwdForm"
|
|
|
+ class="form"
|
|
|
+ :hide-required-asterisk="true"
|
|
|
+ :rules="rulesPassword"
|
|
|
+ v-show="tabsIndex === 0"
|
|
|
+ >
|
|
|
+ <el-form-item label="用户名/邮箱" prop="userName">
|
|
|
+ <el-input
|
|
|
+ v-model="loginPwdForm.userName"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="用户名/邮箱"
|
|
|
+ @blur="handleTrim('loginPwdForm', 'userName')"
|
|
|
+ maxlength="100"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" prop="password">
|
|
|
+ <el-input
|
|
|
+ v-model="loginPwdForm.password"
|
|
|
+ :type="passwordFlag ? 'text' : 'password'"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ @blur="handleTrim('loginPwdForm', 'password')"
|
|
|
+ maxlength="20"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ slot="suffix"
|
|
|
+ class="el-icon-view show-icon"
|
|
|
+ @click="changeIcon('passwordFlag')"
|
|
|
+ v-if="passwordFlag"
|
|
|
+ ></i>
|
|
|
+ <i
|
|
|
+ slot="suffix"
|
|
|
+ class="show-icon"
|
|
|
+ @click="changeIcon('passwordFlag')"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="userAgreeCheck" class="userAgree-box">
|
|
|
+ <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
|
|
|
+ <el-checkbox label="1" name="userAgreeCheck"
|
|
|
+ ><a @click.prevent="lookUserAgreement"
|
|
|
+ >阅读并同意《用户协议》</a
|
|
|
+ ></el-checkbox
|
|
|
+ >
|
|
|
+ </el-checkbox-group>
|
|
|
+ <a class="forgotPwd">忘记密码？</a>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btn-box">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onSubmitPassword('loginPwdForm')"
|
|
|
+ size="small"
|
|
|
+ :loading="loading"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="onCancel('loginPwdForm')" size="small"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ label-width="80px"
|
|
|
+ ref="loginCodeForm"
|
|
|
+ :model="loginCodeForm"
|
|
|
+ class="form"
|
|
|
+ :hide-required-asterisk="true"
|
|
|
+ :rules="rulesCode"
|
|
|
+ v-show="tabsIndex === 1"
|
|
|
+ >
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input
|
|
|
+ v-model="loginCodeForm.phone"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入完整手机号"
|
|
|
+ @blur="handleTrim('loginCodeForm', 'phone')"
|
|
|
+ maxlength="20"
|
|
|
+ >
|
|
|
+ <template slot="prepend">+86</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="code" class="code-box">
|
|
|
+ <el-input
|
|
|
+ v-model="loginCodeForm.code"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ class="code-input"
|
|
|
+ @blur="handleTrim('loginCodeForm', 'code')"
|
|
|
+ maxlength="20"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="sendCode('time', 'phone', 'verificationCodeShow')"
|
|
|
+ size="small"
|
|
|
+ class="sendCode"
|
|
|
+ >
|
|
|
+ {{ verificationCodeShow ? time + "s" : "发送验证码" }}
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="userAgreeCheck" class="userAgree-box">
|
|
|
+ <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
|
|
|
+ <el-checkbox label="1" name="userAgreeCheck"
|
|
|
+ ><a @click.prevent="lookUserAgreement"
|
|
|
+ >阅读并同意《用户协议》</a
|
|
|
+ ></el-checkbox
|
|
|
+ >
|
|
|
+ </el-checkbox-group>
|
|
|
+ <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btn-box">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onSubmitPassword('loginCodeForm')"
|
|
|
+ size="small"
|
|
|
+ :loading="loading"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="onCancel('loginCodeForm')" size="small"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
- :visible.sync="forgotPwdFlag"
|
|
|
- :show-close="false"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :modal-append-to-body="false"
|
|
|
- width="504px"
|
|
|
- class="login-dialog"
|
|
|
- v-if="forgotPwdFlag">
|
|
|
- <forgot-pwd @cancelFot="cancelFot"></forgot-pwd>
|
|
|
+ :visible.sync="forgotPwdFlag"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ width="504px"
|
|
|
+ class="login-dialog"
|
|
|
+ v-if="forgotPwdFlag"
|
|
|
+ >
|
|
|
+ <forgot-pwd @cancelFot="cancelFot"></forgot-pwd>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
import { setToken } from "@/utils/auth";
|
|
|
-import ForgotPwd from "./forgotPwd.vue"
|
|
|
+import ForgotPwd from "./forgotPwd.vue";
|
|
|
export default {
|
|
|
name: "Login",
|
|
|
props: [],
|
|
|
components: { ForgotPwd },
|
|
|
data() {
|
|
|
const validatePhone = (rule, value, callback) => {
|
|
|
- if(this.tabsIndex===1){
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请输入手机号'));
|
|
|
- } else {
|
|
|
- let reg = /^1[3-9]\d{9}$/;
|
|
|
- let result = reg.test(value);
|
|
|
- if (result) {
|
|
|
- callback();
|
|
|
- } else {
|
|
|
- callback(new Error('请输入正确的手机号'));
|
|
|
- }
|
|
|
- }
|
|
|
+ if (this.tabsIndex === 1) {
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入手机号"));
|
|
|
+ } else {
|
|
|
+ let reg = /^1[3-9]\d{9}$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error("请输入正确的手机号"));
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
return {
|
|
|
- tabsIndex:1,
|
|
|
- loginPwdForm:{
|
|
|
- userName:'',
|
|
|
- password:'',
|
|
|
- type:'ADMIN',
|
|
|
- userAgreeCheck: []
|
|
|
+ tabsIndex: 1,
|
|
|
+ loginPwdForm: {
|
|
|
+ userName: "",
|
|
|
+ password: "",
|
|
|
+ type: "ADMIN",
|
|
|
+ userAgreeCheck: [],
|
|
|
+ },
|
|
|
+ passwordFlag: false,
|
|
|
+ rulesPassword: {
|
|
|
+ userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
|
|
+ password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
|
|
+ userAgreeCheck: [
|
|
|
+ {
|
|
|
+ type: "array",
|
|
|
+ required: true,
|
|
|
+ message: "请阅读并同意《用户协议》",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ loginCodeForm: {
|
|
|
+ phone: "",
|
|
|
+ code: "",
|
|
|
+ type: "ADMIN",
|
|
|
+ userAgreeCheck: [],
|
|
|
},
|
|
|
- passwordFlag:false,
|
|
|
- rulesPassword:{
|
|
|
- userName:[
|
|
|
- { required: true, message: '请输入账号', trigger: 'blur' }
|
|
|
- ],
|
|
|
- password:[
|
|
|
- { required: true, message: '请输入密码', trigger: 'blur' }
|
|
|
- ],
|
|
|
- userAgreeCheck:[
|
|
|
- { type: 'array', required: true, message: '请阅读并同意《用户协议》', trigger: 'change' }
|
|
|
- ]
|
|
|
- },
|
|
|
- loginCodeForm:{
|
|
|
- phone:'',
|
|
|
- code:'',
|
|
|
- type:'ADMIN',
|
|
|
- userAgreeCheck: []
|
|
|
- },
|
|
|
- rulesCode:{
|
|
|
- phone:[
|
|
|
- { required: true, validator: validatePhone, trigger: 'blur' }
|
|
|
- ],
|
|
|
- code:[
|
|
|
- { required: true, message: '请输入验证码', trigger: 'blur' }
|
|
|
- ],
|
|
|
- userAgreeCheck:[
|
|
|
- { type: 'array', required: true, message: '请阅读并同意《用户协议》', trigger: 'change' }
|
|
|
- ]
|
|
|
- },
|
|
|
- time: 60, //获取验证码的时间
|
|
|
- verificationCodeShow: false, //是否已经获取了验证码
|
|
|
- loading: false,
|
|
|
- timer: null,
|
|
|
- forgotPwdFlag: false
|
|
|
+ rulesCode: {
|
|
|
+ phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
|
|
|
+ code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
|
|
+ userAgreeCheck: [
|
|
|
+ {
|
|
|
+ type: "array",
|
|
|
+ required: true,
|
|
|
+ message: "请阅读并同意《用户协议》",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ time: 60, //获取验证码的时间
|
|
|
+ verificationCodeShow: false, //是否已经获取了验证码
|
|
|
+ loading: false,
|
|
|
+ timer: null,
|
|
|
+ forgotPwdFlag: false,
|
|
|
};
|
|
|
},
|
|
|
- watch: {
|
|
|
-
|
|
|
- },
|
|
|
+ watch: {},
|
|
|
methods: {
|
|
|
// 切换tabs
|
|
|
- handleChangeTabs(value){
|
|
|
- this.tabsIndex = value
|
|
|
+ handleChangeTabs(value) {
|
|
|
+ this.tabsIndex = value;
|
|
|
},
|
|
|
- changeIcon(flag){
|
|
|
- this[flag] = !this[flag]
|
|
|
+ changeIcon(flag) {
|
|
|
+ this[flag] = !this[flag];
|
|
|
},
|
|
|
// 查看用户协议
|
|
|
- lookUserAgreement(){
|
|
|
- },
|
|
|
+ lookUserAgreement() {},
|
|
|
// 密码登录提交表单
|
|
|
- onSubmitPassword(formName){
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.loading = true
|
|
|
- let MethodName = "/OrgServer/LoginControl/Login";
|
|
|
- let data = null
|
|
|
- if(this.tabsIndex===0){
|
|
|
- data = {
|
|
|
- user_type:this.loginPwdForm.type,
|
|
|
- user_name:this.loginPwdForm.userName,
|
|
|
- password:this.loginPwdForm.password
|
|
|
- }
|
|
|
- }else{
|
|
|
- data = {
|
|
|
- user_type:this.loginCodeForm.type,
|
|
|
- user_name:this.loginCodeForm.phone,
|
|
|
- password:this.loginCodeForm.code,
|
|
|
- is_dynamic_verification_code_login:"true",
|
|
|
- dynamic_verification_code_send_type:"SMS"
|
|
|
- }
|
|
|
- }
|
|
|
- getLogin(MethodName, data)
|
|
|
+ onSubmitPassword(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ let MethodName = "/OrgServer/LoginControl/Login";
|
|
|
+ let data = null;
|
|
|
+ if (this.tabsIndex === 0) {
|
|
|
+ data = {
|
|
|
+ user_type: this.loginPwdForm.type,
|
|
|
+ user_name: this.loginPwdForm.userName,
|
|
|
+ password: this.loginPwdForm.password,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ data = {
|
|
|
+ user_type: this.loginCodeForm.type,
|
|
|
+ user_name: this.loginCodeForm.phone,
|
|
|
+ password: this.loginCodeForm.code,
|
|
|
+ is_dynamic_verification_code_login: "true",
|
|
|
+ dynamic_verification_code_send_type: "SMS",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
.then((res) => {
|
|
|
- this.loading = false
|
|
|
- setToken(res);
|
|
|
- this.$router.push({ path: "/EnterSys" });
|
|
|
- window.location.reload()
|
|
|
+ this.loading = false;
|
|
|
+ setToken(res);
|
|
|
+ this.$router.push({ path: "/EnterSys" });
|
|
|
+ window.location.reload();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
- this.loading = false
|
|
|
- this.verificationCodeShow = false;
|
|
|
- clearInterval(this.timer);
|
|
|
- this.time = 60;
|
|
|
+ this.loading = false;
|
|
|
+ this.verificationCodeShow = false;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.time = 60;
|
|
|
});
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 取消 恢复到修改前状态
|
|
|
- onCancel(formName){
|
|
|
- this.$refs[formName].resetFields();
|
|
|
+ onCancel(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
},
|
|
|
// 发送验证码
|
|
|
- sendCode(time,phone,flag,obj){
|
|
|
- let this_ = this;
|
|
|
- if(this_[time] != 60){
|
|
|
- return
|
|
|
- }
|
|
|
- this_.timer = null;
|
|
|
- if (this_.loginCodeForm[phone]) {
|
|
|
- let reg = /^1[3-9]\d{9}$/;
|
|
|
- let result = reg.test(this_.loginCodeForm[phone]);
|
|
|
- if (!result) {
|
|
|
- this_.$message.warning('请输入正确的手机号');
|
|
|
- return
|
|
|
- }
|
|
|
- this_[flag] = true;
|
|
|
- this_.timer = setInterval(() => {
|
|
|
- this_[time]--;
|
|
|
- if (this_[time] == 0) {
|
|
|
- this_[flag] = false;
|
|
|
- clearInterval(this_.timer);
|
|
|
- this_.timer = null;
|
|
|
- this_[time] = 60;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
|
|
|
- let data = {
|
|
|
- send_type: 'SMS',
|
|
|
- phone_or_email: this_.loginCodeForm.phone,
|
|
|
- };
|
|
|
- getLogin(MethodName, data).then((res) => {
|
|
|
- }).catch(()=>{
|
|
|
- this_[flag] = false;
|
|
|
- clearInterval(this_.timer);
|
|
|
- this_.timer = null;
|
|
|
- this_[time] = 60;
|
|
|
- });
|
|
|
-
|
|
|
- } else {
|
|
|
- this_.$message.warning('请先输入手机号');
|
|
|
+ sendCode(time, phone, flag, obj) {
|
|
|
+ let this_ = this;
|
|
|
+ if (this_[time] != 60) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this_.timer = null;
|
|
|
+ if (this_.loginCodeForm[phone]) {
|
|
|
+ let reg = /^1[3-9]\d{9}$/;
|
|
|
+ let result = reg.test(this_.loginCodeForm[phone]);
|
|
|
+ if (!result) {
|
|
|
+ this_.$message.warning("请输入正确的手机号");
|
|
|
+ return;
|
|
|
}
|
|
|
+ this_[flag] = true;
|
|
|
+ this_.timer = setInterval(() => {
|
|
|
+ this_[time]--;
|
|
|
+ if (this_[time] == 0) {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
|
|
|
+ let data = {
|
|
|
+ send_type: "SMS",
|
|
|
+ phone_or_email: this_.loginCodeForm.phone,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {})
|
|
|
+ .catch(() => {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this_.$message.warning("请先输入手机号");
|
|
|
+ }
|
|
|
},
|
|
|
// 去掉前后空格
|
|
|
- handleTrim(form,fild){
|
|
|
- this[form][fild] = this[form][fild].trim()
|
|
|
+ handleTrim(form, fild) {
|
|
|
+ this[form][fild] = this[form][fild].trim();
|
|
|
},
|
|
|
// 忘记密码
|
|
|
- forgotPwd(){
|
|
|
- this.forgotPwdFlag = true
|
|
|
+ forgotPwd() {
|
|
|
+ this.forgotPwdFlag = true;
|
|
|
+ },
|
|
|
+ cancelFot() {
|
|
|
+ this.forgotPwdFlag = false;
|
|
|
},
|
|
|
- cancelFot(){
|
|
|
- this.forgotPwdFlag = false
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.login{
|
|
|
- height: 100vh;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- &-left{
|
|
|
- width: 655px;
|
|
|
- background: url('../assets/login-bg.png') left center no-repeat;
|
|
|
- background-size: 655px 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- img{
|
|
|
- width: 208px;
|
|
|
- padding-top: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.login-container{
|
|
|
- background: #FFFFFF;
|
|
|
- padding: 64px 72px;
|
|
|
- min-height: 100vh;
|
|
|
- flex: 1;
|
|
|
+.login {
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ &-left {
|
|
|
+ width: 655px;
|
|
|
+ background: url("../assets/login-bg.png") left center no-repeat;
|
|
|
+ background-size: 655px 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- &-inner{
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
- .title-big{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 32px;
|
|
|
- line-height: 40px;
|
|
|
- margin: 0;
|
|
|
- color: #1D2129;
|
|
|
+ img {
|
|
|
+ width: 208px;
|
|
|
+ padding-top: 32px;
|
|
|
}
|
|
|
- .title-name{
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #86909C;
|
|
|
- margin: 0 0 40px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.login-container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 64px 72px;
|
|
|
+ min-height: 100vh;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &-inner {
|
|
|
+ width: 360px;
|
|
|
+ }
|
|
|
+ .title-big {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+ .title-name {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #86909c;
|
|
|
+ margin: 0 0 40px 0;
|
|
|
+ }
|
|
|
+ .tabs-box {
|
|
|
+ display: flex;
|
|
|
+ a {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ border-radius: 100px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ &:hover {
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #f2f3f5;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #165dff;
|
|
|
+ }
|
|
|
}
|
|
|
- .tabs-box{
|
|
|
- display: flex;
|
|
|
- a{
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #4E5969;
|
|
|
- border-radius: 100px;
|
|
|
- padding: 5px 16px;
|
|
|
- margin-right: 16px;
|
|
|
- &:hover{
|
|
|
- background: #F2F3F5;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- background: #F2F3F5;
|
|
|
- font-weight: 500;
|
|
|
- color: #165DFF;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .form {
|
|
|
+ margin-top: 40px;
|
|
|
+ .show-icon {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #4e5969;
|
|
|
}
|
|
|
- .form{
|
|
|
- margin-top: 40px;
|
|
|
- .show-icon{
|
|
|
- cursor: pointer;
|
|
|
- color: #4E5969;
|
|
|
- }
|
|
|
- .forgotPwd{
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #165DFF;
|
|
|
- }
|
|
|
+ .forgotPwd {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #165dff;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
-.login-container{
|
|
|
- .form{
|
|
|
- .el-form-item__label{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #4E5969;
|
|
|
- padding-bottom: 8px;
|
|
|
- }
|
|
|
- .userAgree-box{
|
|
|
- .el-form-item__content{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- .el-checkbox-group{
|
|
|
- flex: 1;
|
|
|
- .el-checkbox{
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-box{
|
|
|
- .el-button{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .el-button+.el-button{
|
|
|
- margin-left: 0;
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- // .el-button--primary{
|
|
|
- // background: #165DFF;
|
|
|
- // border-color: #165DFF;
|
|
|
- // border-radius: 2px;
|
|
|
- // &:hover{
|
|
|
- // background: #4080FF;
|
|
|
- // border-color: #4080FF;
|
|
|
- // }
|
|
|
- // &:focus{
|
|
|
- // background: #0E42D2;
|
|
|
- // border-color: #0E42D2;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .el-button--default{
|
|
|
- // background: #F2F3F5;
|
|
|
- // border-radius: 2px;
|
|
|
- // border: none;
|
|
|
- // color: #4E5969;
|
|
|
- // &:hover{
|
|
|
- // background: #E5E6EB;
|
|
|
- // }
|
|
|
- // &:focus{
|
|
|
- // background: #C9CDD4;
|
|
|
- // }
|
|
|
- // }
|
|
|
- .code-box{
|
|
|
- .el-form-item__content{
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- }
|
|
|
- .code-input{
|
|
|
- height: 32px;
|
|
|
- .el-input__inner{
|
|
|
- border-radius: 4px 0 0 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- .sendCode{
|
|
|
- border-radius: 0 4px 4px 0;
|
|
|
- margin-top: 1px;
|
|
|
- width: 92px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- .el-form-item__content,.el-input__icon{
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
- .el-input__inner{
|
|
|
- height: 32px;
|
|
|
- color: #1D2129;
|
|
|
- background: #F2F3F5;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .el-textarea__inner,.el-input-group__prepend{
|
|
|
- color: #1D2129;
|
|
|
- }
|
|
|
- .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
|
- color: #165DFF;
|
|
|
- }
|
|
|
- .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
|
|
- background: #165DFF;
|
|
|
- border-color: #165DFF;
|
|
|
- }
|
|
|
- .el-input-group__prepend{
|
|
|
- width: 54px;
|
|
|
- height: 32px;
|
|
|
- border: none;
|
|
|
- background: #F2F3F5;
|
|
|
- border-radius: 2px 0px 0px 2px;
|
|
|
- line-height: 32px;
|
|
|
- text-align: center;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .el-input-group--prepend{
|
|
|
- display: flex;
|
|
|
- .el-input__inner{
|
|
|
- margin-left: 8px;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+.login-container {
|
|
|
+ .form {
|
|
|
+ .el-form-item__label {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
+ .userAgree-box {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .el-checkbox-group {
|
|
|
+ flex: 1;
|
|
|
+ .el-checkbox {
|
|
|
+ color: rgba(0, 0, 0, 0.88);
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box {
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-button + .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .el-button--primary{
|
|
|
+ // background: #165DFF;
|
|
|
+ // border-color: #165DFF;
|
|
|
+ // border-radius: 2px;
|
|
|
+ // &:hover{
|
|
|
+ // background: #4080FF;
|
|
|
+ // border-color: #4080FF;
|
|
|
+ // }
|
|
|
+ // &:focus{
|
|
|
+ // background: #0E42D2;
|
|
|
+ // border-color: #0E42D2;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .el-button--default{
|
|
|
+ // background: #F2F3F5;
|
|
|
+ // border-radius: 2px;
|
|
|
+ // border: none;
|
|
|
+ // color: #4E5969;
|
|
|
+ // &:hover{
|
|
|
+ // background: #E5E6EB;
|
|
|
+ // }
|
|
|
+ // &:focus{
|
|
|
+ // background: #C9CDD4;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .code-box {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-input {
|
|
|
+ height: 32px;
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sendCode {
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ margin-top: 1px;
|
|
|
+ width: 92px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .el-form-item__content,
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ height: 32px;
|
|
|
+ color: #1d2129;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-textarea__inner,
|
|
|
+ .el-input-group__prepend {
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #165dff;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner,
|
|
|
+ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background: #165dff;
|
|
|
+ border-color: #165dff;
|
|
|
+ }
|
|
|
+ .el-input-group__prepend {
|
|
|
+ width: 54px;
|
|
|
+ height: 32px;
|
|
|
+ border: none;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 2px 0px 0px 2px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .el-input-group--prepend {
|
|
|
+ display: flex;
|
|
|
+ .el-input__inner {
|
|
|
+ margin-left: 8px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
natasha