drag sort

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <TopContainer></TopContainer>
     <BHeader></BHeader>
-    <BContent :items="items"></BContent>
+    <BContent :rows="rows"></BContent>
     <BNavSide :options="options" v-on:change="isShowMask"></BNavSide>
     <div class="wnd-mask" ref="mask" v-show="showMask"></div>
   </div>
@@ -13,6 +13,8 @@ import TopContainer from 'components/common/TopContainer.vue'
 import BHeader from 'components/common/BHeader.vue'
 import BContent from 'components/content/BContent.vue'
 import BNavSide from 'components/nav/BNavSide'
+
+import { mapGetters } from 'vuex'
 export default {
   name: 'app',
   components: {
@@ -21,6 +23,10 @@ export default {
     BContent,
     BNavSide
   },
+  mounted() {
+    this.$store.dispatch('getContentRows')
+    console.log(JSON.stringify(this.items) + '=======')
+  },
   data() {
     return {
       items: [{
@@ -57,10 +63,15 @@ export default {
     }
   },
   computed: {
+    ...mapGetters([
+      'requesting',
+      'error',
+      'rows'
+    ]),
     options() {
       let options = {
         offset: 100, //偏移的距离
-        items: this.items,
+        items: this.rows,
         offsetTop: 0 //距离顶部距离
       }
       return options

src/components/content/BContent.vue

@@ -19,9 +19,8 @@
 			<BLive></BLive>
 		</div>
 		<!-- 各分类具体内容 -->
-		<div class="container-row"  v-for="(row, index) in rows" :id="getContentRowId(index)"> 
-			<BContentRow :category="sortKeys[index]" :categoryId="sortIds[index]" :row="row"></BContentRow>
-		}
+		<div class="container-row"  v-for="(row, index) in rows" :id="row.b_id" v-if='rows'> 
+			<BContentRow :category="row.category" :categoryId="row.categoryId" :row="row.item"></BContentRow>
 		</div>
 	</div>
 </template>
@@ -44,21 +43,15 @@ export default {
 			'sortIds'
 		])
 	},
-	props: ['items'],
-	mounted() {
-		this.$store.dispatch('getContentRows')
-		console.log(JSON.stringify(this.items) + '=======')
-	},
-	methods: {
-		getContentRowId(index) {
-			if (index > this.items.length-1) {
-				return '123456'
-			}
-			// console.log(index + '=== ' +this.items[index].b_id)
-			// return '123456'
-			return this.items[index].b_id
+	props: {
+		rows: {
+			type: Array
 		}
 	},
+	// mounted() {
+	// 	this.$store.dispatch('getContentRows')
+	// 	console.log(JSON.stringify(this.items) + '=======')
+	// },
 	components: {
 		Banner,
 		BContentTop,

src/components/nav/BNavSide.vue

@@ -233,7 +233,7 @@ export default {
 		position fixed
 		width 48px
 		text-align center
-		top 100px
+		top 240px
 		left auto
 		right 0px
 		&.customizing

src/store/modules/contentStore.js

@@ -21,7 +21,7 @@ const state = {
 	// 默认排序
 	sortKeys: ['douga', 'bangumi', 'music', 'dance', 'game', 'technology', 'life', 'kichiku', 'fashion', 'ad', 'ent', 'movie', 'teleplay'],
 	sortIds: [1, 13, 3, 129, 4, 36, 160, 119, 155, 165, 5, 23, 11],
-	sortValues: ['直播', '动画', '番剧', '音乐', '舞蹈', '游戏', '科技', '生活', '鬼畜', '时尚', '广告', '娱乐', '电影', 'TV剧'],
+	sortValues: ['动画', '番剧', '音乐', '舞蹈', '游戏', '科技', '生活', '鬼畜', '时尚', '广告', '娱乐', '电影', 'TV剧'],
 	rows: [],
 	ranks: [],
 	rank: {}
@@ -86,15 +86,27 @@ const mutations = {
 
 	},
 	[TYPE.CONTENT_SUCCESS] (state, response) {
-		for(let key of state.sortKeys) {
-			// console.log(JSON.stringify(Object.values(response[key])))
-			// let rowItem = {
-			// 	key: response[key],
-			// 	data: Object.values(response[key])
-			// }
-			// state.rows.push(rowItem)
-			state.rows.push(Object.values(response[key]))
+		for (let i = 0; i < state.sortKeys.length; i++) {
+			let category = state.sortKeys[i] 
+			let rowItem = {
+				category: category,
+				categoryId: state.sortIds[i],
+				name: state.sortValues[i],
+				b_id: `b_${category}`,
+				item: Object.values(response[category])
+			}
+			state.rows.push(rowItem)
 		}
+		// for(let key of state.sortKeys) {
+		// 	// console.log(JSON.stringify(Object.values(response[key])))
+		// 	let rowItem = {
+		// 		categoty: 0,
+		// 		key: response[key],
+		// 		data: Object.values(response[key])
+		// 	}
+		// 	// state.rows.push(rowItem)
+		// 	state.rows.push(Object.values(response[key]))
+		// }
 	},
 	[TYPE.CONTENT_FAILURE] (state) {