DigitalHuman-app/pages/list/index.vue

<template>
	<view class="list-content">
		<view class="list-item" v-for="item in videoList" :key="item.id">
			<view class="item-video">
				<video class="video-player" :controls="false" @play.prevent id="myVideo"
					:src="item.videoUrl"></video>
			</view>
			<view class="item-content" @click="jumpToPlayVideo(item)">
				<view>{{item.videoName}}</view>
				<view>{{item.date}}</view>
				<view :style="{color:item.status==0?'#DE868F':'#333'}">{{item.status==0?'视频生成中':'已生成'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getTaskList } from "@/api/system/user"
	export default {
		data() {
			return {
				videoList: [{
						id: 1,
						name: 'ceshi1',
						date: '2025-03-23',
						status: 1
					},
					{
						id: 2,
						name: 'ceshi2',
						date: '2025-03-23',
						status: 1
					},
					{
						id: 3,
						name: 'ceshi3',
						date: '2025-03-23',
						status: 2
					},
					{
						id: 4,
						name: 'ceshi4',
						date: '2025-03-23',
						status: 1
					},
				]
			}
		},
		onLoad() {
			getTaskList().then(res=>{
				console.log('res',res);
				this.videoList=res.data;
			});
		},
		methods: {
			jumpToPlayVideo(item) {
				if(item.status==0){
					uni.navigateTo({
					  url: 'creatingVideo/creatingVideo'
					});
				}else{
					uni.navigateTo({
					  url: 'playVideo/playVideo' 
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-content {
		padding: 20px; 
		.list-item {
			height: 100px;
			width: 100%;
			background-color: #fff;
			border-radius: 4px;
			margin-bottom: 20px;
			display: flex;

			.item-video {
				width: 150px;
				height: 100px;

				.video-player {
					width: 100%;
					height: 100px;
				}
			}

			.item-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 10px;
				color: #333;
				view {
					height: 30px;
				}
			}
		}
	}
</style>