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>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			localVersion: '1.0.0',
			platform: 'android'
		}
	},
	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()
		},
		checkUpdate() {
			// TODO: 后续对接后台接口检查更新
			uni.showToast({
				title: '已是最新版本',
				icon: 'none'
			})
		}
	}
}
</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;
}
</style>