uniProject/pages/index/index.vue

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

		<MtaNavbar></MtaNavbar>

		<view class="index-swiper-box">
			<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 class="index-content-box">
			<listTwoVue v-for="item in data.xinwen" :key="item.id" :data="item" @click.native="handleClickXinwen(item)"
				class=index-xinwen-box></listTwoVue>
			<view class="index-more-btn" v-if="data.xinwenTotal>3">
				<text @click="handleXinwenGengDuo">更多</text>
				<icon @click="handleXinwenGengDuo"></icon>
			</view>
		</view>
		<view class="index-background-box" v-if="data.gonggao.length>0">
			<view class="index-content-box">
				<view class="tab-item"><icon class="tzgg-icon"></icon><text>通知公告</text></view>
				<view class="index-list-item" v-for="item in data.gonggao" :key="item.id" @click="handleClickGonggao(item)">
					<view class="list-createTime">{{item.createTime}}</view>
					<view class="list-title">{{item.title}}</view>
				</view>
				<view class="index-more-btn more-btn-top" v-if="data.xiaowuTotal>5">
					<text @click="getTongzhigengduo">更多</text>
					<icon @click="getTongzhigengduo"></icon>
				</view>
			</view>
		</view>
		<view class="index-background-box" v-if="data.xiaowu.length>0">
			<view class="index-content-box">
			<view class="tab-item"><icon class="xwgk-icon"></icon><text>校务公开</text></view>
			<view class="index-list-item" v-for="item in data.xiaowu" :key="item.id" @click="handleClickXiaowu(item)">
				<view class="list-createTime">{{item.createTime}}</view>
				<view class="list-title">{{item.title}}</view>
			</view>
			<view class="index-more-btn more-btn-top" v-if="data.xiaowuTotal>5">
				<text @click="getXiaowuGengduo">更多</text>
				<icon @click="getXiaowuGengduo"></icon></view>
			</view>
		</view>

		<!-- 招生就业 -->
		<view class="index-content-box zsjy-box">
			<view class="tab-item zsjy-tab-item"><icon class="zsjy-icon"></icon><text>招生就业</text></view>
			<view class="wnlqfs-box" @click="goFun('wnlqfs')">
				<view class="zsjy-text">往年录取分数</view>
			</view>
			<view class="xqhz-box" @click="goFun('xwhz')">
				<view class="zsjy-text">校企合作</view>
			</view>
		</view>

		<MtaFooter></MtaFooter>

		<!-- 底部导航 -->
		<!-- <MtaTabBar></MtaTabBar> -->
		<view :class="indexMenu" @click="menuClick">
			<view :class="indexList">
				<view class="index-text-btn" @click="goFun('zsrx')">招生<br/>热线</view>
				<view class="index-text-btn" @click="goFun('ewm')">首页<br/>二维码</view>
			</view>
		</view>

	</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 MtaTabBar from "@/components/MtaTabBar/MtaTabBar.vue";
	import MtaFooter from "@/components/MtaFooter.vue"
	import default2 from '@/static/images/common/news-bj2.png'

	let indexMenu = ref('index-menu-btn');
	let indexList = ref('index-text-list-hiden');
	const banners = ref('');
	const data = reactive({
		xinwen: [],
		xinwenTotal: 0,
		gonggao: [],
		gonggaoTotal: 0,
		xiaowu: [],
		xiaowuTotal: 0,

		isGonggao: true,
	})

	onLoad(() => {
		pageInit();
	})
	
	function menuClick(){
		if(indexMenu.value==='index-menu-btn'){
			indexMenu.value='index-close-btn'
			indexList.value='index-text-list-show'
		}else{
			indexMenu.value='index-menu-btn'
			indexList.value='index-text-list-hiden'
		}
	}
	
	function goFun(code) {
		if (code == 'wnlqfs') {
			uni.navigateTo({
				url: '/pages/zsjyWangnianluqufenshu/zsjyWangnianluqufenshu'
			})
		}else if (code == 'zsrx') {
			uni.navigateTo({
				url: '/pages/zhaoshengrexian/zhaoshengrexian'
			})
		}else if (code == 'ewm') {
			uni.navigateTo({
				url: '/pages/erweima/erweima'
			})
		}else {
			uni.navigateTo({
				url: '/pages/zsjyXiaoqihezuo/zsjyXiaoqihezuo'
			})
		}
	}

	function handleClickXinwen(item) {
		uni.navigateTo({
			url:`/pages/xydtXueyuanxinwenInfo/xydtXueyuanxinwenInfo?id=${item.id}`
		})
	}

	function getXiaowuGengduo() {
		uni.navigateTo({
			url: `/pages/xydtXiaowugongkai/xydtXiaowugongkai`
		})
	}
	
	function handleClickGonggao(item) {
		uni.navigateTo({
			url:`/pages/xydtTongzhigonggaoInfo/xydtTongzhigonggaoInfo?id=${item.id}`
		})
	}

	function handleClickXiaowu(item) {
		uni.navigateTo({
			url: `/pages/xydtXiaowugongkaiInfo/xydtXiaowugongkaiInfo?id=${item.id}`
		})
	}

	function getTongzhigengduo() {
		uni.navigateTo({
			url: `/pages/xydtTongzhigonggao/xydtTongzhigonggao`
		})
	}

	function handleXinwenGengDuo() {
		uni.navigateTo({
			url: `/pages/xydtXueyuanxingwen/xydtXueyuanxingwen`
		})
	}

	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>