ks-app-employment-service/packageB/institution/trainingInstitutionDetail.vue

<template>
	<div class="app-box">
		<div class="con-box">
			<div class="cards">
				<div class="cardHead">
					<div class="cardHeadLeft">
						<div class="cardTitle">{{trainOrgan.organName}}</div>
					</div>
					<div class="rightBtn" @click="handleOperation()"></div>
				</div>
				<div class="heng"></div>
				<div class="cardCon">
					<div class="conten">机构联系人：{{trainOrgan.contactName}}</div>
					<div class="conten">联系方式：{{trainOrgan.contactPhone}}</div>
					<div class="conten">机构地址：{{trainOrgan.address}}</div>
				</div>
			</div>
			<div style="width: 100%;margin-bottom: 40rpx;">
				<div class="title">
					<div></div>
					<div>课程介绍</div>
				</div>
				<div class="kcCon">
					<div class="kcIntroduction" v-for="(item, index) in courses" :key="index">{{item}}</div>
					<div v-if="courses.length==0" style="text-align: center;line-height: 100rpx;">暂无数据</div>
				</div>
			</div>
			<div style="width: 100%;margin-bottom: 40rpx;">
				<div class="title">
					<div></div>
					<div>师资团队</div>
				</div>
				<div class="kcCon">
					<div class="faculty" v-for="(item, index) in teams" :key = "index">
						<div class="facultyHead">{{item.tramName}}</div>
						<div class="facultyCon">老师介绍：{{item.tramContent}}</div>
					</div>
					<div v-if="teams.length==0" style="text-align: center;line-height: 100rpx;">暂无数据</div>
				</div>
			</div>
			<div style="width: 100%;margin-bottom: 30rpx;">
				<div class="title">
					<div></div>
					<div>资质证书</div>
				</div>
				<div class="kcCon">
					<div v-for="(item, index) in certs":key = "index" style="width: 100%;">
						<div v-for="(url, index2) in item" :key = "index2" style="width: 100%;">
							<image :src="url" mode="" style="width: 100%;"></image>
						</div>
					</div>
					<div v-if="certs.length==0" style="text-align: center;line-height: 100rpx;">暂无数据</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack,urls } = inject('globalFunction');
import config from "@/config.js"
const trainOrgan = ref({});
const courses = ref([]);
const certs = ref([]);
const certs2 = ref([]);
const teams=ref([])
const certIndex=ref(1)
const organId=ref('')
const Authorization=ref('')
onLoad((options) => {
	organId.value=options.organId
});
onShow(()=>{
	Authorization.value=uni.getStorageSync('Padmin-Token')||''
	let params={
		organId:organId.value
	}
	$api.myRequest('/train/public/train/organ/model', params).then((resData) => {
		if(resData.code==200){
			trainOrgan.value = (resData.data ? resData.data :{});
			courses.value = (resData ? (resData.data.course ? (resData.data.course + "").split(",") :[]) :[]);
			certs2.value = (resData ? JSON.parse(resData.data.zhengshu):[]);
			list()
		}
		
	});
})
function list(){
	$api.myRequest('/train/public/train/organ/team/list', {organId:organId.value}).then((res) => {
		if(res.code==200){
			teams.value=res.data;
			for(var i =0;i<certs2.value.length;i++){
			  certs2.value[i].url =config.LCBaseUrl + "/file/minio" + certs2.value[i].url;
			}
			var certsArr = [];var flag = 0;
			for(var i =0;i<certs2.value.length;i++){
			  flag ++
			  certsArr.push(certs2.value[i])
			  if(flag == 3){
			    var arrs = [];
			    for(var j =0;j<3;j++){
			      arrs.push(certsArr[j].url)
			    }
			    certs.value.push(arrs);
			    certsArr = [];
			    flag = 0;
			  }else{
			    if(i == certs2.value.length -1){
			      var arrs = [];
			      for(var j =0;j<certsArr.length;j++){
			        arrs.push(certsArr[j].url)
			      }
			      certs.value.push(arrs);
			    }
			  }
			}
		}
	})
}
</script>

<style lang="stylus" scoped>
	.app-box{
		width: 100%;
		height: 100vh;
		position: relative;
		.con-box{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top:0;
			z-index: 10;
			padding: 20rpx 28rpx;
			box-sizing: border-box;
			overflow: hidden;
			.cards{
				width: 100%;
				min-height: 260rpx;
				height: auto;
				background: linear-gradient(0deg, #D4E3FE 0%, #EBF1FF 100%);
				border-radius: 12rpx;
				border: 2px solid #EDF5FF;
				margin-bottom: 40rpx;
				padding: 20rpx 30rpx 0;
				box-sizing: border-box
				.cardHead{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cardHeadLeft{
						display: flex;
						align-items: center
						width: 100%;
						.cardTitle{
							font-weight: bold;
							font-size: 32rpx;
							color: #0069CB;
							max-width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.titleType{
							border-radius: 4px;
							font-size: 22rpx;
							color: #157EFF;
							width: 100rpx;
							height: 38rpx;
							text-align: center;
							line-height: 38rpx;
							margin-left: 10rpx;
						}
						
					}
					
				}
				.heng{
					width: 30%;
					height: 4rpx;
					background: linear-gradient(88deg, #015EEA 0%, #00C0FA 100%);
					margin: 10rpx 0 20rpx;
				}
				.cardCon{
					display: flex;
					flex-wrap: wrap;
					.conten{
						width: 100%;
						font-size: 26rpx;
						color: #666666;
						display: flex;
						align-items: center
						margin-bottom: 10rpx;
					}
					.status-tags{
						display: flex;
						align-items: center;
					}
				}
				.flooter{
					border-top: 1px solid #ccc;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					view{
						font-size: 28rpx;
						margin-left: 30rpx;
						color: #2175F3;
						padding-top: 14rpx;
					}
				}
			}
		}
	}
	.title{
		width: 100%
		display: flex
		align-items: center
		font-size: 32rpx
		font-weight: 600
	}
	.title>view:first-child{
		width: 10rpx;
		height: 46rpx;
		background-color: #FD7565;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}
	.kcCon{
		margin-top: 20rpx;
		width: 100%
	}
	.kcIntroduction{
		background: rgba(20,136,245,0.1);
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.faculty{
		border: 1px solid #ddd;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		.facultyHead{
			width: 100%;
			height: 80rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 30rpx;
			background: linear-gradient(88deg, #3E8BFF 0%, #0DB5FB 100%);
			display: flex;
			align-items: center
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		.facultyCon{
			font-size: 26rpx;
			color: #666666;
			padding: 20rpx 0;
			box-sizing: border-box;
		}
	}
</style>