frontend-app/pages/mine_about_us/mine_about_us.vue

<template>
	<view class="mine_about_us">
		<view class="about_us_image">
			<up-image src="/static/logo.png" width="100" height="100" bgColor="#f1f6ff00" shape="square" radius="10"></up-image>
			<view class="msg_">德商汇优品</view>
		</view>
		<view class="content_">
			德商汇优品是一款集线上商城、线下联盟商家的DAO聚合商城；通过“有趣”“有利”“有希望”的卖货玩法，吸引消费者、推广者、商家、投资人参与生态，共同打造共创共享的全球产业生态。
		</view>
		<view class="version_">
			<view class="version_fg"></view>
			<view class="version_item_" @click="getNewVersion">
				<view class="title_">检查版本</view>
				<view class="value_ check_version">
					<view v-if="isNewVersion" class="check_version_msg">发现新版本</view>
					<view style="margin-top: 14rpx;">
						<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00" />
					</view>
				</view>
			</view>
			<view class="version_fg"></view>
			<view class="version_item_">
				<view class="title_">当前版本</view>
				<view class="value_">v{{localAppVersonName}}.{{localAppVerson}}</view>
			</view>
		</view>
		<up-overlay :show="bannerShow" >
			<view class="up_content" @tap.stop>
				<view class="uni-banner">
					<view class="banner_box">
						<view class="title_">发现新版本</view>
						<view class="version_">
							<view class="version_item">V{{updateApkObj.versionCode}}</view>
						</view>
						<view class="conter">{{updateApkObj.content}}</view>
						<view class="banner_foot" v-if="!bannerPercentageShow">
							<button @click="goUpdate(updateApkObj,platformType)" class="banner_foot_button">立即更新</button>
							<view @click="bannerShow = false;" class="banner_foot_button_no" v-if="!updateApkObj.isForce">暂不更新</view>
						</view>
						<view v-else>
							<up-line-progress :percentage="bannerPercentage" activeColor="#009A4F"></up-line-progress>
							<view class="banner_loading_msg">
								更新中{{bannerPercentage}}%
							</view>
						</view>
					</view>
				</view>
			</view>
		</up-overlay>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import { comparisonVersionHandler } from '@/utils/index.js';
	import { checkAppVersion } from '@/api/common.js';
	import dayjs from 'dayjs';
	
	export default {
		data() {
			return {
				localAppVersonName:null,
				localAppVerson:null,
				isNewVersion:false,// 是否需要跟新
				platformType:null,// 当前版本号
				updateApkObj: {} ,// 后台数据
				bannerShow:false,
				bannerPercentageShow:false,// 是否显示进度条
				bannerPercentage:0,// 进度条
			};
		},
		mounted() {
			const localAppVersonName = uni.getStorageSync('version');
			if(localAppVersonName){
				this.localAppVersonName = localAppVersonName;
			}
			const localAppVerson = uni.getStorageSync('versionCode');
			if(localAppVerson){
				this.localAppVerson = localAppVerson;
			}
			// 获取设备是安卓还是ios
			const appUpdate = uni.getStorageSync('platform');
			// #ifdef APP-PLUS
			　　this.platformType = appUpdate == 'android' ? 'ANDROID' : 'IOS';
			　　this.checkVersion();  // 判断是否需要更新
			// #endif  
		},
		methods: {
			/**
			 * 检查最新的版本
			 */
			async checkVersion(){
				const params={
					terminal: this.platformType,
					versionCode:this.localAppVerson,
				}
				const res = await checkAppVersion(params);
				if(res && res.bizcode === 100){
					const data = res.data || {};
					if(data && Object.keys(data).length!==0 && comparisonVersionHandler(this.localAppVerson,data.versionCode)){
						this.isNewVersion = true;
					}
					this.updateApkObj = data;
				}
			},
			
			async getNewVersion(){
				const params={
					terminal: this.platformType,
					versionCode:this.localAppVerson,
				}
				const res = await checkAppVersion(params)
				if(res && res.bizcode === 100){
					const data = res.data || {};
					if(data && Object.keys(data).length!==0 && comparisonVersionHandler(this.localAppVerson,data.versionCode)){
						this.updateApkObj = data;
						this.isNewVersion = true;
						this.bannerShow = true;  // 显示弹窗
					}else{
						this.$refs.uToastRef.show({
							type: 'sesses',
							message: "当前已为最新版本~",
						});
					}
				}
			},
			// 安装
			goUpdate(updateApkObj,platformType) {
				const self = this;
				if (platformType === 'ANDROID') {
					// 弹出系统等待对话框
					var dtask = plus.downloader.createDownload(updateApkObj.downloadUrl, {}, function(d, status) {
						// 下载完成
						if (status == 200) {
							plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {force: true}, function(resp){
								uni.setStorageSync('versionUpdateTime', dayjs().valueOf()); // 记录升级的时间
								// 直接重启APP
								plus.runtime.restart();
							}, function(error) {
								console.log("error",error);
								uni.showToast({
									title: error.message,
									mask: false,
									duration: 1500
								});
							});
						} else {
							uni.showToast({
								title: '更新失败',
								mask: false,
								duration: 1500
							});
						}
					});
					try {
						dtask.start(); // 开启下载的任务
						let prg = 0;
						self.bannerPercentageShow = true;
						dtask.addEventListener('statechanged', function(task, status) {
							// 给下载任务设置一个监听 并根据状态  做操作
							switch (task.state) {
								case 1:
									break;
								case 2:
									break;
								case 3:
									prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
									console.log("prg",+prg);
									self.bannerPercentage = prg;
									break;
								case 4:
									plus.nativeUI.closeWaiting();
									self.bannerShow = false;  // 显示弹窗
									//下载完成
									break;
							}
						});
					} catch (err) {
						console.log("更新失败-03err",err);
						plus.nativeUI.closeWaiting();
						uni.showToast({
							title: '更新失败-03',
							mask: false,
							duration: 1500
						});
					}
				} else if (platformType === 'IOS') {  // ios跳转到app store
					plus.runtime.openURL(updateApkObj.downloadUrl);
				}
			},
		}
	}
</script>

<style lang="scss">
	.mine_about_us{
		background-color: $app-bj;
		padding: 30rpx;
		height: calc(100% - 60rpx);
		overflow: auto;
		.about_us_image{
			display: grid;
			justify-content: center;
			margin-top: 100rpx;
			.msg_{
				text-align: center;
				margin-top: 20rpx;
				font-size: 31rpx;
				color: rgba(0,0,0,0.85);
			}
		}
		.content_{
			// padding: 30rpx;
			// margin-top: 20rpx;
			padding: 60rpx 0;
		}
		.version_{
			margin-top: 20rpx;
			.version_fg{
				width: 100%;
				// height: 1rpx;
				border-bottom: 1rpx solid rgba(0,0,0,0.16);
			}
			.version_item_{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				line-height: 80rpx;
			}
			.title_{
				color: rgba(0,0,0,0.85);
			}
			.value_{
				color: rgba(0,0,0,0.26);
			}
			.check_version{
				display: flex;
				align-items: center;
			}
			.check_version_msg{
				color:$app-zt-color
			}
		}
	}
</style>