完成排行榜数据请求和显示

src/api/index.js

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

src/api/urlConfig.js

@@ -15,6 +15,7 @@ export const live = serverRoot + '/live'
 // 具体内容
 export const contet = serverRoot + '/ding'
 
-// 排行
+// 三日排行
 export const contentrank = serverRoot + '/contentrank'
-
+// 一周排行
+export const contentrankweek = serverRoot + '/contentrankweek'

src/components/contentRow/BContentRow.vue

@@ -5,7 +5,7 @@
 			<BRowBody :row="row"></BRowBody>
 		</div>
 		<div class="b-r">
-			<BRowRank :category="category" :rank="rank"></BRowRank>
+			<BRowRank :category="category" :categoryId="categoryId"></BRowRank>
 		</div>
 	</div>
 </template>
@@ -36,8 +36,8 @@ export default {
 		])
 	},
 	mounted() {
-		console.log(this.categoryId)
-		this.$store.dispatch('getContentRank', this.categoryId)
+		// console.log(this.categoryId)
+		// this.$store.dispatch('getContentRank', this.categoryId)
 	},
 	components: {
 		BRowHead,

src/components/contentRow/BRowRank.vue

@@ -5,11 +5,11 @@
 				<span class="b-head-t">
 					<h3>排行</h3>
 				</span>
-				<ul class="b-slt-tab">
-					<li class="on" type="hot">
+				<ul class="b-slt-tab" v-show="categoryId !== 13">
+					<li :class="{on: !isOrigin}" type="hot" @mouseover="hot">
 						<span class="b-tab-text">全部</span>
 					</li>
-					<li class="hot_original">
+					<li  :class="{on: isOrigin}" class="hot_original" @mouseover="original">
 						<span class="b-tab-text">原创</span>
 					</li>
 				</ul>
@@ -24,23 +24,26 @@
 				</div>
 			</div>
 		</div>
-		<BRowRankBody :rank="rank"></BRowRankBody>
+		<BRowRankBody :categoryId="categoryId" :isOrigin="isOrigin" :isWeek="isWeek"></BRowRankBody>
 	</div>
 </template>
 
 <script>
 import BRowRankBody from 'components/contentRow/BRowRankBody'
+import axios from 'axios'
 export default {
 	props: {
-		rank: {
-			type: Object
+		categoryId: {
+			type: Number
 		}
 	},
 	data() {
 		return {
 			isSelected1: true,
 			isSelected2: false,
-			selectedTitle: '三日'
+			selectedTitle: '三日',
+			isOrigin: false, //全部还是原创
+			isWeek: false //三日排行or一周排行
 		}
 	},
 	components: {
@@ -51,11 +54,19 @@ export default {
 			this.selectedTitle = '三日'
 			this.isSelected1 = true
 			this.isSelected2 = false
+			this.isWeek = false
 		},
 		selectedItem2() {
 			this.selectedTitle = '一周'
 			this.isSelected1 = false
 			this.isSelected2 = true
+			this.isWeek = true
+		},
+		hot() {
+			this.isOrigin = false
+		},
+		original() {
+			this.isOrigin = true
 		}
 	}
 }

src/components/contentRow/BRowRankBody.vue

@@ -2,7 +2,7 @@
 	<div class="b-body">
 		<div class="r-list-body">
 			<div class="r-list-wrapper" ref="listWrapper">
-				<ul class="rlist" v-if="rank.hot" @click="one">
+				<ul class="rlist" v-if="rank.hot">
 					<li :class="{on: index === 0}" v-for="(item, index) in rank.hot.list">
 						<i class="number" :class="{n: index === 0 || index === 1 || index === 2}">
 							{{index + 1}}
@@ -23,7 +23,7 @@
 						</a>
 					</li>
 				</ul>
-				<ul class="rlist" v-if="rank.hot_original" @click="two">
+				<ul class="rlist" v-if="rank.hot_original">
 					<li :class="{on: index === 0}" v-for="(item, index) in rank.hot.list">
 						<i class="number" :class="{n: index === 0 || index === 1 || index === 2}">
 							{{index + 1}}
@@ -53,24 +53,70 @@
 </template>
 
 <script>
+import { contentrankApi } from 'api'
 export default {
+	data(){
+		return {
+			threeDayData: {},
+			weekData: {},
+			rank: {}
+		}
+	},
 	props: {
-		rank: {
-			type: Object
+		categoryId: {
+			type: Number
+		},
+		isOrigin: {
+			type: Boolean
+		},
+		isWeek: {
+			type: Boolean
 		}
 	},
-	computed: {
-		xx() {
-			console.log(JSON.stringify(this.rank.hot.list))
-			return 'xx'
+	watch: {
+		isOrigin(val, oldVal) {
+			console.log(this.isWeek)
+			if (val) {
+				console.log('isOrigin')
+				this.$refs.listWrapper.style.marginLeft = '-100%'
+			} else {
+				this.$refs.listWrapper.style.marginLeft = '0%'
+			}
+		},
+		isWeek(val, oldVal) {
+			console.log("change")
+			this.getrankData()
 		}
 	},
+	mounted() {
+		this.getrankData()
+	},				
 	methods: {
-		one() {
-			this.$refs.listWrapper.style.marginLeft = '0%'
-		},
-		two() {
-			this.$refs.listWrapper.style.marginLeft = '-100%'
+		getrankData() {
+			//防止重复请求
+			if (this.isWeek && JSON.stringify(this.weekData) !== '{}') {
+				this.rank = this.weekData
+				return
+			} 
+			if (!this.isWeek && JSON.stringify(this.threeDayData) !== '{}') {
+				this.rank = this.threeDayData
+				return
+			} 
+
+			let param = {
+				categoryId: this.categoryId
+			}
+			if (this.isWeek) {
+				contentrankApi.contentrankweek(param).then((response) => {
+					this.weekData = response
+					this.rank = this.weekData
+				})
+			} else {
+				contentrankApi.contentrank(param).then((response) => {
+					this.threeDayData = response
+					this.rank = this.threeDayData
+				})
+			}
 		}
 	}
 }
@@ -89,6 +135,7 @@ export default {
 				width 200%
 				margin-left 0%
 				overflow hidden
+				transition .2s
 				.rlist
 					padding-bottom 15px
 					padding-top 20px

src/components/contentRow/BRowRankItem.vue

@@ -1,15 +0,0 @@
-<template>
-	<div>
-		
-	</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="stylus" scoped>
-	
-</style>