add Jo image, add coins with update and add incentives

mock/article.js

@@ -20,7 +20,7 @@ const titles = [
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
     id: i * 5 + 5,
-    timestamp: +Mock.Random.date('T'),
+    timestamp: new Date().setDate(20),
     author: '@first',
     reviewer: '@first',
     title: titles[i],

src/api/user.js

@@ -16,6 +16,14 @@ export function getInfo(token) {
   })
 }
 
+export function getCoins(token) {
+  return request({
+    url: 'https://joinbot.tk/kvs/coins' + token,
+    method: 'get',
+    headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
+  })
+}
+
 export function logout() {
   return request({
     url: '/user/logout',

src/layout/components/Navbar.vue

@@ -6,6 +6,9 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <span class="coinclass">Münzen: {{ coins }}
+        </span>
+        <img src="@/assets/logo/coins.png" class="coinsimg">
         <search id="header-search" class="right-menu-item" />
 
         <error-log class="errLog-container right-menu-item hover-effect" />
@@ -45,6 +48,8 @@ import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 
+import request from '@/utils/request'
+
 export default {
   components: {
     Breadcrumb,
@@ -54,6 +59,12 @@ export default {
     SizeSelect,
     Search
   },
+  data() {
+    return {
+      coins: 0,
+      updateInterval: null
+    }
+  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -61,6 +72,23 @@ export default {
       'device'
     ])
   },
+  mounted() {
+    this.updateInterval = setInterval(() => {
+      request({
+        url: 'https://joinbot.tk/kvs/coinslukas',
+        method: 'get',
+        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
+      }).then((result) => {
+        this.coins = result
+      }).catch((err) => {
+        console.log('ThaErr', err)
+      })
+    }, 1000)
+  },
+  beforeDestroy() {
+    clearInterval(this.updateInterval)
+    this.updateInterval = null
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -74,6 +102,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.coinclass {
+  height: 70%;
+vertical-align: text-bottom;
+font-weight: bolder;
+}
+.coinsimg{
+  height: 28px;
+  margin-bottom: 10px;
+  padding-right: 10px;
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;

src/router/index.js

@@ -156,19 +156,20 @@ export const asyncRoutes = [
       {
         path: 'index',
         component: () => import('@/views/chatbot/index'),
-        name: 'Chatbot Joe',
-        meta: { title: 'Chatbot Joe', icon: 'message', affix: true }
+        name: 'Chatbot Jo',
+        meta: { title: 'Chatbot Jo', icon: 'message', affix: true }
       }
     ]
   },
   {
     path: '/incentives',
     component: Layout,
-    redirect: '/example/list',
-    name: 'Example Articles',
+    redirect: '/incentives/list',
+    name: 'Incentives',
     meta: {
       title: 'Incentives',
-      icon: 'example'
+      icon: 'example',
+      roles: ['admin']
     },
     children: [
       {
@@ -196,6 +197,25 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/getincentives',
+    component: Layout,
+    redirect: '/example/list',
+    name: 'Example Articles',
+    meta: {
+      title: 'Belohnungen',
+      icon: 'present',
+      roles: ['editor']
+    },
+    children: [
+      {
+        path: 'my',
+        component: () => import('@/views/incentives/list'),
+        name: 'Belohnungen',
+        meta: { title: 'Belohnungen', icon: 'star' }
+      }
+    ]
+  },
   {
     path: '/permission',
     component: Layout,

src/utils/request.js

@@ -46,7 +46,7 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 20000 && response.status !== 200) {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/views/chatbot/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container chatbot-container">
-    <h1>Chatbot Joe</h1>
+    <img src="@/assets/joe.png" class="joeimage">
   </div>
 </template>
 
@@ -67,6 +67,11 @@ export default {
     font-size: 20px;
     text-align: center;
   }
+
+  .joeimage{
+    float:left;
+    height:600px;
+  }
 }
 </style>
 <style>

src/views/incentives/list.vue

@@ -22,13 +22,13 @@
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="Erstellt von">
+      <el-table-column v-if="roles.includes('admin')" width="120px" align="center" label="Erstellt von">
         <template slot-scope="scope">
           <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column v-if="roles.includes('admin')" class-name="status-col" label="Status" width="110">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
             {{ row.status }}
@@ -36,7 +36,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column v-if="roles.includes('admin')" align="center" label="Actions" width="120">
         <template slot-scope="scope">
           <router-link :to="'/incentive/edit/'+scope.row.id">
             <el-button type="primary" size="small" icon="el-icon-edit">
@@ -51,6 +51,7 @@
 
 <script>
 import { fetchList } from '@/api/article'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'IncentiveList',
@@ -75,6 +76,11 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'roles'
+    ])
+  },
   created() {
     this.getList()
   },