排行信息

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

bilibili-api/app/routes/rank.js

@@ -1,6 +1,6 @@
 import Router from 'koa-router'
 import axios from 'axios'
-import { ranking3, ranking7, randking } from './urlConfig'
+import { ranking3, ranking7, randking, rankbase } from './urlConfig'
 
 const router = Router()
 
@@ -17,8 +17,24 @@ router.get('/randking', async (ctx, next) => {
   let response = await axios.get(randking)
   ctx.body = response.data
 })
-router.get('/1-3day.json', async (ctx, next) => {
-  let response = await axios.get(randking)
+
+// contentrank -三日排行
+router.post('/contentrank', async (ctx, next) => {
+	const body = ctx.request.body
+  let categoryId = body.categoryId
+	
+  let url = rankbase + categoryId + '-3day.json'
+  let response = await axios.get(url)
+  ctx.body = response.data
+})
+
+// contentrank -一周排行
+router.post('/contentrankweek', async (ctx, next) => {
+  const body = ctx.request.body
+  let categoryId = body.categoryId
+  
+  let url = rankbase + categoryId + '-week.json'
+  let response = await axios.get(url)
   ctx.body = response.data
 })
 

bilibili-api/app/routes/urlConfig.js

@@ -39,6 +39,7 @@ export const randking = 'http://www.bilibili.com/index/ranking.json'
 // 最底部特别推荐
 export const recommend = 'http://www.bilibili.com/index/recommend.json'
 
+export const rankbase = 'http://www.bilibili.com/index/catalogy/'
 // 各分类下3日排行 http://www.bilibili.com/index/catalogy/
 // 动画排行 1-3day.json
 // 番剧排行 13-3day.json

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.15.3",
     "lodash": "^4.17.4",
     "vue": "^2.1.0",
+    "vue-lazyload": "^1.0.1",
     "vue-router": "^2.3.0",
     "vuex": "^2.2.1"
   },

src/api/index.js

@@ -45,3 +45,13 @@ export const contentApi = {
 		})
 	}
 }
+
+// 具体内容的排行榜信息
+export const contentrankApi = {
+	contentrank(param) {
+		console.log(JSON.stringify(param))
+		return axios.post(url.contentrank, param).then((response) => {
+			return response.data
+		})
+	}
+}

src/api/urlConfig.js

@@ -15,3 +15,6 @@ export const live = serverRoot + '/live'
 // 具体内容
 export const contet = serverRoot + '/ding'
 
+// 排行
+export const contentrank = serverRoot + '/contentrank'
+

src/components/content/BContent.vue

@@ -20,7 +20,7 @@
 		</div>
 		<!-- 各分类具体内容 -->
 		<div class="container-row"  v-for="(row, index) in rows">
-			<BContentRow :category="sortKeys[index]" :row="row"></BContentRow>
+			<BContentRow :category="sortKeys[index]" :categoryId="sortIds[index]" :row="row"></BContentRow>
 		</div>
 	</div>
 </template>
@@ -44,7 +44,8 @@ export default {
 			'requesting',
 			'error',
 			'rows',
-			'sortKeys'
+			'sortKeys',
+			'sortIds'
 		])
 	},
 	mounted() {

src/components/contentRow/BContentRow.vue

@@ -5,7 +5,7 @@
 			<BRowBody :row="row"></BRowBody>
 		</div>
 		<div class="b-r">
-			<BRowRank></BRowRank>
+			<BRowRank :category="category" :rank="rank"></BRowRank>
 		</div>
 	</div>
 </template>
@@ -14,6 +14,7 @@
 import BRowHead from 'components/contentRow/BRowHead'
 import BRowBody from 'components/contentRow/BRowBody'
 import BRowRank from 'components/contentRow/BRowRank'
+import { mapGetters } from 'vuex'
 export default {
 	props: {
 		category: {
@@ -21,8 +22,23 @@ export default {
 		},
 		row: {
 			type: Array
+		},
+		categoryId: {
+			type: Number
 		}
 	},
+	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'ranks',
+			'rank'
+		])
+	},
+	mounted() {
+		// console.log(this.categoryId)
+		this.$store.dispatch('getContentRank', this.categoryId)
+	},
 	components: {
 		BRowHead,
 		BRowBody,

src/components/contentRow/BRowItem.vue

@@ -9,7 +9,7 @@
 				<!-- 边框 -->
 				<div class="border"></div>
 				<!-- 背景图片 -->
-				<img :src="item.pic">
+				<img v-lazy="item.pic">
 				<!-- 内容预览 -->
 				<div class="back">
 					<div>	

src/components/contentRow/BRowRank.vue

@@ -24,13 +24,18 @@
 				</div>
 			</div>
 		</div>
-		<BRowRankBody></BRowRankBody>
+		<BRowRankBody :rank="rank"></BRowRankBody>
 	</div>
 </template>
 
 <script>
 import BRowRankBody from 'components/contentRow/BRowRankBody'
 export default {
+	props: {
+		rank: {
+			type: Object
+		}
+	},
 	data() {
 		return {
 			isSelected1: true,

src/components/contentRow/BRowRankBody.vue

@@ -3,13 +3,13 @@
 		<div class="r-list-body">
 			<div class="r-list-wrapper">
 				<ul class="rlist">
-					<li class="on">
+					<li :class="{on: item === 1}" data-gk="524601" data-sc="31945" data-pl="4" data-dm="7122" data-up="凉风有性胖次君" data-subtitle="" data-lm="综合" data-tg="2017-03-17 20:28" data-txt="x" data-yb="11063" v-for="item in rank.hot.list">
 						<i class="number n">
 							1
 						</i>
 						<div class="preview">
 							<a href="/video/av9211860/" title="tttttt" target="_blank">
-								<img data-img="" src="//i1.hdslb.com/bfs/archive/96c58de8d469364c105d15357d03ecedd1c207bd.jpg@320w_200h.webp" loaded="loaded" alt="【Lex】震惊！这部讲述打飞机的漫画，竟被称为神作" style="opacity: 1;">
+								<img data-img="" src="//i1.hdslb.com/bfs/archive/96c58de8d469364c105d15357d03ecedd1c207bd.jpg@320w_200h.webp" loaded="loaded" :alt="item.title" style="opacity: 1;">
 								</a>
 						</div>
 						<a class="rl-info" href="/video/av9211860/" title="【Lex】震惊！这部讲述打飞机的漫画，竟被称为神作 播放:736312 11:30" target="_blank">	
@@ -18,7 +18,7 @@
 							<div class="i">
 								<b class="pts" title="综合评分: 85.2万">综合评分：85.2万
 								</b>
-							</div>
+							</div>{{xx}}
 						</a>
 					</li>
 					<li data-gk="524601" data-sc="31945" data-pl="4" data-dm="7122" data-up="凉风有性胖次君" data-subtitle="" data-lm="综合" data-tg="2017-03-17 20:28" data-txt="素材/全体四月新番 番剧名已经标在视频右下角
@@ -53,7 +53,17 @@ https://www.youtube.com/watch?v=n-9X9ZGlX2o&amp;amp;t=369s" data-yb="430" class=
 
 <script>
 export default {
-
+	props: {
+		rank: {
+			type: Object
+		}
+	},
+	computed: {
+		xx() {
+			console.log(JSON.stringify(this.rank))
+			return 'xx'
+		}
+	}
 }
 </script>
 

src/main.js

@@ -2,6 +2,9 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import VueLazyload from 'vue-lazyload'
+
+Vue.use(VueLazyload)
 
 import store from './store'
 /* eslint-disable no-new */

src/store/actionType/contentType.js

@@ -1,3 +1,7 @@
 export const CONTENT_REQUEST = 'CONTENT_REQUEST'
 export const CONTENT_SUCCESS = 'CONTENT_SUCCESS'
-export const CONTENT_FAILURE = 'CONTENT_FAILURE'
+export const CONTENT_FAILURE = 'CONTENT_FAILURE'
+
+export const CONTENT_RANK_REQUEST = 'CONTENT_RANK_REQUEST'
+export const CONTENT_RANK_SUCCESS = 'CONTENT_RANK_SUCCESS'
+export const CONTENT_RANK_FAILURE = 'CONTENT_RANK_FAILURE'

src/store/modules/contentStore.js

@@ -1,31 +1,37 @@
-import { contentApi } from 'api'
+import { contentApi, contentrankApi } from 'api'
 import * as TYPE from '../actionType/contentType'
 
 
-// douga 动画
-// bangumi 番剧
-// music 音乐
-// dance 舞蹈
-// game 游戏
-// technology  科技
-// life 生活
-// kichiku 鬼畜
-// fashion 时尚
-// ad 广告
-// ent  娱乐
-// movie 电影
-// teleplay TV剧
+// douga 动画 1
+// bangumi 番剧 13
+// music 音乐 3
+// dance 舞蹈 129
+// game 游戏 4
+// technology  科技 36
+// life 生活 160
+// kichiku 鬼畜 119
+// fashion 时尚 155
+// ad 广告 165
+// ent  娱乐 5
+// movie 电影 23
+// teleplay TV剧 11
 
 
 const state = {
 	// 默认排序
 	sortKeys: ['douga', 'bangumi', 'music', 'dance', 'game', 'technology', 'life', 'kichiku', 'fashion', 'ad', 'ent', 'movie', 'teleplay'],
-	rows: []
+	sortIds: [1, 13, 3, 129, 4, 36, 160, 119, 155, 165, 5, 23, 11],
+	rows: [],
+	ranks: [],
+	rank: {}
 }
 
 const getters = {
 	rows: state => state.rows,
-	sortKeys: state => state.sortKeys
+	sortKeys: state => state.sortKeys,
+	sortIds: state => state.sortIds,
+	ranks: state => state.ranks,
+	rank: state => state.rank
 }
 
 const actions = {
@@ -39,6 +45,24 @@ const actions = {
 			rootState.requesting = false
 			commit(TYPE.CONTENT_FAILURE)
 		})
+	},
+	getContentRank({commit, state, rootState}, categoryId) {
+		console.log(categoryId)
+		rootState.requesting = true
+		commit(TYPE.CONTENT_RANK_REQUEST)
+		let param = {
+			categoryId: categoryId
+		}
+		contentrankApi.contentrank(param).then((response) => {
+			rootState.requesting = false
+			if (categoryId === 1) {
+				console.log(response)
+			}
+			commit(TYPE.CONTENT_RANK_SUCCESS, response)
+		}, (error) => {
+			rootState.requesting = false
+			commit(TYPE.CONTENT_RANK_FAILURE)
+		})
 	}
 }
 
@@ -61,27 +85,24 @@ const mutations = {
 	},
 	[TYPE.CONTENT_SUCCESS] (state, response) {
 		for(let key of state.sortKeys) {
-			console.log(JSON.stringify(Object.values(response[key])))
+			// console.log(JSON.stringify(Object.values(response[key])))
 			state.rows.push(Object.values(response[key]))
 		}
-		// response['douga']
-		// response['bangumi']
-		// response['music']
-		// response['dance']
-		// response['game']
-		// response['technology']
-		// response['life']
-		// response['kichiku']
-		// response['fashion']
-		// response['ad']
-		// response['ent']
-		// response['movie']
-		// response['teleplay']
-		// 
-
 	},
 	[TYPE.CONTENT_FAILURE] (state) {
 
+	},
+
+	// 排行榜信息
+	[TYPE.CONTENT_RANK_REQUEST] (state) {
+
+	},
+	[TYPE.CONTENT_RANK_SUCCESS] (state, response) {
+		state.ranks.push(response)
+		state.rank = response
+	},
+	[TYPE.CONTENT_RANK_FAILURE] (state) {
+
 	}
 }