cy_pda/pages/user/user.vue

<template>
	<view>
		<view class="u-demo-block__content">
			<view class="us-ava-content">
				<view class="us-avatar">
					<u-avatar
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F03f7062a91dc5f1bfd45f84c0645bd7f137ce161.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658542917&t=d4a53cf0ae2a4a69e8d7c7371bd9a47a"
						mode="circle" size="large">
					</u-avatar>
				</view>
				<view class="us-text">
					<text>{{this.vuex_user.userName}}</text>
				</view>
			</view>
			<u-row>
				<u-col>
					<view class="us-item">
						<text>系统设置</text>
						<u-icon name="arrow-right" color="#CCCCCC" size="35rpx"></u-icon>
					</view>
					<view class="us-item">
						<text>版本信息</text>
						<text>{{vuex_code}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view>
			<view class="button" hover-class="button-hover" @click="logOut()">
				<text>退出登录</text>
			</view>
		</view>

		<u-modal v-model="showUpdate" :show-cancel-button="true" confirm-text="现在更新" cancel-text="暂不更新" title="软件更新"
			@cancel="cancel" @confirm="confirm">
			<view class="u-update-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>

		<u-modal v-model="showProcess" :show-cancel-button="true" :show-confirm-button="false" title="软件更新"
			@cancel="cancelDown" cancel-text="取消更新">
			<view class="u-update-content">
				<u-line-progress :percent="percent" :show-percent="true" :striped-active="true" :striped="true">
				</u-line-progress>
				<p class="tipSpan">软件更新中，请勿断开相框电源</p>
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showUpdate: false,
				showProcess: false,
				content: "",
				downloadUrl: "",
				percent: 0, //下载进度条显示
				dtask: null
			};
		},
		onShow() {
			this.getCheckVersion();
		},
		methods: {
			logOut() {
				this.$u.vuex("vuex_token", '');
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/login/login",
					});
				}, 500);
			},
			getCheckVersion() {
				uni.getSystemInfo({ //获取系统信息
					success: (res) => {
						if (res.platform == "android") { //安卓才启动更新
							console.log(this.vuex_code + "vuex_code");
							this.$u.api.getCheckVersion({
								code: this.vuex_code
							}).then((res) => {
								let isUpdate = res.data.isUpdate; //1：要更新  0：不用更新
								if (isUpdate === 1) {
									//版本号缓存
									this.$u.vuex("vuex_code", res.data.code);
									this.downloadUrl = res.data.url;
									this.content = '有更新可用，版本号：' + res.data.code + "<br>" + res.data
										.remarks;
									this.showUpdate = true;
								}
							})
						}
					}
				})
			},
			cancel() {
				this.closeModal();
			},
			confirm() {
				this.dtask = plus.downloader.createDownload(this.downloadUrl, {}, function(d,
					status) { //新建下载任务
					if (status == 200) { //当下载完成
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d
							.filename), {}, {}, function(error) { //安装应用
							uni.showToast({
								title: '安装失败',
								duration: 1500,
								icon: 'none'
							});
						})
					} else {
						uni.showToast({
							title: '更新失败',
							duration: 1500,
							icon: 'none'
						});
					}
				})
				this.dtask.start();
				var prg = 0;
				// var showLoading = plus.nativeUI.showWaiting("正在下载");
				this.showProcess = true;
				let _this = this;
				this.dtask.addEventListener('statechanged', function(task, status) { //添加下载任务事件监听器
					// 给下载任务设置一个监听 并根据状态 做操作
					switch (task.state) {
						case 1:
							// showLoading.setTitle("正在下载");
							break;
						case 2:
							// showLoading.setTitle("已连接到服务器");
							break;
						case 3:
							prg = parseInt( //下载的进度
								(parseFloat(task.downloadedSize) / parseFloat(task
									.totalSize)) * 100
							);
							// showLoading.setTitle("版本更新,正在下载" + prg + "% ");
							_this.percent = prg;
							console.log(prg);
							break;
						case 4:
							// plus.nativeUI.closeWaiting(); //关闭系统提示框
							this.showProcess = false;
							//下载完成
							break;
					}
				});
			},
			closeModal() {},
			
			cancelDown() {
				this.dtask.abort();
			}
		}
	}
</script>
<style lang="scss">
	@import "user.scss"
</style>
<style scoped lang="scss">
	.u-full-content {
		background-color: #00C777;
	}

	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;
	}

	.tipSpan {
		color: #DCDCDC;
		margin-top: 20rpx;
		text-align: center;
	}
</style>