fix(login): cursor pointer
This commit is contained in:
woody
parent
4b606dbb43
commit
090245eea2
|
|
@ -6,9 +6,7 @@
|
|||
-->
|
||||
<template>
|
||||
<div class="page">
|
||||
<img class="local"
|
||||
src="../assets/images/local.gif"
|
||||
alt="">
|
||||
<img class="local" src="../assets/images/local.gif" alt="" />
|
||||
<!-- <div class="videoContainer">
|
||||
<video class="fullscreenVideo"
|
||||
id="bgVid"
|
||||
|
|
@ -22,239 +20,250 @@
|
|||
</div> -->
|
||||
<!-- <div class="title">{{ '致力于成为全球抗衰领军企业' }}</div> -->
|
||||
<div class="kuang">
|
||||
<div class="tit1">{{ '会员登录' }}</div>
|
||||
<el-form :model="loginForm"
|
||||
:rules="rules"
|
||||
ref="loginForm"
|
||||
label-position="top"
|
||||
label-width="100px"
|
||||
class="demo-ruleForm">
|
||||
<el-form-item :label="'会员编号'"
|
||||
prop="username">
|
||||
<el-input :placeholder="'会员编号'"
|
||||
v-model="loginForm.username"></el-input>
|
||||
<div class="tit1">{{ "会员登录" }}</div>
|
||||
<el-form
|
||||
:model="loginForm"
|
||||
:rules="rules"
|
||||
ref="loginForm"
|
||||
label-position="top"
|
||||
label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item :label="'会员编号'" prop="username">
|
||||
<el-input
|
||||
:placeholder="'会员编号'"
|
||||
v-model="loginForm.username"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="'登录密码'"
|
||||
class="pr"
|
||||
prop="password">
|
||||
<el-input v-model="loginForm.password"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="'登录密码'"
|
||||
@keyup.enter.native="handleLogin">
|
||||
|
||||
<el-form-item :label="'登录密码'" class="pr" prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="'登录密码'"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<!-- <i slot="suffix"
|
||||
class="el-input__icon el-icon-view"></i> -->
|
||||
</el-input>
|
||||
<div class="pa"
|
||||
@click="forGet">{{ '忘记密码' }}</div>
|
||||
<div class="pa" @click="forGet">{{ "忘记密码" }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="code"
|
||||
:label="'验证码'">
|
||||
<el-input v-model="loginForm.code"
|
||||
:placeholder="'验证码'"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<el-form-item prop="code" :label="'验证码'">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
:placeholder="'验证码'"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl"
|
||||
@click="getCode"
|
||||
class="login-code-img" />
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-button type="primary" class="sumBtn" :loading="fullscreenLoading"
|
||||
@click="handleLogin">{{ '登录' }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="sumBtn"
|
||||
:loading="fullscreenLoading"
|
||||
@click="handleLogin"
|
||||
>{{ "登录" }}</el-button
|
||||
>
|
||||
</div>
|
||||
<el-dialog :title="'修改密码'"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="35%"
|
||||
center>
|
||||
<el-dialog
|
||||
:title="'修改密码'"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="35%"
|
||||
center
|
||||
>
|
||||
<div class="changePwd">
|
||||
<el-form ref="loginObj"
|
||||
:model="loginObj"
|
||||
:rules="rulesObj"
|
||||
label-width="80px">
|
||||
<el-form
|
||||
ref="loginObj"
|
||||
:model="loginObj"
|
||||
:rules="rulesObj"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item :label="'会员编号'"
|
||||
prop="memberCode">
|
||||
<el-input :placeholder="'请输入会员编号'"
|
||||
v-model="loginObj.memberCode"></el-input>
|
||||
<el-form-item :label="'会员编号'" prop="memberCode">
|
||||
<el-input
|
||||
:placeholder="'请输入会员编号'"
|
||||
v-model="loginObj.memberCode"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item :label="'新密码'"
|
||||
prop="newPassword">
|
||||
<el-input v-model="loginObj.newPassword"
|
||||
:type="flag1?'text':'password'"
|
||||
style="border:1px solid #fff;"
|
||||
:placeholder="'请输入新密码'">
|
||||
<i slot="suffix"
|
||||
:class="[flag1?'el-icon-minus':'el-icon-view']"
|
||||
style="font-size:18px;"
|
||||
autocomplete="auto"
|
||||
@click="flag1=!flag1" />
|
||||
<el-form-item :label="'新密码'" prop="newPassword">
|
||||
<el-input
|
||||
v-model="loginObj.newPassword"
|
||||
:type="flag1 ? 'text' : 'password'"
|
||||
style="border: 1px solid #fff"
|
||||
:placeholder="'请输入新密码'"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
:class="[flag1 ? 'el-icon-minus' : 'el-icon-view']"
|
||||
style="font-size: 18px"
|
||||
autocomplete="auto"
|
||||
@click="flag1 = !flag1"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
class="righTxt">
|
||||
{{ '6-26大小写字母数字组合' }}
|
||||
<el-col :span="8" class="righTxt">
|
||||
{{ "6-26大小写字母数字组合" }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item :label="'确认密码'"
|
||||
prop="loginPassword">
|
||||
<el-input v-model="loginObj.loginPassword"
|
||||
:type="flag2?'text':'password'"
|
||||
style="border:1px solid #fff;"
|
||||
:placeholder="'确认密码'">
|
||||
<i slot="suffix"
|
||||
:class="[flag2?'el-icon-minus':'el-icon-view']"
|
||||
style="font-size:18px;"
|
||||
autocomplete="auto"
|
||||
@click="flag2=!flag2" />
|
||||
<el-form-item :label="'确认密码'" prop="loginPassword">
|
||||
<el-input
|
||||
v-model="loginObj.loginPassword"
|
||||
:type="flag2 ? 'text' : 'password'"
|
||||
style="border: 1px solid #fff"
|
||||
:placeholder="'确认密码'"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
:class="[flag2 ? 'el-icon-minus' : 'el-icon-view']"
|
||||
style="font-size: 18px"
|
||||
autocomplete="auto"
|
||||
@click="flag2 = !flag2"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
class="righTxt">
|
||||
{{'请确认密码'}}
|
||||
<el-col :span="8" class="righTxt">
|
||||
{{ "请确认密码" }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item :label="'联系方式'"
|
||||
prop="phone">
|
||||
<el-input :placeholder="'请输入联系方式'"
|
||||
v-model="loginObj.phone"></el-input>
|
||||
<el-form-item :label="'联系方式'" prop="phone">
|
||||
<el-input
|
||||
:placeholder="'请输入联系方式'"
|
||||
v-model="loginObj.phone"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item :label="'验证码'+':'"
|
||||
prop="code">
|
||||
<el-input v-model="loginObj.code"
|
||||
:placeholder="'验证码'">
|
||||
<i slot="suffix"
|
||||
@click="submitForm('loginObj')"
|
||||
class="hqyzm1"
|
||||
:class="isSend?'hui':''">{{getSmsCode}}</i></el-input>
|
||||
<el-form-item :label="'验证码' + ':'" prop="code">
|
||||
<el-input v-model="loginObj.code" :placeholder="'验证码'">
|
||||
<i
|
||||
slot="suffix"
|
||||
@click="submitForm('loginObj')"
|
||||
class="hqyzm1"
|
||||
:class="isSend ? 'hui' : ''"
|
||||
>{{ getSmsCode }}</i
|
||||
></el-input
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer"
|
||||
class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">{{ '取消' }}</el-button>
|
||||
<el-button style="color:#fff;background: #cb2b2b;"
|
||||
@click="submitLoginObj('loginObj')">{{ '确定' }}</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">{{ "取消" }}</el-button>
|
||||
<el-button type="primary" @click="submitLoginObj('loginObj')"
|
||||
>确定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg, forgetPwd, forgetSms } from '@/api/login'
|
||||
import { getCodeImg, forgetPwd, forgetSms } from "@/api/login";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let validatePwd = (rule, value, callback) => {
|
||||
if (this.loginObj.newPassword != value) {
|
||||
callback(new Error('与新密码不一致，请重新输入'))
|
||||
callback(new Error("与新密码不一致，请重新输入"));
|
||||
} else {
|
||||
callback()
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
return {
|
||||
fullscreenLoading:false,
|
||||
fullscreenLoading: false,
|
||||
isSend: false,
|
||||
getSmsCode: '获取验证码',
|
||||
getSmsCode: "获取验证码",
|
||||
beginTime: 60,
|
||||
timer: '',
|
||||
timer: "",
|
||||
loginObj: {},
|
||||
dialogVisible: false,
|
||||
flag1: false,
|
||||
flag2: false,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, trigger: 'blur', message: '请输入会员编号' },
|
||||
{ required: true, trigger: "blur", message: "请输入会员编号" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: 'blur', message: '请输入登录密码' },
|
||||
],
|
||||
code: [
|
||||
{ required: true, trigger: 'change', message: '请输入验证码' },
|
||||
{ required: true, trigger: "blur", message: "请输入登录密码" },
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
||||
},
|
||||
rulesObj: {
|
||||
memberCode: [
|
||||
{ required: true, trigger: 'blur', message: '请输入会员编号' },
|
||||
{ required: true, trigger: "blur", message: "请输入会员编号" },
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, trigger: 'blur', message: '请输入新密码' },
|
||||
],
|
||||
loginPassword: [{ validator: validatePwd, trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, trigger: 'blur', message: '请输入联系方式' },
|
||||
{ required: true, trigger: "blur", message: "请输入新密码" },
|
||||
],
|
||||
loginPassword: [{ validator: validatePwd, trigger: "blur" }],
|
||||
phone: [{ required: true, trigger: "blur", message: "请输入联系方式" }],
|
||||
},
|
||||
codeUrl: '',
|
||||
}
|
||||
codeUrl: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getCode()
|
||||
this.getCode();
|
||||
},
|
||||
mounted(){
|
||||
this.loginForm.username = localStorage.getItem('username')||''
|
||||
mounted() {
|
||||
this.loginForm.username = localStorage.getItem("username") || "";
|
||||
},
|
||||
methods: {
|
||||
// 绑卡获取验证码
|
||||
submitForm(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
this.startTime()
|
||||
this.startTime();
|
||||
forgetSms(this.loginObj)
|
||||
.then((res) => {
|
||||
// this.bankCode = res.data
|
||||
})
|
||||
.catch((err) => {
|
||||
this.beginTime = 0
|
||||
})
|
||||
this.beginTime = 0;
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
startTime() {
|
||||
if (this.isSend) return
|
||||
this.isSend = true
|
||||
this.getSmsCode = this.beginTime + 's后重新发送'
|
||||
let that = this
|
||||
if (this.isSend) return;
|
||||
this.isSend = true;
|
||||
this.getSmsCode = this.beginTime + "s后重新发送";
|
||||
let that = this;
|
||||
this.timer = setInterval(() => {
|
||||
this.beginTime--
|
||||
this.getSmsCode = this.beginTime + 's后重新发送'
|
||||
this.beginTime--;
|
||||
this.getSmsCode = this.beginTime + "s后重新发送";
|
||||
if (this.beginTime < 0) {
|
||||
clearInterval(this.timer)
|
||||
this.getSmsCode = '获取验证码'
|
||||
this.beginTime = 60
|
||||
this.isSend = false
|
||||
clearInterval(this.timer);
|
||||
this.getSmsCode = "获取验证码";
|
||||
this.beginTime = 60;
|
||||
this.isSend = false;
|
||||
}
|
||||
}, 1000)
|
||||
}, 1000);
|
||||
},
|
||||
submitLoginObj(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
|
|
@ -263,76 +272,76 @@ export default {
|
|||
.then((res) => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
})
|
||||
this.dialogVisible = false
|
||||
type: "success",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
})
|
||||
.catch((err) => {})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
forGet() {
|
||||
this.dialogVisible = true
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
getCode() {
|
||||
getCodeImg().then((res) => {
|
||||
this.codeUrl = 'data:image/gif;base64,' + res.img
|
||||
this.loginForm.uuid = res.uuid
|
||||
})
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.fullscreenLoading = true
|
||||
this.fullscreenLoading = true;
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.dispatch("Login", this.loginForm)
|
||||
.then((res) => {
|
||||
localStorage.setItem('username',this.loginForm.username)
|
||||
this.fullscreenLoading = false
|
||||
this.$store.dispatch('GetInfo').then((response) => {
|
||||
localStorage.setItem("username", this.loginForm.username);
|
||||
this.fullscreenLoading = false;
|
||||
this.$store.dispatch("GetInfo").then((response) => {
|
||||
if (response.data.loginType == 1) {
|
||||
this.$router.push({
|
||||
path: '/specialMember',
|
||||
})
|
||||
path: "/specialMember",
|
||||
});
|
||||
} else {
|
||||
if (response.data.registerShare == 0) {
|
||||
this.$router.push({
|
||||
path: '/shoppingMall',
|
||||
path: "/shoppingMall",
|
||||
query: { id: 100, idTh: 21 },
|
||||
})
|
||||
});
|
||||
} else if (response.data.registerFans == 0) {
|
||||
this.$router.push({
|
||||
path: '/shoppingMall',
|
||||
path: "/shoppingMall",
|
||||
query: { id: 100, idTh: 7 },
|
||||
})
|
||||
});
|
||||
} else {
|
||||
localStorage.setItem(
|
||||
'pkCountry',
|
||||
"pkCountry",
|
||||
response.data.pkSettleCountry
|
||||
)
|
||||
);
|
||||
this.$router
|
||||
.push({ path: this.redirect || '/' })
|
||||
.catch(() => {})
|
||||
.push({ path: this.redirect || "/" })
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.getCode()
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
this.getCode();
|
||||
this.fullscreenLoading = false;
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background: url('../assets/images/loginBgd.png') no-repeat;
|
||||
background: url("../assets/images/loginBgd.png") no-repeat;
|
||||
height: 100vh;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
|
@ -404,10 +413,10 @@ export default {
|
|||
// letter-spacing: 1px;
|
||||
// text-align: center;
|
||||
// cursor: pointer;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
// padding-top: 15px;
|
||||
// padding-bottom: 15px;
|
||||
font-size: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.pr {
|
||||
|
|
@ -427,7 +436,6 @@ export default {
|
|||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
line-height: 63px;
|
||||
}
|
||||
.changePwd {
|
||||
|
|
@ -474,4 +482,4 @@ export default {
|
|||
height: 100px;
|
||||
line-height: 200px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@
|
|||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10" class="righTxt">
|
||||
<el-col :span="10" class="righTxt" style="cursor: pointer">
|
||||
<div @click="loginPwd = 1">{{ "修改登录密码" }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
class="resetPwd">{{ '重置支付密码' }}</div> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10" class="righTxt">
|
||||
<el-col :span="10" class="righTxt" style="cursor: pointer">
|
||||
<div @click="loginPwd = 0">{{ "修改支付密码" }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
<el-input v-model="safty.tel" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10" class="righTxt">
|
||||
<el-col :span="10" class="righTxt" style="cursor: pointer">
|
||||
<!-- <div class="righTxt1i">
|
||||
<i class="el-icon-success"
|
||||
style="color: #009900;font-size: 16px;margin-right: 5px;"></i>已绑定
|
||||
|
|
|
|||
Loading…
Reference in New Issue