557 lines
13 KiB
Vue
557 lines
13 KiB
Vue
<template>
|
||
<view class="update-dialog-mask" v-if="show" @tap.stop="handleMaskClick">
|
||
<view class="update-dialog-container" @tap.stop>
|
||
<!-- 火箭图标 -->
|
||
<view class="rocket-container">
|
||
<view class="rocket-wrapper">
|
||
<!-- 火箭 SVG 图片 -->
|
||
<image class="rocket-svg" :src="rocketBase64" mode="aspectFit"></image>
|
||
|
||
<!-- 火焰效果 -->
|
||
<view class="flame-container">
|
||
<view class="flame flame-1"></view>
|
||
<view class="flame flame-2"></view>
|
||
<view class="flame flame-3"></view>
|
||
</view>
|
||
|
||
<!-- 星星装饰 -->
|
||
<view class="star star-1"></view>
|
||
<view class="star star-2"></view>
|
||
<view class="star star-3"></view>
|
||
<view class="star star-4"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="dialog-content">
|
||
|
||
<!-- 强制更新提示 -->
|
||
<view class="force-notice" v-if="forceUpdate">
|
||
<text class="force-notice-icon">⚠️</text>
|
||
<text class="force-notice-text">本次为重要更新，需要立即升级</text>
|
||
</view>
|
||
|
||
<!-- 更新内容 -->
|
||
<view class="update-content">
|
||
<text class="update-item" v-for="(item, index) in updateList" :key="index">{{ index + 1 }}.{{ item }}</text>
|
||
</view>
|
||
|
||
<!-- 下载进度 -->
|
||
<view class="progress-container" v-if="downloading">
|
||
<view class="progress-bar">
|
||
<view class="progress-fill" :style="{width: downloadProgress + '%'}"></view>
|
||
</view>
|
||
<text class="progress-text">{{ downloadProgress }}%</text>
|
||
</view>
|
||
|
||
<!-- 按钮 -->
|
||
<view class="button-container" v-if="!downloading">
|
||
<button class="update-button" @tap="handleUpdate">即刻升级</button>
|
||
</view>
|
||
|
||
<!-- 下载中按钮 -->
|
||
<view class="button-container" v-else>
|
||
<button class="update-button downloading">下载中...</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关闭按钮 -->
|
||
<view class="close-button" @tap="handleClose" v-if="!forceUpdate && !downloading">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'UpdateDialog',
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
version: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
updateContent: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
downloadUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
forceUpdate: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
downloading: false,
|
||
downloadProgress: 0,
|
||
downloadTask: null,
|
||
// 火箭 SVG 的 base64 图片
|
||
rocketBase64: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNzYxODA0ODYyMzIwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMzk1LjI2NCAzMDQuMTI4Yy03MC42NTYgOTIuMTYtMTQ1LjQwOCAxOTQuNTYtMTg5LjQ0IDMwNC4xMjgtNS4xMiAxMi4yODggNi4xNDQgMjMuNTUyIDE4LjQzMiAyMC40OEwzNTguNCA1OTAuODQ4TTYyOC43MzYgMzA0LjEyOGM3MC42NTYgOTIuMTYgMTQ1LjQwOCAxOTQuNTYgMTg5LjQ0IDMwNC4xMjggNS4xMiAxMi4yODgtNi4xNDQgMjMuNTUyLTE4LjQzMiAyMC40OEw2NjUuNiA1OTAuODQ4IiBmaWxsPSIjRjc5ODM5IiBwLWlkPSIyMDQxIj48L3BhdGg+PHBhdGggZD0iTTY3Ni44NjQgNzExLjY4SDM0NS4wODhDMzE4LjQ2NCA2MjQuNjQgMzEyLjMyIDUzMi40OCAzMzEuNzc2IDQ0My4zOTJjMjIuNTI4LTEwMS4zNzYgNzAuNjU2LTE5Ny42MzIgMTQwLjI4OC0yNzcuNTA0bDcuMTY4LTguMTkyYzE2LjM4NC0xOS40NTYgNDYuMDgtMTkuNDU2IDYyLjQ2NCAwbDcuMTY4IDguMTkyYzcwLjY1NiA3OS44NzIgMTE3Ljc2IDE3Ni4xMjggMTQwLjI4OCAyNzcuNTA0IDIwLjQ4IDg5LjA4OCAxNC4zMzYgMTgxLjI0OC0xMi4yODggMjY4LjI4OHoiIGZpbGw9IiMwMDRGRkYiIHAtaWQ9IjIwNDIiPjwvcGF0aD48cGF0aCBkPSJNNDY3Ljk2OCA2NzUuODRjLTUxLjIgMC05NS4yMzItMzcuODg4LTEwMi40LTg4LjA2NC04LjE5Mi02MC40MTYtNi4xNDQtMTIwLjgzMiA2LjE0NC0xODAuMjI0IDIxLjUwNC05NS4yMzIgNjQuNTEyLTE4NS4zNDQgMTI2Ljk3Ni0yNjIuMTQ0LTguMTkyIDIuMDQ4LTE1LjM2IDYuMTQ0LTIwLjQ4IDEyLjI4OGwtNy4xNjggOC4xOTJDNDAyLjQzMiAyNDUuNzYgMzU0LjMwNCAzNDAuOTkyIDMzMS43NzYgNDQzLjM5MiAzMTIuMzIgNTMyLjQ4IDMxOC40NjQgNjI0LjY0IDM0NS4wODggNzExLjY4aDMzMS43NzZjNC4wOTYtMTIuMjg4IDcuMTY4LTIzLjU1MiAxMC4yNC0zNS44NEg0NjcuOTY4eiIgZmlsbD0iIzFENkZGRiIgcC1pZD0iMjA0MyI+PC9wYXRoPjxwYXRoIGQ9Ik0zODEuOTUyIDcyMS45MmgyMzYuNTQ0Vjc3OC4yNEgzODEuOTUyeiIgZmlsbD0iIzAwNEZGRiIgcC1pZD0iMjA0NCI+PC9wYXRoPjxwYXRoIGQ9Ik01MTQuNjk5Mjc2MjUgNDc0LjA2MzEyNjMxSDUwOC42MTAyMTEyM2wzLjA0NDUzMjUxIDIuODg3NTk3ODV6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyMDQ1Ij48L3BhdGg+PHBhdGggZD0iTTQzMC4wOCA0MjcuMDA4YTgwLjg5NiA3OS44NzIgMCAxIDAgMTYxLjc5MiAwIDgwLjg5NiA3OS44NzIgMCAxIDAgLTE2MS43OTIgMFoiIGZpbGw9IiNFOUYzRkIiIHAtaWQ9IjIwNDYiPjwvcGF0aD48L3N2Zz4='
|
||
}
|
||
},
|
||
computed: {
|
||
updateList() {
|
||
if (!this.updateContent) {
|
||
return ['修复已知问题', '优化用户体验', '提升系统稳定性'];
|
||
}
|
||
// 将更新内容按换行或分号分割
|
||
return this.updateContent.split(/[\n;；]/).filter(item => item.trim());
|
||
}
|
||
},
|
||
methods: {
|
||
handleMaskClick() {
|
||
if (!this.forceUpdate && !this.downloading) {
|
||
this.handleClose();
|
||
}
|
||
},
|
||
|
||
handleClose() {
|
||
if (this.forceUpdate || this.downloading) {
|
||
return;
|
||
}
|
||
this.$emit('close');
|
||
},
|
||
|
||
handleUpdate() {
|
||
// #ifdef APP-PLUS
|
||
if (this.downloading) {
|
||
return;
|
||
}
|
||
|
||
if (!this.downloadUrl) {
|
||
uni.showToast({
|
||
title: '下载地址无效',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.downloading = true;
|
||
this.downloadProgress = 0;
|
||
|
||
// 创建下载任务
|
||
const downloadTask = uni.downloadFile({
|
||
url: this.downloadUrl.trim(),
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
console.log('下载成功，文件路径:', res.tempFilePath);
|
||
// 下载完成，安装应用
|
||
this.installApp(res.tempFilePath);
|
||
} else {
|
||
console.error('下载失败，状态码:', res.statusCode);
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
});
|
||
this.downloading = false;
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('下载失败:', err);
|
||
uni.showToast({
|
||
title: '下载失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
this.downloading = false;
|
||
}
|
||
});
|
||
|
||
// 监听下载进度
|
||
downloadTask.onProgressUpdate((res) => {
|
||
this.downloadProgress = res.progress;
|
||
console.log('下载进度:', res.progress + '%');
|
||
});
|
||
|
||
this.downloadTask = downloadTask;
|
||
// #endif
|
||
},
|
||
|
||
installApp(filePath) {
|
||
// #ifdef APP-PLUS
|
||
console.log('开始安装应用:', filePath);
|
||
plus.runtime.install(
|
||
filePath,
|
||
{
|
||
force: false
|
||
},
|
||
() => {
|
||
console.log('安装成功');
|
||
uni.showToast({
|
||
title: '安装成功，请重启应用',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
|
||
// 安装成功后关闭弹窗
|
||
setTimeout(() => {
|
||
this.downloading = false;
|
||
this.downloadProgress = 0;
|
||
this.$emit('close');
|
||
|
||
// 如果是强制更新，重启应用
|
||
if (this.forceUpdate) {
|
||
plus.runtime.restart();
|
||
}
|
||
}, 2000);
|
||
},
|
||
(error) => {
|
||
console.error('安装失败:', error);
|
||
uni.showToast({
|
||
title: '安装失败',
|
||
icon: 'none'
|
||
});
|
||
this.downloading = false;
|
||
}
|
||
);
|
||
// #endif
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁时，取消下载任务
|
||
if (this.downloadTask) {
|
||
this.downloadTask.abort();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.update-dialog-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.update-dialog-container {
|
||
width: 580rpx;
|
||
background: linear-gradient(180deg, #4A9FF5 0%, #2E7FD9 100%);
|
||
border-radius: 32rpx;
|
||
position: relative;
|
||
overflow: visible;
|
||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.rocket-container {
|
||
position: absolute;
|
||
top: -120rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.rocket-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
animation: rocketFloat 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* 火箭 SVG 图片 */
|
||
.rocket-svg {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 火焰容器 */
|
||
.flame-container {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 60rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 5;
|
||
}
|
||
|
||
/* 火焰效果 */
|
||
.flame {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
animation: flameFlicker 0.3s ease-in-out infinite alternate;
|
||
}
|
||
|
||
.flame-1 {
|
||
width: 40rpx;
|
||
height: 30rpx;
|
||
background: radial-gradient(ellipse at center, #FCD34D 0%, #FBBF24 50%, transparent 80%);
|
||
top: 0;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.flame-2 {
|
||
width: 30rpx;
|
||
height: 40rpx;
|
||
background: radial-gradient(ellipse at center, #FBBF24 0%, #F59E0B 50%, transparent 80%);
|
||
top: 15rpx;
|
||
animation-delay: 0.1s;
|
||
}
|
||
|
||
.flame-3 {
|
||
width: 20rpx;
|
||
height: 35rpx;
|
||
background: radial-gradient(ellipse at center, #F59E0B 0%, #EF4444 50%, transparent 80%);
|
||
top: 30rpx;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
/* 星星装饰 */
|
||
.star {
|
||
position: absolute;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background: #FCD34D;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 10rpx #FCD34D;
|
||
}
|
||
|
||
.star-1 {
|
||
top: 30rpx;
|
||
left: 20rpx;
|
||
animation: starTwinkle 2s ease-in-out infinite;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.star-2 {
|
||
top: 50rpx;
|
||
right: 15rpx;
|
||
animation: starTwinkle 2s ease-in-out infinite;
|
||
animation-delay: 0.5s;
|
||
}
|
||
|
||
.star-3 {
|
||
top: 80rpx;
|
||
left: 10rpx;
|
||
animation: starTwinkle 1.5s ease-in-out infinite;
|
||
animation-delay: 1s;
|
||
}
|
||
|
||
.star-4 {
|
||
top: 100rpx;
|
||
right: 20rpx;
|
||
animation: starTwinkle 1.5s ease-in-out infinite;
|
||
animation-delay: 1.5s;
|
||
}
|
||
|
||
/* 动画定义 */
|
||
@keyframes rocketFloat {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-15rpx);
|
||
}
|
||
}
|
||
|
||
@keyframes flameFlicker {
|
||
0% {
|
||
opacity: 0.8;
|
||
transform: scaleY(1);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scaleY(1.2);
|
||
}
|
||
}
|
||
|
||
@keyframes starTwinkle {
|
||
0%, 100% {
|
||
opacity: 0.3;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.5);
|
||
}
|
||
}
|
||
|
||
.dialog-content {
|
||
padding: 50rpx 40rpx 40rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
margin-top: 80rpx;
|
||
}
|
||
|
||
.dialog-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.force-tag {
|
||
display: inline-block;
|
||
margin-top: 10rpx;
|
||
padding: 4rpx 16rpx;
|
||
background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
|
||
color: #FFFFFF;
|
||
font-size: 20rpx;
|
||
border-radius: 20rpx;
|
||
font-weight: normal;
|
||
animation: tagPulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes tagPulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 0 8rpx rgba(255, 71, 87, 0);
|
||
}
|
||
}
|
||
|
||
.force-notice {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20rpx;
|
||
margin-bottom: 24rpx;
|
||
background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%);
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #FFB8B8;
|
||
}
|
||
|
||
.force-notice-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.force-notice-text {
|
||
font-size: 26rpx;
|
||
color: #FF4757;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.update-content {
|
||
background: #F8F9FA;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
max-height: 300rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.update-item {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 44rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.progress-container {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 12rpx;
|
||
background: #E5E7EB;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #4A9FF5 0%, #2E7FD9 100%);
|
||
border-radius: 6rpx;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.progress-text {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #4A9FF5;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.button-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.update-button {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #4A9FF5 0%, #2E7FD9 100%);
|
||
border-radius: 44rpx;
|
||
border: none;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(46, 127, 217, 0.4);
|
||
|
||
&.downloading {
|
||
background: #CCCCCC;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.close-button {
|
||
position: absolute;
|
||
bottom: -120rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.close-icon {
|
||
font-size: 60rpx;
|
||
color: #FFFFFF;
|
||
line-height: 1;
|
||
font-weight: 300;
|
||
}
|
||
</style>
|
||
|