無痕模式bug

src/api/auth.js

@@ -3,3 +3,5 @@ import ajax from "./ajax";
 export const login = async (params) => ajax(`/auth/login`, params, "POST", { requestBase: 'sso' });
 
 export const sendVerify = async (username) => ajax(`/auth/sendVerify`, {username}, "POST", { requestBase: 'sso' });
+
+export const verifyActivationToken = async (token)=> ajax(`/auth/verifyActivationToken`,{token},"GET")

src/api/user.js

@@ -1,6 +1,6 @@
 import ajax from "./ajax";
 
-export const getUserInfo = async () => ajax(`/user/getUserInfo`);
+export const getUserInfo = async (params) => ajax(`/user/getUserInfo`,params,'POST');
 
 export const setUserLevel = async (level) =>
   ajax(`/user/setUserLevel`, { level }, "POST");
@@ -21,3 +21,4 @@ export const getUserFavorite = async () => ajax(`/user/getFavorite`);
 export const getUserConnections = async () => ajax(`/user/getConnections`);
 export const addFavorite = async (userid)=> ajax(`/user/addFavorite`,{userid},"POST")
 export const delFavorite = async (id)=> ajax(`/user/delFavorite`,{id},"POST")
+

src/components/Preview.vue

@@ -21,12 +21,13 @@ const flexRef = ref(null)
 
 onActivated(() => {
     flexRef.value.innerHTML = ''
-    let flexContent = genCard1(JSON.parse(route.params.content))
+    let flexContent = genCard1(JSON.parse(sessionStorage.getItem('preview')))
 
     flex2html("flex", flexContent)
 })
 
 onDeactivated(() => {
+    sessionStorage.removeItem('preview')
 })
 
 </script>

src/router/index.js

@@ -25,6 +25,11 @@ const routes = [
     name: "LineLogin",
     component: ()=> import("../views/Login/LineLogin.vue")
   },
+  {
+    path: "/activation",
+    name: "Activation",
+    component: ()=> import("../views/Login/activation.vue")
+  },
   {
     path: "/send",
     name: "Send",
@@ -147,7 +152,7 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   NProgress.start();
-  if ( to.path !== "/login" && to.path !== "/register" && to.path !== "/linelogin") {
+  if ( to.path !== "/login" && to.path !== "/register" && to.path !== "/linelogin" && to.path !== "/activation") {
     if (!Cookies.get("token")) {
       Toast('請重新登入')
       next("/login")

src/store/modules/user.js

@@ -21,7 +21,15 @@ export default {
   },
   actions: {
     async getUserInfo(context) {
-      var res = await getUserInfo();
+      let params = {}
+      //檢查LOCALSTORAGE是否有slashToken
+      
+      if(sessionStorage.getItem('slashToken')){
+        params.slashToken = sessionStorage.getItem('slashToken');
+      }
+      var res = await getUserInfo(params);
+      sessionStorage.removeItem('slashToken');
+
       if (res.code === 200) {
         context.commit("setUserInfo", res.data);
         return true;

src/views/Card/Edit.vue

@@ -504,6 +504,7 @@ import Cookies from 'js-cookie'
 
 import { Toast } from "vant";
 import { Cropper } from "vue-advanced-cropper";
+
 import "vue-advanced-cropper/dist/style.css";
 
 import { genCard1 } from "@/utils/card2";
@@ -823,9 +824,9 @@ export default defineComponent({
     };
 
     const handlePreview = () => {
+      sessionStorage.setItem("preview", JSON.stringify(state.form));
       router.push({
-        name: "CardPreview",
+        name: "CardPreview"
-        params: { content: JSON.stringify(state.form) },
       });
     };
 

src/views/Card/Preview.vue

@@ -1,52 +0,0 @@
-<template>
-    <van-nav-bar title="預覽" right-text="關閉" @click-right="$router.push('/card/edit')" />
-    <div class="flex-section">
-        <div class="table-responsive">
-            <div class="chatbox">
-                <div id="flex" ref="flexRef"></div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onActivated, onDeactivated } from 'vue'
-
-import { useRoute } from 'vue-router'
-
-import { genCard1 } from '@/utils/card2'
-
-const route = useRoute()
-const flexRef = ref(null)
-
-onActivated(() => {
-    flexRef.value.innerHTML = ''
-    let flexContent = genCard1(JSON.parse(route.params.content))
-    flex2html("flex", flexContent)
-})
-
-onDeactivated(() => {
-})
-
-</script>
-
-<style lang="less" scoped>
-.flex-section {
-    // color: white;
-    // z-index: 99999;
-    background-color: #666;
-}
-
-
-.chatbox {
-    background-color: #666;
-    margin-top: 10px;
-    padding-top: 10px;
-}
-
-
-.table-responsive {
-    width: 100%;
-    overflow-x: auto;
-}
-</style>

src/views/Home/index.vue

@@ -236,6 +236,7 @@ const deferredPrompt = ref(null);
 
 onBeforeMount(async () => {
   let res = await store.dispatch("user/getUserInfo");
+
   if(!res){
     router.push('/login')
   }

src/views/Login/LineLogin.vue

@@ -22,6 +22,13 @@ if (!code) {
 } else {
   const client_id = process.env.VUE_APP_LINE_CLINE_ID;
 
+  // 檢查state是否為login
+  if(route.query.state != 'login'){
+    //將state存入sessionStorage
+    sessionStorage.setItem("slashToken", route.query.state);
+  }
+
+
   //判斷domain是否包含localhost
   let redirect_uri = "";
   if (store.state.domain.includes("localhost")) {

src/views/Login/activation.vue

@@ -0,0 +1,250 @@
+<script setup>
+import Cookies from "js-cookie";
+
+import { ref, onBeforeMount, onUnmounted, watch, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useStore } from 'vuex'
+
+
+import { Toast } from 'vant'
+
+import { login, sendVerify } from "@/api/auth";
+import { verifyActivationToken } from "@/api/auth";
+
+const route = useRoute();
+const router = useRouter();
+
+const store = useStore();
+
+const token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))
+
+const form = ref({
+    username: "",
+    password: "",
+});
+
+const domain = computed(() => {
+    return store.state.domain
+});
+
+const sso_domain = computed(() => {
+    return store.state.sso_domain
+});
+
+const getVerifyMsg = ref("獲取驗證碼");
+const showGetVerifyBtn = ref(false);
+const countdown = ref(0);
+
+onBeforeMount(async () => {
+    //檢查token是否正確
+    const chkRes = await verifyActivationToken(token)
+
+    if (chkRes.code === 200) {
+        //將卡號存入sessionStorage
+        sessionStorage.setItem("slashToken", token);
+        if(Cookies.get("token")){
+            router.push("/");
+        }
+    } else {
+        Toast('卡片無效');
+        router.push("/login");
+    }
+})
+
+const handleGetVerify = async () => {
+    if (!showGetVerifyBtn.value) {
+        return
+    }
+    if (!form.value.username) {
+        return Toast("請輸入手機號");
+    }
+    let res = await sendVerify(form.value.username);
+    if (res.code === 200) {
+        getVerifyMsg.value = "重新發送";
+        countdown.value = 60;
+        Toast("驗證碼已發送");
+    } else {
+        countdown.value = res.data.countdown;
+        Toast('登入錯誤');
+    }
+};
+
+watch(
+    () => form.value.username,
+    (nVal) => {
+        //檢查vVal是否為電話號碼
+        let reg = /^09[0-9]{8}$/;
+
+        if (reg.test(nVal)) {
+            if (countdown.value === 0) {
+                return (showGetVerifyBtn.value = true);
+            } else {
+                return (showGetVerifyBtn.value = false);
+            }
+        } else {
+            return (showGetVerifyBtn.value = false);
+        }
+    }
+);
+
+let timer = null;
+
+watch(
+    () => countdown.value,
+    (nVal) => {
+        if (nVal > 0) {
+            showGetVerifyBtn.value = false;
+            if (!timer) {
+                timer = setInterval(() => {
+                    if (countdown.value >= 0) {
+                        countdown.value--;
+                    }
+                }, 1000);
+            }
+        } else {
+            clearInterval(timer);
+            timer = null;
+            showGetVerifyBtn.value = true;
+        }
+    }
+);
+
+const handleLogin = async () => {
+    //檢查帳號密碼是否為空
+    if (!form.value.username || !form.value.password) {
+        return Toast("請輸入帳號及驗證碼");
+    }
+
+    let res = await login(form.value);
+    if (res.code === 200) {
+        Cookies.set("token", res.data.token, {
+            expires: 365,
+            domain: sso_domain.value,
+        });
+        Cookies.set("uid", res.data.uid, {
+            expires: 365,
+            domain: sso_domain.value,
+        });
+        router.push("/");
+    } else if (res.code === 201) {
+        sessionStorage.setItem("reg", form.value.username);
+        router.push({ name: "Register", query: { type: "mobile" } });
+    } else {
+        Toast(res.message);
+    }
+};
+
+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')) {
+        redirect_uri = 'http://' + domain.value + ":8080/home/linelogin";
+    } else {
+        redirect_uri = 'https://' + domain.value + "/home/linelogin";
+    }
+
+    let link = "https://access.line.me/oauth2/v2.1/authorize?";
+    link = link + "response_type=code";
+    link += "&client_id=" + client_id;
+    link += "&redirect_uri=" + redirect_uri;
+    link += "&state="+ token;
+    link += "&scope=openid%20profile";
+    window.location.href = link;
+};
+
+onUnmounted(() => {
+    clearInterval(timer);
+});
+</script>
+
+<template>
+    <header class="header">
+        <div class="logo-wrap">
+            <!-- <i class="icon-menu icli nav-bar" @click="toggleMenu"></i> -->
+            <a href="###">
+                <img class="logo" src="@/assets/images/logo/logo_w.jpg" alt="logo" />
+            </a>
+        </div>
+        <div class="avatar-wrap" @click="$router.push('/cart')">
+            <!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
+            <!-- <van-icon name="cart-o" :badge="cartStore.cartNum" /> -->
+        </div>
+    </header>
+
+    <!-- Main Start -->
+    <main class="main-wrap login-page mb-xxl">
+        <h1 class="font-md title-color fw-600">開卡系統</h1>
+        <div class="activation-note">
+            說明:<br />
+            1.您可以使用Line登入或手機登入二種方式開卡。<br />
+            2.若您已是會員將會將本卡片綁定你原本的會員帳號。<br />
+            3.若您還不是會員，將會自動幫您註冊成為會員。<br />
+            <br />
+        </div>
+        <!-- Login Section Start -->
+        <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 -->
+
+                <!-- 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>
+        <!-- Login Section End -->
+    </main>
+    <!-- Main End -->
+</template>
+  
+<style lang="less" scoped>
+.input-box {
+    .verify {
+        font-size: calc(14px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    .disable {
+        color: #c9ccd0;
+        cursor: not-allowed;
+    }
+}
+</style>

src/views/Login/index.vue

@@ -1,74 +1,3 @@
-<template>
-  <!-- Main Start -->
-  <main class="main-wrap login-page mb-xxl">
-    <!-- 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>
-        </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>
-    <!-- Login Section End -->
-  </main>
-  <!-- Main End -->
-</template>
-
 <script setup>
 import Cookies from "js-cookie";
 
@@ -211,6 +140,77 @@ onUnmounted(() => {
 });
 </script>
 
+<template>
+  <!-- Main Start -->
+  <main class="main-wrap login-page mb-xxl">
+    <!-- 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>
+        </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>
+    <!-- Login Section End -->
+  </main>
+  <!-- Main End -->
+</template>
+
 <style lang="less" scoped>
 .input-box {
   .verify {