bigDataApp/pages/expertDiagnosis/index.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回"  title="专家诊断"></uni-nav-bar>
		</view>
		<image src="../../static/image/expertDiagnosis/05571341dbb0771b23d0b271764ac2e.png" class="expertimages"></image>
		<view class="expert_details">
			<view class="details_item" @click="worm">
				<image src="../../static/image/expertDiagnosis/6612b1293fd1f45dd7ce6269a954999.png" ></image>
				<p>虫情百科</p>
			</view>
			<view class="details_item" @click="virus">
				<image src="../../static/image/expertDiagnosis/7f34f4eeba4d00819369cfa1b5ecce8.png" ></image>
				<p>病毒百科</p>
			</view>
			<view class="details_item" @click="exchange">
				<image src="../../static/image/expertDiagnosis/aa6a168b9fb72b62b687a2debc04a9f.png" ></image>
				<p>交流圈</p>
			</view>
		</view>
		<view class="cooperation">
			<view class="cooperation_item">
				<p class="cooperation_item_title">合作单位</p>
				<view class="zooid">
					<view class="zooid_item" v-for="(item,index) in cooperation_unit" :key="index">
						<image :src="item.img_urls" mode=""></image>
						<p>{{item.name}}</p>
					</view>
				</view>
			</view>
			<view class="cooperation_item">
				<p class="cooperation_item_title">合作院校</p>
				<view class="zooid">
					<view class="zooid_item" v-for="(item,index) in cooperation_academy" :key="index">
						<image :src="item.img_urls" mode=""></image>
						<p>{{item.name}}</p>
					</view>
				</view>
			</view>
			<view class="cooperation_item">
				<p class="cooperation_item_title">合作专家</p>
				<view class="zooid">
					<view class="zooid_item" v-for="(item,index) in cooperation_specialist" :key="index">
						<image :src="item.img_urls" mode=""></image>
						<p>{{item.name}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cooperation_academy:[],//合作院校信息
				cooperation_unit:[],//合作单位信息
				cooperation_specialist :[],//合作专家信息
			}
		},
		methods: {
			async getCooperation(code) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_expert',
					data:{
						code:code
					}
				})
				console.log(res)
				if(code==1){
					this.cooperation_unit=res.data
				}else if(code==2){
					this.cooperation_academy=res.data
				}else if(code==3){
					this.cooperation_specialist=res.data
				}
			},
			clickLeft(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			worm(){
				uni.navigateTo({
					url:"./wormcase?name="+'虫情百科',
				});
			},
			virus(){
				uni.navigateTo({
					url:"./wormcase?name="+'病毒百科',
				});
			},
			exchange(){
				uni.navigateTo({
					url:"./exchangeShare"
				});
			}
		},
		onLoad(){
			this.getCooperation(1)
			this.getCooperation(2)
			this.getCooperation(3)
		}
	}
</script>

<style lang="scss">
.expertimages{
	width: 100%;
	height: 154rpx;
	margin-top: 88rpx;
}
.expert_details{
	width: 100%;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	margin: 20rpx 0 30rpx;
	.details_item{
		width: 20%;
		padding: 10rpx 20rpx;
		text-align: center;
		font-size: 24rpx;
		image{
			width: 70%;
			height: 84rpx;
		}
	}
}
.cooperation{
		width: 100%;
		margin: 20rpx 0 60rpx;
		.cooperation_item{
			width: 95%;
			margin: 20rpx auto;
			.cooperation_item_title{
				border-left: 8rpx solid #18B566;
				text-indent: 16rpx;
			}
			.zooid{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.zooid_item{
					width: 22%;
					margin: 10rpx;
					image{
						width: 100%;
						height: 154rpx;
					}
					p{
						font-size: 24rpx;
						text-align: center;
						margin: 10rpx 0;
					}
				}
			}
		}
	}
</style>