optimize and test

src/components/Linebutton.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <img
+            :src="buttonStatus" alt="Line Login"
+            @mouseover="hoverEvent()"
+            @mousedown="pressEvent()"
+            @mouseup="hoverEvent()"
+            @mouseleave="initEvent()"
+            @click="$emit('login')"
+        >
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            buttonStatus: require('../assets/btn_login_base.png'),
+        }
+    },
+    methods: {
+        hoverEvent() {
+            this.buttonStatus = require('../assets/btn_login_hover.png');
+        },
+        pressEvent() {
+            this.buttonStatus = require('../assets/btn_login_press.png');
+        },
+        initEvent() {
+            this.buttonStatus = require('../assets/btn_login_base.png');
+        }
+    }
+}
+</script>

src/router/index.js

@@ -6,6 +6,7 @@ import Usernews from '../views/Usernews.vue'
 import Calendarview from '../views/Calendarview.vue'
 import Aivideo from '../views/Aivdeo.vue'
 import Trends from '../views/Trends.vue'
+import Login from '../views/Login.vue'
 
 Vue.use(VueRouter)
 
@@ -53,6 +54,11 @@ const routes = [
     name: 'Trends',
     component: Trends,
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login,
+  },
 ]
 
 const router = new VueRouter({

src/views/Login.vue

@@ -0,0 +1,165 @@
+<template>
+    <div>
+        <Loading :active.sync="isLoading" :opacity="0.8">
+            <template slot="default">
+                <img src="../assets/ajax-loader.gif">
+            </template>
+        </Loading>
+        <div class="container">
+            <h3 class="usernews__table__title mt-3">本日熱門關鍵字排行</h3>
+            <div class="row mb-3">
+                <div class="col-6 mb-3" v-for="(top, i) in tops" :key="top[0]">
+                    <a href="" class="popular__card" @click.prevent="search(top[1])">
+                        <div class="card">
+                            <div class="card-content d-flex align-items-center">
+                                <span class="d-inline-block">{{ i + 1 }}</span>
+                                <p class="d-inline-block pb-0 mb-0 popular__word">{{ top[1] }}</p>
+                                <i class="fas fa-chart-line"></i>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="my-3 mb-5">
+                <button class="btn__showmore" v-if="topAmount>=20" @click.prevent="topAmount=5; getTops()" >
+                    收起
+                </button>
+                <button class="btn__showmore" @click.prevent="showMore" v-else>
+                    顯示更多
+                </button>
+            </div>
+            <Linebutton @login='login'></Linebutton>
+           
+            </div>
+    </div>
+</template>
+
+<script>
+import Linebutton from '../components/Linebutton.vue';
+
+export default {
+    name: 'Login',
+    components: { Linebutton },
+    data() {
+        return {
+            query: '',
+            groupChar: [],
+            sortDesc: true,
+            color: ['#dd6565'],
+            fields: [
+                { key: '商品標題', sortable: true },
+                { key: '銷售量', sortable: true },
+                { key: '價格', sortable: true },
+            ],
+            recommends: [
+            ],
+            reltopics: [
+
+            ],
+            chartSettings: {
+                area: true,
+            },
+            chartDatat: {
+                columns: ['月份', '次數'],
+                rows: [
+                    { 月份: '2021-01', 次數: 1000 },
+                    { 月份: '2021-02', 次數: 400 },
+                    { 月份: '2021-03', 次數: 200 },
+                    { 月份: '2021-04', 次數: 600 },
+                    { 月份: '2021-05', 次數: 800 },
+                ]
+            },
+            warnmsg: '',
+            isLoading: false,
+            history: [],
+            tops: [],
+            topAmount: 5,
+            daterng: [],
+            initialdate: [],
+            singledate: '',
+            HisTops: [],
+            yseterday: '',
+            page: 0,
+            totalPages: 0
+        }
+    },
+    methods: {
+        closeModal() {
+            this.$refs['my-modal'].hide();
+        },
+        getTops() {
+            const vm = this;
+            // 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;
+            });
+        },
+        showMore() {
+            const vm = this;
+            console.log(vm.topAmount);
+            vm.topAmount += 5;
+            if(vm.topAmount >20) {
+                return 
+            } else {
+                vm.getTops();
+            }
+        },
+        initialDate() {
+            let today = new Date().toISOString().slice(0, 10);
+            let newdate = new Date();
+            let monthbefore = new Date(newdate.getTime() - 30*60*60*24*1000);
+            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;
+        },
+        randomString(length){
+            var result = '';
+            var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            var charactersLength = characters.length;
+            for ( var i = 0; i < length; i++ ) {
+                result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            }
+            return result;
+        },
+        login() {
+            let randomState = this.randomString(8);
+            console.log(randomState);
+            let URL = 'https://access.line.me/oauth2/v2.1/authorize?';
+            URL += '&response_type=code';
+            URL += '&client_id=1656094964';
+            URL += '&redirect_uri=http://localhost:8081/#/';
+            URL += `&state=${randomState}`;
+            URL += '&scope=profile%20openid%20email';
+            URL += 'nonce=09876xyz';
+            console.log(URL);
+            window.open('https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1656094964&redirect_uri=http://localhost:8081/#/&state=paa099&scope=profile%20openid%20email&nonce=09876xyz');
+            
+        }
+    },
+    computed: {
+    },
+    created() {
+        // this.getCharData();
+        this.getTops();
+        this.history = JSON.parse(localStorage.getItem('searchedWords')) || [];
+    }
+}
+</script>

src/views/Trends.vue

@@ -38,7 +38,7 @@
                         :editable="false"
                         :default-value="yesterday"
                         :disabled-date="disabledAfterToday"></date-picker>
-                    <button class='sub__date' @click.once.prevent="getHisTops(singledate)">套用</button>
+                    <button class='sub__date' @click.prevent="getHisTops(singledate)">套用</button>
                 </div>
             <div class="row mb-3">
                 <div class="col-6 col-md-3 mb-3" v-for="(htop, i) in HisTops" :key="htop[0]">
@@ -84,13 +84,8 @@
                         :placeholder="`${initialdate[0]}~${initialdate[1]}`"
                         format='YYYY-MM-DD'
                         value-type="YYYY-MM-DD"></date-picker>
-                    <button class='sub__date' @click.once.prevent="search(query, daterng)">套用</button>
+                    <button class='sub__date' @click.prevent="search(query, daterng)">套用</button>
                 </div>
-                <!-- <div class="btn-group group__btn mb-4" role="group" aria-label="date-buttons">
-                    <button type="button" class="btn__date">單週</button>
-                    <button type="button" class="btn__date">雙週</button>
-                    <button type="button" class="btn__date">月</button>
-                </div> -->
             </div>
             <div class="row">
                 <div class="col-12 col-md-6 text-left hotWord mb-5">
@@ -107,7 +102,7 @@
                                 </div>
                             </div>
                         </b-card>
-                        <b-card class="col-5 hotWord__card">
+                        <b-card class="col-5 hotWord__card mr-2">
                             <div class="d-flex align-items-center justify-content-between">
                                 <div class="">
                                     <h3 class="mb-0 hotWord__card__title">館長 健身房</h3>
@@ -118,13 +113,18 @@
                                 </div>
                             </div>
                         </b-card>
+                        <!-- <b-card class="col-5 hotWord__card" v-for="(relquery, i) in relqueries" :key="`req-${i}`">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="">
+                                    <h3 class="mb-0 hotWord__card__title">{{ relquery[0] }}</h3>
+                                </div>
+                                <div>
+                                    <span class="d-block text-muted hotWord__card__muted">熱度</span>
+                                    <span class="d-block hotWord__card__num">{{ relquery[1] }}</span>
+                                </div>
+                            </div>
+                        </b-card> -->
                     </div>
-                    <!-- <tr v-for="(topic, i) in reltopics" :key="`rew-${i}`">
-                        <td><h4 class="reltopic__title mb-0">{{ topic[4] }}</h4></td>
-                        <td><span class="badge rounded-pill bg-danger">{{ topic[1]}}</span></td>
-                        <td v-if="topic[1]!=='飆升'"><span >{{ topic[1]}}</span></td>
-                        <td v-if="topic[1]=='飆升'"><span>+{{ topic[0]}}%</span></td>
-                    </tr> -->
                 </div>
                 <div class="col-12 col-md-6 text-left">
                     <h3 class="usernews__table__title">相關主題</h3>
@@ -173,6 +173,7 @@
 <script>
 import DatePicker from 'vue2-datepicker';
 
+
 export default {
     name: 'Usernews',
     components: { DatePicker },
@@ -187,7 +188,7 @@ export default {
                 { key: '銷售量', sortable: true },
                 { key: '價格', sortable: true },
             ],
-            recommends: [
+            relqueries: [
             ],
             reltopics: [
 
@@ -216,7 +217,8 @@ export default {
             HisTops: [],
             yseterday: '',
             page: 0,
-            totalPages: 0
+            totalPages: 0,
+            params: ''
         }
     },
     methods: {
@@ -232,11 +234,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.recommends = res.data;
+                /* 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.relqueries = 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;
@@ -321,7 +323,16 @@ export default {
                     vm.page += 1;
                 }
             }
-        }
+        },
+        randomString(length){
+            var result = '';
+            var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            var charactersLength = characters.length;
+            for ( var i = 0; i < length; i++ ) {
+                result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            }
+            return result;
+        },
     },
     computed: {
         searchedWords() {
@@ -350,6 +361,18 @@ export default {
             return newData;
         }
     },
+    mounted() {
+        /* this.params = this.$route.query;
+        const params = new URLSearchParams();
+        params.append('grant_type', 'authorization_code');
+        params.append('code', this.query);
+        params.append('redirect_uri', 'http://localhost:8081/#/');
+        params.append('client_id', '1656094964');
+        params.append('client_secret', '9250a4db57e157ae4e93f987d92457f3');
+        this.$http.post('https://api.line.me/oauth2/v2.1/token', {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}, params).then((res) => {
+            console.log(res);
+        }) */
+    },
     created() {
         // this.getCharData();
         this.initialDate();