|
|
@@ -3,36 +3,36 @@
|
|
|
<div class="header">登录</div>
|
|
|
<div class="main">
|
|
|
<el-form ref="form" :model="form" :rules="rules">
|
|
|
- <el-form-item prop="username">
|
|
|
+ <el-form-item prop="principal">
|
|
|
<el-input
|
|
|
- v-model="form.username"
|
|
|
+ v-model="form.principal"
|
|
|
placeholder="用户名/邮箱/手机号"
|
|
|
class="cuborder-radius"
|
|
|
- maxlength="11"
|
|
|
+ maxlength="64"
|
|
|
@keyup.enter.native="onSubmit('form')"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="password">
|
|
|
+ <el-form-item prop="credential">
|
|
|
<el-input
|
|
|
- v-model="form.password"
|
|
|
- type="password"
|
|
|
- placeholder="密码"
|
|
|
- class="cuborder-radius"
|
|
|
- @keyup.enter.native="onSubmit('form')"
|
|
|
+ v-model="form.credential"
|
|
|
+ type="password"
|
|
|
+ placeholder="密码"
|
|
|
+ class="cuborder-radius"
|
|
|
+ @keyup.enter.native="onSubmit('form')"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="captchaCode">
|
|
|
<el-row>
|
|
|
- <el-col :span=12>
|
|
|
+ <el-col :span="12">
|
|
|
<el-input
|
|
|
- v-model="form.captchaCode"
|
|
|
- placeholder="图形验证码"
|
|
|
- class="cuborder-radius"
|
|
|
- maxlength="11"
|
|
|
- @keyup.enter.native="onSubmit('form')"
|
|
|
+ v-model="form.captchaCode"
|
|
|
+ placeholder="图形验证码"
|
|
|
+ class="cuborder-radius"
|
|
|
+ maxlength="11"
|
|
|
+ @keyup.enter.native="onSubmit('form')"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :span=12>
|
|
|
+ <el-col :span="12">
|
|
|
<img :src="captchaCode" alt="图形验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -41,7 +41,7 @@
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
class="submit-btn"
|
|
|
- :loading="registerLoading"
|
|
|
+ :loading="loginLoading"
|
|
|
@click="onSubmit('form')"
|
|
|
>
|
|
|
登录
|
|
|
@@ -70,78 +70,58 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { ServeCaptcha, ServeRegister, ServeSendVerifyCode } from '@/api/account'
|
|
|
-import { isMobile } from '@/utils/validate'
|
|
|
-import SmsLock from '@/utils/sms-lock'
|
|
|
+import { ServeCaptcha, ServeLogin, ServePubkey } from '@/api/account'
|
|
|
+import { JSEncrypt } from 'jsencrypt'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
- let validateMobile = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('手机号不能为空！'))
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- if (!isMobile(value)) {
|
|
|
- callback(new Error('手机号格式不正确！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let validatePass2 = (rule, value, callback) => {
|
|
|
+ const validatePass = (rule, value, callback) => {
|
|
|
if (value === '') {
|
|
|
callback(new Error('请再次输入密码'))
|
|
|
- } else if (value !== this.form.password) {
|
|
|
+ } else if (value !== this.form.credential) {
|
|
|
callback(new Error('两次输入密码不一致!'))
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
return {
|
|
|
captchaCode: '',
|
|
|
- registerLoading: false,
|
|
|
+ loginLoading: false,
|
|
|
+ pubkey: {
|
|
|
+ key: '',
|
|
|
+ r: ''
|
|
|
+ },
|
|
|
form: {
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- mobile: '',
|
|
|
- smsCode: '',
|
|
|
+ principal: '',
|
|
|
+ credential: '',
|
|
|
captchaCode: '',
|
|
|
- plat: ''
|
|
|
+ plat: 2
|
|
|
},
|
|
|
rules: {
|
|
|
- username: [
|
|
|
+ principal: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: '用户名不能为空!',
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
],
|
|
|
- mobile: [
|
|
|
+ credential: [
|
|
|
{
|
|
|
- validator: validateMobile,
|
|
|
- trigger: 'blur',
|
|
|
+ validator: validatePass,
|
|
|
+ trigger: 'blur'
|
|
|
},
|
|
|
- ],
|
|
|
- smsCode: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: '短信验证码不能为空!',
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- smsLock: false,
|
|
|
- smsLockObj: null,
|
|
|
+ min: 1,
|
|
|
+ max: 100,
|
|
|
+ message: '手机号格式不正确!',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getCaptcha()
|
|
|
- this.smsLockObj = new SmsLock('REGISTER_SMS', 60)
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- this.smsLockObj.clearInterval()
|
|
|
},
|
|
|
methods: {
|
|
|
getCaptcha() {
|
|
|
@@ -151,121 +131,239 @@ export default {
|
|
|
} else {
|
|
|
this.$notify.info({
|
|
|
title: '提示',
|
|
|
- message: '获取 Captcha 失败, 请重新刷新页面...',
|
|
|
+ message: '获取 Captcha 失败, 请重新刷新页面...'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPubkey() {
|
|
|
+ ServePubkey().then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.pubkey.key = res.data.pubkey
|
|
|
+ this.pubkey.r = res.data.r
|
|
|
+
|
|
|
+ this.getCaptcha()
|
|
|
+ } else {
|
|
|
+ this.$notify.info({
|
|
|
+ title: '提示',
|
|
|
+ message: '获取公钥失败, 请重新刷新页面...'
|
|
|
})
|
|
|
}
|
|
|
}).finally(() => {
|
|
|
})
|
|
|
},
|
|
|
- randomString(len) {
|
|
|
- len = len || 16
|
|
|
- var t = '012345678ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'
|
|
|
- var a = t.length
|
|
|
- var res = ''
|
|
|
- for (var i = 0; i < len; i++) res += t.charAt(Math.floor(Math.random() * a))
|
|
|
- return res
|
|
|
+ encryptPassword(password) {
|
|
|
+ var encryptor = new JSEncrypt()
|
|
|
+ encryptor.setPublicKey(this.pubkey.key)
|
|
|
+ return encryptor.encrypt(this.pubkey.r + password)
|
|
|
},
|
|
|
resetFields() {
|
|
|
if (!this.model) {
|
|
|
- console.warn('[Element Warn][Form]model is required for resetFields to work.');
|
|
|
- return;
|
|
|
+ console.warn('[Element Warn][Form]model is required for resetFields to work.')
|
|
|
+ return
|
|
|
}
|
|
|
this.fields.forEach(field => {
|
|
|
- field.resetField();
|
|
|
- });
|
|
|
+ field.resetField()
|
|
|
+ })
|
|
|
},
|
|
|
toLink(url) {
|
|
|
this.$router.push({
|
|
|
- path: url,
|
|
|
+ path: url
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
onSubmit(formName) {
|
|
|
- if (this.registerLoading) return false
|
|
|
+ if (this.loginLoading) return false
|
|
|
|
|
|
this.$refs[formName].validate(valid => {
|
|
|
if (!valid) return false
|
|
|
- this.registerLoading = true
|
|
|
- this.register()
|
|
|
+ this.loginLoading = true
|
|
|
+ this.login()
|
|
|
})
|
|
|
},
|
|
|
- register() {
|
|
|
- ServeRegister(
|
|
|
- this.form
|
|
|
- ).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '注册成功,快去登录吧...',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
-
|
|
|
- this.$refs.form.resetFields()
|
|
|
- setTimeout(() => {
|
|
|
- this.toLink('/sso/login')
|
|
|
- }, 1500)
|
|
|
- } else {
|
|
|
- this.$notify.info({
|
|
|
- title: '提示',
|
|
|
- message: res.message,
|
|
|
- })
|
|
|
- }
|
|
|
- }).catch((e) => {
|
|
|
- console.log(e)
|
|
|
- this.$notify({
|
|
|
- message: '网络错误,请稍后再试...',
|
|
|
+ async login() {
|
|
|
+ ServeLogin({
|
|
|
+ loginType: this.form.loginType,
|
|
|
+ plat: this.form.plat,
|
|
|
+ principal: this.form.principal,
|
|
|
+ credential: this.encryptPassword(this.form.credential),
|
|
|
+ captchaCode: this.form.captchaCode
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$refs.form.resetFields()
|
|
|
+ const resData = res.data
|
|
|
+ /* const userInfo = resData.userInfo
|
|
|
+ const userToken = resData.userToken
|
|
|
+ setUserToken(userToken)
|
|
|
+ this.$store.commit('UPDATE_USER_INFO', userInfo)*/
|
|
|
+ this.$router.push('/')
|
|
|
+ } else {
|
|
|
+ this.$notify.info({
|
|
|
+ title: '提示',
|
|
|
+ message: res.msg
|
|
|
})
|
|
|
- }).finally(() => {
|
|
|
- this.registerLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击发送验证码
|
|
|
- sendSms() {
|
|
|
- if (this.smsLock) return false
|
|
|
-
|
|
|
- if (!isMobile(this.form.mobile)) {
|
|
|
- this.$refs.form.validateField('mobile', (val) => {
|
|
|
- return !val;
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.loginLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
- this.smsLock = true
|
|
|
- ServeSendVerifyCode({
|
|
|
- receiver: this.form.mobile,
|
|
|
- channel: 'register',
|
|
|
- }).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '验证码发送成功...',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
+<style lang="scss">
|
|
|
+#deep.el-input__inner {
|
|
|
+ border-radius: 1px !important;
|
|
|
+}
|
|
|
|
|
|
- this.smsLockObj.start()
|
|
|
- /*if (res.data.is_debug) {
|
|
|
- setTimeout(() => {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '已自动填充验证码',
|
|
|
- })
|
|
|
+#auth-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f6f8fb;
|
|
|
+ #logo-name {
|
|
|
+ width: 200px;
|
|
|
+ height: 38px;
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: Times New Roman, Georgia, serif;
|
|
|
+ color: #2196f3;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ #login-box {
|
|
|
+ position: absolute;
|
|
|
+ width: 350px;
|
|
|
+ min-height: 480px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0 4px 14px 0 rgba(206,207,209,0.5);
|
|
|
+ padding: 10px 20px;
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+ font-size: 22px;
|
|
|
+ margin: 25px 0 20px 0;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ .links {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ a {
|
|
|
+ font-weight: normal !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .send-code-btn {
|
|
|
+ width: 140px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: inline-block;
|
|
|
+ background: #f3ecec;
|
|
|
+ text-align: center;
|
|
|
+ color: #777373;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ margin-left: 5px;
|
|
|
+ &:active {
|
|
|
+ background: #e4dbdb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .send-sms-disable {
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ background: #f7f7f7 !important;
|
|
|
+ color: silver !important;
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.preview-account {
|
|
|
+ text-align: center;
|
|
|
+ p {
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ color: #2d2c2c;
|
|
|
+ font-weight: 100;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.copyright {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 70%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b1a0a0;
|
|
|
+ a {
|
|
|
+ color: #777272;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (max-height : 500px) {
|
|
|
+ .copyright {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- this.form.sms_code = res.data.sms_code
|
|
|
- }, 500)
|
|
|
- }*/
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: res.message,
|
|
|
- customClass: 'cus-notifyclass',
|
|
|
- })
|
|
|
- }
|
|
|
- }).finally(() => {
|
|
|
- this.smsLock = false
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
+.fly-box {
|
|
|
+ .bg-fly-circle1 {
|
|
|
+ left: 40px;
|
|
|
+ top: 100px;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(to right,rgba(100,84,239,0.07) 0%,rgba(48,33,236,0.04) 100%);
|
|
|
+ animation: move 2.5s linear infinite;
|
|
|
+ }
|
|
|
+ .bg-fly-circle2 {
|
|
|
+ left: 3%;
|
|
|
+ top: 60%;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(to right,rgba(100,84,239,0.08) 0%,rgba(48,33,236,0.04) 100%);
|
|
|
+ animation: move 3s linear infinite;
|
|
|
+ }
|
|
|
+ .bg-fly-circle3 {
|
|
|
+ right: 2%;
|
|
|
+ top: 140px;
|
|
|
+ width: 145px;
|
|
|
+ height: 145px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(to right,rgba(100,84,239,0.1) 0%,rgba(48,33,236,0.04) 100%);
|
|
|
+ animation: move 2.5s linear infinite;
|
|
|
+ }
|
|
|
+ .bg-fly-circle4 {
|
|
|
+ right: 5%;
|
|
|
+ top: 60%;
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(to right,rgba(100,84,239,0.02) 0%,rgba(48,33,236,0.04) 100%);
|
|
|
+ animation: move 3.5s linear infinite;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes move {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: translateY(25px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
}
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
-@import '~@/assets/css/login-auth.scss';
|
|
|
</style>
|
