uniProject/pages/zsjyShengxue/zsjyShengxue.vue

<template>
	<view class="dljt-page-box">
		<MtaNavbar></MtaNavbar>
		<view class="dljt-container-box">
			<view class="dljt-page-title">机构设置</view>
			<view class="dljt-page-content-box">
				<!-- 导航 -->
				<view class="dljt-breadcrumb-box">
					<view class="breadcrumb-text" @click="handleGo('shouye')">首页</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-text">招生就业</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-active">升学</view>
				</view>
				<view class="dljt-detail-box">
					<view class="dljt-editor-box">
						<view class="dljt-classify-box">
							<view class="classify-item" :class="{active: data.activeId == item.id}" v-for="item in data.list" :key="item.title" @click="handleSelect(item)">{{item.title}}</view>
						</view>
						<!-- 富文本 -->
						<MtaMpHtml class="dljt-editor-box" :content="data.activeData.content" ></MtaMpHtml>
						
						<!-- 链接 -->
						<view class="dljt-link-box" v-if="isHasLink(data.activeData.link)">
							<view class="link-item-box" v-for="cItem in data.activeData.link">
								<icon></icon>
								<a :href="cItem.url">{{cItem.name}}</a>
								<a class="link-text" :href="cItem.url">{{cItem.url}}</a>
							</view>
						</view>
						<!-- table -->
						<view class="dljt-table-box" v-if="isHasLink(data.activeData.ziliao)">
							<view class="table-th-row">
								<view style="width: 15%">序号</view>
								<view style="width: 60%">资料名称</view>
								<view style="width: 25%">下载</view>
							</view>
							<view class="table-td-row" v-for="(ccIte,index) in data.activeData.ziliao">
								<view style="width: 15%" class="item-center"><view>{{index+1}}</view></view>
								<view style="width: 60%"><view>{{ccIte.name}}</view></view>
								<view style="width: 25%">
									<a class="table-btn" @click="handleDownFile(ccIte)" >文件下载</a>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<MtaFooter></MtaFooter>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import * as httpApi from "@/api/common.js"
	import MtaFooter from "@/components/MtaFooter.vue"
	import MtaMpHtml from "@/components/MTAMpHtml/MtaMpHtml.vue"

	const data = reactive({
		list: null,
		activeId: null,
		activeData: {}
	})

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

	function handleGo(code) {
		if (code == 'shouye') {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	}

	function handleSelect(item) {
		data.activeId = item.id;
		httpApi.getCommonZSJYZhuanyeInfo({id: data.activeId}).then(res => {
			data.activeData = res.data;
		})
	}
	
	function handleDownFile(ccite) {
		window.location.href = ccite.url;
	}

  function isHasLink(list) {
    if (!list) {
      return false;
    }
    if (list.length>1) {
      return true
    }
    if (list.length == 0 ) {
      return false
    }
    if (list.length == 1 && list[0].name && list[0].url) {
      return true
    }

    return false
  }

	
	function pageInit() {
		httpApi.getCommonZSJYShengxueList({page:data.page,size:data.size}).then(res => {
			data.list = res.data.data;
			data.total = res.data.total;
			data.activeId = data.list[0].id;
			httpApi.getCommonZSJYZhuanyeInfo({id: data.activeId}).then(res => {
				data.activeData = res.data;
			})
		})
	}
</script>

<style>

</style>