uniProject/pages/index/index.vue

<template>
	<view class="lli-index-page">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000">
				<swiper-item v-for="item in banners" :key="item.id" @click="handleBannerSelect(item)">
					<image :src="item.pic"></image>
				</swiper-item>
			</swiper>
		</view>
		<view>
			新闻：{{data.xinwen}}
		</view>
		<br />
		<view>
			公告： {{data.gonggao}}
		</view>
		<br />
		<view>
			校务: {{data.xiaowu}}
		</view>
		
		<view @click="getXiaowu()"> 获取校务数据 </view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import * as httpApi from "@/api/common.js"
	const banners = ref('');
	const data = reactive({
		xinwen: [],
		xinwenTotal: 0,
		gonggao: [],
		gonggaoTotal: 0,
		xiaowu: [],
		xiaowuTotal:0,
		
		isGonggao: true,
	})

	onLoad(() => {
		pageInit();
	})

	function handleBannerSelect(item) {
		if (item.url) {
			window.location.href = item.url;
		}
	}
	
	function changeGonggao() {
		if (this.isGonggao) {
			return true
		}
		data.isGonggao = true;
		getGonggao()
	}
	
	function changeXiaowu() {
		if (!this.isGonggao) {
			return true
		}
		data.isGonggao = false;
		getXiaowu()
	}
	
	function getGonggao() {
		httpApi.getCommonXinwenTongzhiList().then(res => {
			data.gonggao = res.data.data;
			data.gonggaoTotal = res.data.total;
		})
	}
	
	function getXiaowu() {
		httpApi.getCommonXinwenXiaowuList().then(res => {
			data.xiaowu = res.data.data;
			data.xiaowuTotal = res.data.total;
		})
	}
	

	function pageInit() {
		Promise.all([
			httpApi.getCommonBanners({
				size: 1000
			}),
			httpApi.getCommonXinwenYuanxiaoList({
				page: 1,
				size: 3
			}),
			httpApi.getCommonXinwenTongzhiList({
				page: 1,
				size: 5
			})
		]).then(([res1, res2, res3]) => {
			banners.value = res1.data.data;
			
			data.xinwen = res2.data.data;
			data.xinwenTotal = res2.data.total;
			
			data.gonggao = res3.data.data;
			data.gonggaoTotal = res3.data.total;
		})
	}
</script>

<style lang="scss">
</style>