排行榜

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^0.15.3",
+    "lodash": "^4.17.4",
     "vue": "^2.1.0",
     "vue-router": "^2.3.0",
     "vuex": "^2.2.1"

src/api/index.js

@@ -10,3 +10,12 @@ export const bannerApi = {
 	}
 }
 
+// 排行榜
+export const rankApi = {
+	ranking3() {
+		return axios.get(url.ranking3).then((response) => {
+			return response.data
+		})
+	}
+}
+

src/api/urlConfig.js

@@ -1,4 +1,6 @@
 
 const serverRoot = 'http://127.0.0.1:9050'
 
-export const banner = serverRoot + '/banner'
+export const banner = serverRoot + '/banner'
+
+export const ranking3 = serverRoot + '/ranking3'

src/components/banner/Banner.vue

@@ -3,7 +3,7 @@
 		<div class="topic-preview-wrapper">
 			<div class="topic-preview-list-wrapper">
 				<ul class="topic-preview" style="width: 500%;"  ref="banner"> 
-					<BannerItem v-for="item  in bannerlist" :banner="item"></BannerItem>
+					<BannerItem v-for="item in bannerlist" :banner="item"></BannerItem>
 				</ul>
 			</div>
 			<a class="more-topic" href="/topic/integrated-1.html" target="_blank" v-show="show">更多

src/components/contentTop/BContentTop.vue

@@ -1,20 +1,37 @@
 <template>
 	<div class="top-list-wrapper">
 		<ul class="top-list" clearfix>
-			<BContentTopItem></BContentTopItem>
-			<BContentTopItem></BContentTopItem>
-			<BContentTopItem></BContentTopItem>
-			<BContentTopItem></BContentTopItem>
-			<BContentTopItem></BContentTopItem>
+			<BContentTopItem v-for="(item, index) in ranklist" :contentTop="item"></BContentTopItem>
 		</ul>
-		<div class="prev">一周</div>
-    <div class="next">昨日</div>
+		<div class="prev" @click="now = now > 0 ? now -= 1 : now = 2">{{ this.pre = this.now === 0 ? '昨日' : this.now === 1 ? '三日' : '一周'}}</div>
+    <div class="next" @click="now = now < 2 ? now += 1 : now = 0">{{ this.next = this.now === 0 ? '一周' : this.now === 1 ? '昨日' : '三日'}}</div>
 	</div>
 </template>
 
 <script>
 import BContentTopItem from 'components/contentTop/BContentTopItem'
+import { mapGetters } from 'vuex'
 export default {
+	data() {
+		return {
+			now: 0,
+			pre: '',
+			next: ''
+		}
+	},
+	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'ranklist'
+		])
+	},
+	mounted() {
+		this.$store.dispatch('ranklist')
+		// if (!this.ranklist || this.ranklist === []) {
+
+		// }
+	},
 	components: {
 		BContentTopItem
 	}

src/components/contentTop/BContentTopItem.vue

@@ -1,16 +1,16 @@
 <template>
 	<li class="top-item">
 		<div class="v-item">
-			<a href="/video/av8815046/" target="_blank" title="【阴阳师/狗博】射杀恋人之日【ALeo维】">
+			<a href="/video/av8815046/" target="_blank" :title="contentTop.title">
 				<div class="preview">
-					<img src="//i0.hdslb.com/bfs/archive/dcf689fdc2e4560a08c272471bfb91e2a0656f64.jpg@320w_200h.webp" alt="【阴阳师/狗博】射杀恋人之日【ALeo维】">
+					<img :src="contentTop.pic" :alt="contentTop.title">
 				</div>
 				<div class="mask">
 				</div>
 				<div class="info">
-					<div class="t">【阴阳师/狗博】射杀恋人之日【ALeo维】</div>
-					<p class="up">up主：要小心有毒的橙汁</p>
-					<p class="play">播放:46022</p>
+					<div class="t">{{contentTop.title}}</div>
+					<p class="up">up主：{{contentTop.author}}</p>
+					<p class="play">播放：{{contentTop.play}}</p>
 				</div>
 			</a>
 		</div>
@@ -19,7 +19,11 @@
 
 <script>
 export default {
-
+	props: {
+		contentTop: {
+			type: Object
+		}
+	}
 }
 </script>
 

src/store/actionType/rankType.js

@@ -0,0 +1,3 @@
+export const RANK_LIST_REQUEST = 'RANK_LIST_REQUEST'
+export const RANK_LIST_SUCCESS = 'RANK_LIST_SUCCESS'
+export const RANK_LIST_FAILURE = 'RANK_LIST_FAILURE'

src/store/index.js

@@ -5,6 +5,7 @@ Vue.use(Vuex)
 
 
 import bannerStore from './modules/bannerStore'
+import rankStore from './modules/rankStore'
 
 const state = {
 	requesting: false,
@@ -20,6 +21,7 @@ export default new Vuex.Store({
 	state,
 	getters,
 	modules: {
-		bannerStore
+		bannerStore,
+		rankStore
 	}
 })

src/store/modules/rankStore.js

@@ -0,0 +1,46 @@
+import { rankApi } from 'api'
+import * as TYPE from '../actionType/rankType'
+import _ from 'lodash'
+
+const state = {
+	ranklist: []
+}
+
+const getters = {
+	ranklist: state => state.ranklist
+}
+
+const actions = {
+	ranklist({commit, state, rootState}) {
+
+		rootState.requesting = true
+		commit(TYPE.RANK_LIST_REQUEST)
+		rankApi.ranking3().then((response) => {
+			rootState.requesting = false
+			commit(TYPE.RANK_LIST_SUCCESS, response)
+		}, (error) => {
+			rootState.requesting = false
+			commit(TYPE.RANK_LIST_FAILURE)
+		})
+	}
+}
+
+const mutations = {
+	[TYPE.RANK_LIST_REQUEST] (state) {
+
+	},
+	[TYPE.RANK_LIST_SUCCESS] (state, response) {
+		state.ranklist = _.values(response.recommend.list)
+					console.log(JSON.stringify(state.ranklist))
+	},
+	[TYPE.RANK_LIST_FAILURE] (state) {
+
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}