row content complete

src/api/index.js

@@ -32,9 +32,16 @@ export const promoteApi = {
 export const liveApi = {
 	live() {
 		return axios.get(url.live).then((response) => {
-			console.log(response)
 			return response.data
 		})
 	}
 }
 
+// 具体内容
+export const contentApi = {
+	content() {
+		return axios.get(url.contet).then((response) => {
+			return response.data
+		})
+	}
+}

src/api/urlConfig.js

@@ -12,3 +12,6 @@ export const promote = serverRoot + '/promote'
 // 直播
 export const live = serverRoot + '/live'
 
+// 具体内容
+export const contet = serverRoot + '/ding'
+

src/components/content/BContent.vue

@@ -19,8 +19,8 @@
 			<BLive></BLive>
 		</div>
 		<!-- 各分类具体内容 -->
-		<div class="container-row"  v-for="x in list">
-			<BContentRow></BContentRow>
+		<div class="container-row"  v-for="(row, index) in rows">
+			<BContentRow :category="sortKeys[index]" :row="row"></BContentRow>
 		</div>
 	</div>
 </template>
@@ -31,12 +31,25 @@ import BContentTop from 'components/contentTop/BContentTop'
 import BPromote from 'components/promote/BPromote'
 import BLive from 'components/live/BLive'
 import BContentRow from 'components/contentRow/BContentRow'
+
+import { mapGetters } from 'vuex'
 export default {
 	data() {
 		return {
 			list: [0,1,1]
 		}
 	},
+	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'rows',
+			'sortKeys'
+		])
+	},
+	mounted() {
+		this.$store.dispatch('getContentRows')
+	},
 	components: {
 		Banner,
 		BContentTop,
@@ -59,9 +72,9 @@ export default {
 				clear both
 				font-size 0
 		.container-top
-			padding 0
-			margin-bottom 20px
+			padding 
 			margin 0 auto
+			margin-bottom 20px
 			zoom 1
 			width 980px
 			&:after

src/components/contentRow/BContentRow.vue

@@ -1,10 +1,12 @@
 <template>
 	<div class="b-section-body">
-		<div class="b-l" style="width: 700px;">
-			<BRowHead></BRowHead>
-			<BRowBody></BRowBody>
+		<div class="b-l">
+			<BRowHead :category="category"></BRowHead>
+			<BRowBody :row="row"></BRowBody>
+		</div>
+		<div class="b-r">
+			
 		</div>
-		<div class="b-r"></div>
 	</div>
 </template>
 
@@ -12,6 +14,14 @@
 import BRowHead from 'components/contentRow/BRowHead'
 import BRowBody from 'components/contentRow/BRowBody'
 export default {
+	props: {
+		category: {
+			type: String
+		},
+		row: {
+			type: Array
+		}
+	},
 	components: {
 		BRowHead,
 		BRowBody
@@ -25,5 +35,11 @@ export default {
 		.b-l
 			float left
 			width 700px
-			
+			margin-bottom 50px
+		.b-r
+			float right 
+			width 260px
+			min-height 360px
+			height 360px
+			margin-bottom 50px
 </style>

src/components/contentRow/BRowBody.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="b-body">
 		<ul class="vidbox v-list">
-			<BRowItem></BRowItem>
+			<BRowItem v-for="item in row" :item="item"></BRowItem>
 		</ul>
 	</div>
 </template>
@@ -9,6 +9,11 @@
 <script>
 import BRowItem from 'components/contentRow/BRowItem'
 export default {
+	props: {
+		row: {
+			type: Array
+		}
+	},
 	components: {
 		BRowItem
 	}

src/components/contentRow/BRowHead.vue

@@ -2,8 +2,8 @@
 	<div class="b-head">
 		<span class="b-head-i"></span>
 		<span class="b-head-t">
-			<a href="" title="音乐">
-				<h2>音乐</h2>
+			<a href="" :title="title">
+				<h2>{{title}}</h2>
 			</a>
 		</span>
 		<ul class="b-slt-tab">
@@ -39,7 +39,64 @@
 
 <script>
 export default {
+	props: {
+		category: {
+			type: String
+		}
+	},
 
+	// douga 动画,bangumi 番剧, music 音乐,dance 舞蹈,game 游戏,technology  科技,life 生活,kichiku 鬼畜,fashion 时尚,ad 广告,ent  娱乐, movie 电影, teleplay TV剧
+	computed: {
+		title() {
+			let title = '未知标题';
+			if (this.category) {
+				switch(this.category) {
+					case 'douga':
+						title = '动画'	
+						break
+					case 'bangumi':
+						title = '番剧'	
+						break
+					case 'music':
+						title = '音乐'	
+						break
+					case 'dance':
+						title = '舞蹈'	
+						break
+					case 'game':
+						title = '游戏'	
+						break
+					case 'technology':
+						title = '科技'	
+						break
+					case 'life':
+						title = '生活'	
+						break
+					case 'kichiku':
+						title = '鬼畜'	
+						break
+					case 'fashion':
+						title = '时尚'	
+						break
+					case 'ad':
+						title = '广告'	
+						break
+					case 'ent':
+						title = '娱乐'	
+						break
+					case 'movie':
+						title = '电影'	
+						break
+					case 'teleplay':
+						title = 'TV剧'	
+						break
+					default:
+						title ="未知标题"
+				}
+			}
+			return title
+		}
+	},
 }
 </script>
 

src/components/contentRow/BRowItem.vue

@@ -2,14 +2,14 @@
 	<li class="item-li">
 		<div class="v m300">
 			<!-- 上部分 -->
-			<a class="preview cover-preview" href="">
+			<a class="preview cover-preview" :href="hreflink" target="_blank">
 				<!-- item 左上角的奖牌 -->
 				<div class="medal"></div>
 				<div class="original"></div>
 				<!-- 边框 -->
 				<div class="border"></div>
 				<!-- 背景图片 -->
-				<img src="//i1.hdslb.com/bfs/archive/a5383ac22cb31e24a5b7be56c9105a6ee1034ee8.jpg@320w_200h.webp">
+				<img :src="item.pic">
 				<!-- 内容预览 -->
 				<div class="back">
 					<div>	
@@ -24,19 +24,18 @@
 				</div>
 				<!-- 视频时间 -->
 				<div class="x">
-					<b class="x2">12.00</b>
+					<b class="x2">{{item.duration}}</b>
 				</div>
 			</a>
 					<!-- 下部分 -->
-			<a href="">
-				<div class="t">【毁童年】震惊！哆啦A梦居然做过这种事！</div>
+			<a :href="hreflink" :title="item.title" target="_blank">
+				<div class="t">{{item.title}}</div>
 				<div class="i">
 					<span>
-						<i class="b-icon b-icon-v-play"></i>
-								38.6万
+						<i class="b-icon b-icon-v-play"></i>{{item.play}}
 						</span><span>
 						<i class="b-icon b-icon-v-dm"></i>
-								2594
+						{{item.video_review}}
 					</span>
 				</div>
 			</a>
@@ -46,7 +45,16 @@
 
 <script>
 export default {
-
+	props: {
+		item: {
+			type: Object
+		}
+	},
+	computed: {
+		hreflink() {
+			return 'http://www.bilibili.com/video/av' + this.item.aid
+		}
+	}
 }
 </script>
 
@@ -60,9 +68,10 @@ export default {
 			height 148px
 			font-size 12px
 			overflow hidden
+			transition all .3s linear
 			.x
-				visibility visible
-				opacity 1
+				visibility hidden
+				opacity 0
 			.cover-preview
 				position relative
 				.back
@@ -115,6 +124,16 @@ export default {
 						font-weight normal
 						font-family tahoma,arial,'宋体',sans-serif
 						color #fff
+				.medal
+					opacity 1
+					transition opacity .2s
+				&:hover
+					.medal
+						opacity 0
+					.fore
+						opacity 1
+						.bar
+							opacity 1
 			.preview
 				width 160px
 				height 100px
@@ -134,7 +153,7 @@ export default {
 					height 24px
 					background url(../../assets/images/icons.png) no-repeat
 					z-index 5
-					pointer-events: none
+					pointer-events none
 					background-position -849px -148px
 					transition opacity .2x
 					opacity 1
@@ -181,5 +200,13 @@ export default {
 							background-position -282px -90px
 						&.b-icon-v-dm
 							background-position -282px -218px
+			&:hover 
+				.t
+					height 40px
+					color #00a1d6
+				.x
+					opacity 1
+					visibility visible
+
 
 </style>

src/components/contentRow/BRowRank.vue

@@ -1,6 +1,7 @@
 <template>
-	<div>
-		
+	<div class="rank">
+		<div class="b-head"></div>
+		<div class="b-body"></div>
 	</div>
 </template>
 

src/store/actionType/contentType.js

@@ -0,0 +1,3 @@
+export const CONTENT_REQUEST = 'CONTENT_REQUEST'
+export const CONTENT_SUCCESS = 'CONTENT_SUCCESS'
+export const CONTENT_FAILURE = 'CONTENT_FAILURE'

src/store/index.js

@@ -8,7 +8,7 @@ import bannerStore from './modules/bannerStore'
 import rankStore from './modules/rankStore'
 import promoteStore from './modules/promoteStore'
 import liveStore from './modules/liveStore'
-
+import contentStore from './modules/contentStore'
 
 const state = {
 	requesting: false,
@@ -27,6 +27,7 @@ export default new Vuex.Store({
 		bannerStore,
 		rankStore,
 		promoteStore,
-		liveStore
+		liveStore,
+		contentStore
 	}
 })

src/store/modules/contentStore.js

@@ -0,0 +1,93 @@
+import { contentApi } from 'api'
+import * as TYPE from '../actionType/contentType'
+
+
+// douga 动画
+// bangumi 番剧
+// music 音乐
+// dance 舞蹈
+// game 游戏
+// technology  科技
+// life 生活
+// kichiku 鬼畜
+// fashion 时尚
+// ad 广告
+// ent  娱乐
+// movie 电影
+// teleplay TV剧
+
+
+const state = {
+	// 默认排序
+	sortKeys: ['douga', 'bangumi', 'music', 'dance', 'game', 'technology', 'life', 'kichiku', 'fashion', 'ad', 'ent', 'movie', 'teleplay'],
+	rows: []
+}
+
+const getters = {
+	rows: state => state.rows,
+	sortKeys: state => state.sortKeys
+}
+
+const actions = {
+	getContentRows({commit, state, rootState}) {
+		rootState.requesting = true
+		commit(TYPE.CONTENT_REQUEST)
+		contentApi.content().then((response) => {
+			rootState.requesting = false
+			commit(TYPE.CONTENT_SUCCESS, response)
+		}, (error) => {
+			rootState.requesting = false
+			commit(TYPE.CONTENT_FAILURE)
+		})
+	}
+}
+
+// 1  douga 动画
+// 2  bangumi 番剧
+// 3  music 音乐
+// 4  dance 舞蹈
+// 5  game 游戏
+// 6  technology  科技
+// 7  life 生活
+// 8  kichiku 鬼畜
+// 9  fashion 时尚
+// 10 ad 广告
+// 11 ent  娱乐
+// 12 movie 电影
+// 13 teleplay TV剧
+const mutations = {
+	[TYPE.CONTENT_REQUEST] (state) {
+
+	},
+	[TYPE.CONTENT_SUCCESS] (state, response) {
+		for(let key of state.sortKeys) {
+			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) {
+
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}

src/store/modules/liveStore.js

@@ -38,7 +38,6 @@ const mutations = {
 		
 	},
 	[TYPE.LIVE_SUCCESS] (state, live) {
-		console.log(JSON.stringify(live.ranking))
 		state.online_total = live.online_total
 		state.dynamic = live.dynamic
 		state.recommend = live.recommend