From 6a1221df65b7ccd08d24d479c03494c5aa63697f Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Tue, 11 Jul 2023 22:43:35 +0800
Subject: [PATCH] =?UTF-8?q?login=E5=88=86=E9=96=8B=E6=88=90=E4=BA=8C?=
 =?UTF-8?q?=E5=80=8Btab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Login/LineLogin.vue  |   2 +-
 src/views/Login/activation.vue |  90 +++++++++++++----------
 src/views/Login/index.vue      | 128 ++++++++++++++++-----------------
 3 files changed, 113 insertions(+), 107 deletions(-)

diff --git a/src/views/Login/LineLogin.vue b/src/views/Login/LineLogin.vue
index 1d8d131..8484079 100644
--- a/src/views/Login/LineLogin.vue
+++ b/src/views/Login/LineLogin.vue
@@ -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));
   }
 
 
diff --git a/src/views/Login/activation.vue b/src/views/Login/activation.vue
index 1bf8220..63d6c7b 100644
--- a/src/views/Login/activation.vue
+++ b/src/views/Login/activation.vue
@@ -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>
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index a13fd63..537cf9c 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -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);
   }
 };
@@ -117,13 +119,13 @@ const handleLogin = async () => {
 const handleLineLogin = async () => {
   // router.push('/')
   const client_id = process.env.VUE_APP_LINE_CLINE_ID;
-  
+
   //判斷domain是否包含localhost
   let redirect_uri = '';
-  if(domain.value.includes('localhost')){
+  if (domain.value.includes('localhost')) {
     redirect_uri = 'http://' + domain.value + ":8080/home/linelogin";
-  }else{
-    redirect_uri = 'https://' + domain.value + "/home/linelogin";  
+  } else {
+    redirect_uri = 'https://' + domain.value + "/home/linelogin";
   }
 
   let link = "https://access.line.me/oauth2/v2.1/authorize?";
@@ -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>
+      <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>
-        <!-- 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> -->
-        </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>