Skip to content

W
wangxiaolu-promotion-wechat
提交 1c5aefbf authored 作者: RuoYi's avatar RuoYi
浏览文件
操作

优化登录页面验证码显示效果

上级 55fb5c5f
隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 176 行删除
pages/login.vue
浏览文件 @ 1c5aefbf
<template> <template>
<view class="normal-login-container"> <view class="normal-login-container">
<view class="logo-content align-center justify-center flex"> <view class="logo-content align-center justify-center flex">
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"> <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
</image> </image>
<text class="title">若依移动端登录</text> <text class="title">若依移动端登录</text>
</view> </view>
<view class="login-form-content"> <view class="login-form-content">
<view class="input-item flex align-center"> <view class="input-item flex align-center">
<view class="iconfont icon-user icon"></view> <view class="iconfont icon-user icon"></view>
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" /> <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
</view> </view>
<view class="input-item flex align-center"> <view class="input-item flex align-center">
<view class="iconfont icon-password icon"></view> <view class="iconfont icon-password icon"></view>
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" /> <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
</view> </view>
<view class="input-item flex align-center" v-if="captchaEnabled"> <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
<view class="iconfont icon-code icon"></view> <view class="iconfont icon-code icon"></view>
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" /> <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
<image :src="codeUrl" @click="getCode" class="login-code-img"></image> <view class="login-code">
</view> <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
<view class="action-btn"> </view >
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button> </view>
</view> <view class="action-btn">
</view> <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
</view>
<view class="xieyi text-center"> </view>
<text class="text-grey1">登录即代表同意</text>
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text> <view class="xieyi text-center">
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text> <text class="text-grey1">登录即代表同意</text>
</view> <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
</view> <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
</template> </view>
</view>
<script> </template>
import { getCodeImg } from '@/api/login'
<script>
export default { import { getCodeImg } from '@/api/login'
data() {
return { export default {
codeUrl: "", data() {
captchaEnabled: true, return {
globalConfig: getApp().globalData.config, codeUrl: "",
loginForm: { captchaEnabled: true,
username: "admin", globalConfig: getApp().globalData.config,
password: "admin123", loginForm: {
code: "", username: "admin",
uuid: '' password: "admin123",
} code: "",
} uuid: ''
}, }
created() { }
this.getCode() },
}, created() {
methods: { this.getCode()
// 隐私协议 },
handlePrivacy() { methods: {
let site = this.globalConfig.appInfo.agreements[0] // 隐私协议
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`) handlePrivacy() {
}, let site = this.globalConfig.appInfo.agreements[0]
// 用户协议 this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
handleUserAgrement() { },
let site = this.globalConfig.appInfo.agreements[1] // 用户协议
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`) handleUserAgrement() {
}, let site = this.globalConfig.appInfo.agreements[1]
// 获取图形验证码 this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
getCode() { },
getCodeImg().then(res => { // 获取图形验证码
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled getCode() {
if (this.captchaEnabled) { getCodeImg().then(res => {
this.codeUrl = 'data:image/gif;base64,' + res.img this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
this.loginForm.uuid = res.uuid if (this.captchaEnabled) {
} this.codeUrl = 'data:image/gif;base64,' + res.img
}) this.loginForm.uuid = res.uuid
}, }
// 登录方法 })
async handleLogin() { },
if (this.loginForm.username === "") { // 登录方法
this.$modal.msgError("请输入您的账号") async handleLogin() {
} else if (this.loginForm.password === "") { if (this.loginForm.username === "") {
this.$modal.msgError("请输入您的密码") this.$modal.msgError("请输入您的账号")
} else if (this.loginForm.code === "" && this.captchaEnabled) { } else if (this.loginForm.password === "") {
this.$modal.msgError("请输入验证码") this.$modal.msgError("请输入您的密码")
} else { } else if (this.loginForm.code === "" && this.captchaEnabled) {
this.$modal.loading("登录中，请耐心等待...") this.$modal.msgError("请输入验证码")
this.pwdLogin() } else {
} this.$modal.loading("登录中，请耐心等待...")
}, this.pwdLogin()
// 密码登录 }
async pwdLogin() { },
this.$store.dispatch('Login', this.loginForm).then(() => { // 密码登录
this.$modal.closeLoading() async pwdLogin() {
this.loginSuccess() this.$store.dispatch('Login', this.loginForm).then(() => {
}).catch(() => { this.$modal.closeLoading()
if (this.captchaEnabled) { this.loginSuccess()
this.getCode() }).catch(() => {
} if (this.captchaEnabled) {
}) this.getCode()
}, }
// 登录成功后，处理函数 })
loginSuccess(result) { },
// 设置用户信息 // 登录成功后，处理函数
this.$store.dispatch('GetInfo').then(res => { loginSuccess(result) {
this.$tab.reLaunch('/pages/index') // 设置用户信息
}) this.$store.dispatch('GetInfo').then(res => {
} this.$tab.reLaunch('/pages/index')
} })
} }
</script> }
}
<style lang="scss"> </script>
page {
background-color: #ffffff; <style lang="scss">
} page {
background-color: #ffffff;
.normal-login-container { }
width: 100%;
.normal-login-container {
.logo-content { width: 100%;
width: 100%;
font-size: 21px; .logo-content {
text-align: center; width: 100%;
padding-top: 15%; font-size: 21px;
text-align: center;
image { padding-top: 15%;
border-radius: 4px;
} image {
border-radius: 4px;
.title { }
margin-left: 10px;
.title {
margin-left: 10px;
}
}
.login-form-content {
text-align: center;
margin: 20px auto;
margin-top: 15%;
width: 80%;
.input-item {
margin: 20px auto;
background-color: #f5f6f7;
height: 45px;
border-radius: 20px;
.icon {
font-size: 38rpx;
margin-left: 10px;
color: #999;
}
.input {
width: 100%;
font-size: 14px;
line-height: 20px;
text-align: left;
padding-left: 15px;
}
}
.login-btn {
margin-top: 40px;
height: 45px;
}
.xieyi {
color: #333;
margin-top: 20px;
} }
}
.login-code {
.login-form-content { height: 38px;
text-align: center; float: right;
margin: 20px auto;
margin-top: 15%; .login-code-img {
width: 80%; height: 38px;
position: absolute;
.input-item {
margin: 20px auto;
background-color: #f5f6f7;
height: 45px;
border-radius: 20px;
.icon {
font-size: 38rpx;
margin-left: 10px; margin-left: 10px;
color: #999; width: 200rpx;
} }
}
}
}
.input {
width: 100%;
font-size: 14px;
line-height: 20px;
text-align: left;
padding-left: 15px;
}
}
.login-btn {
margin-top: 40px;
height: 45px;
}
.xieyi {
color: #333;
margin-top: 20px;
}
}
.easyinput {
width: 100%;
}
}
.login-code-img {
height: 45px;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论