donate bar v1

src/components/common/donate-bar.vue

@@ -18,6 +18,8 @@
 <style lang="less" scoped>
 .main {
   width: 100%;
+  font-size: 1em;
+  font-weight: 900;
 
   .title {
     text-align: center;
@@ -80,6 +82,7 @@
 
 <script>
 import {toInt} from '@/tools'
+import moment from 'moment'
 export default {
   name: 'Donatebar',
   props: {
@@ -91,13 +94,22 @@ export default {
   data () {
     return {}
   },
+  methods: {
+    getDay: function (ts) {
+
+    }
+  },
   computed: {
     percent: function () {
       let p = Math.floor((this.now / this.max) * 100)
       return p >= 100 ? 100 : p
     },
     time: function () {
-      return new Date(toInt(this.timestamp, 0, 0)).toString()
+      let ts = toInt(this.timestamp, 0, 0)
+      let target = moment(ts)
+      let now = moment()
+      let str = now.to(target)
+      return str
     }
   }
 }

src/components/showDonateBar/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="show-donate">
+    <DonateBar :title="title" :max="targetAmount" :timestamp="endDate" :now="total" />
+  </div>
+</template>
+
+<style lang="less">
+html,body,#app {
+  background-color: inherit;
+}
+</style>
+
+<style lang="less" scoped>
+.show-donate {
+  padding: 5px 10px;
+}
+</style>
+
+
+
+<script>
+import DonateBar from '@/components/common/donate-bar'
+import axios from 'axios'
+import {apiUrl, toInt} from '@/tools'
+export default {
+  name: 'PublicDonateBar',
+  components: {
+    DonateBar
+  },
+  data () {
+    return {
+      title: '',
+      targetAmount: 0,
+      endDate: 0,
+      total: 0
+    }
+  },
+  mounted () {
+    this.client = axios.create({
+      baseURL: apiUrl
+    })
+    this.getDonateInfo()
+    this.timer = setInterval(this.getDonateInfo.bind(this), 5000)
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    getDonateInfo: function () {
+      this.client({
+        method: 'get',
+        url: `/api/twitch/channel/${this.$route.params.chid || ''}/opay/bar`
+      }).then(res => {
+        if ('data' in res && 'setting' in res.data && typeof res.data.setting === 'object') {
+          let tmp = res.data.setting
+          this.title = tmp.title || ''
+          this.targetAmount = tmp.target_amount || 0
+          let ets = 'end_date' in tmp ? new Date(tmp.end_date).getTime() : 0
+          this.endDate = ets
+          this.total = toInt(tmp.total, 0, 0) || 0
+        }
+      }).catch(err => {})
+    }
+  }
+}
+</script>

src/router.js

@@ -7,6 +7,8 @@ import ChannelList from '@/components/ControlPanel/channelList'
 import Channel from '@/components/ControlPanel/channel'
 import ChannelOpay from '@/components/ControlPanel/channel/opay'
 
+import PublicOpayBar from '@/components/showDonateBar'
+
 Vue.use(Router)
 
 export default new Router({
@@ -57,6 +59,11 @@ export default new Router({
           redirect: 'channels'
         }
       ]
+    },
+    {
+      path: '/donatebar/:chid/opay',
+      name: 'PublicOpayBar',
+      component: PublicOpayBar
     }
   ]
 })