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));
} }

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 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,46 +187,56 @@ 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">
<!-- Login Form Start --> <template v-if="loginMethod == 'mobile'">
<form class="custom-form"> <!-- Login Form Start -->
<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> }}
</i> <template v-if="countdown > 0">({{ countdown }})</template>
</div> </i>
<!-- Email Input End --> </div>
<!-- Email Input End -->
<!-- Password Input start --> <!-- Password Input start -->
<div class="input-box"> <div class="input-box">
<input type="number" placeholder="驗證碼" required class="form-control" v-model="form.password" /> <input 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 -->
<!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> --> <!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> -->
<br /> <br />
<button type="button" class="btn-solid" @click="handleLogin"> <button type="button" class="btn-solid" @click="handleLogin">
手機登入開卡 手機登入開卡
</button> </button>
</form> </form>
<!-- Login Form End --> <!-- Login Form End -->
</template>
<!-- Social Section Start -->
<div class="socila-section"> <template v-if="loginMethod == 'line'">
<span> <!-- Social Section Start -->
<span class="font-sm fw-600 font-theme"> 其他開卡方式 </span> <div class="socila-section">
</span> <span>
<div class="social-wrap"> <span class="font-sm fw-600 font-theme"> 點擊Line登入開卡 </span>
<a href="javascript:void(0)" class="font-md title-color fw-600" @click.prevent="handleLineLogin"> </span>
<img src="@/assets/icons/png/line.png" alt="line login" /> Line 登入開卡 <div class="social-wrap">
</a> <a href="javascript:void(0)" class="font-md title-color fw-600" @click.prevent="handleLineLogin">
<!-- <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> --> <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>
</div> <!-- Social Section End -->
<!-- Social Section End --> </template>
</section> </section>
<!-- Login Section End --> <!-- Login Section End -->
</main> </main>

128
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);
} }
}; };
@ -117,13 +119,13 @@ const handleLogin = async () => {
const handleLineLogin = async () => { const handleLineLogin = async () => {
// router.push('/') // router.push('/')
const client_id = process.env.VUE_APP_LINE_CLINE_ID; const client_id = process.env.VUE_APP_LINE_CLINE_ID;
//判斷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";
} }
let link = "https://access.line.me/oauth2/v2.1/authorize?"; let link = "https://access.line.me/oauth2/v2.1/authorize?";
@ -146,65 +148,53 @@ 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" />
<!-- Email Input start --> <van-tab title="手機登入" name="mobile" />
<div class="input-box"> </van-tabs>
<input <br />
type="tel" <template v-if="loginMethod == 'mobile'">
placeholder="手機號" <form class="custom-form">
required <!-- Email Input start -->
class="form-control" <div class="input-box">
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 <template v-if="countdown > 0">({{ countdown }})</template>
class="verify" </i>
:class="{ disable: !showGetVerifyBtn }" </div>
@click="handleGetVerify" <!-- Email Input End -->
>{{ getVerifyMsg }}
<template v-if="countdown > 0">({{ countdown }})</template> <!-- Password Input start -->
</i> <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>
<!-- Email Input End --> <!-- Social Section End -->
</template>
<!-- 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> -->
</div>
</div>
<!-- Social Section End -->
</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