dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11.22前端

Browse Source
This commit is contained in:
@QQNZX 2023-11-22 09:06:13 +08:00
parent 3cc308ba41
commit 9031fbbe18
2 changed files with 106 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
fuintAdmin/src/views/login.vue
View File

@ -18,10 +18,7 @@
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-if="actindex == 0" >
<!-- <div class="title">-->
<!-- <img class="logo" src="@/assets/logo/logo.png"/>-->
<!-- <span class="name">{{ systemName }}</span>-->
<!-- </div>-->
<el-form-item prop="username">
<el-input
@ -128,7 +125,7 @@
size="medium"
type="primary"
style="width:100%;line-height: 24px;font-size: 16px;"
@click.native.prevent="handleLogin"
@click.native.prevent=""
>
<span v-if="!loading">立即登录</span>
<span v-else>登 录 中...</span>

113
fuintCashierWeb/src/views/login/index.vue
View File

@ -11,14 +11,15 @@
</div>
<div class="box-right">
<div class="box-title">
<div>
登录
</div>
<div>
验证码
<div style="margin-right: 15px;cursor: pointer " v-for="(item,index) in dlyzm" :key="index" @click="actindex = item.type " >
<div>{{item.text}}</div>
<div class="gangs" v-if="item.type == actindex " ></div>
</div>
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-if="actindex == 0" >
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
@ -76,6 +77,63 @@
</el-button>
</el-form-item>
</el-form>
<!-- 验证码-->
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-if="actindex == 1" >
<!-- <div class="title">-->
<!-- <img class="logo" src="@/assets/logo/logo.png"/>-->
<!-- <span class="name">{{ systemName }}</span>-->
<!-- </div>-->
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
clearable
placeholder="账号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="captchaCode" v-if="captchaOnOff">
<div style="display: flex;align-items: center">
<div>
<el-input
v-model="loginForm.captchaCode"
auto-complete="off"
placeholder="请输入验证码"
style="width: 90%"
clearable
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
</div>
<div>
<span class="anniulan" v-show="show" @click="getCode" >获取验证码</span>
<span v-show="!show" class="count">{{count}}s后重新获取</span>
</div>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;line-height: 24px;font-size: 16px;"
@click.native.prevent=""
>
<span v-if="!loading">立即登录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</div>
@ -90,6 +148,14 @@ export default {
name: "Login",
data() {
return {
show: true,
count: '',
timer: null,
dlyzm:[
{text:'登录',type:'0'},
{text: "验证码",type:'1'}
],
actindex:0,
codeUrl: "",
pwdType: 'password',
systemName : process.env.VUE_APP_TITLE,
@ -126,17 +192,40 @@ export default {
}
},
created() {
this.getCode();
this.getCodeimg();
this.getCookie();
},
methods: {
getCode() {
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
},
getCodeimg() {
const app = this
getCodeImg().then(response => {
app.codeUrl = response.data.captcha;
app.loginForm.uuid = response.data.uuid;
app.codeUrl = response.data.captcha
app.loginForm.uuid = response.data.uuid
})
},
// getCode() {
// const app = this
// getCodeImg().then(response => {
// app.codeUrl = response.data.captcha;
// app.loginForm.uuid = response.data.uuid;
// })
// },
showPwd() {
if (this.pwdType === "password") {
this.pwdType = "";
@ -222,6 +311,12 @@ $light_gray: #eee;
display: flex;
}
.gangs{
width: 100%;
height: 5px;
background: #00aaff;
border-radius: 50px;
}
.box-left{
width: 50%;
height: 100%;