donate bar v1

This commit is contained in:
Jay 2018-08-24 00:27:18 +08:00
parent cb541abacb
commit a094955ccf
5 changed files with 92 additions and 1 deletions

5
package-lock.json generated
View File

@ -8020,6 +8020,11 @@
"minimist": "0.0.8" "minimist": "0.0.8"
} }
}, },
"moment": {
"version": "2.22.2",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
"integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", "resolved": "http://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

View File

@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"moment": "^2.22.2",
"semantic-ui-css": "github:otakukaze/Semantic-UI-CSS#master", "semantic-ui-css": "github:otakukaze/Semantic-UI-CSS#master",
"semantic-ui-vue": "^0.2.11", "semantic-ui-vue": "^0.2.11",
"vue": "^2.5.17", "vue": "^2.5.17",

View File

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

View File

@ -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>

View File

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