直播推荐

bilibili-api/app/routes/live.js

@@ -6,9 +6,10 @@ const router = Router()
 
 // 直播
 router.get('/live', async (ctx, next) => {
-	console.log("789asdkjashdkjhaskjdh")
   let response = await axios.get(liveXhr)
-  ctx.body = response.data
+  let data = response.data
+  let result = data.substr(1).substr(0, data.length - 3)
+  ctx.body = JSON.parse(result)
 })
 
 export default router

bilibili-api/app/routes/urlConfig.js

@@ -20,7 +20,7 @@ export const promote = 'http://api.bilibili.com/x/web-show/res/loc?pf=0&id=34'
 export const promoteAd = 'http://api.bilibili.com/x/web-show/res/loc?pf=0&id=29'
 
 // 直播
-export const liveXhr = 'http://live.bilibili.com/bili/recom?callback=liveXhrDone'
+export const liveXhr = 'http://api.live.bilibili.com/bili/recom'
 
 // 番剧下方更新列表右侧新番放送表上侧
 export const slideshow = 'http://www.bilibili.com/index/slideshow/41.json'

src/api/index.js

@@ -32,6 +32,7 @@ export const promoteApi = {
 export const liveApi = {
 	live() {
 		return axios.get(url.live).then((response) => {
+			console.log(response)
 			return response.data
 		})
 	}

src/components/live/BLive.vue

@@ -10,7 +10,7 @@
 						</a>
 					</span>
 					<span class="b-head-s">
-						当前共有<em>6647</em>个在线直播
+						当前共有<em>{{online_total}}</em>个在线直播
 					</span>
 				</div>
 				<div class="right">
@@ -21,15 +21,15 @@
 				<div class="read-push">
 					<span class="icon-refresh"></span>
 					<span class="info">
-						<b>49834</b>
+						<b>{{dynamic}}</b>
 						<em>条新动态</em>
 					</span>
 				</div>
 			</div>
 			<div class="b-body">
-				<ul class="v-list-live">
-					<li>
-						<BLiveItem></BLiveItem>
+				<ul class="v-list-live" v-if="recommend">
+					<li v-for="item in recommend">
+						<BLiveItem :live="item"></BLiveItem>
 					</li>
 				</ul>
 			</div>
@@ -40,9 +40,25 @@
 
 <script>
 import BLiveItem from 'components/live/BLiveItem'
+import { mapGetters } from 'vuex'
 export default {
 	components: {
 		BLiveItem
+	},
+	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'online_total',
+			'dynamic',
+			'recommend',
+			'ranking',
+			'preview',
+			'recommendAnchor'
+		])
+	},
+	mounted() {
+		this.$store.dispatch('live')
 	}
 }
 </script>
@@ -112,6 +128,8 @@ export default {
 							border 1px solid #ccd0d7
 							color #555
 							border-radius 4px
+							&:hover
+								background-color #ccd0d7
 							.b-icon-arrow-r
 								display inline-block
 								vertical-align middle
@@ -128,6 +146,8 @@ export default {
 					border-radius 4px
 					height 22px
 					padding 0 10px
+					&:hover
+						background-color #ccd0d7
 					&:after
 						content ''
 						display block

src/components/live/BLiveItem.vue

@@ -1,27 +1,27 @@
 <template>
 	<div class="lv-item">
 		<a class="lv-preview">
-			<img src="//i0.hdslb.com/bfs/live/90ec156dd17d7adc0c2c8262ead6886ff358fcf5.jpg@320w_200h.webp" alt="好久不见" style="opacity: 1;">
+			<img :src="live.pic">
 			<div class="lv-mask">
 				<div class="lv-face">
-					<img src="//i1.hdslb.com/bfs/face/dec5867307ac5c71a56a5d6925057dffe284dee0.jpg@40w_40h.webp" style="opacity: 1;">
+					<img :src="live.face" style="opacity: 1;">
 				</div>
 				<span class="lv-onair-txt"><i class="lv-onair-icon"></i>Live
 				</span>
 			</div>
-			<span class="b-tag">电子竞技</span>
+			<span class="b-tag">{{live.areaName}}</span>
 		</a>
-		<a href="http://live.bilibili.com/128" target="_blank">
+		<a :href="live.link" target="_blank">
 			<div class="lv-room">
-				<div class="lv-t" title="穿睡衣如果尬舞会怎么样">穿睡衣如果尬舞会怎么样</div>
+				<div class="lv-t" :title="live.title">{{live.title}}</div>
 			</div>
 			<div class="lv-info">
 				<div class="lv-host">
 					<i class="b-icon b-icon-live-host">
-					</i>lybenson
+					</i>{{live.uname}}
 				</div>
 				<div class="lv-online">
-					<i class="b-icon b-icon-live-online"></i>4773
+					<i class="b-icon b-icon-live-online"></i>{{live.online}}
 				</div>
 			</div>
 		</a>
@@ -30,7 +30,11 @@
 
 <script>
 export default {
-
+	props: {
+		live: {
+			type: Object
+		}
+	}
 }
 </script>
 

src/store/modules/liveStore.js

@@ -11,7 +11,7 @@ const state = {
 }
 
 const getters = {
-	online_total: state => state.bannerlist,
+	online_total: state => state.online_total,
 	dynamic: state => state.dynamic,
 	recommend: state => state.recommend,
 	ranking: state => state.ranking,
@@ -25,7 +25,7 @@ const actions = {
 		commit(TYPE.LIVE_REQUEST)
 		liveApi.live().then((response) => {
 			rootState.requesting = false
-			commit(TYPE.LIVE_SUCCESS, response)
+			commit(TYPE.LIVE_SUCCESS, response.data)
 		}, (error) => {
 			rootState.requesting = false
 			commit(TYPE.LIVE_FAILURE)
@@ -35,11 +35,15 @@ const actions = {
 
 const mutations = {
 	[TYPE.LIVE_REQUEST] (state) {
-
+		
 	},
-	[TYPE.LIVE_SUCCESS] (state, response) {
-		state.online_total = 0
-		state.dynamic = 0
+	[TYPE.LIVE_SUCCESS] (state, live) {
+		state.online_total = live.online_total
+		state.dynamic = live.dynamic
+		state.recommend = live.recommend
+		state.ranking = live.ranking
+		state.preview = live.preview
+		state.recommendAnchor = live.preview
 	},
 	[TYPE.LIVE_FAILURE] (state) {