subject_gxj/xj_project_app/pages/intermediaryService/search/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		getIntermediaryType,
	} from "@/api/work/intermediaryService.js";

	// 获取种类
	let loading = ref(true);
	let kindList = ref([]);
	const getKindList = () => {
		loading.value = true
		getIntermediaryType().then(res => {
			loading.value = false;
			kindList.value = res.data.type;
		}).catch(() => {
			loading.value = false;
		})
	};

	// 跳转页面
	const goToPage = (id, title) => {
		uni.navigateTo({
			url: `/pages/intermediaryService/index?id=${id}&title=${title}`
		})
	};

	onLoad(() => {
		getKindList();
	})
</script>

<template>
	<view class="container">
		<page-title>中介服务库</page-title>

		<view class="bg">
			<view class="search">
				<view class="search-item" v-for="(item,index) in kindList" :key="index" @click="goToPage(item.id,item.title)">
					<view class="search-item-icon"></view>

					<view class="search-item-text">{{item.title??"--"}}</view>
				</view>
			</view>
		</view>

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<style lang="scss" scoped>
	.bg {
		position: absolute;
		top: 5%;
		left: 0;
		width: 100%;
		min-height: 95%;
		padding-top: 100rpx;
		// border-radius: 40rpx 40rpx 0rpx 0rpx;
		background-color: #fff;
	}

	.search {
		display: flex;
		flex-wrap: wrap;
		gap: 40rpx;

		.search-item {
			width: 220rpx;
			height: 188rpx;

			.search-item-icon {
				width: 96rpx;
				height: 78rpx;
				margin: 38rpx auto 40rpx;
				background-image: url('@/static/policy-file.png');
				background-size: 100% 100%;
			}

			.search-item-text {
				max-width: 146rpx;
				min-height: 40rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 40rpx;
				font-weight: 400;
				color: #343437;
				font-size: 24rpx;
				background: #E2ECFF;
				border-radius: 8rpx
			}
		}
	}
</style>