|
|
@@ -11,56 +11,128 @@ |
|
|
|
<div class="signIn_container"> |
|
|
|
<div class="signIn_input_wrap"> |
|
|
|
<van-field |
|
|
|
v-model="message" |
|
|
|
autosize |
|
|
|
placeholder="请输入手机号" |
|
|
|
v-model="formData.username" |
|
|
|
placeholder="请输入用户名" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="signIn_container"> |
|
|
|
<div class="signIn_input_wrap"> |
|
|
|
<van-field v-model="message" autosize placeholder="请输入密码" /> |
|
|
|
<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 |
|
|
|
v-model="message" |
|
|
|
autosize |
|
|
|
placeholder="请输入验证码" |
|
|
|
v-model="formData.code" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="verification_images"></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-radio-group v-model="radio"> |
|
|
|
<van-radio name="1" icon-size="16px" checked-color="#3CBF5B" |
|
|
|
>记住密码</van-radio |
|
|
|
> |
|
|
|
</van-radio-group> |
|
|
|
<van-checkbox |
|
|
|
v-model="rememberPassword" |
|
|
|
icon-size="16px" |
|
|
|
checked-color="#3CBF5B" |
|
|
|
>记住密码</van-checkbox |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="from_btn">登录</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 { |
|
|
|
message: "", |
|
|
|
radio: "2", |
|
|
|
formData: { |
|
|
|
username: "", //账号 |
|
|
|
password: "", //密码 |
|
|
|
code: null, //图片验证码 |
|
|
|
uuid: null, //识别uuid |
|
|
|
}, |
|
|
|
codeUrl: "", //图片验证码 |
|
|
|
rememberPassword: false, //记住密码 1记住 2不记住 |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() {}, |
|
|
|
methods: {}, |
|
|
|
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 || "/homestead/index" }) |
|
|
|
.catch(() => {}); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.loading = false; |
|
|
|
this.getCode(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
@@ -123,6 +195,10 @@ export default { |
|
|
|
.verification_images { |
|
|
|
flex: 0 0 220px; |
|
|
|
margin-left: 20px; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-cell { |
|
|
|
border: 2px solid #f1f0f5; |
|
|
|