add opay donate bar setting page
This commit is contained in:
parent
e611cf12a6
commit
18f14d66a4
5
package-lock.json
generated
5
package-lock.json
generated
@ -12193,6 +12193,11 @@
|
||||
"integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=",
|
||||
"dev": true
|
||||
},
|
||||
"vuejs-datepicker": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/vuejs-datepicker/-/vuejs-datepicker-1.5.3.tgz",
|
||||
"integrity": "sha512-vCYLx7rbYPEqLLx1EplFQHxkMA/SAFJvwj5PYzeaG98q7hynLZMXsvhE8FPr08PJUiKA+zRknq0CqRioNYLYkg=="
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz",
|
||||
|
@ -13,6 +13,7 @@
|
||||
"semantic-ui-vue": "^0.2.11",
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuejs-datepicker": "^1.5.3",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<sui-breadcrumb>
|
||||
<sui-breadcrumb-section>Home</sui-breadcrumb-section>
|
||||
</sui-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PageBreadcrumb',
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<sui-item-group divided>
|
||||
<sui-item>Dashboard</sui-item>
|
||||
<sui-item>Opay</sui-item>
|
||||
<sui-item ><router-link :to="{name: 'Channel'}">Dashboard</router-link></sui-item>
|
||||
<sui-item ><router-link :to="{name: 'ChannelOpay'}">Opay</router-link></sui-item>
|
||||
</sui-item-group>
|
||||
</template>
|
||||
|
||||
@ -16,6 +16,11 @@ export default {
|
||||
name: 'ChannelSideMenu',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
side: function () {
|
||||
return this.$route.meta.side || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -19,6 +19,7 @@
|
||||
</sui-grid-row>
|
||||
</sui-grid>
|
||||
</sui-segment>
|
||||
<router-view />
|
||||
</sui-container>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,6 +39,7 @@
|
||||
}
|
||||
.f-full {
|
||||
flex: 1;
|
||||
flex-flow: row;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<sui-segment>
|
||||
<sui-header>Donate Bar Setting</sui-header>
|
||||
<sui-segment stacked>
|
||||
<Donatebar :title="title" :max="amountInt" :now="amountInt / 3" :timestamp="datetime" />
|
||||
</sui-segment>
|
||||
<sui-form @submit.prevent="formSubmit">
|
||||
<sui-form-field>
|
||||
<label>Title</label>
|
||||
<input placeholder="Doante bar title" v-model="title" name="title"/>
|
||||
</sui-form-field>
|
||||
<sui-form-field>
|
||||
<label>TargetAmount</label>
|
||||
<input placeholder="Target amount" type="number" v-model="amount" name="amount"/>
|
||||
</sui-form-field>
|
||||
<sui-form-fields :fields="2">
|
||||
<sui-form-field>
|
||||
<label>StartDate</label>
|
||||
<DatePicker v-model="sDate" format="yyyy-MM-dd"/>
|
||||
</sui-form-field>
|
||||
<sui-form-field>
|
||||
<label>EndDate</label>
|
||||
<DatePicker v-model="eDate" format="yyyy-MM-dd"/>
|
||||
</sui-form-field>
|
||||
</sui-form-fields>
|
||||
<sui-form-field>
|
||||
<sui-button type="submit" color="blue" fluid>Update</sui-button>
|
||||
</sui-form-field>
|
||||
</sui-form>
|
||||
</sui-segment>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Donatebar from '@/components/common/donate-bar'
|
||||
import DatePicker from 'vuejs-datepicker'
|
||||
import {toInt} from '@/tools'
|
||||
import {mapGetters, mapMutations, mapActions} from 'vuex'
|
||||
export default {
|
||||
name: 'OpaySetting',
|
||||
components: {
|
||||
Donatebar,
|
||||
DatePicker
|
||||
},
|
||||
props: ['setting'],
|
||||
data () {
|
||||
return {
|
||||
title: '',
|
||||
amount: 0,
|
||||
sDate: '',
|
||||
eDate: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['changeOpaySetting']),
|
||||
...mapMutations(['addDialog']),
|
||||
formSubmit: function () {
|
||||
let sts = 0
|
||||
try {
|
||||
sts = new Date(this.sDate).getTime()
|
||||
} catch (err) {}
|
||||
let ets = 0
|
||||
try {
|
||||
ets = new Date(this.eDate).getTime()
|
||||
} catch (err) {}
|
||||
let data = {
|
||||
title: this.title,
|
||||
amount: this.amount,
|
||||
start: sts,
|
||||
end: ets
|
||||
}
|
||||
this.changeOpaySetting({
|
||||
id: this.$route.params.chid,
|
||||
data
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
setting: function (val, old) {
|
||||
this.title = val.title
|
||||
this.amount = val.target_amount
|
||||
this.sDate = val.start_date
|
||||
this.eDate = val.end_date
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
amountInt: function () {
|
||||
return toInt(this.amount, 0)
|
||||
},
|
||||
datetime: function () {
|
||||
let ts = 0
|
||||
try {
|
||||
ts = new Date(this.eDate).getTime()
|
||||
} catch (err) {}
|
||||
return ts
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
70
src/components/ControlPanel/channel/opay/index.vue
Normal file
70
src/components/ControlPanel/channel/opay/index.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<sui-container>
|
||||
<sui-segment>
|
||||
<sui-header>OPay ID</sui-header>
|
||||
<sui-form @submit.prevent="opaySubmit">
|
||||
<sui-form-field inline>
|
||||
<input placeholder="opay id" :value="channel.opayid" size="40" name="opayid" @input="handleChange" />
|
||||
<sui-button type="submit" basic color='green'>Update</sui-button>
|
||||
</sui-form-field>
|
||||
</sui-form>
|
||||
</sui-segment>
|
||||
<OpaySetting v-if="channel.oapyid !== ''" :setting="channel.opaySetting" />
|
||||
</sui-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapActions, mapMutations} from 'vuex'
|
||||
import OpaySetting from './components/opay-setting'
|
||||
export default {
|
||||
name: 'Opay',
|
||||
components: {
|
||||
OpaySetting
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
opayid: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getOpaySettingAPI({id: this.$route.params.chid || ''})
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['changeOpayID']),
|
||||
...mapActions({
|
||||
getChannelAPI: 'getChannel',
|
||||
getOpaySettingAPI: 'getOpaySetting'
|
||||
}),
|
||||
...mapMutations(['addDialog']),
|
||||
getChannelData: function () {
|
||||
this.getChannelAPI({id: this.$route.params.chid})
|
||||
},
|
||||
opaySubmit: function (evt) {
|
||||
if (this.opayid === null || typeof this.opayid !== 'string') {
|
||||
this.addDialog({
|
||||
msg: 'opayid read fail'
|
||||
})
|
||||
return
|
||||
}
|
||||
let arg = {
|
||||
chid: this.$route.params.chid,
|
||||
opayid: this.opayid,
|
||||
cb: () => {
|
||||
this.opayid = null
|
||||
this.getChannelData()
|
||||
}
|
||||
}
|
||||
this.changeOpayID(arg)
|
||||
},
|
||||
handleChange: function (input) {
|
||||
this[input.target.name] = input.target.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getChannel']),
|
||||
channel: function () {
|
||||
return this.getChannel(this.$route.params.chid || '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<sui-container>
|
||||
<div class="login-form">
|
||||
<sui-header textAlign='center' color='teal'>OPay Donate</sui-header>
|
||||
<sui-header textAlign='center' color='teal'>Bot Manage</sui-header>
|
||||
<sui-segment>
|
||||
<sui-form @submit.prevent="login">
|
||||
<sui-form-field>
|
||||
|
104
src/components/common/donate-bar.vue
Normal file
104
src/components/common/donate-bar.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="title">{{title}}</div>
|
||||
<div class="progressbar">
|
||||
<div class="progress-body" :style="{width: percent + '%'}"></div>
|
||||
<div class="show-txt">
|
||||
<div>${{now}} ({{percent}}%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bottom">
|
||||
<div class="min">$0</div>
|
||||
<div class="max">${{max}}</div>
|
||||
<div class="time">{{time}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
.progressbar {
|
||||
background-color: #eee;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
|
||||
.progress-body {
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
background-color: #0f0;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
}
|
||||
.show-txt {
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
|
||||
>div {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bottom {
|
||||
position: relative;
|
||||
|
||||
>.min {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
>.max {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
>.time {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {toInt} from '@/tools'
|
||||
export default {
|
||||
name: 'Donatebar',
|
||||
props: {
|
||||
title: String,
|
||||
max: Number,
|
||||
timestamp: Number,
|
||||
now: Number
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -5,6 +5,7 @@ import Login from '@/components/Login'
|
||||
import ControlPanel from '@/components/ControlPanel'
|
||||
import ChannelList from '@/components/ControlPanel/channelList'
|
||||
import Channel from '@/components/ControlPanel/channel'
|
||||
import ChannelOpay from '@/components/ControlPanel/channel/opay'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@ -37,8 +38,19 @@ export default new Router({
|
||||
name: 'Channel',
|
||||
component: Channel,
|
||||
meta: {
|
||||
topMenu: 'channel'
|
||||
}
|
||||
topMenu: 'channel',
|
||||
side: ''
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'opay',
|
||||
name: 'ChannelOpay',
|
||||
component: ChannelOpay,
|
||||
meta: {
|
||||
side: 'opay'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
|
@ -16,6 +16,7 @@ const errorCatch = function (err, act) {
|
||||
} else {
|
||||
msg = 'unknown error'
|
||||
}
|
||||
console.log('error catch :::: ', this)
|
||||
this('addDialog', {
|
||||
msg,
|
||||
act
|
||||
@ -139,5 +140,88 @@ export default {
|
||||
errorCatch.apply(commit, [err])
|
||||
}
|
||||
commit('toggleLoading', false)
|
||||
},
|
||||
async changeOpayID ({commit}, {chid, opayid, cb}) {
|
||||
if (typeof chid !== 'string' || chid.trim().length === 0) {
|
||||
commit('addDialog', {
|
||||
msg: 'channel id read fail'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (typeof opayid !== 'string') {
|
||||
commit('addDialog', {
|
||||
msg: 'opay id type error'
|
||||
})
|
||||
return
|
||||
}
|
||||
commit('toggleLoading', true)
|
||||
try {
|
||||
await client({
|
||||
method: 'put',
|
||||
url: `/api/twitch/channel/${chid.trim()}/opay`,
|
||||
data: {
|
||||
opay: opayid
|
||||
}
|
||||
})
|
||||
commit('getChannel', {id: chid})
|
||||
if (typeof cb === 'function') cb()
|
||||
} catch (err) {
|
||||
errorCatch.apply(commit, [err])
|
||||
}
|
||||
commit('toggleLoading', false)
|
||||
},
|
||||
async getOpaySetting ({commit}, {id}) {
|
||||
if (typeof id !== 'string' || id.trim().length === 0) {
|
||||
commit('addDialog', {
|
||||
msg: 'channel id read fail'
|
||||
})
|
||||
return
|
||||
}
|
||||
commit('toggleLoading', true)
|
||||
try {
|
||||
let result = await client({
|
||||
method: 'get',
|
||||
url: `/api/twitch/channel/${id.trim()}/opay/setting`
|
||||
})
|
||||
if (!('data' in result) || !('setting' in result.data) || typeof result.data.setting !== 'object') {
|
||||
commit('addDialog', {
|
||||
msg: 'get opay setting data fail'
|
||||
})
|
||||
} else {
|
||||
commit('setOpaySetting', {
|
||||
chid: id,
|
||||
setting: result.data.setting || {}
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
errorCatch.apply(commit, [err])
|
||||
}
|
||||
commit('toggleLoading', false)
|
||||
},
|
||||
async changeOpaySetting ({commit, dispatch}, {id, data}) {
|
||||
if (typeof id !== 'string' || id.trim().length === 0) {
|
||||
commit('addDialog', {
|
||||
msg: 'channel id read fail'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (typeof data !== 'object') {
|
||||
commit('addDialog', {
|
||||
msg: 'data read fail'
|
||||
})
|
||||
return
|
||||
}
|
||||
commit('toggleLoading', true)
|
||||
try {
|
||||
await client({
|
||||
method: 'put',
|
||||
url: `/api/twitch/channel/${id.trim()}/opay/setting`,
|
||||
data
|
||||
})
|
||||
dispatch('getOpaySetting', {id})
|
||||
} catch (err) {
|
||||
errorCatch.apply(commit, [err])
|
||||
}
|
||||
commit('toggleLoading', false)
|
||||
}
|
||||
}
|
||||
|
@ -28,5 +28,16 @@ export default {
|
||||
if (channel === null || typeof channel !== 'object' || !('id' in channel)) return
|
||||
let list = state.twitch.channels.filter(t => t.id !== channel.id)
|
||||
state.twitch.channels = [...list, channel]
|
||||
},
|
||||
setOpaySetting (state, {chid, setting}) {
|
||||
if (typeof chid !== 'string' || chid.trim().length === 0) return
|
||||
if (typeof setting !== 'object') return
|
||||
let list = state.twitch.channels.map(t => {
|
||||
if (t.id === chid) {
|
||||
t.opaySetting = setting
|
||||
}
|
||||
return t
|
||||
})
|
||||
state.twitch.channels = [...list]
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user