<template>
|
<view v-if="state.show" class="dpm-mask" @touchmove.stop.prevent @tap.stop>
|
<view class="dpm-card" @tap.stop>
|
<view class="dpm-title">{{ state.title }}</view>
|
<ElProgress :percentage="state.progress" :stroke-width="12" :show-text="true" color="#0D867F" />
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { reactive, onUnmounted } from "vue";
|
import bus from "@/plugins/bus";
|
import ElProgress from "@/components/el-progress.vue";
|
|
const state = reactive({
|
show: false,
|
progress: 0,
|
title: "更新包下载中...",
|
});
|
|
const handle = (payload = {}) => {
|
if (!payload || typeof payload !== "object") return;
|
if (payload.show === false) {
|
state.show = false;
|
state.progress = 0;
|
state.title = "更新包下载中...";
|
// 下载结束：恢复 tabBar，避免底部不可点
|
try { uni.showTabBar({ animation: false }); } catch (e) {}
|
return;
|
}
|
if (payload.show === true) state.show = true;
|
if (typeof payload.progress === "number" && Number.isFinite(payload.progress)) {
|
state.progress = Math.max(0, Math.min(100, Math.floor(payload.progress)));
|
}
|
if (payload.title) state.title = String(payload.title);
|
|
// 下载进行中：隐藏原生 tabBar（原生层级高于页面遮罩，否则仍可点击）
|
if (state.show) {
|
try { uni.hideTabBar({ animation: false }); } catch (e) {}
|
}
|
};
|
|
// 事件监听必须尽早注册（setup 阶段就注册），避免下载开始时还未 mounted 导致错过首次 show 事件
|
// bus.ts 同名事件只能绑定一次：先 off 再 on，确保始终有效
|
try { bus.$off("versionUpgrade:downloadProgress"); } catch (e) {}
|
try { bus.$on("versionUpgrade:downloadProgress", handle); } catch (e) {}
|
|
onUnmounted(() => {
|
try { bus.$off("versionUpgrade:downloadProgress"); } catch (e) {}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.dpm-mask {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9999;
|
background: rgba(0, 0, 0, 0.45);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.dpm-card {
|
width: 620rpx;
|
padding: 28rpx 28rpx 22rpx;
|
background: #ffffff;
|
border-radius: 20rpx;
|
box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.18);
|
}
|
|
.dpm-title {
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: rgba(0, 0, 0, 0.85);
|
margin-bottom: 18rpx;
|
}
|
</style>
|
