pingpu_H5/pages/worm/image.vue

<template>
	<!-- 虫情监测查看图片 -->
	<view class="ui-card px-13">
		<!-- 选择时间 -->
		<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-" @change="changeSearchTime" />
		<!-- 选择时间end -->
		<!-- 图片列表 -->
		<view class="row wrap">
			<block v-for="(item,index) in imageList" :key="index">
				<view class="worm-img" @click="previewImage(index)">
					<image class="pic" mode="aspectFill" :src="item.indentify_photo"></image>
					<view class="time">{{item.addtime | timeFrom}}</view>
				</view>
			</block>
		</view>
		<!-- 图片列表end -->
		<ui-empty v-if="imageList.length==0"></ui-empty>
	</view>
</template>

<script>
	import {
		getWormImageList
	} from '@/api/worm.js'
	import {
		timeFrame,
		timeFrameText,
		dateToUnix
	} from '@/utils/utils.js'
	// 虫情监测查看图片逻辑
	export default {
		data() {
			return {
				// 搜索条件
				params: {
					time_begin: timeFrame('start'), // 开始时间
					time_end: timeFrame('end'), // 结束时间
					device_id: '', //设备号
					page: 1,
					page_number: 20,
				},
				searchTime: [timeFrameText('start'), timeFrameText('end')],
				imageList: [], // 图片列表
			}
		},
		onLoad(options) {
			this.params.device_id = options.id;
			this.getImageList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.imageList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getImageList();
		},
		methods: {
			// 加载图片列表
			async getImageList() {
				const {
					data,
					num
				} = await getWormImageList(this.params);

				this.imageList = [...this.imageList, ...data];
				this.total = num ?? 0;
			},
			// 选择时间
			changeSearchTime(time) {
				this.params.time_begin = time[0] ? dateToUnix(time[0]) : timeFrame('start');
				this.params.time_end = time[0] ? dateToUnix(time[1]) : timeFrame('end');
				this.searchTime = time;
				this.params.page = 1;
				this.imageList=[];
				this.getImageList();
			},
			// 预览图片
			previewImage(index) {
				let imgList = this.imageList.map(item => item.indentify_photo);
				uni.previewImage({
					current: index,
					urls: imgList
				});
			},
		}
	}
</script>

<style lang="scss">
	.worm-img {
		width: 313rpx;
		height: 280rpx;
		margin-top: 24rpx;
		margin-right: 24rpx;


		&:nth-child(2n) {
			margin-right: 0;
		}

		.pic {
			display: block;
			width: 314rpx;
			height: 236rpx;
			background-color: #f3f5f9;
			border-radius: 4rpx;
		}

		.time {
			height: 28rpx;
			margin-top: 18rpx;
			font-size: 20rpx;
			font-weight: normal;
			color: #999999;
			line-height: 28rpx;
		}

	}
</style>