zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

字

wulanhaote
张泽亮 4 years ago
parent
bb35b42b48
commit
a6f64b7459
1 changed files with 236 additions and 236 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +236
    -236
      src/views/homestead/login.vue

+ 236
- 236
src/views/homestead/login.vue View File

@@ -1,236 +1,236 @@
<template>
<div class="app-container" :style="{ height: windowHeight + 'px' }">
<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
type="password"
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不记住
windowHeight: 0,
};
},
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;
}
},
mounted() {
let windowHeight = document.documentElement.clientHeight;
this.windowHeight = windowHeight;
},
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 || "/homestead/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;
max-height: 90px;
margin-bottom: 24px;
&: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>
<template>
<div class="app-container" :style="{ height: windowHeight + 'px' }">
<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
type="password"
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不记住
windowHeight: 0,
};
},
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;
}
},
mounted() {
let windowHeight = document.documentElement.clientHeight;
this.windowHeight = windowHeight;
},
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 || "/homestead/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;
max-height: 90px;
margin-bottom: 24px;
&: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>

Write Preview
Loading…
Cancel
Save