wayne
/
slash_home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login分開成二個tab

Browse Source
main
Wayne 3 years ago
parent abbebbe07d
commit 6a1221df65
3 changed files with 113 additions and 107 deletions
Show Stats Download Patch File Download Diff File

2
src/views/Login/LineLogin.vue
Unescape View File

@ -25,7 +25,7 @@ if (!code) {
// 檢查state是否為login // 檢查state是否為login
if(route.query.state != 'login'){ if(route.query.state != 'login'){
//將state存入sessionStorage //將state存入sessionStorage
sessionStorage.setItem("slashToken", route.query.state); sessionStorage.setItem("slashToken", encodeURIComponent(route.query.state));
} }

22
src/views/Login/activation.vue
Unescape View File

@ -18,6 +18,8 @@ const store = useStore();
const token = encodeURIComponent(new URLSearchParams(window.location.search).get('params')) const token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))
const loginMethod = ref('line')
const form = ref({ const form = ref({
username: "", username: "",
password: "", password: "",
@ -42,7 +44,7 @@ onBeforeMount(async () => {
if (chkRes.code === 200) { if (chkRes.code === 200) {
//將卡號存入sessionStorage //將卡號存入sessionStorage
sessionStorage.setItem("slashToken", token); sessionStorage.setItem("slashToken", token);
if(Cookies.get("token")){ if (Cookies.get("token")) {
router.push("/"); router.push("/");
} }
} else { } else {
@ -150,7 +152,7 @@ const handleLineLogin = async () => {
link = link + "response_type=code"; link = link + "response_type=code";
link += "&client_id=" + client_id; link += "&client_id=" + client_id;
link += "&redirect_uri=" + redirect_uri; link += "&redirect_uri=" + redirect_uri;
link += "&state="+ token; link += "&state=" + token;
link += "&scope=openid%20profile"; link += "&scope=openid%20profile";
window.location.href = link; window.location.href = link;
}; };
@ -185,14 +187,21 @@ onUnmounted(() => {
<br /> <br />
</div> </div>
<!-- Login Section Start --> <!-- Login Section Start -->
<van-tabs v-model:active="loginMethod" color="green">
<van-tab title="LINE登入開卡" name="line" />
<van-tab title="手機登入開卡" name="mobile" />
</van-tabs>
<br />
<section class="login-section p-0"> <section class="login-section p-0">
<template v-if="loginMethod == 'mobile'">
<!-- Login Form Start --> <!-- Login Form Start -->
<form class="custom-form"> <form class="custom-form">
<!-- Email Input start --> <!-- Email Input start -->
<div class="input-box"> <div class="input-box">
<input type="tel" placeholder="手機號" required class="form-control" v-model="form.username" /> <input type="tel" placeholder="手機號" required class="form-control" v-model="form.username" />
<i class="verify" :class="{ disable: !showGetVerifyBtn }" @click="handleGetVerify">{{ getVerifyMsg }} <i class="verify" :class="{ disable: !showGetVerifyBtn }" @click="handleGetVerify">{{ getVerifyMsg
}}
<template v-if="countdown > 0">({{ countdown }})</template> <template v-if="countdown > 0">({{ countdown }})</template>
</i> </i>
</div> </div>
@ -211,11 +220,13 @@ onUnmounted(() => {
</button> </button>
</form> </form>
<!-- Login Form End --> <!-- Login Form End -->
</template>
<template v-if="loginMethod == 'line'">
<!-- Social Section Start --> <!-- Social Section Start -->
<div class="socila-section"> <div class="socila-section">
<span> <span>
<span class="font-sm fw-600 font-theme"> 其他開卡方式 </span> <span class="font-sm fw-600 font-theme"> 點擊Line登入開卡 </span>
</span> </span>
<div class="social-wrap"> <div class="social-wrap">
<a href="javascript:void(0)" class="font-md title-color fw-600" @click.prevent="handleLineLogin"> <a href="javascript:void(0)" class="font-md title-color fw-600" @click.prevent="handleLineLogin">
@ -225,6 +236,7 @@ onUnmounted(() => {
</div> </div>
</div> </div>
<!-- Social Section End --> <!-- Social Section End -->
</template>
</section> </section>
<!-- Login Section End --> <!-- Login Section End -->
</main> </main>

62
src/views/Login/index.vue
Unescape View File

@ -14,16 +14,18 @@ const router = useRouter();
const store = useStore(); const store = useStore();
const loginMethod = ref('line')
const form = ref({ const form = ref({
username: "", username: "",
password: "", password: "",
}); });
const domain = computed(()=>{ const domain = computed(() => {
return store.state.domain return store.state.domain
}); });
const sso_domain = computed(()=>{ const sso_domain = computed(() => {
return store.state.sso_domain return store.state.sso_domain
}); });
@ -32,7 +34,7 @@ const showGetVerifyBtn = ref(false);
const countdown = ref(0); const countdown = ref(0);
const handleGetVerify = async () => { const handleGetVerify = async () => {
if(!showGetVerifyBtn.value){ if (!showGetVerifyBtn.value) {
return return
} }
if (!form.value.username) { if (!form.value.username) {
@ -106,10 +108,10 @@ const handleLogin = async () => {
domain: sso_domain.value, domain: sso_domain.value,
}); });
router.push("/"); router.push("/");
}else if(res.code === 201){ } else if (res.code === 201) {
sessionStorage.setItem("reg", form.value.username); sessionStorage.setItem("reg", form.value.username);
router.push({ name: "Register", query: { type: "mobile" } }); router.push({ name: "Register", query: { type: "mobile" } });
}else{ } else {
Toast(res.message); Toast(res.message);
} }
}; };
@ -120,9 +122,9 @@ const handleLineLogin = async () => {
//判斷domain是否包含localhost //判斷domain是否包含localhost
let redirect_uri = ''; let redirect_uri = '';
if(domain.value.includes('localhost')){ if (domain.value.includes('localhost')) {
redirect_uri = 'http://' + domain.value + ":8080/home/linelogin"; redirect_uri = 'http://' + domain.value + ":8080/home/linelogin";
}else{ } else {
redirect_uri = 'https://' + domain.value + "/home/linelogin"; redirect_uri = 'https://' + domain.value + "/home/linelogin";
} }
@ -146,23 +148,18 @@ onUnmounted(() => {
<!-- Login Section Start --> <!-- Login Section Start -->
<section class="login-section p-0"> <section class="login-section p-0">
<!-- Login Form Start --> <!-- Login Form Start -->
<form class="custom-form">
<h1 class="font-md title-color fw-600">會員登入</h1> <h1 class="font-md title-color fw-600">會員登入</h1>
<van-tabs v-model:active="loginMethod" color="green">
<van-tab title="LINE登入" name="line" />
<van-tab title="手機登入" name="mobile" />
</van-tabs>
<br />
<template v-if="loginMethod == 'mobile'">
<form class="custom-form">
<!-- Email Input start --> <!-- Email Input start -->
<div class="input-box"> <div class="input-box">
<input <input type="tel" placeholder="手機號" required class="form-control" v-model="form.username" />
type="tel" <i class="verify" :class="{ disable: !showGetVerifyBtn }" @click="handleGetVerify">{{ getVerifyMsg }}
placeholder="手機號"
required
class="form-control"
v-model="form.username"
/>
<i
class="verify"
:class="{ disable: !showGetVerifyBtn }"
@click="handleGetVerify"
>{{ getVerifyMsg }}
<template v-if="countdown > 0">({{ countdown }})</template> <template v-if="countdown > 0">({{ countdown }})</template>
</i> </i>
</div> </div>
@ -170,13 +167,7 @@ onUnmounted(() => {
<!-- Password Input start --> <!-- Password Input start -->
<div class="input-box"> <div class="input-box">
<input <input type="number" placeholder="驗證碼" required class="form-control" v-model="form.password" />
type="number"
placeholder="驗證碼"
required
class="form-control"
v-model="form.password"
/>
<i class="iconly-Hide icli showHidePassword"></i> <i class="iconly-Hide icli showHidePassword"></i>
</div> </div>
<!-- Password Input End --> <!-- Password Input End -->
@ -187,24 +178,23 @@ onUnmounted(() => {
</button> </button>
</form> </form>
<!-- Login Form End --> <!-- Login Form End -->
</template>
<template v-if="loginMethod == 'line'">
<!-- Social Section Start --> <!-- Social Section Start -->
<div class="socila-section"> <div class="socila-section">
<span> <span>
<span class="font-sm fw-600 font-theme"> 其他登入方式 </span> <span class="font-sm fw-600 font-theme"> 點擊下方使用Line登入 </span>
</span> </span>
<div class="social-wrap"> <div class="social-wrap">
<a <a href="javascript:void(0)" class="font-md title-color fw-600" @click.prevent="handleLineLogin">
href="javascript:void(0)"
class="font-md title-color fw-600"
@click.prevent="handleLineLogin"
>
<img src="@/assets/icons/png/line.png" alt="line login" /> Line 登入 <img src="@/assets/icons/png/line.png" alt="line login" /> Line 登入
</a> </a>
<!-- <a href="https://accounts.google.com/ServiceLogin" class="font-md title-color fw-600"><img src="@/assets/icons/png/google.png" alt="phone" /> Continue with Google </a> --> <!-- <a href="https://accounts.google.com/ServiceLogin" class="font-md title-color fw-600"><img src="@/assets/icons/png/google.png" alt="phone" /> Continue with Google </a> -->
</div> </div>
</div> </div>
<!-- Social Section End --> <!-- Social Section End -->
</template>
</section> </section>
<!-- Login Section End --> <!-- Login Section End -->
</main> </main>
@ -227,4 +217,8 @@ onUnmounted(() => {
cursor: not-allowed; cursor: not-allowed;
} }
} }
.van-tabs__line{
background: green !important;
}
</style> </style>

Write Preview
Loading…
Cancel
Save