trends

src/assets/scss/style.scss

@@ -710,6 +710,9 @@ input[type="radio"]:checked + label {
       color: $black;
     }
   }
+  &__word-history {
+    font-size: 1rem;
+  }
 }
 
 .btn__showmore {
@@ -812,4 +815,21 @@ input[type="radio"]:checked + label {
   border-color: $bg-color;
 }
 
+.prenxt-btn {
+  outline: none;
+  border: 1px solid $bg-color;
+  background-color: transparent;
+  padding: .5rem;
+  color: $bg-color;
+  &:hover {
+    background-color: $bg-color;
+    color: $white;
+  }
+  &.disabled {
+    color: $bg-color-lighten-2;
+    border: 1px solid $bg-color-lighten-2;
+    pointer-events: none;
+  }
+}
+
 

src/views/Trends.vue

@@ -28,6 +28,31 @@
                     顯示更多
                 </button>
             </div>
+            <h3 class="usernews__table__title mt-3">歷史熱門關鍵字排行</h3>
+            <div class="date__input mb-3">
+                    <date-picker v-model="singledate"
+                        type="date"
+                        placeholder="選擇日期"
+                        format='YYYY-MM-DD'
+                        value-type="YYYY-MM-DD"
+                        :editable="false"
+                        :default-value="yesterday"
+                        :disabled-date="disabledAfterToday"></date-picker>
+                    <button class='sub__date' @click.once.prevent="getHisTops(singledate)">套用</button>
+                </div>
+            <div class="row mb-3">
+                <div class="col-3 mb-3" v-for="(htop, i) in HisTops" :key="htop[0]">
+                    <a href="" class="popular__card" @click.prevent="search(htop[1])">
+                        <div class="card">
+                            <div class="card-content d-flex align-items-center justify-content-around">
+                                <span class="d-inline-block">{{ i + 1 }}</span>
+                                <p class="d-inline-block pb-0 mb-0 popular__word-history">{{ htop[1] }}</p>
+                                <i class="fas fa-chart-line"></i>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
             <h3 class="usernews__table__title">關鍵字觀測</h3>
             <form id="searchform" class="d-flex search__form mx-auto">
                 <input type="search" class="search__bar" placeholder="輸入您感興趣的字詞或主題" v-model='query'>
@@ -110,7 +135,7 @@
                             <th>成長率</th>
                             <th>主題</th>
                         </tr>
-                        <tr v-for="(topic, i) in reltopics" :key="`rew-${i}`">
+                        <tr v-for="(topic, i) in filterTopics[page]" :key="`rew-${i}`">
                             <td><h4 class="reltopic__title mb-0">{{ topic[4] }}</h4></td>
                             <template v-if="topic[1]=='飆升'">
                                 <td><span class="badge rounded-pill bg-danger text-light">{{ topic[1]}}</span></td>
@@ -124,6 +149,10 @@
                             </template>
                         </tr>
                     </table>
+                    <div>
+                        <button class="prenxt-btn" @click.prevent="prevnext('prev')" :class="{'disabled': page === 0}"><i class="fas fa-chevron-left"></i></button>
+                        <button class="prenxt-btn" @click.prevent="prevnext('next')" :class="{'disabled': page >= totalPages-1 }"><i class="fas fa-chevron-right"></i></button>
+                    </div>
                 </div>
             </div>
             <div class="row my-5 ">
@@ -182,7 +211,12 @@ export default {
             tops: [],
             topAmount: 5,
             daterng: [],
-            initialdate: []
+            initialdate: [],
+            singledate: '',
+            HisTops: [],
+            yseterday: '',
+            page: 0,
+            totalPages: 0
         }
     },
     methods: {
@@ -198,11 +232,11 @@ export default {
                     vm.history.unshift(word);
                 }
                 localStorage.setItem('searchedWords', JSON.stringify(vm.history));
-                /* vm.$http.get(`http://api.ptt.cx:8000/related_queries1/${word}?fd=2021-01-01&td=2021-02-30`, {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
+                vm.$http.get(`http://api.ptt.cx:8000/related_queries1/${word}?fd=2021-01-01&td=2021-02-30`, {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
                     vm.recommends = res.data;
                     console.log(res.data);
                     vm.isLoading = false;
-                }); */
+                });
                 vm.$http.get(`http://api.ptt.cx:8000/related_topics1/${word}?fd=${date[0]}&td=${date[1]}`,  {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
                     console.log(`http://api.ptt.cx:8000/related_topics1/${word}?fd=${date[0]}&td=${date[1]}`);
                     vm.reltopics = res.data;
@@ -223,13 +257,21 @@ export default {
         },
         getTops() {
             const vm = this;
-            vm.isLoading = true;
-            vm.$http.get(`http://api.ptt.cx:8000/ts_top?tc=${vm.topAmount}`).then(res => {
+            // vm.isLoading = true;
+            vm.$http.get(`http://api.ptt.cx:8000/ts_top?td=${vm.initialdate[1]}&tc=${vm.topAmount}`, {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
                 console.log(res.data);
                 vm.tops = res.data;
                 vm.isLoading = false;
             });
         },
+        getHisTops(date = this.singledate) {
+            const vm = this;
+
+            vm.$http.get(`http://api.ptt.cx:8000/ts_top?td=${date}&tc=20`, {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
+                console.log(res.data);
+                vm.HisTops = res.data;
+            });
+        },
         showMore() {
             const vm = this;
             console.log(vm.topAmount);
@@ -244,13 +286,41 @@ export default {
             let today = new Date().toISOString().slice(0, 10);
             let newdate = new Date();
             let monthbefore = new Date(newdate.getTime() - 30*60*60*24*1000);
-            var dd = monthbefore.getDate().toString();
-            var mm = (monthbefore.getMonth() + 1).toString();
-            var y = monthbefore.getFullYear().toString();
-            var someFormattedDate = y + '-'+ mm + '-'+ dd;
+            let dd = monthbefore.getDate().toString();
+            let mm = (monthbefore.getMonth() + 1).toString();
+            dd = dd.length < 2 ? '0'+ dd : dd;
+            mm = mm.length < 2 ? '0'+ mm : mm;
+            let y = monthbefore.getFullYear().toString();
+            let someFormattedDate = y + '-'+ mm + '-'+ dd;
             this.initialdate = [someFormattedDate, today];
+            let yesterday = new Date(newdate.getTime() - 60*60*24*1000);
+            yesterday = yesterday.toISOString().slice(0, 10);
+            this.singledate = yesterday;
+            this.yesterday = yesterday;
             // this.daterng = [someFormattedDate, today];
         },
+        disabledAfterToday(date) {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+
+            return date > today;
+        },
+        prevnext(method) {
+            const vm = this;
+            if(method === 'prev') {
+                if(vm.page === 0) {
+                    vm.page = 0;
+                }else {
+                    vm.page -= 1;
+                }
+            }else if(method === 'next') {
+                if(vm.page >= vm.totalPages-1) {
+                    vm.page = vm.totalPages-1;
+                }else {
+                    vm.page += 1;
+                }
+            }
+        }
     },
     computed: {
         searchedWords() {
@@ -261,12 +331,30 @@ export default {
             } else {
                 return this.history;
             }
+        },
+        filterTopics() {
+            const vm = this;
+            const newData = [];
+            let items = [];
+            items = [...vm.reltopics];
+            items.forEach((item, i) => {
+                if(i % 8 === 0) {
+                    newData.push([]);
+                }
+                const page = parseInt(i/8);
+                
+                newData[page].push(item);
+            })
+            vm.totalPages = newData.length;
+            return newData;
         }
     },
     created() {
         // this.getCharData();
-        this.getTops();
         this.initialDate();
+        this.getHisTops();
+        this.getTops();
+        
         console.log(this.topAmount);
         this.history = JSON.parse(localStorage.getItem('searchedWords')) || [];
     }