Huiqitong/src/pages/index/shoppage/legalServices.vue

<template>
	<!-- <u-navbar title="办年报" placeholder="true" bg-color="#F1F3F9" :auto-back="true"></u-navbar> -->
	<view class="container">
		<u-search @search="search" @clickIcon="clickIcon" @clear="clear" shape="square" placeholder="请输入搜索内容"
			placeholder-color="#A9D4FF" v-model="keyword" search-icon="/static/img/search.png" search-icon-size="14"
			:show-action="false" height="40" margin="40rpx 24rpx 24rpx 24rpx" bg-color="#FFFFFF"></u-search>
		<view class="main">
			<scroll-view scroll-y="auto" class="hyonne" @scrolltolower="onloadmore">
				<view class="ztone" v-for="(item, index) in ztList" :key="index" @click="godetail(item.id)">
					<image style="width: 80rpx; height: 80rpx; flex: 1;border-radius: 16rpx;"
						:src="baseurl+item.head_pic" mode="widthFix"></image>
					<view class="rightpart">
						<view class="splace">
							{{ item.name }}
						</view>
						<text class="title">{{ item.enterprise }}</text>
					</view> 
					<image style="width: 32rpx; height: 44rpx" src="@/static/img/Icon.png" mode="aspectFill"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		enterpriseList
	} from '@/api/shop'

	const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/')

	// 响应式数据
	const keyword = ref('')
	const page = ref(1)
	const pagesize = ref(6)

	const search = async (val) => {
		page.value = 1
		pagesize.value = 6
		await getfinanceList(keyword.value, page.value, pagesize.value)
	}

	const clickIcon = async () => {
		page.value = 1
		pagesize.value = 6
		await getfinanceList(keyword.value, page.value, pagesize.value)
	}

	const clear = async () => {
		page.value = 1
		pagesize.value = 6
		await getfinanceList(keyword.value, page.value, pagesize.value)
	}

	const ztList = ref([])


	const getfinanceList = async (name, page, limit) => {
		let params = {
			category_id: 1,
			title: name,
			page: page,
			limit: limit
		}
		await enterpriseList(params).then((res) => {
			ztList.value = res.data.data
		})
	}

	const onloadmore = async () => {
		page.value++
		let params = {
			title: keyword.value,
			page: page.value,
			limit: pagesize.value
		}
		await financeList(params).then((res) => {
			ztList.value = [...ztList.value, ...res.data.data]
		})
	}
	
	const godetail = (id) => {
		uni.navigateTo({
			url: '/pages/index/shoppage/qyDetail?id=' + id + '&current=' + 1
		})
	}

	onShow(async () => {
		await getfinanceList('', 1, 6)
	})
</script>

<style scoped lang="scss">
	.container {
		background: linear-gradient(0deg, #f1f3f9 72%, rgba(129, 179, 222, 0.5) 88%);
		height: 100vh;
		width: 100%;
		overflow-y: hidden;

		.hyonne {
			max-height: calc(100vh - 154rpx);
			overflow-y: auto;
		}

		.main {
			margin-top: 10rpx;
			width: 100%;
			height: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			overflow-y: hidden;

			.ztone {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 20rpx;
				border-radius: 8rpx;
				background: #ffffff;
				box-sizing: border-box;
				border: 2rpx solid #F1F3F9;
			
				.rightpart {
					width: 100%;
					margin-left: 20rpx;
					flex: 3;
					display: grid;
					align-content: space-between;
			
					.splace {
						font-family: Source Han Sans;
						font-size: 20rpx;
						font-weight: 600;
						color: #0C092A;
					}
			
					.title {
						margin-top: 20rpx;
						font-family: Source Han Sans;
						font-size: 20rpx;
						color: #666666;
					}
				}
			}
		}
	}

	.hdzq {
		width: 212rpx;
		height: 86rpx;
		position: fixed;
		right: 0;
		top: 70%;
		margin-right: -14rpx;
	}
</style>