zhgdyunapp_vue3/pages/videoManage/playBackList.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" :themeType="'#3A7BFF'">
			<view class="headerName">
				录像查询
			</view>
		</headers>
		<view class="date-search">
			<uni-datetime-picker v-model="timeRange" type="daterange" rangeSeparator="至" @change="confirmTimeRange" />
			<view class="btn-style" @click="searchData">查询</view>
		</view>
		<view class="videoBox" v-if="videoList.length>0">
			<view class="videoItem" v-for="(item,index) in videoList" :key="index" @click="playVideoFn(item)">
				<image v-if="item.coverUrl" class="videoPoster" :src="item.coverUrl" mode="aspectFill"></image>
				<view v-else class="videoPoster">
					<image src="/static/no_poster.png" class="no_poster"></image>
				</view>
				<view class="back-time">
					<text class="date-time">{{item.beginTime}}</text>
					<text class="divider-text">至</text>
					<text class="date-time">{{item.endTime}}</text>
				</view>
			</view>
		</view>
		<view class="placeholderBox" v-else>
			<image src="/static/noData.png" class="noDataImg"></image>
			<view class="text">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dateformat
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				videoList: [],
				pageType: 'company',
				pageNo: 1,
				pageSize: 7,
				timeRange: [],
				pageSupportData: {}
			};
		},
		onLoad(options) {
			this.pageSupportData = JSON.parse(options.obj)
			this.pageNo = 1;
			this.timeRange = [dateformat(new Date(),"yyyy-MM-dd"),dateformat(new Date(),"yyyy-MM-dd")]
				this.loadData()
		},
		onReachBottom() {
			// console.log("============================")
			this.pageNo++;
			uni.showLoading({
				title: '加载中'
			})
			this.loadData()
		},
		methods: {
			searchData(){
				this.loadData()
			},
			confirmTimeRange(e, index) {
				console.log(e, index)
				this.timeRange = e;
				// this.loadData();
			},
			playVideoFn(item) {
				let passData = {
					...item,
					videoName: this.pageSupportData.videoName,
					...this.pageSupportData
				}
				uni.navigateTo({
					url: './playBackVideo?obj='+JSON.stringify(passData)
				})
			},
			//获取项目视频
			loadData() {
				var that = this
				console.log(this.timeRange,777888)
				let requestData = {
					projectSn: that.pageSupportData.projectSn,
					serialNumber: that.pageSupportData.serialNumber
				}
				if(!requestData.serialNumber) return;
				if(this.timeRange && this.timeRange.length > 0){
					requestData.beginTime = this.timeRange[0]
					requestData.endTime = this.timeRange[1]
				}
				this.sendRequest({
					url: "xmgl/videoItem/callPostPlaybackURLsV2",
					data: requestData,
					method: "POST",
					success(res) {
						console.log('找封面', res)
						if(res.result.list){
							that.videoList = res.result.list
							that.videoList.map(item => {
								item.beginTime = dateformat(item.beginTime);
								item.endTime = dateformat(item.endTime);
							})
						} else {
							that.videoList = []
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fullHeight {
		background-color: #F4F5FD;
	}

	.date-search {
		display: flex;
		align-items: center;
		padding: 12rpx 18rpx;
		background: #FFFFFF;

		.btn-style {
			width: 120rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #5181F6;
			border-radius: 6rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 36rpx;
		}
	}

	.videoBox {
		padding: 0rpx 20rpx 40rpx 20rpx;
		overflow: hidden;
		margin-top: 32rpx;
	}

	.videoItem:not(:last-child) {
		margin-bottom: 10rpx;
	}

	.videoItem {
		display: flex;
		width: 100%;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 16rpx 8rpx;

		.videoPoster {
			width: 208rpx;
			height: 208rpx;
			background: rgba(141, 141, 141, 0.83);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.no_poster {
				width: 110rpx;
				height: 100rpx;
			}
		}

		.back-time {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 62rpx;

			.date-time {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #9F9F9F;
			}

			.divider-text {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #272D45;
			}
		}
	}
</style>