logic update

src/api/login.ts

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios from 'axios';
 
 export const login = (email: string, pwd: string) => {
   return new Promise((resolve, reject) => {
@@ -10,13 +10,28 @@ export const login = (email: string, pwd: string) => {
         },
       })
       .then((res) => {
-        resolve(res.data)
+        resolve(res.data);
       })
       .catch((err) => {
-        reject(err)
+        reject(err);
+      });
+  });
+};
+
+export const activateAccount = (id: string) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(`${process.env.VUE_APP_URL}/myWeb/user/activate`, {
+        data: { id },
+      })
+      .then((res) => {
+        resolve(res.data);
       })
-  })
-}
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
 
 export const signup = (user: { user_name: string; user_pwd: string; email: string }) => {
   return new Promise((resolve, reject) => {
@@ -25,13 +40,13 @@ export const signup = (user: { user_name: string; user_pwd: string; email: strin
         data: { ...user },
       })
       .then((res) => {
-        resolve(res.data)
+        resolve(res.data);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const verifyToken = (user_name: string, token: string) => {
   return new Promise((resolve, reject) => {
@@ -44,14 +59,14 @@ export const verifyToken = (user_name: string, token: string) => {
       })
       .then((res) => {
         if (res.data.code === 200) {
-          resolve(res.data.result)
+          resolve(res.data.result);
         }
       })
       .catch(() => {
-        reject({ invalid: false })
-      })
-  })
-}
+        reject({ invalid: false });
+      });
+  });
+};
 
 export const logout = (email: string) => {
   return new Promise((resolve, reject) => {
@@ -62,10 +77,10 @@ export const logout = (email: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};

src/components/comments/Comments.vue

@@ -109,6 +109,7 @@ export default class Comment extends Vue {
     .input {
       flex: 1;
       & /deep/ .el-textarea__inner {
+        font-family: 'main-font' !important;
         padding: 5px 5px;
         border-radius: 3px !important;
       }

src/components/loginModal.vue

@@ -149,10 +149,9 @@ export default {
               message: 'Login successfully',
               type: 'success',
             })
-            this.$socket.connect()
           } else {
             this.$message({
-              message: 'Could not login: email or password wrong',
+              message: res.msg,
               type: 'error',
             })
           }
@@ -177,17 +176,19 @@ export default {
           }
           signup(newUser).then((res) => {
             if (res.code === 200) {
-              localStorage.setItem('user_name', res.result.user_name)
-              localStorage.setItem('token', res.result.token)
-              localStorage.setItem('role', res.result.role)
-              this.closeModal()
-              this.setLogin(true)
-              this.setUseInfo(res.result)
               this.$message({
                 message: 'Signup successfully',
                 type: 'success',
               })
-              this.$socket.connect()
+              this.$router.push({
+                name: 'Staging',
+                params: {
+                  name: res.result.user_name,
+                  email: res.result.email
+                }
+              }
+              )
+              this.closeModal()
             } else {
               this.$message({
                 message: 'Could not signup',

src/router/index.ts

@@ -1,9 +1,12 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '@/views/home/Home.vue'
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Home from '@/views/home/Home.vue';
 
-Vue.use(VueRouter)
-const Content = () => import('@/views/content/Content.vue')
+Vue.use(VueRouter);
+const Content = () => import('@/views/content/Content.vue');
+const Staging = () => import('@/views/staging/Staging.vue');
+const Active = () => import('@/views/active/Active.vue');
+const NotFound = () => import('@/views/notFound/NotFound.vue');
 // 如果Content 是按需引入的话 会出现网页元素闪动 上线了以后看看到底影响大不大
 // import Content from '@/views/content/Content.vue'
 const routes = [
@@ -17,12 +20,28 @@ const routes = [
     name: 'Content',
     component: Content,
   },
-]
+  {
+    path: '/staging',
+    name: 'Staging',
+    component: Staging,
+    props: true,
+  },
+  {
+    path: '/active/:id',
+    name: 'Active',
+    component: Active,
+  },
+  {
+    path: '*',
+    name: 'NotFound',
+    component: NotFound,
+  },
+];
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
-})
+});
 
-export default router
+export default router;

src/views/active/Active.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="active">
+    {{status}}
+    <i v-if="activing" class="el-icon-loading"></i>
+    <div>
+      <el-button class="btn" size="small" v-if="valid">
+        <router-link tag="span" to="/">返回首页</router-link>
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { activateAccount } from '../../api/login'
+@Component({
+  name: 'Active',
+})
+export default class Active extends Vue {
+  private status: string = '激活中...';
+  private activing: boolean = true;
+  private valid: boolean = false;
+  public async activateAccoutn() {
+    const res: any = await activateAccount(this.$route.params.id).catch(err => err);
+    this.activing = false;
+    if (res instanceof Error) {
+      this.status = '网络错误, 请稍后再试.';
+      return;
+    }
+    if (!res || res.code === -1) {
+      this.status = res.msg;
+      return;
+    };
+    this.status = '激活成功!回到首页登陆';
+    this.activing = false;
+    this.valid = true;
+  }
+  public beforeMount() {
+    if (!this.$route.params.id) {
+      this.$router.push('/');
+    }
+  }
+  public async mounted() {
+    await this.activateAccoutn()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.active {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 600px;
+  .btn {
+    background: #f2f3f7;
+  }
+}
+</style>

src/views/notFound/NotFound.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="error">
+    <div class="title">404</div>
+    <div class="content">Not Found</div>
+    <el-button class="btn" size="small">
+      <router-link to="/" tag="span">返回主页</router-link>
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { activateAccount } from '../../api/login'
+@Component({
+  name: 'NotFound',
+})
+export default class NotFound extends Vue {
+
+}
+</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;
+  }
+  .btn {
+    background: #f2f3f7;
+  }
+}
+</style>

src/views/staging/Staging.vue

@@ -0,0 +1,54 @@
+<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 lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+@Component({
+  name: 'Staging',
+  props: {
+    email: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    }
+  },
+})
+export default class Staging extends Vue {
+  public beforeMount() {
+    if (!this.$props.name || !this.$props.email) {
+      this.$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>