83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
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>
|