<!-- 蓝色简洁登录页面 -->
|
<template>
|
<view class="t-login">
|
<!-- 页面装饰图片 -->
|
<image class="img-a" src="/static/img/b-1.png"></image>
|
<image class="img-b" src="/static/img/b-2.png"></image>
|
<!-- 标题 -->
|
<view class="t-b">{{ title }}</view>
|
<view class="t-b2">{{ subTitle }}</view>
|
<form class="cl">
|
<!-- 登录账号 -->
|
<view class="login-form-item">
|
<u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
|
<u-icon slot="prefix" name="account" size="35px"></u-icon>
|
</u-input>
|
</view>
|
<!-- 登录密码 -->
|
<view class="login-form-item">
|
<u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
|
<u-icon slot="prefix" name="lock" size="35px"></u-icon>
|
</u-input>
|
</view>
|
<!-- 图形验证码 -->
|
<view class="login-form-item t-captcha">
|
<u-input v-model="captchaCode" type="number" placeholder="请输入验证码" maxlength="4">
|
<u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
|
</u-input>
|
<image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
|
</view>
|
<button @tap="login()">登 录</button>
|
</form>
|
</view>
|
</template>
|
<script>
|
import * as CaptchaApi from '@/api/captcha'
|
import { isEmpty } from '@/utils/verify.js'
|
|
export default {
|
data() {
|
return {
|
title: '若依权限管理系统',
|
subTitle: '欢迎回来，开始工作吧！',
|
// 图形验证码信息
|
captcha: null,
|
// 登录账号
|
username: 'admin',
|
// 密码
|
password: 'admin123',
|
// 图形验证码
|
captchaCode: '',
|
uuid: ''
|
};
|
},
|
created() {
|
// 获取图形验证码
|
this.getCaptcha()
|
},
|
methods: {
|
// 获取图形验证码
|
getCaptcha() {
|
const app = this
|
CaptchaApi.image().then(result => {
|
app.captcha = 'data:image/gif;base64,' + result.img
|
app.uuid = result.uuid
|
})
|
},
|
// 验证表单内容
|
validItem() {
|
const app = this
|
if (isEmpty(app.username)) {
|
uni.$u.toast('请输入登录用户名')
|
return false
|
}
|
if (isEmpty(app.password)) {
|
uni.$u.toast('请输入登录密码')
|
return false
|
}
|
if (isEmpty(app.captchaCode)) {
|
uni.$u.toast('请输入验证码')
|
return false
|
}
|
return true
|
},
|
// 确认登录
|
login() {
|
const app = this
|
let valid = app.validItem();
|
if (valid) {
|
app.isLoading = true
|
app.$store.dispatch('Login', {
|
username: app.username,
|
password: app.password,
|
code: app.captchaCode,
|
uuid: app.uuid
|
}).then(result => {
|
uni.switchTab({
|
url: '/pages/index/index',
|
fail(err) {
|
console.log(err)
|
}
|
})
|
})
|
.catch(err => {
|
app.captchaCode = ''
|
app.getCaptcha()
|
})
|
.finally(() => app.isLoading = false)
|
}
|
},
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
@import 'index.scss';
|
</style>
|
