fix loading bug , add channel list
This commit is contained in:
parent
e2de8f5d85
commit
de40474514
@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "classic",
|
||||
"moduleResolution": "node",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@": ["src/*"]
|
||||
|
@ -23,9 +23,11 @@ export default {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,14 +1,36 @@
|
||||
<template>
|
||||
<sui-container>
|
||||
|
||||
<sui-segment>
|
||||
<sui-header size="medium">Channels</sui-header>
|
||||
<sui-item-group divided>
|
||||
<sui-item v-for="(item, idx) in channelList" :key="idx">
|
||||
<sui-item-content>
|
||||
<sui-item-header>{{item.name}}</sui-item-header>
|
||||
<sui-item-meta>
|
||||
<a :href="'https://twitch.tv/' + item.name" target="_blank">Channel Link</a>
|
||||
</sui-item-meta>
|
||||
</sui-item-content>
|
||||
</sui-item>
|
||||
</sui-item-group>
|
||||
</sui-segment>
|
||||
</sui-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapGetters} from 'vuex'
|
||||
export default {
|
||||
name: 'ChannelList',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
created () {
|
||||
this.getChannelList()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getChannelList'])
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['channelList'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class='cp-div'>
|
||||
<TopMenu />
|
||||
<router-view />
|
||||
<router-view v-if="userInfo.name.length > 0"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<script>
|
||||
import TopMenu from './topMenu'
|
||||
import {mapActions} from 'vuex'
|
||||
import {mapActions, mapGetters} from 'vuex'
|
||||
export default {
|
||||
name: 'ControlPanel',
|
||||
components: {
|
||||
@ -22,15 +22,22 @@ export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
created () {
|
||||
this.checkSession((flag) => {
|
||||
if (flag === false) {
|
||||
this.$router.replace('/')
|
||||
}
|
||||
async created () {
|
||||
let self = this
|
||||
await new Promise(resolve => {
|
||||
self.checkSession((flag) => {
|
||||
if (flag === false) {
|
||||
self.$router.replace('/')
|
||||
}
|
||||
resolve(null)
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['checkSession'])
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -58,12 +58,13 @@ export default {
|
||||
...mapMutations(['toggleLoading']),
|
||||
...mapActions(['checkSession', 'sendLogin']),
|
||||
login: function () {
|
||||
console.log('login submit')
|
||||
let self = this
|
||||
this.sendLogin({
|
||||
account: this.account,
|
||||
password: this.password
|
||||
}, () => {
|
||||
this.$router.push('/cp')
|
||||
password: this.password,
|
||||
cb: function () {
|
||||
self.$router.push('/cp')
|
||||
}
|
||||
})
|
||||
},
|
||||
go_oauth: function () {
|
||||
|
@ -1,11 +1,28 @@
|
||||
import axios from 'axios'
|
||||
import {apiUrl, chkObject} from '@/tools'
|
||||
import {
|
||||
apiUrl,
|
||||
chkObject,
|
||||
toInt
|
||||
} from '@/tools'
|
||||
|
||||
const client = axios.create({
|
||||
baseURL: apiUrl,
|
||||
withCredentials: true
|
||||
})
|
||||
|
||||
const errorCatch = function (err, act) {
|
||||
let msg = ''
|
||||
if ('response' in err && 'data' in err.response && 'message' in err.response.data) {
|
||||
msg = err.response.data.message
|
||||
} else {
|
||||
msg = 'unknown error'
|
||||
}
|
||||
this('addDialog', {
|
||||
msg,
|
||||
act
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
async checkSession ({commit}, cb = null) {
|
||||
commit('toggleLoading', true)
|
||||
@ -28,7 +45,7 @@ export default {
|
||||
if (typeof cb === 'function') cb(flag)
|
||||
commit('toggleLoading', false)
|
||||
},
|
||||
async sendLogin ({commit}, {account, password}, cb = null) {
|
||||
async sendLogin ({commit}, {account, password, cb = null}) {
|
||||
let chk = chkObject.bind({body: {account, password}})
|
||||
if (!chk('account', 'string') || !chk('password', 'string')) {
|
||||
commit('addDialog', {
|
||||
@ -49,13 +66,23 @@ export default {
|
||||
})
|
||||
if (typeof cb === 'function') cb()
|
||||
} catch (err) {
|
||||
let msg = ''
|
||||
if ('response' in err && 'data' in err.response && 'message' in err.response.data) {
|
||||
msg = err.response.data.message
|
||||
} else {
|
||||
msg = 'unknown error'
|
||||
}
|
||||
commit('addDialog', {msg})
|
||||
errorCatch.apply(commit, [err])
|
||||
}
|
||||
commit('toggleLoading', false)
|
||||
},
|
||||
async getChannelList ({commit}, cb = null) {
|
||||
commit('toggleLoading', true)
|
||||
try {
|
||||
let result = await client({
|
||||
method: 'get',
|
||||
url: '/api/twitch/channels'
|
||||
})
|
||||
let list = []
|
||||
if ('data' in result && 'list' in result.data && Array.isArray(result.data.list)) list = result.data.list
|
||||
commit('setChannels', list)
|
||||
if (typeof cb === 'function') cb()
|
||||
} catch (err) {
|
||||
errorCatch.apply(commit, [err])
|
||||
}
|
||||
commit('toggleLoading', false)
|
||||
}
|
||||
|
@ -1,3 +1,4 @@
|
||||
export const getLoading = state => !!state.loading
|
||||
export const dialogMsg = state => state.dialog[0] || null
|
||||
export const userInfo = state => state.user
|
||||
export const channelList = state => state.twitch.channels
|
||||
|
@ -12,6 +12,9 @@ const state = {
|
||||
user: {
|
||||
name: '',
|
||||
type: ''
|
||||
},
|
||||
twitch: {
|
||||
channels: []
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -19,5 +19,9 @@ export default {
|
||||
},
|
||||
removeDialog (state) {
|
||||
state.dialog = state.dialog.slice(1)
|
||||
},
|
||||
setChannels (state, list) {
|
||||
if (!Array.isArray(list)) return
|
||||
state.twitch.channels = [...list]
|
||||
}
|
||||
}
|
||||
|
20
src/tools.js
20
src/tools.js
@ -37,3 +37,23 @@ export const chkObject = function (key = '', type = '', empty = false) {
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* parse number
|
||||
* @param {any} v input number
|
||||
* @param {number} def default number
|
||||
* @param {number} min min number
|
||||
* @param {number} max max number
|
||||
* @return {number}
|
||||
*/
|
||||
export const toInt = (v, def = 0, min = null, max = null) => {
|
||||
if (!isFinite(def)) def = 0
|
||||
if (typeof def === 'string') def = parseInt(def)
|
||||
min = isFinite(min) ? (typeof min === 'string' ? parseInt(min) : min) : null
|
||||
max = isFinite(max) ? (typeof max === 'string' ? parseInt(max) : max) : null
|
||||
if (!isFinite(v)) return def
|
||||
if (typeof v === 'string') v = parseInt(v)
|
||||
if (min !== null && v < min) v = min
|
||||
if (max !== null && v > max) v = max
|
||||
return v
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user