subject_gxj/xj_project_app/pages/projectImageAndVideo/index.vue

<template>
	<view class="container">
		<page-title>现场影像</page-title>

		<view class="tabs">
			<u-tabs :list="list1" @click="changeTabs" activeStyle='color:#1763E7' :scrollable='false'
				lineWidth='174rpx'></u-tabs>
		</view>

		<view class="cards-list marginTop" v-if="tabFlag == 0">
			<view class="card" v-for="(item,index) in iamgetList" :key="index">
				<view class="card-box1">
					<image :src="item.fileAddre" alt="" class="iamgeSize" @click='viewImg(item.fileAddre)'></image>
					<view class="text-box">
						<text class="name">{{item.kind}}</text>
						<text class="time">时间:</text>
						<text class="timeValue">{{item.time}}</text>
					</view>
				</view>
			</view>
			<empty-show v-if="iamgetList.length===0" showText='暂无图片'></empty-show>
		</view>
		<view class="cards-list marginTop" v-if="tabFlag == 1">
			<view class="cards" v-for="(item,index) in videoList" :key="index">
				<video :src="item.fileAddre" class="videoSize" :show-fullscreen-btn='false'></video>
				<view class="text-box">
					<text>{{item.kind}}</text>
					<text>{{item.time}}</text>
				</view>
				<div class="videoClick" @click="videoClick(item)"></div>
			</view>
			<empty-show v-if="videoList.length===0" showText='暂无视频'></empty-show>
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onUnload,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app";

	import {
		getPageMediaOfSub,
	} from "@/api/work/projectInfo.js";

	import {
		addFocus,
		cancelFocus
	} from "@/api/work/focus.js";

	function backToBefore() {
		uni.reLaunch({
			url: "/pages/index"
		});
	};

	let scrollTop = ref(0)
	let loading = ref(true)
	// 参数
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		subId: '',
		type: ""
	})

	let list1 = [{
		name: '图片',
	}, {
		name: '视频',
	}]
	//图片预览
	function viewImg(e) {
		let imglist = [e]
		uni.previewImage({
			longPressActions: true,
			urls: imglist
		})
	}

	// 播放文件--视频
	function videoClick(event) {
		showFile(event.fileType, event.fileAddre)
	}

	// 文件预览
	function showFile(type, filePath) {
		uni.navigateTo({
			url: `/pages/projectInfo/media/index?type=${type}&filePath=${filePath}`
		})
	}

	//切换tab
	let tabFlag = 0

	function changeTabs(e) {
		tabFlag = e.index
		searchInfo.value.pageNo = 1;
		iamgetList.value = [];
		videoList.value = [];
		getList()
	}

	// 触底加载flag
	let moreListFlag = true

	// 获取列表
	let iamgetList = ref([]);
	let videoList = ref([]);
	let listTotal = ref(0);

	function getList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}
		if (tabFlag === 0) {
			searchInfo.value.type = 'IMAGE'
			getPageMediaOfSub(searchInfo.value).then(res => {
				loading.value = false
				iamgetList.value = iamgetList.value.concat(res.data.list);
				listTotal.value = res.data.total;
				if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
						.length)) moreListFlag = false;

			}).catch(() => {
				loading.value = false
			})
		} else if (tabFlag === 1) {
			searchInfo.value.type = 'VEDIO'
			getPageMediaOfSub(searchInfo.value).then(res => {
				loading.value = false
				videoList.value = videoList.value.concat(res.data.list);
				listTotal.value = res.data.total;
				if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
						.length)) moreListFlag = false;

			}).catch(() => {
				loading.value = false
			})
		}
	}

	// function goToDetail(id, subName) {
	// 	uni.navigateTo({
	// 		url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
	// 	})
	// }

	// function goToPage(url) {
	// 	uni.navigateTo({
	// 		url
	// 	})
	// }

	// function goToReport(type, subId, subName) {
	// 	uni.navigateTo({
	// 		url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
	// 	})
	// }



	onLoad((options) => {
		// uni.$on('projectInfoSearch', resolve => {
		// 	searchInfo.value = Object.assign(searchInfo.value, resolve);
		// 	searchInfo.value.pageNo = 1;
		// 	projectList.value = [];
		// 	listTotal.value = 0;
		// 	moreListFlag = true;

		// 	getList();
		// });
		console.log(options);
		searchInfo.value.subId = options.subId
		getList();
	});

	onUnload(() => {
		// uni.$off('projectInfoSearch');
	})
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

	onPullDownRefresh(() => {
		searchInfo.value.pageNo = 1;
		iamgetList.value = [];
		videoList.value = [];
		moreListFlag = true;
		try {
			getList();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

	onReachBottom(() => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList();
	})
</script>

<style lang="scss" scoped>
	.tabs {
		position: absolute;
		top: 240rpx;
		left: 50%;
		transform: translate(-50%);
		z-index: 100;
		width: 92%;

		border-radius: 20rpx 20rpx 20rpx 20rpx;
		height: 90rpx;
		background: #FFFFFF;
	}

	.marginTop {
		margin-top: 190rpx;
	}

	.videoSize {
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 364rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.card-box1 {
		padding-top: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.text-box {
			margin-left: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;

			.name {

				font-size: 32rpx;
				font-weight: 400;
				font-family: OPPOSans-R;
			}

			.time {
				padding-top: 20rpx;
				font-size: 28rpx;
				color: #797F89;
				font-weight: 400;
			}

			.timeValue {
				padding-top: 10rpx;
				font-family: OPPOSans-R;
				font-size: 32rpx;
				font-weight: 400;
			}
		}
	}

	.iamgeSize {
		width: 272rpx;
		height: 222rpx;

		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.21);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}


	.cards {
		position: relative;
		margin: auto;
		border-radius: 20rpx;
		margin-top: 25rpx;
		background: #FFFFFF;
		height: 470rpx;
		overflow: hidden;

		.text-box {
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 106rpx;
			padding: 0 40rpx 0 40rpx;
			font-family: OPPOSans-R;
			font-size: 32rpx;
		}

		.videoClick {
			position: absolute;
			top: -20rpx;
			z-index: 100;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}
</style>