activitys-uniapp/components/alert/uploadAlert.vue

<template>
	<view v-if="updateProgress != ''">
		<u-popup v-model="show" mode="center" width="80%" border-radius="15" :mask-close-able="false">
			<view class="upload-alert-container">
				<view class="title">视频上传</view>
				<u-line-progress :striped="true" :percent="updateProgress.progress" :striped-active="true" :active-color="vuex_theme.bgColor"></u-line-progress>
				<view class="upload-content">
					<view class="">{{(updateProgress.totalBytesSent/1024/1024).toFixed(2)}}M/{{(updateProgress.totalBytesExpectedToSend/1024/1024).toFixed(2)}}M</view>
				</view>
				<view class="cancel-upload" @click="cancelUpload">取消上传</view>
			</view>
		</u-popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	export default {
		props: {
			updateProgress: ''
		},
		data() {
			return {
				show: false,
			};
		},
		created() {},
		computed: {},
		methods: {
			cancelUpload(){
				this.$emit('cancelUpload')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-alert-container {
		padding: 30rpx 50rpx;
		.title {
			width: 100%;
			text-align: center;
			padding: 0rpx 10rpx 50rpx 10rpx;
			font-weight: 500;
			color: #353535;
			letter-spacing: 2rpx;
			font-size: 30rpx;
		}
		.upload-content{
			display: flex;
			justify-content: flex-end;
			margin-top: 4rpx;
		}
		.cancel-upload{
			width: 300rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 40rpx;
			background: var(--bgColor);
			color: #FFFFFF;
			margin: 30rpx auto 0;
		}
	}
</style>