hldy_app_mini/component/zy-upgrade/zy-upgrade.vue

<template>
	<view class="zy-modal" :class="dshow?'show':''">
		<view style="position: absolute;top: 240rpx;left: 850rpx;z-index: 9999;">
			<image style="width: 400rpx;height: 370rpx;position: absolute;top: 0rpx;left: 0rpx;"
				src="/static/index/update/fly.png" />
		</view>
		<view class="zy-dialog">
			<view
				style="height: 250rpx;width: 100%;position: relative;background: linear-gradient(to bottom,#d7e3f8 , #ffffff);">
				<!-- <image style="width: 1800rpx;height: 1600rpx;position: absolute;top: -370rpx;left: -220rpx;" src="/static/index/update/bgc.png" /> -->
			</view>
			<view :class="'zy-upgrade-topbg-'+theme">
				<view>
					<text class="zy-upgrade-title">
						发现新版本
					</text>
				</view>
				<text class="flex-wrap" style="margin-top: 10rpx;">{{version}}</text>
			</view>
			<view class="padding-xl text-left">
				<scroll-view class="scroll-box" scroll-y="true">
					<text>{{update_tips}}</text>
				</scroll-view>
				<view class="zy-progress radius striped active" style="border-radius: 36upx;overflow: hidden;"
					v-if="update_flag">
					<view :class="'bg-'+theme" style="background-color: royalblue;border-radius: 36upx;"
						:style="'width: '+update_process+'%;'">
						{{update_process}}%
					</view>
				</view>
			</view>
			<view class="zy-bar">
				<view class="action" v-if="!update_flag && forceupgrade">
					<button class="zy-btn" :class="'bg-'+theme" @click="upgrade_checked">确认升级</button>

				</view>
				<view class="action" v-if="!update_flag && !forceupgrade">
					<view class="zy-btn" @click="upgrade_checked">确认升级</view>
					<view class="zy-quxiao" v-if="!forceupgrade" @click="upgrade_cancel">取消升级</view>
				</view>
				<view class="action text-center" v-if="update_flag&&!forceupgrade" style="margin-top: 40rpx;">
					<button class="zy-btn" :class="'bg-'+theme" @click="upgrade_break">中断升级</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ZyUpgrade',
		props: {
			theme: { //主题，目前支持green,pink,blue,yellow,red
				type: String,
				default: 'green'
			},
			updateurl: { //升级检测url，全路径
				type: String,
				default: ''
			},
			h5preview: { //H5界面下是否预览升级
				type: Boolean,
				default: false
			},
			oldversion: { //如果是H5，为了方便测试，可以传入一个旧版本号进来。
				type: String,
				default: ''
			},
			oldcode: { //如果是H5，为了方便测试，可以传一个旧版本的code进来。
				type: Number,
				default: 0
			},
			appstoreflag: { //是否启用appstore升级，如果启用，由服务端返回appstore的地址
				type: Boolean,
				default: false
			},
			noticeflag: { //是否通知主界面无需更新
				type: Boolean,
				default: false
			},
			autocheckupdate: { //是否页面截入时就判断升级
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				update_flag: false, //点击升级按钮后，显示进度条
				dshow: false,
				update_process: 0,
				downloadTask: [],
				updated2version: '',
				version_url: '',
				update_tips: '',
				forceupgrade: false,
				currentversion: this.oldversion,
				versionname: '',
				vesioncode: this.oldcode,
				wgt_flag: 0,
				wgt_url: '',
				size: 0, //开启gzip等情形下，获取不到安装包大小，可以服务端返回安装包大小
				header: {
					Authorization: uni.getStorageSync('token') || "token"
				}
			}
		},

		mounted() {
			let app_flag = false
			// #ifdef APP-PLUS
			app_flag = true
			// #endif
			if ((this.h5preview || app_flag) && this.autocheckupdate) {
				this.check_update()
			}
		},
		computed: {
			version() {
				let retversion = ''
				retversion = this.currentversion + (this.currentversion != '' && this.updated2version != '' ? ' -> ' :
					'') + this.updated2version
				return retversion
			}
		},
		methods: {
			//检测升级
			check_update() {
				let that = this
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					that.currentversion = widgetInfo.version
					that.versionname = widgetInfo.name
					that.versioncode = widgetInfo.versionCode
					that.updatebusiness(that)
				});
				// #endif
				// #ifdef H5
				if (this.h5preview) {
					this.updatebusiness(that)
				}
				// #endif
			},
			updatebusiness: function(that) { //具体升级的业务逻辑  https://www.focusnu.com/opeapi
				uni.request({
					url: `https://www.focusnu.com/devopsapi/api/pad/versionUpdate?platform=1&version=${that.currentversion}`,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						// console.log("?????",`https://www.focusnu.com/devopsapi/api/pad/versionUpdate?platform=1&version=${that.currentversion}`)
						// this.$emit('chuandinew',this.updated2version)
						if (res.statusCode === 404) {
							return
						}
						if (res.data.code == 100) {
							//提示升级
							// console.log(res.data.data,111111111)
							if (res.data.data.wgt_flag == '2') {
								that.wgt_flag = res.data.data.wgt_flag;
								that.updated2version = res.data.data.version;
								that.update_tips = res.data.data.update_tips;
								that.forceupgrade = res.data.data.forceupdate == 1;
								that.version_url = res.data.data.update_url;
								that.updated2version = res.data.data.version;
								that.wgt_flag = res.data.data.wgt_flag;
								that.wgt_url = res.data.data.wgt_url;
								that.size = res.data.data.size;
								that.dshow = true;

							} else if (res.data.data.update_url) {
								that.dshow = true;

								that.update_tips = res.data.data.update_tips;
								that.forceupgrade = res.data.data.forceupdate == 1;
								that.version_url = res.data.data.update_url;
								that.updated2version = res.data.data.version;
								that.wgt_flag = res.data.data.wgt_flag;
								that.wgt_url = res.data.data.wgt_url;
								that.size = res.data.data.size;
								that.getnewbanben();
							} else {
								if (that.noticeflag) {
									//通知父组件，当前版为最新版本
									that.$emit("showupdateTips", 0)
								}
							}
						} else {
							uni.showToast({
								title: '请求升级出错：' + data.msg,
								icon: 'none'
							});
						}
					},
					fail() {
						this.loading = false;
					}
				});
			},
			getnewbanben: function() {
				this.$emit('chuandinew', this.updated2version)
			},
			//点击开始升级按钮，开始升级
			upgrade_checked: function() {
				if (this.wgt_flag == 2) {
					this.dshow = false
					this.updateversion()
				} else {
					uni.removeStorageSync('token')
					this.update_flag = true
					this.updateversion()
				}

			},
			//点击取消升级按钮，取消升级
			upgrade_cancel: function() {
				this.dshow = false
			},
			//升级过程中，点击中断升级按钮，中断升级
			upgrade_break: function() {
				this.downloadTask.abort()
				this.update_flag = false
			},
			//升级下载apk安装包的具体处理业务逻辑
			updateversion: function() {
				//console.log("检查升级方法")
				let platform = uni.getSystemInfoSync().platform
				let that = this
				//console.log("操作系统：",platform)
				if (that.wgt_flag == 2) {
					try {
						const Intent = plus.android.importClass('android.content.Intent')
						const Uri = plus.android.importClass('android.net.Uri')
						const main = plus.android.runtimeMainActivity()
						const intent = new Intent(Intent.ACTION_VIEW)
						intent.setData(Uri.parse('mimarket://details?id=com.android.hldy'))
						// 强制使用小米应用商店
						intent.setPackage('com.xiaomi.market')
						main.startActivity(intent)
					} catch (e) {
						// 小米商店不存在 or 被禁用
						console.log('打开小米应用商店失败', e)
					}

					return
				}
				if (platform == 'ios' && this.appstoreflag && that.wgt_flag != 1) {
					//如果启用ios appstore升级，则打开appstore
					that.dshow = false
					//console.log("跳转至appstore")
					plus.runtime.launchApplication({
						action: that.version_url
					}, function(e) {
						uni.showToast({
							title: '打开appstore失败',
							icon: 'none'
						});
					});
				} else {

					let that = this
					let downloadurl = that.wgt_flag == 1 ? that.wgt_url : that.version_url;
					let targetUrl = "https://www.focusnu.com/devopsapi/sys/common/static/" + downloadurl
					this.update_confirm = true
					this.downloadTask = uni.downloadFile({
						url: targetUrl,
						header: this.header,
						success: function(res) {
							console.log("!!!", res)
							if (res.statusCode == 200) {
								//开始安装
								plus.runtime.install(res.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, function(e) {
									uni.showToast({
										title: '升级失败',
										icon: 'none'
									});
								});
							} else {
								uni.showToast({
									title: '下载失败，网络错误',
									icon: 'none'
								});
							}
						},
						fail: function(e) {
							uni.showToast({
								title: '下载失败:' + e.errMsg,
								icon: 'none'
							});
							this.update_flag = false
						},
						complete: function() {}
					})
					this.downloadTask.onProgressUpdate(function(res) {
						that.update_process = res.progress
						if (res.progress == Infinity) {
							let progress = (res.totalBytesWritten / that.size) * 100
							if (progress > 100) {
								progress = 100
							}
							that.update_process = progress
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	@import url("static/css/main.css");

	.zy-upgrade-topbg-green {
		background-image: url('static/images/green.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 290rpx;
	}

	.zy-upgrade-topbg-red {
		background-image: url('static/images/red.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 290rpx;
	}

	.zy-upgrade-topbg-pink {
		background-image: url('static/images/pink.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 290rpx;
	}

	.zy-upgrade-topbg-yellow {
		background-image: url('static/images/yellow.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 290rpx;
	}

	.zy-upgrade-topbg-blue {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.zy-upgrade-title {
		font-size: 35rpx;
		font-weight: 800;
		/* color: white; */
	}

	.scroll-box {
		height: 250rpx;
	}

	/* ✅ 显示滚动条（App / H5 都有效） */
	.scroll-box::-webkit-scrollbar {
		width: 8rpx;
		/* 滚动条宽度 */
	}

	::v-deep ::-webkit-scrollbar {
		/* 滚动条整体样式 */
		display: block !important;
		width: 7rpx;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		/* 滚动条里面小方块 */
		border-radius: 5rpx !important;
		box-shadow: inset 0 0 1rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #CCCCCC !important;
	}
</style>