fix loading bug , add channel list

This commit is contained in:
Jay 2018-08-21 00:24:36 +08:00
parent e2de8f5d85
commit de40474514
10 changed files with 109 additions and 22 deletions

View File

@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"moduleResolution": "classic", "moduleResolution": "node",
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@": ["src/*"] "@": ["src/*"]

View File

@ -23,9 +23,11 @@ export default {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
} }
#app { #app {
height: 100%; height: 100%;
background-color: #eee; background-color: #eee;
overflow: auto;
} }
</style> </style>

View File

@ -1,14 +1,36 @@
<template> <template>
<sui-container> <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> </sui-container>
</template> </template>
<script> <script>
import {mapActions, mapGetters} from 'vuex'
export default { export default {
name: 'ChannelList', name: 'ChannelList',
data () { data () {
return {} return {}
},
created () {
this.getChannelList()
},
methods: {
...mapActions(['getChannelList'])
},
computed: {
...mapGetters(['channelList'])
} }
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class='cp-div'> <div class='cp-div'>
<TopMenu /> <TopMenu />
<router-view /> <router-view v-if="userInfo.name.length > 0"/>
</div> </div>
</template> </template>
@ -13,7 +13,7 @@
<script> <script>
import TopMenu from './topMenu' import TopMenu from './topMenu'
import {mapActions} from 'vuex' import {mapActions, mapGetters} from 'vuex'
export default { export default {
name: 'ControlPanel', name: 'ControlPanel',
components: { components: {
@ -22,15 +22,22 @@ export default {
data () { data () {
return {} return {}
}, },
created () { async created () {
this.checkSession((flag) => { let self = this
if (flag === false) { await new Promise(resolve => {
this.$router.replace('/') self.checkSession((flag) => {
} if (flag === false) {
self.$router.replace('/')
}
resolve(null)
})
}) })
}, },
methods: { methods: {
...mapActions(['checkSession']) ...mapActions(['checkSession'])
},
computed: {
...mapGetters(['userInfo'])
} }
} }
</script> </script>

View File

@ -58,12 +58,13 @@ export default {
...mapMutations(['toggleLoading']), ...mapMutations(['toggleLoading']),
...mapActions(['checkSession', 'sendLogin']), ...mapActions(['checkSession', 'sendLogin']),
login: function () { login: function () {
console.log('login submit') let self = this
this.sendLogin({ this.sendLogin({
account: this.account, account: this.account,
password: this.password password: this.password,
}, () => { cb: function () {
this.$router.push('/cp') self.$router.push('/cp')
}
}) })
}, },
go_oauth: function () { go_oauth: function () {

View File

@ -1,11 +1,28 @@
import axios from 'axios' import axios from 'axios'
import {apiUrl, chkObject} from '@/tools' import {
apiUrl,
chkObject,
toInt
} from '@/tools'
const client = axios.create({ const client = axios.create({
baseURL: apiUrl, baseURL: apiUrl,
withCredentials: true 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 { export default {
async checkSession ({commit}, cb = null) { async checkSession ({commit}, cb = null) {
commit('toggleLoading', true) commit('toggleLoading', true)
@ -28,7 +45,7 @@ export default {
if (typeof cb === 'function') cb(flag) if (typeof cb === 'function') cb(flag)
commit('toggleLoading', false) commit('toggleLoading', false)
}, },
async sendLogin ({commit}, {account, password}, cb = null) { async sendLogin ({commit}, {account, password, cb = null}) {
let chk = chkObject.bind({body: {account, password}}) let chk = chkObject.bind({body: {account, password}})
if (!chk('account', 'string') || !chk('password', 'string')) { if (!chk('account', 'string') || !chk('password', 'string')) {
commit('addDialog', { commit('addDialog', {
@ -49,13 +66,23 @@ export default {
}) })
if (typeof cb === 'function') cb() if (typeof cb === 'function') cb()
} catch (err) { } catch (err) {
let msg = '' errorCatch.apply(commit, [err])
if ('response' in err && 'data' in err.response && 'message' in err.response.data) { }
msg = err.response.data.message commit('toggleLoading', false)
} else { },
msg = 'unknown error' async getChannelList ({commit}, cb = null) {
} commit('toggleLoading', true)
commit('addDialog', {msg}) 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) commit('toggleLoading', false)
} }

View File

@ -1,3 +1,4 @@
export const getLoading = state => !!state.loading export const getLoading = state => !!state.loading
export const dialogMsg = state => state.dialog[0] || null export const dialogMsg = state => state.dialog[0] || null
export const userInfo = state => state.user export const userInfo = state => state.user
export const channelList = state => state.twitch.channels

View File

@ -12,6 +12,9 @@ const state = {
user: { user: {
name: '', name: '',
type: '' type: ''
},
twitch: {
channels: []
} }
} }

View File

@ -19,5 +19,9 @@ export default {
}, },
removeDialog (state) { removeDialog (state) {
state.dialog = state.dialog.slice(1) state.dialog = state.dialog.slice(1)
},
setChannels (state, list) {
if (!Array.isArray(list)) return
state.twitch.channels = [...list]
} }
} }

View File

@ -37,3 +37,23 @@ export const chkObject = function (key = '', type = '', empty = false) {
return true 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
}