ajy/code/ajyApp/pages/my/version/version.nvue

<template>
	<view class="page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<image src="/static/public/backBlack.png" mode="aspectFill" class="back-img" @click="goBack"></image>
			<text class="nav-title">版本信息</text>
			<view class="nav-right"></view>
		</view>

		<!-- 版本信息区 -->
		<view class="version-content">
			<image class="logo" src="/static/144x144.png" mode="aspectFill"></image>
			<text class="app-name">研年健康平台</text>
			<text class="version-code">V{{localVersion}}</text>
			<text class="check-btn" @click="checkUpdate">检查更新</text>
		</view>

		<!-- 更新弹窗 -->
		<view class="update-modal" v-if="showUpdateDialog">
			<view class="update-mask" @click="closeUpdateDialog"></view>
			<view class="update-dialog">
				<text class="update-title">发现新版本</text>
				<text class="update-version">V{{updateInfo.versionCode}}</text>
				<text class="update-size" v-if="updateInfo.fileSize">{{updateInfo.fileSize}}</text>
				<view class="update-content-box">
					<text class="update-content">{{updateInfo.updateContent || '更新了一些功能和体验优化'}}</text>
				</view>
				<!-- 下载进度条 -->
				<view class="progress-box" v-if="downloading">
					<view class="progress-bar">
						<view class="progress-fill" :style="{width: downloadProgress + '%'}"></view>
					</view>
					<text class="progress-text">{{downloadProgress}}%</text>
				</view>
				<text class="update-btn" @click="doUpdate" v-if="!downloading">立即更新</text>
				<text class="update-btn update-btn-disabled" v-if="downloading">下载中...</text>
				<text class="update-later" v-if="updateInfo.updateType !== 1 && !downloading" @click="closeUpdateDialog">稍后再说</text>
			</view>
		</view>
	</view>
</template>

<script>
import { checkUpdate } from '@/utils/api/version.js'

export default {
	data() {
		return {
			statusBarHeight: 44,
			localVersion: '1.0.0',
			platform: 'android',
			showUpdateDialog: false,
			updateInfo: {},
			downloading: false,
			downloadProgress: 0
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.platform = sysInfo.platform || 'android'
		// 获取本地版本号
		const appBase = uni.getAppBaseInfo()
		if (appBase && appBase.appVersion) {
			this.localVersion = appBase.appVersion
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		async checkUpdate() {
			const platformCode = this.platform === 'ios' ? 2 : 1
			try {
				const res = await checkUpdate(platformCode, this.localVersion)
				console.log(res)
				if (res && res.hasUpdate) {
					this.updateInfo = res
					this.showUpdateDialog = true
					this.downloading = false
					this.downloadProgress = 0
				} else {
					uni.showToast({
						title: '已是最新版本',
						icon: 'none'
					})
				}
			} catch (e) {
				uni.showToast({
					title: '检查更新失败',
					icon: 'none'
				})
			}
		},
		closeUpdateDialog() {
			// 强制更新时不允许关闭
			if (this.updateInfo.updateType === 1) {
				return
			}
			this.showUpdateDialog = false
		},
		doUpdate() {
			if (this.platform === 'ios') {
				this.openAppStore()
			} else {
				this.downloadAndInstall()
			}
		},
		// iOS: 跳转App Store
		openAppStore() {
			const url = this.updateInfo.downloadUrl
			if (!url) {
				uni.showToast({ title: '下载地址无效', icon: 'none' })
				return
			}
			// #ifdef APP-PLUS
			plus.runtime.openURL(url, (err) => {
				uni.showToast({ title: '打开App Store失败', icon: 'none' })
			})
			// #endif
		},
		// Android: 下载APK并安装
		downloadAndInstall() {
			console.log("下载地址",this.updateInfo.downloadUrl)
			const url = this.updateInfo.downloadUrl
			if (!url) {
				uni.showToast({ title: '下载地址无效', icon: 'none' })
				return
			}
			this.downloading = true
			this.downloadProgress = 0

			// #ifdef APP-PLUS
			const dtask = plus.downloader.createDownload(url, {
				filename: '_downloads/update.apk'
			}, (d, status) => {
				if (status === 200) {
					// 下载完成，安装APK
					plus.runtime.install(d.filename, {
						force: true
					}, () => {
						// 安装成功
						plus.runtime.restart()
					}, (err) => {
						this.downloading = false
						uni.showToast({ title: '安装失败，请重试', icon: 'none' })
					})
				} else {
					this.downloading = false
					uni.showToast({ title: '下载失败，请重试', icon: 'none' })
				}
			})
			dtask.addEventListener('statechanged', (task, status) => {
				// state=3 表示正在接收数据
				if (task.state === 3 && task.totalSize > 0) {
					this.downloadProgress = Math.round((task.downloadedSize / task.totalSize) * 100)
				}
			}, false)
			dtask.start()
			// #endif
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #FFFFFF;
}
.status-bar {
	background-color: #FFFFFF;
}
.nav-bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding-left: 54rpx;
	padding-right: 54rpx;
	background-color: #FFFFFF;
}
.back-img {
	width: 50rpx;
	height: 50rpx;
}
.nav-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.nav-right {
	width: 50rpx;
	height: 50rpx;
}
/* 版本信息区 */
.version-content {
	align-items: center;
	padding-top: 100rpx;
}
.logo {
	width: 208rpx;
	height: 208rpx;
	border-radius: 120rpx;
	margin-bottom: 16rpx;
}
.app-name {
	font-size: 32rpx;
	color: #545F71;
	line-height: 60rpx;
	text-align: center;
}
.version-code {
	font-size: 32rpx;
	color: #BAC0CA;
	line-height: 60rpx;
	text-align: center;
}
.check-btn {
	margin-top: 78rpx;
	width: 644rpx;
	height: 88rpx;
	background-color: #389588;
	border-radius: 20rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	line-height: 88rpx;
	text-align: center;
}
/* 更新弹窗 */
.update-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
}
.update-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.update-dialog {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 48rpx 40rpx;
	align-items: center;
}
.update-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 12rpx;
}
.update-version {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 8rpx;
}
.update-size {
	font-size: 24rpx;
	color: #BBBBBB;
	margin-bottom: 24rpx;
}
.update-content-box {
	width: 520rpx;
	max-height: 300rpx;
	margin-bottom: 36rpx;
}
.update-content {
	font-size: 28rpx;
	color: #666666;
	line-height: 44rpx;
	lines: 0;
}
.progress-box {
	width: 520rpx;
	align-items: center;
	margin-bottom: 24rpx;
}
.progress-bar {
	width: 520rpx;
	height: 12rpx;
	background-color: #EEEEEE;
	border-radius: 6rpx;
	overflow: hidden;
}
.progress-fill {
	height: 12rpx;
	background-color: #389588;
	border-radius: 6rpx;
}
.progress-text {
	font-size: 24rpx;
	color: #389588;
	margin-top: 8rpx;
}
.update-btn {
	width: 520rpx;
	height: 80rpx;
	background-color: #389588;
	border-radius: 16rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
}
.update-btn-disabled {
	background-color: #AAAAAA;
}
.update-later {
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #999999;
}
</style>