Skip to content

M
million
Commit 01cfa2e1 authored by 沈良进's avatar 沈良进
Browse files
Options

登录页调整

parent 37f3c5c8
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 72 deletions
src/pages/login.vue
View file @ 01cfa2e1
<style> <style>
.login { .login {
background: url('../assets/img/login-bg.png');background-size: cover; background: url("../assets/img/login-bg.png");
background-size: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
...@@ -91,7 +92,11 @@ ...@@ -91,7 +92,11 @@
<div v-if="loginType !== 'wechat'"> <div v-if="loginType !== 'wechat'">
<div class="flex items-end justify-between"> <div class="flex items-end justify-between">
<div class="f34 bold">{{ isLogin ? "登錄" : "註冊" }}</div> <div class="f34 bold">{{ isLogin ? "登錄" : "註冊" }}</div>
<div class="f16 bold cursor-pointer" v-if="loginType !== 'bindEmail'" @click="loginToRegister"> <div
class="f16 bold cursor-pointer"
v-if="loginType !== 'bindEmail'"
@click="loginToRegister"
>
{{ isLogin ? "註冊賬號" : "返回登錄" }} {{ isLogin ? "註冊賬號" : "返回登錄" }}
</div> </div>
</div> </div>
...@@ -101,26 +106,41 @@ ...@@ -101,26 +106,41 @@
<q-input outlined v-model="loginMsg.Mailbox" /> <q-input outlined v-model="loginMsg.Mailbox" />
<div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div> <div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
</div> </div>
<div v-if="loginType === 'MailCode'|| loginType === 'bindEmail'"> <div v-if="loginType === 'MailCode' || loginType === 'bindEmail'">
<q-btn <q-btn
v-if="!isSend" class="q-mb-lg" v-if="!isSend"
class="q-mb-lg"
unelevated unelevated
color="grey-3" color="grey-3"
style="width: 100%; color: #8B8B8B !important; height: 50px; margin-top: 20px" style="
width: 100%;
color: #8b8b8b !important;
height: 50px;
margin-top: 20px;
"
filled filled
label="发送验证码" label="发送验证码"
@click="sendVerify" @click="sendVerify"
/> />
<div v-else class="mt q-mb-sm"> <div v-else class="mt q-mb-sm">
<q-input outlined v-model="loginMsg.MailCode" type="text" /> <q-input outlined v-model="loginMsg.MailCode" type="text" />
<div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''" @click="reSend"> <div
class="q-mt-sm"
:class="cutDown ? 'text-grey-6' : ''"
@click="reSend"
>
{{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }} {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
</div> </div>
</div> </div>
</div> </div>
<div v-if="!isLogin || loginType ==='PassWord'" class="form-group"> <div v-if="!isLogin || loginType === 'PassWord'" class="form-group">
<div class="login_labelName flex justify-between items-center"> <div class="login_labelName flex justify-between items-center">
密碼<span class="text-grey-6 cursor-pointer" v-if="loginType === 'PassWord'" @click="resetPassword">忘記密碼</span> 密碼<span
class="text-grey-6 cursor-pointer"
v-if="loginType === 'PassWord'"
@click="resetPassword"
>忘記密碼</span
>
</div> </div>
<q-input <q-input
v-if="flag == 1" v-if="flag == 1"
...@@ -234,14 +254,15 @@ export default { ...@@ -234,14 +254,15 @@ export default {
}, },
created() {}, created() {},
mounted() { mounted() {
console.log('login', this.$route.query) console.log("login", this.$route.query);
const {code, state} = this.$route.query const { code, state } = this.$route.query;
if(code) { if (code) {
this.fetchLoginInfo(code, state) this.fetchLoginInfo(code, state);
this.isLogin = false this.isLogin = false;
this.loginType = 'bindEmail' this.loginType = "bindEmail";
this.mylabel = "立即绑定";
} }
this.getOpenInfo() this.getOpenInfo();
var jObj = JSON.parse(localStorage.getItem("groupinfo")); var jObj = JSON.parse(localStorage.getItem("groupinfo"));
this.loginMsg.RB_Group_Id = jObj.GroupId; this.loginMsg.RB_Group_Id = jObj.GroupId;
//获取网站基础配置 //获取网站基础配置
...@@ -256,21 +277,31 @@ export default { ...@@ -256,21 +277,31 @@ export default {
}, },
}, },
methods: { methods: {
fetchLoginInfo(code, state) {this.apipost( fetchLoginInfo(code, state) {
'getWXToken_post', this.apipost(
"getWXToken_post",
{ {
code, code,
state state,
}, },
(res) => { (res) => {
const {type, id } = res.data.data if (res.data.resultCode == 1) {
if(type === 1) { const { type, id } = res.data.data;
this.CommonJump("/index", {}); if (type === 1) {
this.CommonJump("/index", {});
} else {
this.isLogin = false;
// 绑定邮箱
this.loginType = "bindEmail";
this.userId = id;
}
} else { } else {
this.isLogin = false this.$q.notify({
// 绑定邮箱 type: "negative",
this.loginType = 'bindEmail' message: res.data.message,
this.userId = id position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
} }
}, },
(err) => {} (err) => {}
...@@ -281,7 +312,16 @@ this.CommonJump("/index", {}); ...@@ -281,7 +312,16 @@ this.CommonJump("/index", {});
"GetOpenInfo_post", "GetOpenInfo_post",
{}, {},
(r) => { (r) => {
this.openInfo = r.data.data; if (res.data.resultCode == 1) {
this.openInfo = r.data.data;
} else {
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
}, },
null null
); );
...@@ -301,43 +341,51 @@ this.CommonJump("/index", {}); ...@@ -301,43 +341,51 @@ this.CommonJump("/index", {});
}, },
loginToRegister() { loginToRegister() {
this.isLogin = !this.isLogin; this.isLogin = !this.isLogin;
if(!this.isLogin) { if (!this.isLogin) {
this.mylabel = "注册"; this.mylabel = "注册";
this.loginType = 'MailCode' this.loginType = "MailCode";
} else { } else {
this.mylabel = "登录" this.mylabel = "登录";
} }
}, },
reSend() { reSend() {
if(this.cutDown) { if (this.cutDown) {
return return;
} }
this.inSending = false this.inSending = false;
this.isSend = false; this.sendVerify();
this.sendVerify()
}, },
sendVerify() { sendVerify() {
if(this.inSending) return if (this.inSending) return;
this.inSending = true this.inSending = true;
if (this.verifyEmail()) { if (this.verifyEmail()) {
let SendType = this.userId ? 3 : (this.isLogin ? 1 : 0); let SendType = this.userId ? 3 : this.isLogin ? 1 : 0;
this.apipost('directCustomer_post_SendMail', {Mailbox: this.loginMsg.Mailbox, SendType: SendType, Id: this.userId}, (res) => { this.apipost(
this.inSending = false "directCustomer_post_SendMail",
if (res.data.resultCode == 1) { {
this.isSend = true; Mailbox: this.loginMsg.Mailbox,
this.cutDown = 60; SendType: SendType,
this.startCutDown(); Id: this.userId,
} else { },
this.$q.notify({ (res) => {
type: "negative", this.inSending = false;
message: res.data.message, if (res.data.resultCode == 1) {
position: "top", this.isSend = true;
timeout: 2000, // 以毫秒为单位; 0意味着没有超时 this.cutDown = 60;
}); this.startCutDown();
} } else {
}, null) this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
} else { } else {
this.inSending = false this.inSending = false;
} }
}, },
startCutDown() { startCutDown() {
...@@ -383,16 +431,16 @@ this.CommonJump("/index", {}); ...@@ -383,16 +431,16 @@ this.CommonJump("/index", {});
// this.loginType = "wechat"; // this.loginType = "wechat";
// this.setWechatCode() // this.setWechatCode()
const { AppID, State, OpenRedirectUri } = this.openInfo; const { AppID, State, OpenRedirectUri } = this.openInfo;
let redirect_uri = OpenRedirectUri let redirect_uri = OpenRedirectUri;
const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}` const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`;
// this.windowObjectReference = window.open(url, 'wechat', 'left: 20,top: 20,width:200,height:200,') // this.windowObjectReference = window.open(url, 'wechat', 'left: 20,top: 20,width:200,height:200,')
// console.log('windowObjectReference', this.windowObjectReference) // console.log('windowObjectReference', this.windowObjectReference)
// setTimeout(() => {console.log(this.windowObjectReference.close())}, 1000) // setTimeout(() => {console.log(this.windowObjectReference.close())}, 1000)
window.location.href = url window.location.href = url;
}, },
login() { login() {
if(this.mylabel === "提交中...") { if (this.mylabel === "提交中...") {
return return;
} }
if (!this.isAgree) { if (!this.isAgree) {
this.$q.notify({ this.$q.notify({
...@@ -412,7 +460,7 @@ this.CommonJump("/index", {}); ...@@ -412,7 +460,7 @@ this.CommonJump("/index", {});
}); });
return; return;
} }
if (this.loginMsg.PassWord == "" && (this.loginType === 'PassWord')) { if (this.loginMsg.PassWord == "" && this.loginType === "PassWord") {
this.$q.notify({ this.$q.notify({
type: "negative", type: "negative",
message: "请输入密码", message: "请输入密码",
...@@ -421,7 +469,10 @@ this.CommonJump("/index", {}); ...@@ -421,7 +469,10 @@ this.CommonJump("/index", {});
}); });
return; return;
} }
if (this.loginMsg.MailCode == "" && (this.loginType === 'MailCode' || this.loginType === 'bindEmail')) { if (
this.loginMsg.MailCode == "" &&
(this.loginType === "MailCode" || this.loginType === "bindEmail")
) {
this.$q.notify({ this.$q.notify({
type: "negative", type: "negative",
message: "请输入邮箱验证码", message: "请输入邮箱验证码",
...@@ -430,16 +481,16 @@ this.CommonJump("/index", {}); ...@@ -430,16 +481,16 @@ this.CommonJump("/index", {});
}); });
return; return;
} }
let params = {...this.loginMsg} let params = { ...this.loginMsg };
let url = 'MailboxPwdLogin_post' // 密码登录 let url = "MailboxPwdLogin_post"; // 密码登录
if(!this.isLogin) { if (!this.isLogin) {
url = 'directCustomer_post_MailRegister' url = "directCustomer_post_MailRegister";
} else if(this.loginType === 'MailBox') { } else if (this.loginType === "MailBox") {
ulr = 'MailboxLogin_post' ulr = "MailboxLogin_post";
} }
if(this.loginType === 'bindEmail') { if (this.loginType === "bindEmail") {
url = 'BindMailByOpenId_post' url = "BindMailByOpenId_post";
params.Unoinid = this.userId params.Unoinid = this.userId;
} }
this.mylabel = "提交中..."; this.mylabel = "提交中...";
this.apipost( this.apipost(
...@@ -450,7 +501,7 @@ this.CommonJump("/index", {}); ...@@ -450,7 +501,7 @@ this.CommonJump("/index", {});
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
var jsonData = JSON.stringify(res.data.data); var jsonData = JSON.stringify(res.data.data);
window.localStorage.setItem("b2bUser", jsonData); window.localStorage.setItem("b2bUser", jsonData);
console.log('userInfo',jsonData, res.data.data) console.log("userInfo", jsonData, res.data.data);
this.CommonJump("/index", {}); this.CommonJump("/index", {});
} else { } else {
this.$q.notify({ this.$q.notify({
...@@ -465,8 +516,8 @@ this.CommonJump("/index", {}); ...@@ -465,8 +516,8 @@ this.CommonJump("/index", {});
); );
}, },
resetPassword() { resetPassword() {
this.CommonJump("/resetPassword", {}); this.CommonJump("/resetPassword", {});
} },
}, },
}; };
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment