uniProject/pages/index/index.vue

<template>
	<view class="lli-index-page">

		<MtaNavbar></MtaNavbar>

		<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>
			<listTwoVue v-for="item in data.xinwen" :key="item.id" :data="item" @click.native="handleClickXinwen(item)"
				class=index-xinwen-box></listTwoVue>
			<view v-if="data.xinwenTotal>3" @click="handleXinwenGengDuo">更多</view>
		</view>
		<br />
		<view>
			<view>通知公告</view>
			<view v-for="item in data.gonggao" :key="item.id" @click="handleClickGonggao(item)">
				{{item}}
			</view>
			<view v-if="data.xiaowuTotal>5" @click="getXinwenGengduo">更多</view>
		</view>
		<br />
		<view>
			校务: {{data.xiaowu}}
			<view>校务公开</view>
			<view v-for="item in data.xiaowu" :key="item.id" @click="handleClickXiaowu(item)">
				{{item}}
			</view>
			<view v-if="data.xiaowuTotal>5" @click="getXiaowuGengduo">更多</view>
		</view>

		<!-- 招生就业 -->
		<view class="website-zsjy-title">
			<p>招生就业</p>
		</view>
		<view class="zsjy-box">
			<view class="wnlqfs-box" @click="goFun('wnlqfs')">
				<p>往年录取分数</p>
			</view>
			<view class="xqhz-box" @click="goFun('xwhz')">
				<p>校企合作</p>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<MtaTabBarVue></MtaTabBarVue>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import * as httpApi from "@/api/common.js"
	import MtaNavbar from "@/components/MtaNavbar/MtaNavbar.vue";
	import listTwoVue from "@/components/MtaCard/listTwo.vue";
	import MtaTabBarVue from "@/components/MtaTabBar/MtaTabBar.vue";


	const banners = ref('');
	const data = reactive({
		xinwen: [],
		xinwenTotal: 0,
		gonggao: [],
		gonggaoTotal: 0,
		xiaowu: [],
		xiaowuTotal: 0,

		isGonggao: true,
	})

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

	function getXiaowuGengduo() {}

	function handleClickXiaowu() {}

	function getXinwenGengduo() {}

	function handleXinwenGengDuo() {}

	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
			}),
			httpApi.getCommonXinwenXiaowuList({
				page: 1,
				size: 5
			})
		]).then(([res1, res2, res3, res4]) => {
			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;

			data.xiaowu = res4.data.data;
			data.xiaowuTotal = res4.data.total;
		})
	}
</script>

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