sooka_consult_uniapp/pages/handleAffairs/handleAffairs.vue

<template>

	<view>
		<!-- 搜索栏 -->
		<view class="input-view">
			<uni-icons type="search" size="20" class="search-icon" @tap="confirm"></uni-icons>
			<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" v-model="title"/>
		</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>
	import {
		listGridType
	} from '@/api/handleAffairs/gridType.js';

	export default {
		data() {
			return {
				title:"",
				gridtType: [], //是一个list<map>数据 [{0,[1,2,3]}]
			};
		},
		created() {
			this.getList();
		},
		methods: {
			confirm(){
				if (!this.title.trim()) {//去除前后空格，在判断是否为空
					return
				}
				console.log(this.title)
				uni.setStorageSync('data', {title:this.title,examine:1})
				uni.navigateTo({
					url: '/pages/matterAll/matterAll',
				});
			},
			//主题导航跳转
			topic(){
				uni.navigateTo({
					url: '/pages/topic/topic',
				});
			},
			//部门导航跳转
			dept(){

			},
			querygrid(item) {
				console.log(item)
				uni.setStorageSync('id', item.id)
				uni.navigateTo({
					url: '/pages/gridQuery/gridQuery?titleText='+item.name

				});
			},
			getList() {
				const _that = this
				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 = []
						}
					}
				});

			},
		}
	}
</script>
<style scoped>
	.uni-header-image {

		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>