jiuyiUniapp/jiuyi2/components/index/appVerUpdate.vue

<script setup>
	/**
	 * app版本更新弹窗
	 */

	import {
		defineExpose,
		ref,
		reactive,
		getCurrentInstance,
		computed,
		nextTick,
		onMounted,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'

	const {
		proxy
	} = getCurrentInstance()
	// 程序版本信息
	const versionkApp = reactive({})
	// 云端app版本信息
	const versionCloud = computed(() => uni.$store.state.versionCloud)

	onMounted(() => {
		let system = uni.getSystemInfoSync()
		Object.assign(versionkApp, system)
	})

	// 初始化
	function init() {
		console.log('versionCloud', versionCloud.value)
		return
		Object.assign(versionkApp, system)
		// status 1更新 0未开启
		if (result.status != 1) return
		// 手机版本号 < 设定版本号
		if (system.appVersionCode < result.versionCode) open()
	}

	// 打开弹窗
	function open() {
		proxy.$refs.update.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.update.close()
	}

	// 更新弹窗点击确认
	function handleConfirm() {
		// 下载地址
		let downloadUrl = versionCloud.value.downloadUrl
		plus.runtime.openURL(downloadUrl, function(res) {
			console.log('打开浏览器结果：', res);
		}, function(err) {
			console.log('打开浏览器失败：', err);
		})
	}

	// 取消
	function handleCancel() {
		// 判断是否强制更新
		if (versionCloud.value.isforce == 1) plus.runtime.quit()
		else close()
	}

	defineExpose({
		init,
		open,
		close,
	})
</script>

<template>
	<uni-popup ref="update" type="center" :is-mask-click="false">
		<view class="updateAlt popMid ptb30 plr30 bfff">
			<view class="header df fdc">
				<view class="df fdc aic">
					<image src="/static/logo.png" mode="aspectFit" class="wh120 br10" />
				</view>
				<text class="mt30 f48">九亿有新版本啦~</text>
			</view>

			<view class="main mtb50 mlr20">
				<text class="f32 c333">最新版本为{{versionCloud.versionName}}</text>
				<view class="content mt20 ptb30 plr20">
					<text class="f30 c333">更新说明：</text>
					<text class="mt10 f26 c666">{{versionCloud.updateContent}}</text>
				</view>
			</view>

			<view class="btns df fdr jcsb mlr30">
				<view class="btn focus bar f1">
					<text class="tac cfff f28" @click="handleConfirm">更新</text>
				</view>

				<view class="btn cancel bar f1">
					<text class="tac c333 f28" @click="handleCancel">取消</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	// 更新弹窗
	.updateAlt {
		width: 600rpx;

		// 内容
		.content {
			background-color: #f8f8f8;
			border-radius: 10rpx;
		}
	}
</style>