wulin/wl_management_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add sms login function

Browse Source
This commit is contained in:
fumeiai 2020-06-02 11:42:57 +08:00
parent d882758e97
commit ccc5e8bc0e
2 changed files with 84 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/api_sys.js
View File

@ -23,6 +23,10 @@ export const apiGetUserInfo = (params, id) => {
return http({ url: `/lz_management/sys/user/info${id}`, method: 'get', params })
}
// 获取用户相关
export const apiSsysSendSMS = (params, id) => {
return http({ url: `/lz_management/sys/sendSMS`, method: 'post', params })
}
/**
* 管理员列表
*/

110
src/views/common/login.vue
View File

@ -14,24 +14,36 @@
@keyup.enter.native="handleLogin()"
status-icon
>
<el-form-item prop="username">
<el-input clearable v-model="dataForm.username" placeholder="帐号"></el-input>
<el-form-item prop="userName">
<el-input clearable v-model="dataForm.userName" placeholder="帐号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input clearable v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<!-- <el-form-item prop="captcha">-->
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="14">-->
<!-- <el-input-->
<!-- @key.enter.native="handleLogin"-->
<!-- clearable-->
<!-- v-model="dataForm.captcha"-->
<!-- placeholder="验证码"-->
<!-- ></el-input>-->
<!-- </el-col>-->
<!-- <el-col :span="10" class="login-captcha">-->
<!-- <img :src="captchaPath" @click="handleGetImgCaptcha" />-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-form-item>-->
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input
@key.enter.native="handleLogin"
clearable
v-model="dataForm.captcha"
placeholder="验证码"
></el-input>
<el-input v-model="dataForm.verify" placeholder="验证码">
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="handleGetImgCaptcha" />
<el-button v-if="!hasSendCode" type="primary" @click="handleVerify">获取验证码</el-button>
<el-button v-else type="primary">重新发送({{time}}S)</el-button>
</el-col>
</el-row>
</el-form-item>
@ -52,38 +64,43 @@
<script>
import { getUUID } from '@/utils'
import { apiLogin } from '@/api/api_sys'
import { apiLogin, apiSsysSendSMS } from '@/api/api_sys'
export default {
data () {
return {
isloading: false,
dataForm: {
username: '',
userName: '',
password: '',
uuid: '',
captcha: ''
// captcha: ''
verify: ''
},
dataRule: {
username: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
// captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
verify: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
},
captchaPath: '' // 图像验证码请求地址
// captchaPath: '' // 图像验证码请求地址
time: 0,
timer: true,
hasSendCode: false
}
},
created () {
this.handleGetImgCaptcha()
// this.handleGetImgCaptcha()
},
methods: {
// 获取图像验证码
handleGetImgCaptcha () {
this.dataForm.uuid = getUUID()
this.captchaPath = `/lz_management/captcha.jpg?uuid=${this.dataForm.uuid}`
},
// // 获取图像验证码
// handleGetImgCaptcha () {
// this.dataForm.uuid = getUUID()
// this.captchaPath = `/lz_management/captcha.jpg?uuid=${this.dataForm.uuid}`
// },
// 登录提交表单
handleLogin () {
let param = Object.assign(this.dataForm, { 'uuid': this.dataForm.uuid })
let param = Object.assign(this.dataForm, {'userName': this.dataForm.userName}, {'uuid': this.dataForm.uuid}, {'verifyCode': this.dataForm.verify})
this.$refs.dataForm.validate((valid) => {
if (valid) {
this.isloading = true
@ -94,13 +111,46 @@ export default {
this.$router.replace({ name: 'home' })
} else {
this.$message.error(res.msg)
this.handleGetImgCaptcha()
}
})
} else {
return false
}
})
},
// 获取验证码
handleVerify () {
this.dataForm.uuid = getUUID()
if (!this.dataForm.userName) {
this.$message('请输入账号')
return false
}
// if (!this.dataForm.captcha) {
// this.$message('请输入图形验证码')
// return false
// }
let parmse = {
userName: this.dataForm.userName,
// captcha: this.dataForm.captcha,
password: this.dataForm.password,
uuid: this.dataForm.uuid
}
apiSsysSendSMS(parmse).then(res => {
if (res.code === 0) {
this.time = 60
this.hasSendCode = true
this.timer = setInterval(() => {
if (this.time === 0) {
this.hasSendCode = false
}
this.time--
}, 1000)
this.$message.success(res.msg)
} else {
// this.getCaptcha()
this.$message.error(res.msg)
}
})
}
}
}
@ -170,13 +220,13 @@ export default {
.login-title {
font-size: 16px;
}
.login-captcha {
overflow: hidden;
> img {
width: 100%;
cursor: pointer;
}
}
/*.login-captcha {*/
/* overflow: hidden;*/
/* > img {*/
/* width: 100%;*/
/* cursor: pointer;*/
/* }*/
/*}*/
.login-btn-submit {
width: 100%;
margin-top: 38px;