sooka_consult_uniapp/pages/topic/dept.vue

<template>
	<view>
		<view class="btnContain">
			<button 
				v-for="(item,idx) in userType" 
				@click="onclick(item,idx)"
				:class="idx == currentIdx ? 'highlight' : 'not-highlight'"
				:style="idx == 0 ? 'text-align:left' : 'text-align:right'"
				>
				{{item.dictLabel}}
			</button>
		</view>
		<view>
			<uni-grid :column="2" :square="false" :highlight="false">
				<uni-grid-item v-for="(item, index) in dataList" :index="index" :key="index">
						<view class="grid-item-box" @click="onMatters(item)">
					
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

	</view>
</template>

<script>
	import {
		getDicts
	} from "@/api/system/dict/data.js"
	import {
		listdept
		} from "@/api/handleAffairs/dept.js"
	export default {

		data() {
			return {
				userType: [], // 初始化用户类型为空
				dataList: [],
				currentIdx:null,
			}
		},
		created() {
			this.getdictData()//初始化字典按钮
			this.getdataList()//初始化数据
		},
		methods: {
			onMatters(data){
				uni.setStorageSync('data', {department:data.name,examine:1})
				uni.navigateTo({
					url: '/pages/matterAll/matterAll',
				});
			},
			getdataList(data){
				let _that = this
				if (!data) {
					data = {
						application: 0,
						shows: "0"
					}
				}
				listdept(data).then(res => {
					_that.dataList = res.data
					console.log("9999999999999999999999",_that.dataList)
				})
				
			},
			onclick(row,idx) {
				this.currentIdx = idx
				let data = {
					application: row.dictValue,
					shows: "0"
				}
				this.getdataList(data)
			},
			getdictData() {
				let _that = this
				getDicts("object_application").then(res => {
					_that.userType = res.data
				})
			},
			changeUserType(type) {
				this.userType = type
			}
		},

	}
</script>

<style>
	/* view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	} */
	.not-highlight{
		color:#000;
	}
	.highlight{
		color:#FF673D;
	}
	.btnContain{
		position: relative;
		width: 100%;
		display: flex;
		height: 20%;
		background-color: #fff;
		justify-content: space-between;
	}
	.btnContain::after{
		content: '';
		position: absolute;
		width: 4rpx;
		height: 40%;
		left: 50%;
		top: 30%;
		z-index: 10;
		margin: auto;
		background-color: #E1E1E1;
	}
	button {
		width: 30%;
		border: none;
		background-color: #fff;
	}
	button:after{
		border: none;
	}

	.selected {
		background-color: #007bff;
		color: #fff;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>