|
|
@@ -6,7 +6,7 @@
|
|
|
<div class="login-main">
|
|
|
<div class="logo-header">
|
|
|
<div class="login-img">
|
|
|
- <img src="@/assets/img/login.png" alt="">
|
|
|
+ <img src="@/assets/img/login.png" alt="" />
|
|
|
</div>
|
|
|
<p class="logo-header-title">登录</p>
|
|
|
<p class="logo-header-tips">登录享受更多精彩</p>
|
|
|
@@ -14,20 +14,27 @@
|
|
|
<van-form validate-first class="login-form">
|
|
|
<ul class="clear">
|
|
|
<li class="label">
|
|
|
- 账号:
|
|
|
+ 卡号:
|
|
|
<!-- <img :src="user" alt="" /> -->
|
|
|
</li>
|
|
|
<li class="van-field-input">
|
|
|
- <van-field
|
|
|
- size="large"
|
|
|
-
|
|
|
- v-model="form.mobile"
|
|
|
- name="mobile"
|
|
|
- placeholder="请输入账号"
|
|
|
- type="text"
|
|
|
- :rules="[{ validator: asyncmobileValidator }]"
|
|
|
- >
|
|
|
- </van-field>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="4">
|
|
|
+ <div class="myCard">CJ1745</div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="20">
|
|
|
+ <van-field
|
|
|
+ size="large"
|
|
|
+ v-model="form.mobile"
|
|
|
+ name="mobile"
|
|
|
+ placeholder="请输入卡号"
|
|
|
+ type="text"
|
|
|
+ maxlength="6"
|
|
|
+ :rules="[{ validator: asyncmobileValidator }]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="clear">
|
|
|
@@ -40,6 +47,7 @@
|
|
|
size="large"
|
|
|
v-model="form.code"
|
|
|
name="code"
|
|
|
+ maxlength="6"
|
|
|
placeholder="请输入密码"
|
|
|
:rules="[{ validator: asyncpwodValidator }]"
|
|
|
:type="!passwordStatus ? 'password' : 'text'"
|
|
|
@@ -74,14 +82,11 @@ export default {
|
|
|
mixins: [resToken],
|
|
|
data() {
|
|
|
return {
|
|
|
- passwordStatus:false,//默认隐藏密码
|
|
|
+ passwordStatus: false, //默认隐藏密码
|
|
|
loginBG: require("@/assets/images/login/bg.png"),
|
|
|
user: require("@/assets/images/login/user.png"),
|
|
|
pwod: require("@/assets/images/login/pwod.png"),
|
|
|
loadding: false,
|
|
|
- // show: false,
|
|
|
- // codeTitle: "发送密码",
|
|
|
- // num: 60,
|
|
|
form: {
|
|
|
mobile: "",
|
|
|
code: "",
|
|
|
@@ -94,14 +99,18 @@ export default {
|
|
|
async onSubmit() {
|
|
|
if (!this.loadding) {
|
|
|
this.loadding = true;
|
|
|
- await this.asyncmobileValidator(this.form.mobile)//校验表单手机号
|
|
|
+ await this.asyncmobileValidator(this.form.mobile) //校验表单卡号
|
|
|
.then(async (res) => {
|
|
|
if (res === "ok") {
|
|
|
+ let parmValue = {
|
|
|
+ code: this.form.code,
|
|
|
+ mobile: "CJ1745" + this.form.mobile,
|
|
|
+ };
|
|
|
await this.asyncpwodValidator(this.form.code)
|
|
|
.then(async (res) => {
|
|
|
if (res === "ok") {
|
|
|
this.$store
|
|
|
- .dispatch("user/login", this.form)
|
|
|
+ .dispatch("user/login", parmValue)
|
|
|
.then((res) => {
|
|
|
this.loadding = false;
|
|
|
if (res.code === 0) {
|
|
|
@@ -141,21 +150,15 @@ export default {
|
|
|
return new Promise((resolve) => {
|
|
|
let type = true;
|
|
|
if (val === "") {
|
|
|
- this.show_title("请输入账号！");
|
|
|
+ this.show_title("请输入卡号！");
|
|
|
type = false;
|
|
|
} else {
|
|
|
- if (val.length !== 10) {
|
|
|
- this.show_title("账号不正确！");
|
|
|
- type = false;
|
|
|
- }
|
|
|
- let o = val.substr(0, 4);
|
|
|
- if (o !== "1745") {
|
|
|
- this.show_title("账号不正确！");
|
|
|
+ if (val.length !== 6) {
|
|
|
+ this.show_title("卡号不正确！");
|
|
|
type = false;
|
|
|
}
|
|
|
- let t = val.substr(val.length - 6);
|
|
|
- if (!isnumber(t)) {
|
|
|
- this.show_title("账号不正确！");
|
|
|
+ if (!isnumber(val)) {
|
|
|
+ this.show_title("卡号不正确！");
|
|
|
type = false;
|
|
|
}
|
|
|
}
|
|
|
@@ -188,54 +191,61 @@ export default {
|
|
|
resolve(type ? "ok" : "error");
|
|
|
});
|
|
|
},
|
|
|
- showPassword(){//展示/隐藏密码
|
|
|
- console.log("显示/隐藏密码");
|
|
|
+
|
|
|
+ showPassword() {
|
|
|
+ //展示/隐藏密码
|
|
|
console.log(this.passwordStatus);
|
|
|
this.passwordStatus = !this.passwordStatus;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.login {//最外层的登陆盒子
|
|
|
+.login {
|
|
|
+ //最外层的登陆盒子
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- .bg {//背景图的盒子
|
|
|
+ .bg {
|
|
|
+ //背景图的盒子
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- img {//背景图
|
|
|
+ img {
|
|
|
+ //背景图
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .login-main {//详情登陆页面
|
|
|
+ .login-main {
|
|
|
+ //详情登陆页面
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- width: 100%;//继承最外层login的宽高
|
|
|
+ width: 100%; //继承最外层login的宽高
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
- .logo-header {//上半部分登陆盒子，用来展示一张图片
|
|
|
+ .logo-header {
|
|
|
+ //上半部分登陆盒子，用来展示一张图片
|
|
|
// padding: 50% 0 10% 0;
|
|
|
width: 100%;
|
|
|
height: 309px;
|
|
|
- .login-img{
|
|
|
+ .login-img {
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- img{
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
height: 209px;
|
|
|
}
|
|
|
}
|
|
|
position: relative;
|
|
|
top: -12px;
|
|
|
- .logo-header-title {//登陆字体的盒子
|
|
|
+ .logo-header-title {
|
|
|
+ //登陆字体的盒子
|
|
|
margin: 0px;
|
|
|
font-weight: bold;
|
|
|
padding: 91px 256px 99px 37px;
|
|
|
@@ -243,11 +253,12 @@ export default {
|
|
|
height: 37px;
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
line-height: 20px;
|
|
|
position: absolute;
|
|
|
}
|
|
|
- .logo-header-tips{//登陆文字下提示内容
|
|
|
+ .logo-header-tips {
|
|
|
+ //登陆文字下提示内容
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
@@ -257,11 +268,12 @@ export default {
|
|
|
height: 12px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 150;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
line-height: 3px;
|
|
|
}
|
|
|
}
|
|
|
- .login-form.van-form {//登陆框
|
|
|
+ .login-form.van-form {
|
|
|
+ //登陆框
|
|
|
padding: 10% 18%;
|
|
|
background-color: #fff;
|
|
|
border-top-left-radius: 20px;
|
|
|
@@ -274,13 +286,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
background: #ffffff;
|
|
|
margin: 0 0 28px 0;
|
|
|
- border-bottom: 1px solid #F0F0F0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
li {
|
|
|
float: left;
|
|
|
&.label {
|
|
|
width: 100%;
|
|
|
color: #333333;
|
|
|
- font-size: 16px;;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bolder;
|
|
|
// width: 54px;
|
|
|
// text-align: center;
|
|
|
@@ -329,10 +341,14 @@ export default {
|
|
|
border: 0;
|
|
|
margin: 9vh 0 0 0;
|
|
|
color: #333;
|
|
|
-
|
|
|
- background: #F4D022;
|
|
|
+
|
|
|
+ background: #f4d022;
|
|
|
border-radius: 34px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.myCard {
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+}
|
|
|
</style>
|
zhangjinxing