feature update

src/api/blog.ts

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios from 'axios';
 
 export const getBlogsBasicInfo = (cat: string) => {
   return new Promise((resolve, reject) => {
@@ -10,13 +10,13 @@ export const getBlogsBasicInfo = (cat: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const getBlogCats = (token: string) => {
   return new Promise((resolve, reject) => {
@@ -31,13 +31,13 @@ export const getBlogCats = (token: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const getBlog = (id: string) => {
   return new Promise((resolve, reject) => {
@@ -48,13 +48,13 @@ export const getBlog = (id: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const saveBlog = (blogInfo: any, token: string) => {
   return new Promise((resolve, reject) => {
@@ -66,13 +66,13 @@ export const saveBlog = (blogInfo: any, token: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const createBlog = (newBlog: any, token: string) => {
   return new Promise((resolve, reject) => {
@@ -84,10 +84,10 @@ export const createBlog = (newBlog: any, token: string) => {
         },
       })
       .then((res) => {
-        resolve(res.data)
+        resolve(res.data);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};

src/api/comments.ts

@@ -0,0 +1,54 @@
+import axios from 'axios';
+
+export interface IComment {
+  repliedTo: {
+    name: string;
+    id: string;
+  } | null;
+  blogId: string;
+  content: string;
+  parentId: string;
+}
+
+export const queryComments = (blogId: string, token: string) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .get(`${process.env.VUE_APP_URL}/myWeb/comment`, {
+        headers: {
+          authorization: 'Bearer ' + token,
+          'Content-Type': 'application/json',
+        },
+        params: { blogId },
+      })
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+export const newComment = (comment: IComment, token: string) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(
+        `${process.env.VUE_APP_URL}/myWeb/comment`,
+        {
+          data: { ...comment },
+        },
+        {
+          headers: {
+            authorization: 'Bearer ' + token,
+            'Content-Type': 'application/json',
+          },
+        }
+      )
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};

src/api/login.ts

@@ -18,6 +18,21 @@ export const login = (email: string, pwd: string) => {
   })
 }
 
+export const signup = (user: { user_name: string; user_pwd: string; email: string }) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(`${process.env.VUE_APP_URL}/myWeb/user/signup`, {
+        data: { ...user },
+      })
+      .then((res) => {
+        resolve(res.data)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+
 export const verifyToken = (user_name: string, token: string) => {
   return new Promise((resolve, reject) => {
     axios

src/components/CardView.vue

@@ -2,8 +2,14 @@
   <el-card class="box-card">
     <div v-if="mediaType === 'blog'" class="media_blog">
       <div>
-        <h3 @click="select(id)" class="title">{{ title }}<i class="el-icon-right"></i></h3>
-        <div class="insight"><i class="el-icon-chat-line-round">&nbsp;0</i> <i class="el-icon-view">&nbsp; 0</i></div>
+        <h3 @click="select(id)" class="title">
+          {{ title }}
+          <i class="el-icon-right"></i>
+        </h3>
+        <div class="insight">
+          <i class="el-icon-chat-line-round">&nbsp;0</i>
+          <i class="el-icon-view">&nbsp; 0</i>
+        </div>
       </div>
       <span class="time">
         <el-tag type="info" size="small">{{ formatTime(time) }}</el-tag>
@@ -12,7 +18,7 @@
     <div class="media_multi" v-else>
       <div class="des-box">
         <h3 class="title">{{ title }}</h3>
-        <el-tag size="mini" type="info">{{ formatTime(time) }}</el-tag>
+        <el-tag class="tag" size="mini" type="info">{{ formatTime(time) }}</el-tag>
       </div>
       <div class="media_box">
         <videoPlayer
@@ -22,16 +28,25 @@
           :options="playerOptions"
         />
       </div>
+      <div class="comment_box">
+        <el-button type="text" size="small" @click="toggleDrawer(true)">查看评论</el-button>
+        <Drawer :isDrawerShow="isDrawerShow" @toggleDrawer="toggleDrawer">
+          <Comment :blogId="id" @toggleDrawer="toggleDrawer" />
+        </Drawer>
+      </div>
     </div>
   </el-card>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { format } from '../utils/formatTime'
-import Component from 'vue-class-component'
-import { videoPlayer } from 'vue-video-player'
-import 'video.js/dist/video-js.css'
+import Vue from 'vue';
+import { format } from '../utils/formatTime';
+import Component from 'vue-class-component';
+import { videoPlayer } from 'vue-video-player';
+import 'video.js/dist/video-js.css';
+
+const Drawer = () => import('./Drawer.vue');
+const Comment = () => import('./comments/Comments.vue');
 
 @Component({
   name: 'CardView',
@@ -41,10 +56,11 @@ import 'video.js/dist/video-js.css'
     id: String,
     cat: String,
     mediaType: String,
-    mediaSources: Array,
+    mediaSources: Array
   },
-  components: { videoPlayer },
+  components: { videoPlayer, Drawer, Comment }
 })
+
 export default class CardView extends Vue {
   public playerOptions: any = {
     playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
@@ -62,28 +78,34 @@ export default class CardView extends Vue {
       timeDivider: true, // 当前时间和持续时间的分隔符
       durationDisplay: true, // 显示持续时间
       remainingTimeDisplay: false, // 是否显示剩余时间功能
-      fullscreenToggle: true, // 是否显示全屏按钮
-    },
-  }
+      fullscreenToggle: true // 是否显示全屏按钮
+    }
+  };
+
+  public isDrawerShow: boolean = false;
 
   public select(id: string): void {
-    this.$emit('select', id)
+    this.$emit('select', id);
   }
 
   public formatTime(time: string) {
-    return format(time)
+    return format(time);
+  }
+
+  public toggleDrawer(isDrawerShow: boolean) {
+    this.isDrawerShow = isDrawerShow
   }
 
   public mounted() {
     this.$nextTick(() => {
-      const sources = this.$props.mediaSources
+      const sources = this.$props.mediaSources;
       this.playerOptions.sources = sources.map((source: string) => {
         return {
           type: 'video/mp4',
-          src: `${process.env.VUE_APP_BASE}/static/` + source,
-        }
-      })
-    })
+          src: `${process.env.VUE_APP_BASE}/static/` + source
+        };
+      });
+    });
   }
 }
 </script>
@@ -132,9 +154,13 @@ export default class CardView extends Vue {
     }
 
     .media_box {
-      padding: 20px;
       border-radius: 10px;
     }
+    .comment_box {
+      .el-button {
+        color: #909399;
+      }
+    }
   }
 }
 </style>

src/components/Drawer.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-drawer
+    :modal="true"
+    :modal-append-to-body="true"
+    :withHeader="false"
+    :visible="isDrawerShow"
+    @close="onDrawerClose"
+  >
+    <slot></slot>
+  </el-drawer>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+@Component({
+  name: 'Drawer',
+  props: {
+    isDrawerShow: Boolean,
+  },
+})
+export default class Drawer extends Vue {
+  public onDrawerClose(): void {
+    this.$emit('toggleDrawer', false)
+  }
+}
+</script>
+<style lang="scss" scoped>
+/deep/ .el-drawer__body {
+  overflow: scroll;
+}
+</style>