DaoDao/DaoDaoFrontend/pages/tabbar/tabbar-5/uploadMgr.vue

<template>
	<view class="container">
		<!-- 顶部按钮栏 -->
		<view class="button-bar">
			<button :class="{ 'active': isImageActive }" @click="switchTab('image')">图片</button>
			<button :class="{ 'active': isVideoActive }" @click="switchTab('video')">视频</button>
			<button :class="{ 'active': isFileActive }" @click="switchTab('file')">文件</button>
		</view>
		<!-- 根据选中的tab显示不同的下载管理界面 -->
		<view v-if="activeTab === 'image'">
			<!-- 这里是图片下载管理界面的内容 -->
			<view class="uni-list uni-common-mt">
				<uni-section title="上传列表" type="line">
					<uni-list v-for="(v, k) in imageDownloadList" :key="k">
						<uni-list-item clickable @click="onPlayListClick(v)">
							<template v-slot:header>
								<view class="slot-box">
									<image class="slot-image" :src="v.imSrc"></image>
								</view>
							</template>
							<template v-slot:body>
								<text class="slot-box slot-text">{{v.title}}</text>
								<!-- <text class="slot-box slot-text"></text> -->
							</template>
							<template v-slot:footer>
								<text class="slot-box slot-text-play">立即载入</text>
							</template>
						</uni-list-item>
					</uni-list>
				</uni-section>
			</view>
		</view>
		<view v-if="activeTab === 'video'">
			<!-- 这里是视频下载管理界面的内容 -->
			<view class="uni-list uni-common-mt">
				<uni-section title="上传列表" type="line">
					<uni-list v-for="(v, k) in videoDownloadList" :key="k">
						<uni-list-item @click="onPlayListClick(v)">
							<template v-slot:header>
								<view class="slot-box">
									<image class="slot-image" :src="v.imSrc"></image>
								</view>
							</template>
							<template v-slot:body>
								<text class="slot-box slot-text">{{v.title}}</text>
								<!-- <text class="slot-box slot-text"></text> -->
							</template>
							<template v-slot:footer>
								<button class="slot-box slot-text-play" @click="showDetile(v)">详情</button>
							</template>
						</uni-list-item>
					</uni-list>
				</uni-section>
			</view>
		</view>
		<view v-if="activeTab === 'file'">
			<!-- 这里是文件下载管理界面的内容 -->
			<view class="uni-list uni-common-mt">
				<uni-section title="上传列表" type="line">
					<uni-list v-for="(v, k) in fileDownloadList" :key="k">
						<uni-list-item clickable @click="onPlayListClick(v)">
							<template v-slot:header>
								<view class="slot-box">
									<image class="slot-image" :src="v.imSrc"></image>
								</view>
							</template>
							<template v-slot:body>
								<text class="slot-box slot-text">{{v.title}}</text>
								<!-- <text class="slot-box slot-text"></text> -->
							</template>
							<template v-slot:footer>
								<text class="slot-box slot-text-play">立即载入</text>
							</template>
						</uni-list-item>
					</uni-list>
				</uni-section>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'video' ,// 默认显示图片下载管理界面
				videoDownloadList: [{
						title: '鞠婧祎视频 1 ',
						viSrc: 'https://afanai.top:8088/video/982789760.mp4',
						imSrc: 'https://afanai.top:8088/video/982789760frame.jpg',
					},
					{
						title: '鞠婧祎视频 2 ',
						viSrc: 'https://afanai.top:8088/video/428743782.mp4',
						imSrc: 'https://afanai.top:8088/video/428743782frame.jpg',
					}
				],
				imageDownloadList: [],
				fileDownloadList: [],
				isImageActive: false,
				isVideoActive: true,
				isFileActive: false
			};
		},
		methods: {
			switchTab(tab) {
				this.activeTab = tab;
				this.isImageActive = tab == 'image';
				this.isVideoActive = tab == 'video';
				this.isFileActive = tab == 'file';
			},
			showDetile(v) {
				console.log(v);
			}
		}
	}
</script>

<style scoped>
/* 	.downlod-container {
	    display: flex;
	    flex-direction: column;
	} */

	.button-bar {
		background-color: #ffffff;
	    display: flex;
	    justify-content: space-around;
	    padding: 10px;
	}

	.button {
	    border: 1px;
	    border-radius: 2px;
		font-size: 28rpx;
	}
	
	.button:active {
	    background-color: #d0d0d0;
	}
	
	.active {         
		background-color: #00aaff; 
	}
	
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 72px;
		height: 48px;
	}
	
	.slot-text {
		flex: 1;
		font-size: 16px;
		margin-right: 10px;
	}
	
	.slot-text-play {
		font-size: 14px;
		color: #008acf;
		margin-right: 5px;
		background-color: #ffffff;
	}
	
	button::after {   
		border: none;
	}
</style>