ys-app/src/pages/loading/loading.vue

<template>
<view class="container" :style="{ height: `100vh` }">
    <view class="bg"></view>
    <view class="version">Version {{ appVersion }}</view>
    <!-- <view class="bottom-bg"></view> -->

    <!-- 检查版本弹窗 -->
    <view class="version-con" v-if="versionVisible">
        <view class="v-bg">
            <view class="v-title">发现新版本</view>
            <uni-icons custom-prefix="iconfont" color="#28B6FF" type="icon-phonefilled" size="40"></uni-icons>
            <view class="v-version">最新版本 Version 8.1.2</view>
            <view class="v-update">立刻更新吗？</view>
            <view class="version-btn" @click="handleDown">更 新</view>
            <view class="version-sub" @click="handleClose" v-if="btnVisible">暂不处理</view>
        </view>
    </view>
</view>

</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { versionCheck,getBindStatus } from '@/api/auth.js';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

let appVersion = ref("1.0.0");//当前版本号
let newVersion = ref('1.0.0');//最新版本号
let versionVisible=ref(false);//版本弹窗
let btnVisible = ref(true);// 暂不处理 按钮是否显示
let downloadURL = ref(''); //下载地址
let versionData = ref({}); //版本参数
// 初始load页面
onLoad(async(opt) => {
    console.log("onLoad");

    uni.preloadPage({url: "/pages/login/login"});
    uni.preloadPage({url: "/pages/deviceAuth/deviceAuth"});
    uni.preloadPage({url: "/pages/home/home"});

    // #ifdef APP-PLUS
    // 查询版本接口
    await getOSVesion();
    // #endif
    
    // 不更新版本 执行设备ID查询和绑定操作
    if(!versionVisible.value){
        selectDeviceId()
    }
});

// 检查版本是否是最新的
let getOSVesion = async()=>{
    let systemInfo = uni.getSystemInfoSync();
    let param = {
        // #ifdef APP-PLUS
        appVersion:systemInfo.appWgtVersion,//当前版本号
        // #endif
        // #ifdef H5
        appVersion : systemInfo.appVersion,
        // #endif
        deviceType:systemInfo.model,//型号
        os: systemInfo.osName,//操作系统 Android  IOS
        osVersion:systemInfo.osVersion,//操作系统版本
        resolution:systemInfo.windowWidth+"*"+systemInfo.windowHeight,//分辨率
        trademark:systemInfo.deviceBrand,//设备品牌
        uniqueCode:systemInfo.deviceId//设备ID
    }
    // 当前手机版本
    appVersion.value = param.appVersion;
    // console.log("appVersion=>",appVersion)
    versionData.value = param;
    
    let data = await versionCheck(param);
    newVersion.value = data.latestVersion;
    // 版本状态 0-最新版本  1-有新版本，但现有版本可用  2-现有版本不可用，需要下载新版本
    if(data.status == 1 || data.status == 2){
        versionVisible.value = true;
        downloadURL.value = data.downloadURL;
        // 可用版本列表
        let availableVersionsList = data.availableVersionsList;
        // let versionList = availableVersionsList.split(",");
        if(availableVersionsList.indexOf(appVersion.value)>-1){
            btnVisible.value = true;
        }else{
            btnVisible.value = false;
        }
    // }else{
    //     if(userStore.isLogin){
    //         // _this.getUserInfo();
    //     }else{
    //         uni.reLaunch({
    //             url: '/pages/home/home',
    //         });
    //     }
    }
}

// 下载最新版本
const handleDown = ()=>{
    // 跳转到应用商店或下载最新版本的页面
    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();
    // }
}

//版本更新关闭
const handleClose=()=>{
    versionVisible.value = false;
    // 不更新版本 执行设备ID查询和绑定操作
    if(!versionVisible.value){
        selectDeviceId()
    }
}

// 查询设备ID
const selectDeviceId = async()=>{
    // 查询本地缓存的设备状态是否绑定过
    let deviceId = ref(undefined);
    deviceId.value = uni.getStorageSync('app_device');// 本地设备ID
    let res = await getBindStatus({deviceId:deviceId.value});
    setTimeout(()=>{
        // 检查是否已登录 并 获取用户信息
        if (userStore.isLogin) {
            // 绑定状态（1=已提交、2=等待审核、3=审核通过、4=绑定成功、5=审核拒绝）
            if(res.bindStatus == 4){
                uni.reLaunch({
                    url: '/pages/home/home',
                });
            }else{
                uni.reLaunch({
                    url: '/pages/deviceAuth/deviceAuth',
                });
            }
        }else{
            uni.reLaunch({
                url: '/pages/login/login',
            });
        }
    },2000)
}

</script>

<style>
.container {
	background:#307AF5 !important;
	height: calc(100vh - 100px) !important;
	position: relative;
    padding-top:100px;
}
.container .bg{
    background:url('@/static/images/loading-logo.png') no-repeat;
    background-size:700rpx 800rpx;
    width: 700rpx;
    height: 800rpx;
    margin:0 auto;
}
.container .version{
    color:#A8D4FF;
    font-size:32rpx;
    text-align: center;
    margin-top:35rpx;
}
.container .bottom-bg{
    background:url('@/static/images/loading-txt.png') no-repeat;
    background-size:656rpx 123rpx;
    width: 656rpx;
    height: 123rpx;
    position: absolute;
    bottom:48rpx;
    left:50%;
    margin-left:-328rpx;
}

.container .version-con{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
}
.version-con .v-bg{
    position: absolute;
    top:50%;
    left: 50%;
    /* width:620rpx; */
    width:540rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding:40rpx;
    margin-left:-310rpx;
    margin-top:-45%;
    text-align: center;
}
.version-con .v-bg .v-title{
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom:30rpx;
}
.version-con .v-bg .v-icon{
    font-size:70rpx;
    color:#28B6FF;
   
}
.version-con .v-bg .v-version{
    color:#0395E0;
    font-size:42rpx;
    font-weight: bold;
    margin:20rpx 0 30rpx;
}
.version-con .v-bg .v-update{
    font-size:32rpx;
    margin-bottom:70rpx;
}
.version-con .v-bg .version-btn{
    background-color: #05A3F4;
    text-align: center;
    width:360rpx;
    height:80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin:0 auto;
    color:#fff;
}
.version-con .v-bg .version-sub{
    color:#05A3F4;
    font-size:32rpx;
    margin:40rpx 0 30rpx;
}
</style>