80 lines
1.6 KiB
Vue
80 lines
1.6 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">{{ text }}</div>
|
||
|
|
<div class="tips">{{ tips }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, watch } from 'vue'
|
||
|
|
const props = defineProps<{
|
||
|
|
status: string
|
||
|
|
type: 'pdf' | 'video'
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const textMap: Record<string, string> = {
|
||
|
|
idle: '',
|
||
|
|
uploading: 'Upload in progress…',
|
||
|
|
success: 'Uploaded Successfully',
|
||
|
|
error: 'Upload failed'
|
||
|
|
}
|
||
|
|
|
||
|
|
const tips = computed(() => {
|
||
|
|
if (props.type === 'pdf') {
|
||
|
|
return 'PDF file, max 20MB'
|
||
|
|
} else if (props.type === 'video') {
|
||
|
|
return 'Video file (MP4, MOV), 1080p, max 100MB'
|
||
|
|
}
|
||
|
|
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>
|