Browse Source

feature-hub-1.0:新增登录验证码

feature-1.0
‘‘ 3 years ago
parent
commit
1bf6169fc8
  1. 9
      api/auth.js
  2. 40
      pages/login/login.vue

9
api/auth.js

@ -21,3 +21,12 @@ export function logout(data) {
data data
}) })
} }
// 获取验证码
export function getCodeImg() {
return request({
url: '/code',
method: 'get',
timeout: 20000
})
}

40
pages/login/login.vue

@ -31,6 +31,20 @@
</template> </template>
<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" :inputBorder="false" /> <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" :inputBorder="false" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item prop="code" v-if="captchaOnOff">
<uni-easyinput
v-model="formData.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</uni-easyinput>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</uni-forms-item>
</uni-forms> </uni-forms>
<button class="login-btn" type="primary" @click="$noMultipleClicks(login,formData)">登录</button> <button class="login-btn" type="primary" @click="$noMultipleClicks(login,formData)">登录</button>
<div class="foget-password uni-secondary-color"> <div class="foget-password uni-secondary-color">
@ -42,7 +56,7 @@
<script> <script>
import { import {
login login,getCodeImg
} from '@/api/auth.js' } from '@/api/auth.js'
import md5 from "js-md5" import md5 from "js-md5"
export default { export default {
@ -51,9 +65,14 @@
phoneFlag: false, phoneFlag: false,
passwordFlag: false, passwordFlag: false,
noClick:true, // noClick:true, //
//
captchaOnOff: true,
codeUrl: "",
formData: { formData: {
phone: '', phone: '',
password: '' password: '',
code: "",
uuid: ""
}, },
rules: { rules: {
@ -76,6 +95,10 @@
} }
}] }]
}, },
code: [{
required: true,
errorMessage: '请输入验证码'
}],
phone: { phone: {
rules: [{ rules: [{
required: true, required: true,
@ -108,7 +131,20 @@
// //
this.$refs.form.setRules(this.rules); this.$refs.form.setRules(this.rules);
}, },
created() {
this.getCode();
},
methods: { methods: {
//
getCode() {
getCodeImg().then(res => {
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
if (this.captchaOnOff) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.formData.uuid = res.uuid;
}
});
},
login(e) { login(e) {
// console.log(e) // console.log(e)
let that = this let that = this

Loading…
Cancel
Save