RT_SY/src/pages/expertDiagnosis/expertIntr/ExpertIntr.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>专家诊断</el-breadcrumb-item>
			<el-breadcrumb-item>专家介绍</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="expertDiagnosis_referral_mainBtn_Box">
			<div
				v-for="(item, index) in this.navigationList"
				:key="index"
				:class="[displayType === index ? 'primary' : '']"
				size="mini"
				@click="checkType(index)"
				class="expertDiagnosis_referral_mainBtn"
			>
				<!-- 左 -->
				<div class="expertDiagnosis_referral_mainBtnBox">
					<img :src="item.img" class="expertDiagnosis_referral_mainBtn_img" />
					<div class="expertDiagnosis_referral_mainBtn_centreBox">
						<div class="expertDiagnosis_referral_mainBtn_centreBox_tlt">
							{{ item.title }}
						</div>
						<div class="expertDiagnosis_referral_mainBtn_centreBox_introduce">
							{{ item.details }}
						</div>
					</div>
				</div>

				<!-- 右 -->
				<div class="expertDiagnosis_referral_mainBtn_right">
					<div class="expertDiagnosis_referral_mainBtn_rightNum">
						{{ item.num }}
						<span class="expertDiagnosis_referral_mainBtn_rightNum_unit">{{
							item.unit
						}}</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 合作单位 -->
		<div
			v-show="displayType == '0'"
			class="expertDiagnosis_referral_mainBtn_box"
		>
			<!-- 合作单位 -->
			<div class="expertDiagnosis_referral_units">
				<!-- 标题 -->
				<div class="expertDiagnosis_referral_units_tlt">
					<div class>
						<img
							src="@/assets/images/expertDiagnosis/3.png"
							alt
							class="expertDiagnosis_referral_units_img"
						/>
						<span class="expertDiagnosis_referral_units_tltTxt">合作单位</span>
					</div>

					<!-- 搜索 -->
					<div class="expertDiagnosis_referral_units_search">
						<el-input
							placeholder="搜索关键字"
							v-model="input1"
							class="input-with-select"
						>
							<el-button
								slot="append"
								icon="el-icon-search"
								@click="searchData()"
							></el-button>
						</el-input>
					</div>
				</div>
				<!-- 列表 -->
				<ul class="expertDiagnosis_referral_units_ul" v-if="unitShow">
					<li
						class="expertDiagnosis_referral_units_li"
						v-for="(item, index) in this.dataList"
						:key="item"
					>
						<img
							src="@/assets/images/expertDiagnosis/qiyu/7.png"
							alt
							class="expertDiagnosis_referral_units_liImg"
						/>

						<!-- 内容 -->
						<div class="expertDiagnosis_referral_units_liBox">
							<!-- 左 -->
							<div class="expertDiagnosis_referral_units_liLeft">
								<img
									:src="$host+item.img_urls"
									alt
									class="expertDiagnosis_referral_units_liLeft_img"
								/>
							</div>

							<!-- 右 -->
							<div class="expertDiagnosis_referral_units_liRight">
								<!-- 大标题 -->
								<div class="expertDiagnosis_referral_units_liRight_H1">
									{{ item.name }}
								</div>
								<!-- 小标题 -->
								<div class="expertDiagnosis_referral_units_liRight_H2">
									简介:
								</div>
								<!-- 详情 -->
								<div class="expertDiagnosis_referral_units_liRight_details">
									{{ item.briefing }}
								</div>
							</div>
						</div>
					</li>
				</ul>

				<!-- 暂无数据 -->
				<div class="expertDiagnosis_referral_units_not" v-else>
					<img
						src="@/assets/images/expertDiagnosis/zanwu.png"
						alt
						class="expertDiagnosis_referral_units_notImg"
					/>
				</div>
			</div>
		</div>

		<!-- 合作院校 -->
		<div
			v-show="displayType == '1'"
			class="expertDiagnosis_referral_mainBtn_box"
		>
			<!-- 合作院校 -->
			<div class="expertDiagnosis_referral_units">
				<!-- 标题 -->
				<div class="expertDiagnosis_referral_units_tlt">
					<div class>
						<img
							src="@/assets/images/expertDiagnosis/2.png"
							alt
							class="expertDiagnosis_referral_units_img"
						/>
						<span class="expertDiagnosis_referral_units_tltTxt">合作院校</span>
					</div>

					<!-- 搜索 -->
					<div class="expertDiagnosis_referral_units_search">
						<el-input
							placeholder="搜索关键字"
							v-model="input1"
							class="input-with-select"
						>
							<el-button
								slot="append"
								icon="el-icon-search"
								@click="searchData()"
							></el-button>
						</el-input>
					</div>
				</div>
				<!-- 列表 -->
				<ul class="expertDiagnosis_referral_units_ul" v-if="academyShow">
					<li
						class="expertDiagnosis_referral_units_li"
						v-for="(item, index) in this.dataList"
						:key="item"
					>
						<img
							src="@/assets/images/expertDiagnosis/qiyu/9.png"
							alt
							class="expertDiagnosis_referral_units_liImg"
						/>

						<!-- 内容 -->
						<div class="expertDiagnosis_referral_units_liBox">
							<!-- 左 -->
							<div class="expertDiagnosis_referral_units_liLeft">
								<img
									:src="'api/' + item.img_urls"
									alt
									class="expertDiagnosis_referral_units_liLeft_img"
								/>
							</div>

							<!-- 右 -->
							<div class="expertDiagnosis_referral_units_liRight">
								<!-- 大标题 -->
								<div class="expertDiagnosis_referral_units_liRight_H1">
									{{ item.name }}
								</div>
								<!-- 小标题 -->
								<div class="expertDiagnosis_referral_units_liRight_H2">
									简介:
								</div>
								<!-- 详情 -->
								<div class="expertDiagnosis_referral_units_liRight_details">
									{{ item.briefing }}
								</div>
							</div>
						</div>
					</li>
				</ul>

				<!-- 暂无数据 -->
				<div class="expertDiagnosis_referral_units_not" v-else>
					<img
						src="@/assets/images/expertDiagnosis/zanwu.png"
						alt
						class="expertDiagnosis_referral_units_notImg"
					/>
				</div>
			</div>
		</div>

		<!-- 合作专家 -->
		<div
			v-show="displayType == '2'"
			class="expertDiagnosis_referral_mainBtn_box"
		>
			<!-- 合作专家 -->
			<div class="expertDiagnosis_referral_units">
				<!-- 标题 -->
				<div class="expertDiagnosis_referral_units_tlt">
					<div class>
						<img
							src="@/assets/images/expertDiagnosis/4.png"
							alt
							class="expertDiagnosis_referral_units_img"
						/>
						<span class="expertDiagnosis_referral_units_tltTxt">合作专家</span>
					</div>

					<!-- 搜索 -->
					<div class="expertDiagnosis_referral_units_search">
						<el-input
							placeholder="搜索关键字"
							v-model="input1"
							class="input-with-select"
						>
							<el-button
								slot="append"
								icon="el-icon-search"
								@click="searchData()"
							></el-button>
						</el-input>
					</div>
				</div>
				<!-- 列表 -->
				<ul class="expertDiagnosis_referral_units_ul" v-if="expertShow">
					<li
						class="expertDiagnosis_referral_units_li"
						v-for="(item, index) in this.dataList"
						:key="item"
					>
						<img
							src="@/assets/images/expertDiagnosis/qiyu/8.png"
							alt
							class="expertDiagnosis_referral_units_liImg"
						/>

						<!-- 内容 -->
						<div class="expertDiagnosis_referral_units_liBox">
							<!-- 左 -->
							<div class="expertDiagnosis_referral_units_liLeft">
								<img
									:src="'api/' + item.img_urls"
									alt
									class="expertDiagnosis_referral_units_liLeft_img"
								/>
							</div>

							<!-- 右 -->
							<div class="expertDiagnosis_referral_units_liRight">
								<!-- 大标题 -->
								<div class="expertDiagnosis_referral_units_liRight_H1">
									{{ item.name }}
								</div>
								<!-- 小标题 -->
								<div class="expertDiagnosis_referral_units_liRight_H2">
									简介:
								</div>
								<!-- 详情 -->
								<div class="expertDiagnosis_referral_units_liRight_details">
									{{ item.briefing }}
								</div>
							</div>
						</div>
					</li>
				</ul>

				<!-- 暂无数据 -->
				<div class="expertDiagnosis_referral_units_not" v-else>
					<img
						src="@/assets/images/expertDiagnosis/zanwu.png"
						alt
						class="expertDiagnosis_referral_units_notImg"
					/>
				</div>
			</div>
		</div>

		<!-- 分页 -->
		<el-pagination
			background
			@current-change="pageData($event)"
			layout="prev, pager, next"
			:total="this.nums"
			:current-page.sync="page"
			:page-size="10"
		></el-pagination>
	</div>
</template>

<script>
//自适应
import '@/plugin/flexible.js'

export default {
	data() {
		return {
			page: 1,
			nums: 1, //总数
			displayType: 0,
			navigationList: [
				{
					img: './static/images/expertDiagnosis/qiyu/4.png',
					title: '合作单位',
					details: '中国科学院/省级农科院/省级植保站',
					unit: '所'
				},
				{
					img: './static/images/expertDiagnosis/qiyu/5.png',
					title: '合作院校',
					details: '国家重点高校',
					unit: '所'
				},
				{
					img: './static/images/expertDiagnosis/qiyu/6.png',
					title: '合作专家',
					details: '农业相关博士、教授、研究员',
					unit: '人'
				}
			],
			dataList: [], //列表数据
			input1: '', //合作单位搜索框
			unitShow: true, //合作单位数据显示
			academyShow: true, //合作院校数据显示
			expertShow: true //合作专家数据显示
		}
	},
	methods: {
		// 导航点击切换事件
		checkType(i) {
			this.displayType = i
			this.input1 = ''
			this.listData(i + 1, 1)
		},

		// 单位、院校、专家、总数接口
		totality() {
			this.$axios({
				url: 'api/api_gateway?method=pest.pests.pests_expert_total',
				method: 'post'
			})
				.then((res) => {
					var list = this.navigationList
					var num = res.data.data
					let arr = Object.entries(num)
					for (let i = 0; i < list.length; i++) {
						list[i].num = arr[i][1]
					}
					this.navigationList = []
					this.navigationList = list
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 单位、院校、专家、列表接口
		listData(num, page) {
			let postData = this.qs.stringify({
				code: num,
				page: page
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_expert',
				data: postData
			})
				.then((res) => {
					var num = res.data.data.nums
					var length = res.data.data.length
					var num = parseInt(res.data.data.nums)
					this.nums = num
					if (length !== 0) {
						this.dataList = res.data.data.data
					} else if (length == 0) {
						if (this.displayType == '0') {
							//合作单位
							this.unitShow = false
						} else if (this.displayType == '1') {
							//合作院校
							this.academyShow = false
						} else if (this.displayType == '2') {
							// 合作专家
							this.expertShow = false
						}
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 搜索
		searchData() {
			var code = this.displayType + 1
			var name = this.input1
			let postData = this.qs.stringify({
				code: code,
				name: name
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_expert_search',
				data: postData
			})
				.then((res) => {
					console.log(res.data.data)
					var num = res.data.data.nums
					if (num !== 0) {
						this.dataList = res.data.data.data
					} else if (num == 0) {
						if (this.displayType == '0') {
							//合作单位
							this.unitShow = false
						} else if (this.displayType == '1') {
							//合作院校
							this.academyShow = false
						} else if (this.displayType == '2') {
							// 合作专家
							this.expertShow = false
						}
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//分页点击
		pageData(e) {
			var that = this
			// 判断当前是意见反馈还是补充审核
			var num = this.displayType + 1
			this.input1 = ''
			this.listData(num, e)
		}
	},
	mounted() {
		this.totality() //单位、院校、专家总数据接口
		this.listData(1, 1) //单位、院校、专家、列表接口
	}
}
</script>

<style>
/* .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
} */
</style>





<style lang='less' scoped>
.expertDiagnosis_referral_mainBtn_Box {
	display: flex;
	justify-content: space-around;

	height: 85px;
	.expertDiagnosis_referral_mainBtn {
		// border: 1px solid #000;
		border-radius: 5px;
		// width: 32%;
		// width: 430px;
		width: 500px;
		display: flex;
		justify-content: space-between;
		padding: 15px 0 15px 0;
		background: #fff;

		.expertDiagnosis_referral_mainBtnBox {
			display: flex;
			margin: 0 0 0 35px;
			// border: 1px solid #000;

			.expertDiagnosis_referral_mainBtn_img {
				width: 51px;
				height: 55px;
			}

			.expertDiagnosis_referral_mainBtn_centreBox {
				margin: 0 0 0 12px;
				// border: 1px solid #000;
				line-height: 22px;

				.expertDiagnosis_referral_mainBtn_centreBox_tlt {
					font-size: 15px;
					font-weight: 550;
				}
				.expertDiagnosis_referral_mainBtn_centreBox_introduce {
					font-size: 14px;
					font-weight: 550;
					color: #adadad;
				}
			}
		}

		.expertDiagnosis_referral_mainBtn_right {
			margin: 0 35px 0 0;
			// border: 1px solid #000;
			.expertDiagnosis_referral_mainBtn_rightNum {
				font-size: 42px;
				color: #9a9a9a;
				.expertDiagnosis_referral_mainBtn_rightNum_unit {
					font-size: 15px;
				}
			}
		}
	}
}

// 测试上传
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
// 测试上传

.primary {
	// box-shadow: -3px 8px 21px -6px #7df1e1,
	// 	50px 0 48px 34px rgba(255, 255, 255, 0.5);
	box-shadow: 0px 1px 12px 3px #7df1e1,
		50px 0 48px 34px rgba(255, 255, 255, 0.5);
}

.expertDiagnosis_referral_mainBtn_box {
	width: 100%;
	margin: 20px auto;

	//合作单位
	.expertDiagnosis_referral_units {
		.expertDiagnosis_referral_units_tlt {
			display: flex;
			justify-content: space-between;
			.expertDiagnosis_referral_units_img {
				width: 18px;
				height: 19px;
			}
			.expertDiagnosis_referral_units_tltTxt {
				color: #6b6b6b;
				font-size: 17px;
				font-weight: 550;
				vertical-align: top;
				margin-left: 5px;
			}

			.expertDiagnosis_referral_units_search {
				width: 15%;
			}
		}
		//列表
		.expertDiagnosis_referral_units_ul {
			// border: 1px solid #000;
			width: 100%;
			margin: 20px 0 0 0;
			display: flex;
			flex-wrap: wrap;

			.expertDiagnosis_referral_units_li {
				// border: 1px solid rgb(221, 37, 37);
				width: 30%;
				position: relative;
				// border: 1px solid rgb(19, 143, 143);
				border-radius: 10px;
				background: #fff;
				margin: 15px 0 0 40px;
				// 图片
				.expertDiagnosis_referral_units_liImg {
					position: absolute;
					left: -9px;
					top: -7px;
				}
				// 内容
				.expertDiagnosis_referral_units_liBox {
					width: 80%;
					height: 140px;
					margin: 39px 0 39px 47px;
					// border: 1px solid #000;
					display: flex;
					// 左
					.expertDiagnosis_referral_units_liLeft {
						width: 35%;

						.expertDiagnosis_referral_units_liLeft_img {
							height: 100%;
							border: 1px solid rgb(192, 192, 192);
						}
					}
					// 右
					.expertDiagnosis_referral_units_liRight {
						// border: 1px solid #0000;
						width: 60%;
						margin: 0 0 0 20px;
						.expertDiagnosis_referral_units_liRight_H1 {
							border-bottom: 2px solid #fbb53c;
							// width: 40%;
							font-size: 18px;
							font-weight: 550;
						}
						.expertDiagnosis_referral_units_liRight_H2 {
							font-size: 13px;
							font-weight: 550;
							line-height: 35px;
						}
						.expertDiagnosis_referral_units_liRight_details {
							color: #a29f9f;
							line-height: 20px;
							font-weight: 550;
						}
					}
				}
			}
		}

		//暂无数据
		.expertDiagnosis_referral_units_not {
			width: 272px;
			margin: 0 auto;
			.expertDiagnosis_referral_units_notImg {
			}
		}
	}
}
</style>