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: "",
@@ -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,6 +14,8 @@ const router = useRouter();
 
 const store = useStore();
 
+const loginMethod = ref('line')
+
 const form = ref({
   username: "",
   password: "",
@@ -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>