pingpu_H5/pages/traplamp/detail/detail.vue

<template>
	<!-- 图片列表 -->
	<view class="lamp-panel">
		<!-- 选择时间范围 -->
		<view class="mb">
			<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-"
				@change="changeSearchTime" :clear-icon="false"/>
		</view>
		<view class="lamp-list" v-if="lampList.length > 0">
			<!-- 图片列表 -->
			<block v-for="(item,index) in lampList" :key="index">
				<view class="lamp-item" @click="openlampDetails(item.img_url)">
					<image class="pic" mode="aspectFill" :src="item.thumb_url">
					</image>
					<view class="row-between p-10">
						<text class="text">{{new Date(item.create_time).getTime()/1000 | timeFrom}}</text>
					</view>
				</view>
			</block>
			<!-- 图片列表end -->
		</view>
		<ui-empty v-else></ui-empty>
		<!-- 图片放大 -->
		<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="popup-content" style="width: 100vw;">
				<image class="pic" mode="widthFix" :src="img_url">
				</image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getDetail
	} from '@/api/traplamp.js';
	import {
		timeFormat,
		timeFrame,
		timeFrameText
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				params: {
					start_time: timeFormat(timeFrame('start')), // 开始时间
					end_time: timeFormat(timeFrame('end')), // 结束时间
					device_id: '', //设备号
					page: 1,
					page_size: 10,
				},
				// 图片列表
				lampList: [],
				timeVal: timeFormat(timeFrame('start')).slice(-8), // 存当前时分秒
				searchTime: [timeFrameText('start'), timeFrameText('end')],
				total: 0, // 设备总数
				img_url:'',
			};
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.params.device_id = options.id
			this.getlampList();
		},
		onReachBottom(e) {
			if (this.lampList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getlampList();
		},
		methods: {
			// 时间选择
			changeSearchTime(val) {
				console.log(val)
				if(val.length == 0) {
					val = [timeFormat(timeFrame('start')), timeFormat(timeFrame('end'))];
					this.searchTime = val
				}
				this.params.start_time = val[0] + ' ' + this.timeVal;
				this.params.end_time = val[1] + ' ' + this.timeVal;
				this.lampList = [];
				this.params.page = 1;
				this.getlampList()
			},
			// 获取图片列表
			async getlampList() {
				this.$api.loading('加载中...');
				const res = await getDetail(this.params);
				this.$api.hide();
				if(res) {
					this.lampList = [...this.lampList, ...res.data];
					this.total = res.num
				};
			},
			/**
			 * 打开图片详情
			 * @param {string} id 设备id
			 */
			openlampDetails(url) {
				this.img_url = url;
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss">
	// 可视图片面板
	.lamp-panel {

		padding: 24rpx;
		margin-top: 24rpx;
		background-color: #fff;
	}

	.lamp-list {
		display: flex;
		flex-wrap: wrap;
	}

	// 可视列表项
	.lamp-item {
		width: 336rpx;

		margin-right: 28rpx;
		margin-bottom: 24rpx;

		border-radius: 12rpx;
		border: 1rpx solid #F1F1F1;

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

		.pic {
			display: block;
			width: 336rpx;
			height: 255rpx;

			border-radius: 4rpx;
		}

		.text {
			font-size: 20rpx;
			color: #666666;
		}

		.tips {
			width: 24rpx;
			height: 24rpx;
			background: #07F546;
			border-radius: 100%;

			&.close {
				background: #e93f27;
			}
		}
	}
</style>