bigDataApp/pages/expertDiagnosis/index.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<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>
	</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>