12.02 temp save

src/vite-frontend/src/components/ArticleListGlobal.vue

@@ -33,9 +33,9 @@ import {favoriteArticle, listArticles, unFavoriteArticle} from "@/api";
 export default defineComponent({
   name: "ArticleListGlobal",
   props:{
-    isEmpty: Boolean,
     isLoading: Boolean,
-    globalList: Boolean,
+    isEmpty: Boolean,
+    globalActive: Boolean,
   },
   setup(props,{emit}) {
     const articles = reactive({
@@ -80,6 +80,7 @@ export default defineComponent({
 
 
     onMounted(async () => {
+      console.log(props.isEmpty,props.globalActive,props.isLoading);
       try {
         const { data } = await listArticles();
         articles.article = data.articles.slice();

src/vite-frontend/src/components/ArticleMy.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="article-preview">
     <div class="article-meta">
-      <a href=""><img src="http://i.imgur.com/Qr71crq.jpg"/></a>
-      <a href="javascript:(0)" @click="showProfile(art.author.username)"><img :src="art.author.image"/></a>
+      <a href="javascript:void(0)" ><img :src="article.author.image"/></a>
       <div class="info">
-        <a href="" class="author">Eric Simons</a>
-        <span class="date">January 20th</span>
+        <a href="javascript:void(0)" class="author">{{article.author.username}}</a>
+        <span class="date">{{convertDate(article.createdAt)}}</span>
       </div>
       <button class="btn btn-outline-primary btn-sm pull-xs-right">
-        <i class="ion-heart"></i> 29
+        <i class="ion-heart"></i> {{article.favoritesCount}}
       </button>
     </div>
-    <a href="" class="preview-link">
-      <h1>How to build webapps that scale</h1>
-      <p>This is the description for the post.</p>
+    <a href="javascript:(0)" class="preview-link"
+       @click="showArticle(article.slug)">
+      <h1>{{article.title}}</h1>
+      <p>{{article.description}}</p>
       <span>Read more...</span>
     </a>
   </div>
@@ -22,10 +22,11 @@
 <script lang="ts">
 import {defineComponent} from "vue";
 import router from "@/router";
+import convertDate from "@/ts/common";
 export default defineComponent({
   name: "ArticleMy",
   props:{
-    art: {
+    article: {
       type: Object,
       default: () =>{
         return {
@@ -55,7 +56,14 @@ export default defineComponent({
       })
     }
 
-    return { showProfile, }
+    const showArticle = (slug: string) =>{
+      router.push({
+        name: 'ArticleDetail',
+        params: {slug: slug}
+      })
+    }
+
+    return { showProfile, convertDate, showArticle }
   }
 })
 </script>

src/vite-frontend/src/views/TheHome.vue

@@ -42,8 +42,9 @@
               </article-list>
               <article-list-global
                 v-else
-                :value="isLogin"
-                :value2="isEmpty"
+                :isLoading="isLoading"
+                :isEmpty="isEmpty"
+                :globalActive="globalActive"
                 @loading="onChangeLoading"
                 @emptied="emptyCheck">
               </article-list-global>

src/vite-frontend/src/views/TheProfile.vue

@@ -41,7 +41,7 @@
           <div class="articles-toggle">
             <ul class="nav nav-pills outline-active">
               <li class="nav-item">
-                <a class="nav-link active" href="">My Articles</a>
+                <a class="nav-link active" href="javascript">My Articles</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="">Favorited Articles</a>
@@ -50,7 +50,7 @@
           </div>
 
           <article-my v-for="(art,index) in articles.article"
-                        :art="art">
+                        :article="art">
           </article-my>
         </div>
 
@@ -90,7 +90,7 @@ export default defineComponent({
     })
 
     const articles = reactive({
-      article: reactive({
+      article: reactive([{
         slug: "",
         title: "",
         description: "",
@@ -106,7 +106,7 @@ export default defineComponent({
           image: "",
           following: false
         }
-      })
+      }])
     })
 
     const setProfile = async ( data: any ) => {