|
|
@@ -0,0 +1,229 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="login_header"></div> |
|
|
|
<div class="login_content"> |
|
|
|
<div class="homestead_wrap"> |
|
|
|
<div class="key_title">确权颁证调查统计系统</div> |
|
|
|
<div class="slogan"></div> |
|
|
|
</div> |
|
|
|
<div class="from_wrap"> |
|
|
|
<div class="from_content"> |
|
|
|
<div class="signIn_container"> |
|
|
|
<div class="signIn_input_wrap"> |
|
|
|
<van-field |
|
|
|
autosize |
|
|
|
v-model="formData.username" |
|
|
|
placeholder="请输入用户名" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="signIn_container"> |
|
|
|
<div class="signIn_input_wrap"> |
|
|
|
<van-field |
|
|
|
autosize |
|
|
|
placeholder="请输入密码" |
|
|
|
v-model="formData.password" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="signIn_container"> |
|
|
|
<div class="signIn_input_wrap"> |
|
|
|
<div class="verification_code"> |
|
|
|
<van-field |
|
|
|
autosize |
|
|
|
placeholder="请输入验证码" |
|
|
|
v-model="formData.code" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="verification_images"> |
|
|
|
<img class="code-img" :src="codeUrl" @click="getCode" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="signIn_container"> |
|
|
|
<div class="remember_num"> |
|
|
|
<van-checkbox |
|
|
|
v-model="rememberPassword" |
|
|
|
icon-size="16px" |
|
|
|
checked-color="#3CBF5B" |
|
|
|
>记住密码</van-checkbox |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="from_btn" @click="handleLogin">登录</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getCodeImg } from "@/api/login"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
export default { |
|
|
|
name: "homesteadLogin", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formData: { |
|
|
|
username: "", //账号 |
|
|
|
password: "", //密码 |
|
|
|
code: null, //图片验证码 |
|
|
|
uuid: null, //识别uuid |
|
|
|
}, |
|
|
|
codeUrl: "", //图片验证码 |
|
|
|
rememberPassword: false, //记住密码 1记住 2不记住 |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getCode(); |
|
|
|
let userName = Cookies.get("homesteadUserName"); // => 'value' |
|
|
|
let password = Cookies.get("homesteadPassword"); // => undefined |
|
|
|
if (userName != undefined) { |
|
|
|
this.formData.username = userName; |
|
|
|
this.rememberPassword = true; |
|
|
|
} |
|
|
|
if (password != undefined) { |
|
|
|
this.formData.password = password; |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getCode() { |
|
|
|
getCodeImg().then((res) => { |
|
|
|
this.formData.uuid = res.uuid; |
|
|
|
this.codeUrl = "data:image/gif;base64," + res.img; |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleLogin() { |
|
|
|
//账号密码登录 |
|
|
|
if (this.formData.username == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: "账号不能为空", |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} else if (this.formData.password == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: "密码不能为空", |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} else if (this.formData.code == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: "图片验证码不能为空", |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
this.$store |
|
|
|
.dispatch("Login", this.formData) |
|
|
|
.then(() => { |
|
|
|
if (this.rememberPassword == true) { |
|
|
|
Cookies.set("homesteadUserName", this.formData.username, { |
|
|
|
expires: 30, |
|
|
|
}); |
|
|
|
Cookies.set("homesteadPassword", this.formData.password, { |
|
|
|
expires: 30, |
|
|
|
}); |
|
|
|
} |
|
|
|
this.$router |
|
|
|
.push({ path: this.redirect || "/authenticRight/index" }) |
|
|
|
.catch(() => {}); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.loading = false; |
|
|
|
this.getCode(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.app-container { |
|
|
|
display: flex; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
flex-direction: column; |
|
|
|
.login_header { |
|
|
|
flex: 0.35; |
|
|
|
background: url("../../assets/images/homestead/login_bg.jpg") center bottom |
|
|
|
no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.login_content { |
|
|
|
flex: 0.65; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.homestead_wrap { |
|
|
|
flex: 0.28; |
|
|
|
display: flex; |
|
|
|
justify-content: center; /* 相对父元素水平居中 */ |
|
|
|
align-items: center; /* 子元素相对父元素垂直居中 */ |
|
|
|
flex-direction: column; |
|
|
|
.key_title { |
|
|
|
font-size: 56px; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.slogan { |
|
|
|
font-size: 32px; |
|
|
|
color: #9f9f9f; |
|
|
|
} |
|
|
|
} |
|
|
|
.from_wrap { |
|
|
|
flex: 0.72; |
|
|
|
padding-bottom: 14%; |
|
|
|
flex-direction: column; |
|
|
|
display: flex; |
|
|
|
margin: 0 40px; |
|
|
|
.from_content { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding-bottom: 14%; |
|
|
|
.signIn_container { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 18px; |
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.signIn_input_wrap { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
.verification_code { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.verification_images { |
|
|
|
flex: 0 0 220px; |
|
|
|
margin-left: 20px; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-cell { |
|
|
|
border: 2px solid #f1f0f5; |
|
|
|
border-radius: 46px; |
|
|
|
font-size: 32px; |
|
|
|
} |
|
|
|
} |
|
|
|
.remember_num { |
|
|
|
margin-left: 14px; |
|
|
|
font-size: 28px; |
|
|
|
color: #3cbf5b; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.from_btn { |
|
|
|
display: flex; |
|
|
|
flex: 0 0 80px; |
|
|
|
background: #3cbf5b; |
|
|
|
border-radius: 40px; |
|
|
|
font-size: 36px; |
|
|
|
justify-content: center; /* 相对父元素水平居中 */ |
|
|
|
align-items: center; /* 子元素相对父元素垂直居中 */ |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |