leromro-mini/pages/index.vue

<template>
	<view class="main-content ">
		<view class="home-banner">
			<view class="home-banner-left">
				<img src="/static/serverImg/home/address.png" alt=""
					style="width: 41.67rpx;height:  41.67rpx;margin-right: 8rpx;">
				<text>{{ data.address }}</text>
			</view>
			<view>
				<up-icon name="bell" :size="25" color="rgba(46, 46, 46, 1)"></up-icon>
				<!-- <img src="/static/serverImg/home/message.png" alt="" style="width: 50rpx;height: 50rpx;"> -->
			</view>
		</view>
		<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">
			<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-grid">
			<view class="serve-title hot-box-title">超值专区</view>
			<view class="hot-swiper">
					<up-swiper :list="ValueZone" indicator indicatorMode="line" circular></up-swiper>
			</view>
		</view>

		<view class="home-ranking">
			<ServIces :leftList="leftList" :rightList="rightList" v-if="userType == 1"></ServIces>
			<RankingList v-if="userType === 2" />
		</view>
		
		<up-loadmore
			style="margin-top: 40rpx;"
			:status="loadmoreInfo.status" 
			:loadmoreText="loadmoreInfo.loadingText" 
			:loadingText="loadmoreInfo.loadmoreText" 
			:nomoreText="loadmoreInfo.nomoreText"
			@loadmore="handleLoadmore"
		/>


	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from 'vue';
import {
	onLoad,
	onShow
} 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'

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

const data = reactive({
	address: '重庆市永川区',
	queryValue: ''
})
const list3 = ref([]);
const ValueZone = ref([]);
const hotList = ref([])
	
	// 分页
	const pages = ref({
		current: 1,
		pageSize: 10,
		total: 0
	})
	
	const loadmoreInfo = ref({
		status: 'loadmore',
		loadingText: '努力加载中...',
		loadmoreText: '点击加载更多~',
		nomoreText: '已经到底啦～'
	})

	const getList = async () => {
		try {
			loadmoreInfo.value.status = 'loading'
			
			const res = await volunteerinfolist();
			
			
			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'
			}
			
			
			listData.value.push(...res.rows)
			

			let leftArr = [];
			let rightArr = [];

			listData.value.forEach((item, index) => {
				index % 2 !== 0 ? leftArr.push(item) : rightArr.push(item);
			});

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



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();
})
</script>

<style scoped lang="scss">
.main-content {
	.home-banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(255, 255, 255, 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;
	}

	.home-banner-left {
		display: flex;
		align-items: center;

	}

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

		.custom-swiper {}

		.home-grid {
			margin-bottom: 32px;
		}

	}

	.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;
	}
}
</style>