Room.vue
2.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<template>
<div class="g-inherit m-main">
<div class="m-room-entry g-flex-c">
<span class="u-box" v-for="item in roomList" @click="enterRoom(item.roomid)">
<div class="album">
<img class="pic" :src="item.album">
<div class="status">
<strong v-if="item.status===1">正在直播</strong>
<em>{{item.onlineusercount}} 人</em>
</div>
</div>
<p class="desc">{{item.name}}</p>
</span>
</div>
</div>
</template>
<script>
import axios from 'axios'
import config from '../configs'
export default {
mounted () {
this.$store.dispatch('showLoading')
axios.get(
`${config.postUrl}/api/chatroom/homeList`,
{
headers: {
'appkey': config.appkey,
'content-type': 'application/json',
}
}
).then(res => {
let data = res.data
if (data.res === 200) {
let chatroomInfos = {}
let roomCount = 0
this.roomList = data.msg.list.map(item => {
if(item.onlineusercount > 10000){
let value = new Number(item.onlineusercount/10000)
item.onlineusercount = value.toFixed(1) + '万'
} else {
item.onlineusercount = item.onlineusercount || 0
}
item.album = `${config.resourceUrl}/chatroom/image${roomCount}.png`
item.announcement = item.announcement || ' '
// 用于初始化
chatroomInfos[item.roomid] = item
roomCount++
return item
})
this.roomTotal = data.msg.total
// 用于demo设置封面
this.$store.dispatch('initChatroomInfos', chatroomInfos)
} else {
alert(this.errorMsg)
}
this.$store.dispatch('hideLoading')
}).catch(err => {
alert(err)
this.$store.dispatch('hideLoading')
})
},
data () {
return {
roomList: [],
roomTotal: 0
}
},
methods: {
enterRoom (chatroomId) {
location.href = `#/roomChat/${chatroomId}`
}
}
}
</script>