hlt_app/pages/index/index.vue

<template>
	<view class="home-page-box">
		<view class="bg-box">
			<image style="width: 100%; height: 100%;" src="/static/images/index/bg.png" mode="scaleToFill"></image>
		</view>
		<view class="status-bar-box"></view>
		<view class="navigation-bar-box"></view>
		<view class="home-page-box-content">
			<!-- 单位 -->
			<view class="conpany-box">
				<view class="conpany-title">
					黑龙滩管理处
				</view>
				<view class="split-line"></view>
			</view>
			<!-- 标题 -->
			<header-title></header-title>
			<!-- 水库水情功能区 -->
			<reservoir-func></reservoir-func>
			<!-- 巡查管护功能区 -->
			<inspection-func></inspection-func>
			<view class="empty-box"></view>
		</view>
		<!-- 自定义检查更新弹窗 -->
		<zwy-popup :ishide="check.popShow" :zindex="999999" width="660rpx" height="600rpx" radius="12rpx">
			<!-- 自定义展示内容 -->
			<view class="update-content">
				<view class="update-title">
					发现更新 {{`【V${check.updateVersion}】`}}
				</view>
				<view class="update-note" v-if="check.updateNote.length">
					<view class="update-note-item" v-for="(item,index) in check.updateNote" :key="index">
						{{index+1}}.{{' '+item}}；
					</view>
				</view>
				<view class="update-footer">
					<button class="btn cancel-btn" v-if="!check.isForceUpdate" :disabled="check.isStart" type="default" @tap="handleCancel">暂不更新</button>
					<button :disabled="check.isStart" :loading="check.isStart" class="btn" type="primary" @tap="handleOk">立即下载</button>
				</view>
			</view>
		</zwy-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import moment from 'moment';
	import headerTitle from './components/headerTitle.vue';
	import reservoirFunc from './components/reservoirFunc.vue';
	import inspectionFunc from './components/inspectionFunc.vue';
	
	import { useAppStore } from '@/store/index.js';
	const appStore = useAppStore()
	
	const check = reactive({
		popShow: false,
		currentVersion: "",
		updateVersion: "",
		isForceUpdate: false,
		updateNote: [],
		isStart: false
	})
	
	const handleCancel = () => {
		check.popShow = false
	}
	
	const handleOk = () => {
		check.isStart = true
		//此处开始下载
		setTimeout(()=>{
			uni.$msg('下载完成')
			appStore.setSysVersion(check.updateVersion)
			check.popShow = false
			check.isStart = false
		},3000)
	}
	
	const onCheck = () => {
		console.log(check.currentVersion)
		//使用本机版本号去请求是否需要更新
		check.updateVersion = "1.0.1"
		check.popShow = true
		check.updateNote = ['更新bug','更新组件','更新bug','更新组件','更新bug','更新组件','更新bug','更新组件','更新bug','更新组件','更新bug','更新组件']
	}

	onMounted(() => {
		//先获取本机app版本号
		uni.getSystemInfo({
			success: info => {
				check.currentVersion = info.appWgtVersion || info.appVersion;
				appStore.setSysVersion(check.currentVersion)
				onCheck()
			}
		});
	})
</script>

<style lang="scss" scoped>
	.home-page-box {
		
		padding: 0 20rpx;

		.bg-box {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.status-bar-box {
			height: var(--status-bar-height);
		}
		.navigation-bar-box{
			height: 88rpx;
		}

		&-content {
			height: calc(100vh - var(--window-bottom) - 88rpx - var(--status-bar-height));
			overflow: auto;
			
			.conpany-box {

				.conpany-title {
					font-family: Source Han Sans;
					font-size: 50rpx;
					font-weight: bold;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
					line-height: 72rpx;
				}

				.split-line {
					margin-top: 16rpx;
					width: 140rpx;
					height: 8rpx;
					background: #2E7DF3;
				}
			}

			.empty-box {
				height: 40rpx;
			}
		}
		
		.update-content{
			padding: 20rpx;
			height: calc(100% - 40rpx);
			
			.update-title{
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				text-align: center;
				color: $uni-text-color;
				box-sizing: border-box;
				border-bottom: 2rpx solid $uni-border-color;
			}
			
			.update-note{
				margin: 20rpx 0;
				height: calc(100% - 140rpx - 40rpx);
				overflow: auto;
			}
			
			.update-footer{
				height: 60rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				.btn{
					height: 60rpx;
					line-height: 60rpx;
					width: 45%;
					border-radius: 19998rpx;
				}
				.cancel-btn{
					border: 2rpx solid $uni-color-primary;
				}
			}
		}
	}
</style>