sooka_consult_uniapp/pages/handleAffairs/topic/topic.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.deptName }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

	</view>
</template>

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

		data() {
			return {
				userType: [], // 初始化用户类型为空
				dataList: [],
				currentIdx:0,
			}
		},
		created() {
			this.getdictData()//初始化字典按钮
			this.getdataList()//初始化数据
		},
		methods: {
			onMatters(data){
				uni.setStorageSync('data', {type:data.deptName,examine:1})
				uni.navigateTo({
					url: '/pages/handleAffairs/matterAll/matterAll',
				});
			},
			getdataList(data){
				let _that = this
				if (!data) {
					data = {
						objectOfHandling: 0,
						yesOrNoShow: "0"
					}
				}
				listAll(data).then(res => {
					_that.dataList = res.data
				})
				console.log(_that.dataList)
			},
			onclick(row,idx) {
				this.currentIdx = idx
				let data = {
					objectOfHandling: row.dictValue,
					yesOrNoShow: "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;
	} */
	html,body{
		background-color: #fff;
	}
	.btnContain button:nth-child(1){
		text-indent: 20%;
		text-align:left;
	}
	.btnContain button:nth-child(2){
		text-align:left;
	}
	.btnContain button:nth-child(1)::after{
		content:'';
		width: 40%;
		height: 94%;
		position: absolute;
		top: 25%;
		left: -2%;
		background: url('@/static/images/more/accounter.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.btnContain button:nth-child(2)::after{
		content:'';
		width: 40%;
		height: 94%;
		position: absolute;
		top: 25%;
		left: 20%;
		background: url('@/static/images/more/personLegal.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.not-highlight{
		color:#000;
	}
	.highlight{
		color:#FF673D;
	}
	.uni-grid{
		flex-wrap:wrap
	}
	.uni-grid uni-grid-item{
		width: 28%;
		margin-top: 3%;
		margin-left: 4%;
		background-color: #fff;
		box-shadow: 0px 0px 2px 0px gray;
	}
	.uni-grid .uni-grid-item{
		width: 100% !important;
	}
	.btnContain{
		position: relative;
		width: 92%;
		display: flex;
		height: 20%;
		background-color: #fff;
		justify-content: space-between;
		margin:2% auto auto auto;
		padding: 1%;
		box-shadow: 0px 0px 2px 0px gray;
	}
	.btnContain::after{
		content: '';
		position: absolute;
		width: 4rpx;
		height: 40%;
		left: 50%;
		top: 30%;
		z-index: 10;
		margin: auto;
		background-color: #E1E1E1;
	}
	button {
		width: 35%;
		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>