ys-app/src/pages/userinfo/version.vue

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" :title="'版本更新'" :leftFlag="true" :rightFlag="false"></customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>
        <view class="white-bg">
            <view class="version-con">
                <view class="v-title">当前版本 Version {{appVersion}}</view>
                <block v-if="isCurrent==2">
                    <view class="v-sub-title">最新版本 Version {{ newVersion }}</view>
                    <view class="v-remark">
                        <view class="v-r-title">本期更新</view>
                        {{ remark }}
                    </view>
                    <view class="v-btn" @click="handleDown">更 新</view>
                </block>
                <block v-else>
                    <view class="v-new-title">已经是最新版本</view>
                </block>
            </view>
        </view>
    </view>
</view>
</template>

<script setup>
import { ref, onMounted,getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'
import { versionCheck } from '@/api/auth.js';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { formatIOS } from '@/utils/status.js'
const { proxy } = getCurrentInstance();

// 初始load页面
onLoad(async(opt) => {
    getOSVesion();
});

// 1.头部导航栏
let navBarPaddingTop = ref(0);
let appVersion = ref("1.0.0");//当前版本号
let newVersion = ref('1.0.0');//最新版本号
let isCurrent = ref(undefined);
let downloadURL = ref(''); //下载地址
let remark = ref('');//更新内容
onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})
let getOSVesion = async()=>{
    let networkEnv = proxy.$NETWORK_ENV;//1-内网 2-外网
    let systemInfo = uni.getSystemInfoSync();
    let param = {
        // #ifdef APP-PLUS
        verNumber:systemInfo.appWgtVersion,//当前版本号
        // #endif
        // #ifdef H5
        verNumber : systemInfo.appVersion,
        // #endif
        os: formatIOS(systemInfo.osName),//操作系统 Android  IOS
        runEnv:networkEnv
    }
    // 当前手机版本
    appVersion.value = param.appVersion;
    console.log("appVersion=>",appVersion.value)
    let data = await versionCheck(param);
    newVersion.value = data.verNumber;
    downloadURL.value = data.downloadUrl || '';
    isCurrent.value = data.isCurrent;
    remark.value = data.remark; //|| '全新的UI界面 优化了签到/打卡功能，整体流程更加简洁清晰 搜索功能全面升级 修复了已知BUG'
}

// 下载最新版本
const handleDown = ()=>{
    // #ifdef APP-PLUS
    // 跳转到应用商店或下载最新版本的页面
    plus.runtime.openURL(downloadURL.value);			
    if (versionData.value.os == 'ios'){
        plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
    } else if (versionData.value.os == 'android'){
        plus.runtime.quit();
    }
    // #endif
}
</script>

<style scoped>
.white-bg{
    width: 750rpx;
    padding: 40rpx 0 ;
    margin-bottom:0;
    border-radius: 8px 8px 0 0;
    height:calc(100vh - 105px);
  
}
.version-con{
    padding:10rpx 53rpx;
}
.version-con .v-title{
    font-size:38rpx;
    font-weight: bold;
}
.version-con .v-sub-title{
    color:#3384DF;
    font-size: 28rpx;
    margin-top: 35rpx;
    font-weight: bold;
    border-bottom:1px solid #E7E7E7;
    padding-bottom: 25rpx;
}
.version-con .v-remark{
    padding-top:25rpx;
    font-size:28rpx;
    line-height: 50rpx;
}
.version-con .v-remark .v-r-title{
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom:10rpx;
}
.version-con .v-btn{
    width:496rpx;
    height:80rpx;
    line-height:80rpx;
    text-align: center;
    color:#F0F0F0;
    background-color: #05A3F4;
    margin:100rpx auto;
    border-radius: 44rpx;
}
.version-con .v-new-title{
    color:#919191;
    font-size:28rpx;
    font-weight: bold;
    margin-top:40rpx;
}
</style>