leromro-mini/pages/index.vue

<template>
	<view class="main-content">
		<view class="home-banner" :style="`height: ${globalData.navBarHeight}px `">
			<view class="home-banner-left">
				<!-- <img src="/static/serverImg/home/address.png" alt=""
					style="width: 41.67rpx;height:  41.67rpx;margin-right: 8rpx;"> -->
				<up-icon name="map" color="#fff" size="25"></up-icon>
				<text>{{ data.address }}</text>
			</view>
			<view class="home-banner-cente">金邻助家</view>
			<view class="home-banner-rigth">
				<!-- <up-icon name="bell" :size="25" color="rgba(46, 46, 46, 1)"></up-icon> -->
			</view>
		</view>
		<view class="home-box" :style="`margin-top: ${globalData.navBarHeight}px `">
			<view class="home-main">
				<view class="custom-swiper">
					<up-swiper :list="list3" indicator indicatorMode="line" circular></up-swiper>
				</view>
			</view>

			<view class="home-grid">

				<Client />
			</view>

			<view class="home-grid hot-box" v-if="userType === 1">
				<view v-for="(item, index) in hotList" :key="index + 'hot'" class="hot-item">
					<img :src="item" alt="" style="width: 100%;height:  160rpx;">
				</view>
			</view>

			<view class="home-g-bgc">
				<view class="home-grid2">
					<view class="serve-title hot-box-title" v-if="userType === 1">超值专区</view>
					<view class="hot-swiper">
						<up-swiper :list="ValueZone" :indicator="false" indicatorMode="line" circular></up-swiper>
					</view>
				</view>

				<view class="home-ranking home-grid2">
					<ServIces :leftList="leftList" :rightList="rightList" v-if="userType == 1"></ServIces>
					<RankingList v-if="userType === 2" />
				</view>
			</view>

			<up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
				:loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
				:nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" v-if="userType == 1" />


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		provide
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import RankingList from '@/pages/common/rankingList/index.vue';
	import ServIces from "@/components/Services/services.vue"
	import {
		Client
	} from "@/components/Client/new_file.vue"
	import {
		volunteerinfolist,
	} from "@/api/volunteerDetailsApi/details.js"
	import {
		slideshow
	} from '@/api/home.js'
	import {
		useDict
	} from '@/utils/dict.js';
	

	const total = ref(0)
	const listData = ref([])
	const rightList = ref([])
	const leftList = ref([])
	const list3 = ref([]);
	const ValueZone = ref([]);
	const hotList = ref([])
	const userType = uni.getStorageSync('userType') //读取本地存储

	const {
		lrr_service_category
	} = useDict('lrr_service_category');

	const globalData = ref({
		statusBarHeight: 47,
		navBarHeight: 91
	});
	const data = reactive({
		address: '重庆市',
		queryValue: ''
	})

	// 分页
	const pages = ref({
		current: 1,
		pageSize: 10,
		total: 0,
		serviceCategory: '',
		// appStatus:"2",
	})

	const loadmoreInfo = ref({
		status: 'loadmore',
		loadingText: '努力加载中...',
		loadmoreText: '点击加载更多~',
		nomoreText: '已经到底啦～'
	})

	// 加载更多
	async function handleLoadmore(e) {
		if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
			pages.value.current += 1;
			loadmoreInfo.value.status = 'loading';
			await getList();
		} else {
			loadmoreInfo.value.status = 'nomore';
		}
	}


	const getList = async () => {
		try {
			loadmoreInfo.value.status = 'loading';

			const params = {
			    pageNum: pages.value.current,
			    pageSize: pages.value.pageSize,
			    serviceCategory: pages.value.serviceCategory || '',
				// appStatus:pages.value.appStatus,
			  };
			  console.log('请求参数:', params); // 调试输出
			
			  const res = await volunteerinfolist(params);

			if (!res || !res.rows) {
				return;
			}

			// 判断是否已经到了最后一页
			if (pages.value.current >= Math.ceil(res.total / pages.value.pageSize)) {
				loadmoreInfo.value.status = 'nomore';
			} else {
				loadmoreInfo.value.status = 'loadmore';
			}

			// 将数据分成左右两列
			res.rows.forEach((item, index) => {
				index % 2 !== 0 ? leftList.value.push(item) : rightList.value.push(item);
			});

			pages.value.total = res.total;
		} catch (error) {
			leftList.value = [];
			rightList.value = [];
			loadmoreInfo.value.status = 'loadmore';
			pages.value.total = 0;
			console.error('Error fetching data:', error);
		}
	};


	onReachBottom(() => {
		if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
			pages.value.current = pages.value.current + 1
			loadmoreInfo.value.status = 'nomore'
			getList()
		}
	})



	const getBanners = async () => {
		try {
			const res = await slideshow(7);
			if (res.code === 200 && res.data.picture) {
				list3.value = res.data.picture.split(',');
			}

			const value_res = await slideshow(8);
			if (value_res.code === 200 && value_res.data.picture) {
				ValueZone.value = value_res.data.picture.split(',');
			}

			const hot_res = await slideshow(11);
			if (hot_res.code === 200 && hot_res.data.picture) {
				hotList.value = hot_res.data.picture.split(',');
			}
		} catch (error) {
			console.log('error', error);

		}
	}

	onShow(() => {
		getList()
		getBanners();
		// getListData()
		// 在 App.vue  中初始化 
		uni.getSystemInfo({
			success: (res) => {
				const statusBarHeight = res.statusBarHeight;
				const navBarHeight = res.platform === 'android' ? 48 : 44 + res.statusBarHeight;
				globalData.value = {
					statusBarHeight,
					navBarHeight
				};
				console.log('statusBarHeight', statusBarHeight, navBarHeight);

			}
		});
	})
</script>

<style scoped lang="scss">
	.main-content {
		background: rgba(255, 255, 255, 1);

		.home-banner {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			// background: rgba(255, 255, 255, 1);
			// background-color: #ED806A;
			background-color: rgba(221, 60, 62, 1);
			box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 2.08rpx 4.17rpx rgba(0, 0, 0, 0.05);
			padding: 20rpx 16rpx;
			color: #fff;
			position: fixed;
			top: 0px;
			left: 0px;
			right: 0;
			z-index: 99;
		}

		.home-banner-left {
			display: flex;
			align-items: center;
			width: 30%;
		}

		.home-banner-center {
			flex: 1;
			font-size: 38rpx;
		}

		.home-banner-rigth {
			width: 30%;
		}

		.home-main {
			padding: 12px 16px 0;


		}

		.home-ranking {
			padding: 24rpx 16px;
		}
	}

	.hot-box-title {
		padding: 0 32rpx;
	}

	.hot-swiper {
		padding: 24rpx 32rpx 0;
	}

	.hot-box {
		padding: 24rpx 32rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8rpx;


		.hot-item {
			// padding: 32rpx 16rpx;
			// border-radius: 10rpx;
		}
	}

	.home-grid2 {
		margin-bottom: 32rpx;
		background: #fff;
		padding: 12px 0;
		border-radius: 8px;
	}

	.home-g-bgc {
		background: #f7f7f7;
		padding: 24rpx;
	}
</style>