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": {
"moduleResolution": "classic",
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"@": ["src/*"]

View File

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

View File

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

View File

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

View File

@ -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 () {

View File

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

View File

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

View File

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

View File

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

View File

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