login分開成二個tab

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

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,14 +187,21 @@ 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">
+            <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 }}
+                        <i class="verify" :class="{ disable: !showGetVerifyBtn }" @click="handleGetVerify">{{ getVerifyMsg
+                        }}
                             <template v-if="countdown > 0">({{ countdown }})</template>
                         </i>
                     </div>
@@ -211,11 +220,13 @@ onUnmounted(() => {
                     </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"> 其他開卡方式 </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">
@@ -225,6 +236,7 @@ onUnmounted(() => {
                     </div>
                 </div>
                 <!-- Social Section End -->
+            </template>
         </section>
         <!-- Login Section End -->
     </main>

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);
   }
 };
@@ -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,23 +148,18 @@ 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>
-
+      <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 }}
+            <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>
@@ -170,13 +167,7 @@ onUnmounted(() => {
 
           <!-- Password Input start -->
           <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>
           </div>
           <!-- Password Input End -->
@@ -187,24 +178,23 @@ onUnmounted(() => {
           </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"> 其他登入方式 </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"
-          >
+            <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 -->
+      </template>
     </section>
     <!-- Login Section End -->
   </main>
@@ -227,4 +217,8 @@ onUnmounted(() => {
     cursor: not-allowed;
   }
 }
+
+.van-tabs__line{  
+  background: green !important;
+}
 </style>