388 lines
12 KiB
Vue
388 lines
12 KiB
Vue
<template>
|
||
<div class="login">
|
||
<div class="body">
|
||
<div class="middle">
|
||
<div class="right">
|
||
<div class="tab">
|
||
<h2 class="active" @click="currIndex = 0">登录</h2>
|
||
</div>
|
||
<el-form :model="form" label-position="top" ref="form" label-width="100px" class="form">
|
||
<el-form-item
|
||
prop="mobile"
|
||
:rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: phoneReg, trigger: 'blur' }]">
|
||
<el-input maxlength="11" placeholder="请输入手机号" v-model="form.mobile" @keyup.enter.native="login"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
prop="password"
|
||
:rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
|
||
<el-input placeholder="请输入密码" v-model="form.password" type="password" @keyup.enter.native="login"></el-input>
|
||
</el-form-item>
|
||
<el-button type="primary" style="width: 100%" @click="login" :loading="btnLoading">立即登录</el-button>
|
||
</el-form>
|
||
<div class="login-footer">
|
||
<div class="left">
|
||
<span>没有账号？</span>
|
||
<i class="hover" @click="$router.push('/register')">立即注册</i>
|
||
</div>
|
||
<div class="left" style="margin-left: 10px;">
|
||
<span>忘记密码？</span>
|
||
<i class="hover" @click="$router.push('/forget')">找回密码</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="kefu" @click="gotoKefu">
|
||
<label slot="reference" class="topBtn" title="联系客服"></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
form: {
|
||
mobile: '',
|
||
password: ''
|
||
},
|
||
phoneReg: (rule, value, callback) => {
|
||
if (/^1[0-9]{10,10}$/.test(value)) {
|
||
return callback()
|
||
}
|
||
|
||
callback(new Error('手机号格式错误'))
|
||
},
|
||
timer: null,
|
||
time: 60,
|
||
isSend: false,
|
||
isStart: false,
|
||
isLoading: false,
|
||
currIndex: 0,
|
||
btnLoading: false,
|
||
loginType: '0'
|
||
}
|
||
},
|
||
|
||
mounted () {
|
||
},
|
||
|
||
methods: {
|
||
login () {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
this.btnLoading = true
|
||
const devVersion = require('../../manifest.development.json').version
|
||
const prodVersion = require('../../manifest.production.json').version
|
||
const version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
|
||
this.$http.post(`/api/mobile/token`, this.form, {
|
||
params: {
|
||
...this.form,
|
||
version
|
||
},
|
||
headers: {
|
||
Authorization: 'Basic YXBwOmFwcA=='
|
||
}
|
||
}).then(res => {
|
||
if (res.access_token) {
|
||
this.$store.commit('setToken', `${res.token_type} ${res.access_token}`)
|
||
this.$message.success('登录成功')
|
||
this.$store.dispatch('getUserInfo')
|
||
|
||
setTimeout(() => {
|
||
this.$router.push('/')
|
||
}, 800)
|
||
}
|
||
|
||
this.btnLoading = false
|
||
}).catch(() => {
|
||
this.btnLoading = false
|
||
})
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false;
|
||
}
|
||
})
|
||
},
|
||
|
||
getCode () {
|
||
if (this.isSend) {
|
||
return this.$message.error('验证码已发送')
|
||
}
|
||
|
||
this.$refs.form.validateField('loginname', e => {
|
||
if (!e) {
|
||
this.isSend = true
|
||
this.btnLoading = true
|
||
this.$http.post(`/api/sms/getRegSmsCode?phone=${this.form.phone}`, {}, {
|
||
withoutToken: true
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.$message.success('验证码发送成功')
|
||
this.isStart = true
|
||
this.timer = setInterval(() => {
|
||
if (this.time === 0) {
|
||
this.isSend = false
|
||
this.isStart = false
|
||
this.time = 60
|
||
clearInterval(this.timer)
|
||
|
||
return false
|
||
}
|
||
|
||
this.time = this.time - 1
|
||
}, 1000)
|
||
}
|
||
|
||
this.btnLoading = false
|
||
this.isSend = false
|
||
}).catch(() => {
|
||
this.isSend = false
|
||
this.btnLoading = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
onChange (e) {
|
||
this.$emit('change', e)
|
||
},
|
||
gotoKefu() {
|
||
window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
|
||
.body {
|
||
position: relative;
|
||
flex: 1;
|
||
width: 100%;
|
||
background-color: #cdc8c8;
|
||
// background: url(../../assets/images/login/login.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.middle {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
top: 50%;
|
||
left: 50%;
|
||
z-index: 11;
|
||
width: 1280px;
|
||
transform: translate(-50%, -50%);
|
||
|
||
& > .left {
|
||
padding-top: 42px;
|
||
font-family: MicrosoftYaHei;
|
||
|
||
p {
|
||
line-height: 24px;
|
||
margin-top: 12px;
|
||
margin-bottom: 13px;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
}
|
||
|
||
span {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
& > .right {
|
||
width: 500px;
|
||
padding: 63px 40px 42px;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
backdrop-filter: blur(6px);
|
||
overflow: hidden;
|
||
|
||
.tab {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
margin-bottom: 36px;
|
||
padding-bottom: 17px;
|
||
border-bottom: 1px solid #DCDFE6;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 81px;
|
||
height: 2px;
|
||
background: #1FBAD6;
|
||
content: ' ';
|
||
transition: all ease-in-out 0.3s;
|
||
}
|
||
|
||
&.tab-active:after {
|
||
transform: translateX(138px);
|
||
}
|
||
|
||
h2 {
|
||
width: 81px;
|
||
line-height: 24px;
|
||
font-size: 20px;
|
||
text-align: center;
|
||
font-family: SJsuqian;
|
||
color: #000000;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: all ease 0.4s;
|
||
|
||
&.active, &:hover {
|
||
color: #1FBAD6;
|
||
}
|
||
|
||
&:first-child {
|
||
margin-right: 58px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.login-type {
|
||
font-size: 14px;
|
||
font-family: SJsuqian;
|
||
text-align: center;
|
||
color: #54657D;
|
||
cursor: pointer;
|
||
transition: all ease-in-out 0.4s;
|
||
|
||
&:hover {
|
||
color: #1FBAD6;
|
||
}
|
||
}
|
||
|
||
.login-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 21px;
|
||
margin-bottom: 38px;
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-family: SJsuqian;
|
||
color: #54657D;
|
||
}
|
||
|
||
i {
|
||
font-family: SJsuqian;
|
||
color: #1FBAD6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-form {
|
||
.el-input__inner {
|
||
height: 48px;
|
||
border-color: #DCDFE6;
|
||
background-color: transparent;
|
||
|
||
&:focus, &:hover {
|
||
border-color: #1FBAD6;
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {
|
||
border-color: #F56C6C;
|
||
}
|
||
|
||
.el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.el-button {
|
||
height: 48px;
|
||
margin-top: 28px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.code-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
|
||
span {
|
||
width: 110px;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
border-radius: 4px;
|
||
transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
|
||
border: 1px solid #DCDFE6;
|
||
|
||
&:hover {
|
||
border-color: #1FBAD6;
|
||
}
|
||
}
|
||
|
||
.el-form-item {
|
||
width: 300px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.copyright {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
left: 50%;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
|
||
#kefu {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 40px;
|
||
z-index: 999;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
#kefu .topBtn {
|
||
width: 60px;
|
||
height: 60px;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 40px 40px;
|
||
-webkit-animation: wobble 250ms infinite;
|
||
animation: wobble 250ms infinite;
|
||
background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20t%3D%221575450105478%22%20class%3D%22icon%22%20viewBox%3D%220%200%201220%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222883%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M609.524%20103.522c-222.89%200-403.712%20178.472-403.712%20398.78%200%20220.31%20180.823%20398.782%20403.712%20398.782%20222.889%200%20403.712-178.473%20403.712-398.781%200-220.309-180.823-398.781-403.712-398.781v48.762c196.1%200%20354.95%20156.785%20354.95%20350.019s-158.85%20350.019-354.95%20350.019-354.95-156.785-354.95-350.02c0-193.233%20158.85-350.018%20354.95-350.018v-48.762z%22%20fill%3D%22%231296db%22%20p-id%3D%222884%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M786.578%20916.34c166.45-69.217%20278.408-231.055%20278.408-414.035%200-248.026-203.847-449.219-455.457-449.219-251.619%200-455.457%20201.188-455.457%20449.22%200%2055.397%2010.152%20109.367%2029.718%20159.975%204.855%2012.56-1.39%2026.677-13.949%2031.533-12.56%204.855-26.677-1.39-31.532-13.949a490.396%20490.396%200%200%201-3.042-8.078c-1.85%200.077-3.711%200.116-5.581%200.116C58.06%20671.903%200%20614.597%200%20543.903c0-65.005%2049.09-118.69%20112.68-126.91C153.65%20182.56%20360.56%204.324%20609.528%204.324c248.962%200%20455.877%20178.24%20496.85%20412.67%2063.583%208.225%20112.669%2061.907%20112.669%20126.909%200%2070.694-58.06%20128-129.686%20128-1.89%200-3.771-0.04-5.642-0.119-47.536%20129.702-148.34%20235.841-279.493%20290.027-1.161%2033.464-29.012%2060.24-63.2%2060.24-34.925%200-63.237-27.944-63.237-62.416%200-34.471%2028.312-62.415%2063.237-62.415%2017.892%200%2034.048%207.333%2045.551%2019.12z%22%20fill%3D%22%231296db%22%20p-id%3D%222885%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M609.528%20611.405c-58.933%200-112.056-10.644-158.472-28.342-16.123-6.147-30.211-12.702-42.138-19.208-6.926-3.777-11.447-6.59-13.437-7.972-19.24-13.373-44.428%205.446-37.059%2027.688%2035.296%20106.527%20136.054%20179.913%20251.106%20179.913%20115.05%200%20215.796-73.384%20251.092-179.913%207.37-22.243-17.82-41.062-37.06-27.687-1.99%201.383-6.51%204.195-13.434%207.972-11.926%206.505-26.012%2013.06-42.133%2019.207-46.413%2017.698-99.533%2028.342-158.465%2028.342z%22%20fill%3D%22%231296db%22%20p-id%3D%222886%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
|
||
}
|
||
</style>
|