From 3c38d52663c57b74b6fce9d61e6b85e446413d47 Mon Sep 17 00:00:00 2001
From: mryanshenghong <mryanshenghong@gmail.com>
Date: Wed, 27 Jul 2022 02:44:54 -0400
Subject: [PATCH] feat(pages): migrate pages

---
 src/components/LoginModal.vue |  2 +-
 src/pages/activate/index.vue  | 64 +++++++++++++++++++++++++++++++++++
 src/pages/notfound/index.vue  | 30 ++++++++++++++++
 src/pages/staging/index.vue   | 53 +++++++++++++++++++++++++++++
 src/router/index.ts           | 22 +++++++++++-
 5 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/activate/index.vue
 create mode 100644 src/pages/notfound/index.vue
 create mode 100644 src/pages/staging/index.vue

diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
index c31615a..d49b96d 100644
--- a/src/components/LoginModal.vue
+++ b/src/components/LoginModal.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentObjectPropsOptions, getCurrentInstance, reactive, ref, watch } from "vue";
+import { getCurrentInstance, reactive, ref, watch } from "vue";
 import { login, signup } from "../api/login";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
diff --git a/src/pages/activate/index.vue b/src/pages/activate/index.vue
new file mode 100644
index 0000000..dc08013
--- /dev/null
+++ b/src/pages/activate/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="active">
+    {{ state.status }}
+    <i v-if="state.activating" class="el-icon-loading"></i>
+    <div>
+      <el-button class="btn" size="small" v-if="state.valid" @click="router.replace('/')"> 返回首页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, onMounted, reactive } from "vue";
+import { activateAccount } from "@/api/login";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+const requestId = route.params.id as string;
+
+// State
+const state = reactive({
+  status: "激活中...",
+  activating: true,
+  valid: false,
+});
+
+// Lifecycle
+onBeforeMount(() => {
+  if (route.params.id) {
+    router.push("/");
+  }
+});
+
+onMounted(async () => await activateAccoutn());
+
+// Methods
+const activateAccoutn = async () => {
+  try {
+    const res: any = await activateAccount(requestId);
+    state.activating = false;
+    if (!res || res.code === -1) {
+      state.status = res.msg;
+      return;
+    }
+    state.status = "激活成功!回到首页登陆";
+    state.activating = false;
+    state.valid = true;
+  } catch (err) {
+    state.status = "网络错误, 请稍后再试.";
+  }
+};
+</script>
+<style lang="scss" scoped>
+.active {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 600px;
+  .btn {
+    background: #f2f3f7;
+  }
+}
+</style>
diff --git a/src/pages/notfound/index.vue b/src/pages/notfound/index.vue
new file mode 100644
index 0000000..2e32206
--- /dev/null
+++ b/src/pages/notfound/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="error">
+    <div class="title">404</div>
+    <div class="content">Not Found</div>
+    <el-button size="small" link @click="router.replace('/')"> 返回主页 </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+</script>
+<style lang="scss" scoped>
+.error {
+  display: flex;
+  height: 600px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  .title {
+    font-size: 40px;
+    margin-bottom: 10px;
+  }
+  .content {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+}
+</style>
diff --git a/src/pages/staging/index.vue b/src/pages/staging/index.vue
new file mode 100644
index 0000000..6a0f9fa
--- /dev/null
+++ b/src/pages/staging/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="staging">
+    <div class="title">Hi, {{ name }}:</div>
+    <div class="content">
+      <p>感谢你注册About Life! 我们发送了激活邮件到你的邮箱: {{ email }}.</p>
+      <p>请前往你的邮箱激活账户, 激活账户就可以正常登陆About Life啦！</p>
+    </div>
+    <div class="footer">--- About Life</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount } from "vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  email: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const router = useRouter();
+
+onBeforeMount(() => {
+  if (!props.name || !props.email) {
+    router.push("/");
+  }
+});
+</script>
+<style lang="scss" scoped>
+.staging {
+  margin-top: 20px;
+  .title {
+    font-size: 18px;
+    text-align: left;
+    color: #d9d9d9;
+  }
+  .content {
+    margin-top: 10px;
+    p {
+      margin-top: 5px;
+    }
+  }
+  .footer {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 909e971..8f77340 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,9 +1,10 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import Home from "@/pages/home/Home.vue";
+import Staging from "@/pages/staging/index.vue";
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
-    name: "home",
+    name: "Home",
     component: Home,
   },
   {
@@ -11,6 +12,12 @@ const routes: Array<RouteRecordRaw> = [
     name: "Content",
     component: () => import("@/pages/content/Content.vue"),
   },
+  {
+    path: "/staging",
+    name: "Staging",
+    component: Staging,
+    props: true,
+  },
   //   {
   //     path: "/about",
   //     name: "about",
@@ -20,6 +27,11 @@ const routes: Array<RouteRecordRaw> = [
   //     component: () =>
   //       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   //   },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: () => import("@/pages/notfound/index.vue"),
+  },
 ];
 
 const router = createRouter({
@@ -27,4 +39,12 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.name === "Media" && localStorage.role !== "0") {
+    next({ name: "NotFound" });
+  } else {
+    next();
+  }
+});
+
 export default router;