bigDataApp/pages/expertDiagnosis/wormcase.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="title"></uni-nav-bar>
			</view>
			<view class="particulars">
				<view class="particulars_item" v-for="(item,index) in content" :key="index" @click="introduce(item.id)">
					<view class="imgs">
						<image src="../../static/js/js/layer/theme/default/loading-2.gif" mode="" class="imgbg"></image>
						<image :src="item.img_urls" mode="" class="imgs_img"></image>
					</view>
					<p>{{item.name}}</p>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.particulars {
		width: 100%;
		position: relative;
		top: 88rpx;
		display: flex;
		flex-wrap: wrap;

		.particulars_item {
			width: 50%;
			padding: 20rpx;
			box-sizing: border-box;

			.imgs {
				width: 100%;
				height: 220rpx;
				position: relative;
				.imgbg{
					width: 50%;
					height: 50%;
					position: absolute;
					top: 25%;
					left: 25%;
				}
				.imgs_img{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			p {
				font-size: 24rpx;
			}
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				title: '',
				content: [],
				data: {
					code: null,
					page: null
				}
			}
		},
		methods: {
			async getCooperation(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_search',
					data: {
						code: data.code,
						page: data.page
					}
				})
				this.content = this.content.concat(res.data)
			},
			clickLeft() {
				uni.navigateTo({
					url: "./index"
				})
			},
			introduce(id) {
				uni.navigateTo({
					url: "./introduce?id=" + id + "&title=" + this.title
				})
			}
		},
		onLoad(option) {
			this.title = option.name
			if (option.name == "虫情百科") {
				this.data.code = 2
				this.data.page = 1
				this.getCooperation(this.data)
			} else {
				this.data.code = 1
				this.data.page = 1
				this.getCooperation(this.data)
			}
		},
		onReachBottom() {
			this.data.page++
			this.getCooperation(this.data)
		}
	}
</script>

<style>

</style>