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
if(route.query.state != 'login'){
//將state存入sessionStorage
sessionStorage.setItem("slashToken", route.query.state);
sessionStorage.setItem("slashToken", encodeURIComponent(route.query.state));
}

90
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 loginMethod = ref('line')
const form = ref({
username: "",
password: "",
@ -42,7 +44,7 @@ onBeforeMount(async () => {
if (chkRes.code === 200) {
//將卡號存入sessionStorage
sessionStorage.setItem("slashToken", token);
if(Cookies.get("token")){
if (Cookies.get("token")) {
router.push("/");
}
} else {
@ -150,7 +152,7 @@ const handleLineLogin = async () => {
link = link + "response_type=code";
link += "&client_id=" + client_id;
link += "&redirect_uri=" + redirect_uri;
link += "&state="+ token;
link += "&state=" + token;
link += "&scope=openid%20profile";
window.location.href = link;
};
@ -185,46 +187,56 @@ onUnmounted(() => {
<br />
</div>
<!-- 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">
<!-- Login Form Start -->
<form class="custom-form">
<!-- Email Input start -->
<div class="input-box">
<input type="tel" 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>
</i>
</div>
<!-- Email Input End -->
<template v-if="loginMethod == 'mobile'">
<!-- Login Form Start -->
<form class="custom-form">
<!-- Email Input start -->
<div class="input-box">
<input type="tel" 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>
</i>
</div>
<!-- Email Input End -->
<!-- Password Input start -->
<div class="input-box">
<input type="number" placeholder="驗證碼" required class="form-control" v-model="form.password" />
<i class="iconly-Hide icli showHidePassword"></i>
</div>
<!-- Password Input End -->
<!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> -->
<br />
<button type="button" class="btn-solid" @click="handleLogin">
手機登入開卡
</button>
</form>
<!-- Login Form End -->
<!-- Social Section Start -->
<div class="socila-section">
<span>
<span class="font-sm fw-600 font-theme"> 其他開卡方式 </span>
</span>
<div class="social-wrap">
<a 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 登入開卡
</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> -->
<!-- Password Input start -->
<div class="input-box">
<input type="number" placeholder="驗證碼" required class="form-control" v-model="form.password" />
<i class="iconly-Hide icli showHidePassword"></i>
</div>
<!-- Password Input End -->
<!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> -->
<br />
<button type="button" class="btn-solid" @click="handleLogin">
手機登入開卡
</button>
</form>
<!-- Login Form End -->
</template>
<template v-if="loginMethod == 'line'">
<!-- Social Section Start -->
<div class="socila-section">
<span>
<span class="font-sm fw-600 font-theme"> 點擊Line登入開卡 </span>
</span>
<div class="social-wrap">
<a 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 登入開卡
</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>
<!-- Social Section End -->
<!-- Social Section End -->
</template>
</section>
<!-- Login Section End -->
</main>

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

@ -14,16 +14,18 @@ const router = useRouter();
const store = useStore();
const loginMethod = ref('line')
const form = ref({
username: "",
password: "",
});
const domain = computed(()=>{
const domain = computed(() => {
return store.state.domain
});
const sso_domain = computed(()=>{
const sso_domain = computed(() => {
return store.state.sso_domain
});
@ -32,7 +34,7 @@ const showGetVerifyBtn = ref(false);
const countdown = ref(0);
const handleGetVerify = async () => {
if(!showGetVerifyBtn.value){
if (!showGetVerifyBtn.value) {
return
}
if (!form.value.username) {
@ -106,10 +108,10 @@ const handleLogin = async () => {
domain: sso_domain.value,
});
router.push("/");
}else if(res.code === 201){
} else if (res.code === 201) {
sessionStorage.setItem("reg", form.value.username);
router.push({ name: "Register", query: { type: "mobile" } });
}else{
} else {
Toast(res.message);
}
};
@ -120,9 +122,9 @@ const handleLineLogin = async () => {
//判斷domain是否包含localhost
let redirect_uri = '';
if(domain.value.includes('localhost')){
if (domain.value.includes('localhost')) {
redirect_uri = 'http://' + domain.value + ":8080/home/linelogin";
}else{
} else {
redirect_uri = 'https://' + domain.value + "/home/linelogin";
}
@ -146,65 +148,53 @@ onUnmounted(() => {
<!-- Login Section Start -->
<section class="login-section p-0">
<!-- Login Form Start -->
<form class="custom-form">
<h1 class="font-md title-color fw-600">會員登入</h1>
<!-- Email Input start -->
<div class="input-box">
<input
type="tel"
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>
</i>
</div>
<!-- Email Input End -->
<!-- Password Input start -->
<div class="input-box">
<input
type="number"
placeholder="驗證碼"
required
class="form-control"
v-model="form.password"
/>
<i class="iconly-Hide icli showHidePassword"></i>
<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 -->
<div class="input-box">
<input type="tel" 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>
</i>
</div>
<!-- Email Input End -->
<!-- Password Input start -->
<div class="input-box">
<input type="number" placeholder="驗證碼" required class="form-control" v-model="form.password" />
<i class="iconly-Hide icli showHidePassword"></i>
</div>
<!-- Password Input End -->
<!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> -->
<br />
<button type="button" class="btn-solid" @click="handleLogin">
登入
</button>
</form>
<!-- Login Form End -->
</template>
<template v-if="loginMethod == 'line'">
<!-- Social Section Start -->
<div class="socila-section">
<span>
<span class="font-sm fw-600 font-theme"> 點擊下方使用Line登入 </span>
</span>
<div class="social-wrap">
<a 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 登入
</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>
<!-- Password Input End -->
<!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> -->
<br />
<button type="button" class="btn-solid" @click="handleLogin">
登入
</button>
</form>
<!-- Login Form End -->
<!-- Social Section Start -->
<div class="socila-section">
<span>
<span class="font-sm fw-600 font-theme"> 其他登入方式 </span>
</span>
<div class="social-wrap">
<a
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 登入
</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>
<!-- Social Section End -->
<!-- Social Section End -->
</template>
</section>
<!-- Login Section End -->
</main>
@ -227,4 +217,8 @@ onUnmounted(() => {
cursor: not-allowed;
}
}
.van-tabs__line{
background: green !important;
}
</style>

Write Preview
Loading…
Cancel
Save