主题按钮和部门按钮

pages/gridQuery/gridQuery.vue

@@ -23,13 +23,14 @@
 		onLoad(option){
 			const _that = this
 			const id = uni.getStorageSync('id');
+			console.log(id)
 			 getGridType(id).then(res =>{
 				 _that.jobDescription = res.data.jobDescription
 			 })
 		},
-		
+
 		methods: {
-		
+
 		}
 	}
 </script>

pages/handleAffairs/handleAffairs.vue

@@ -1,15 +1,51 @@
 <template>
+
 	<view>
-			<view class="gpfwNav">
-				<ul >
-					<li v-for="(item,index) in gridtTypeLits" :key="index" >
-						<image :src="'http://127.0.0.1:8080'+item.fileUrl" @click="querygrid(item)">{{item.name}}</image>
-					</li>
-					</ul>
-
-			</view>
-	</view>
+		<!-- 搜索栏 -->
+		<view class="input-view">
+			<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
+			<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
+		</view>
+		<!-- 网格配置列表滑动 -->
+		<view>
+			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
+				<swiper class="swiper-box">
+					<swiper-item v-for="(item ,index) in gridtType" :key="index">
+
+						<!-- <ul class="mainNav" >
+							<li v-for="(dataitem,dataindex) in item.dataList" :key="dataitem.id">
+								<image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
+									@click="querygrid(dataitem)"></image>
+								<text>{{dataitem.name}}</text>
+							</li>
+						</ul> -->
+						<uni-grid :column="5" :highlight="true" :showBorder="false">
+							<uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
+								<view>
+									<image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
+										@click="querygrid(dataitem)"></image>
+									<uni-title type="h5" :title="dataitem.name" align="center"></uni-title>
+								</view>
+
+							</uni-grid-item>
+						</uni-grid>
+					</swiper-item>
+				</swiper>
+			</uni-swiper-dot>
+		</view>
+
+		<view>
+			<uni-row class="demo-uni-row" :width="nvueWidth">
+				<uni-col :span="12">
+					<button align="center" @click="topic">主题导航</button>
+				</uni-col>
 
+				<uni-col :span="12">
+					<button align="center" @click="dept">部门导航</button>
+				</uni-col>
+			</uni-row>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -20,27 +56,48 @@
 	export default {
 		data() {
 			return {
-				gridtTypeLits: [],
+				gridtType: [], //是一个list<map>数据 [{0,[1,2,3]}]
 			};
 		},
 		created() {
 			this.getList();
 		},
 		methods: {
-			querygrid(item){
+			//主题导航跳转
+			topic(){
+
+				uni.navigateTo({
+					url: '/pages/topic/topic',
+				});
+			},
+			//部门导航跳转
+			dept(){
+
+			},
+			querygrid(item) {
 				console.log(item)
-					uni.setStorageSync('id', item.id)
-				    uni.navigateTo({
-				        url: '/pages/gridQuery/gridQuery',
+				uni.setStorageSync('id', item.id)
+				uni.navigateTo({
+					url: '/pages/gridQuery/gridQuery',
 
-				    });
+				});
 			},
 			getList() {
 				const _that = this
-				let query = {yesOrNoShow: "0"};
-				listGridType(query).then(res =>{
-				 _that.gridtTypeLits = res.rows
-				 console.log(res)
+				let query = {
+					yesOrNoShow: "0"
+				};
+				listGridType(query).then(res => {
+					let gridtTypeLits = res.rows
+
+					let dataList = []
+					for (var i = 0; i < gridtTypeLits.length; i++) {
+						dataList.push(gridtTypeLits[i])
+						if (((i + 1) % 5 == 0) || i == gridtTypeLits.length - 1) {
+							_that.gridtType.push(dataList)
+							dataList = []
+						}
+					}
 				});
 
 			},
@@ -48,6 +105,34 @@
 	}
 </script>
 <style scoped>
+	.uni-header-image {
 
-</style>
+		width: 30px;
+		height: 30px;
+		display: block;
+		margin: 0 auto;
+	}
 
+	/* 主导航 */
+	.mainNav {
+		width: 100%;
+		background: #fff;
+
+	}
+
+	.input-view {
+		/* #ifndef APP-PLUS-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 500rpx;
+		flex: 1;
+		background-color: #f8f8f8;
+		height: $nav-height;
+		border-radius: 15px;
+		padding: 0 15px;
+		flex-wrap: nowrap;
+		margin: 7px 0;
+		line-height: $nav-height;
+	}
+</style>