aida_front/src/views/AwardPage/components/UploadStatus.vue

<template>
	<div class="upload-status">
		<div class="upload-status-item">
			<div class="upload-status-item-icon">
				<img
					v-if="status === 'uploading'"
					src="@/assets/images/award/progress.png"
					alt=""
					class="progress-icon"
				/>
				<img
					v-if="status === 'success'"
					src="@/assets/images/award/successful.png"
					alt=""
					class="progress-icon successful-icon"
				/>
			</div>
			<div class="text">{{ $t(text) }}</div>
      <div class="tips">{{ $t(tips) }}</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { computed, watch } from 'vue'
	import { useI18n } from 'vue-i18n'

	const { t } = useI18n()
	const props = defineProps<{
		status: string
		type: 'pdf' | 'video'
	}>()

	const textMap: Record<string, string> = {
		idle: '',
		uploading: 'AwardsPage.uploadInProgress',
		success:'AwardsPage.uploadSuccess',
		error: 'AwardsPage.fileUploadFailed'
	}

	const tips = computed(() => {
		if (props.type === 'pdf') {
			return 'AwardsPage.pdfFileTip'
		} else if (props.type === 'video') {
			return 'AwardsPage.videoFileTip'
		}
		return ''
	})

const text = computed(() => {
  return textMap[props.status] ?? textMap.uploading
})
</script>
<style scoped lang="less">
	.upload-status {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.upload-status-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.progress-icon {
				width: 12rem;
				height: 12rem;
			}
			.text {
				font-family: Arial;
				font-weight: 400;
				color: #585858;
				font-size: 2.4rem;
			}
      .tips{
        font-family: Arial;
        font-weight: 400;
        font-size: 1.8rem;
        color: #aaa;
      }
		}
	}
</style>