恢复组件

components/update/app-update.vue

@@ -5,12 +5,12 @@
 				<view class="update-wrap">
 					<image src="./images/img.png" class="top-img"></image>
 					<view class="content">
-						<text class="title">{{$t(`发现新版本`)}}{{ update_info.version }}</text>
+						<text class="title">{{ $t(`发现新版本`) }}{{ update_info.version }}</text>
 						<!-- 升级描述 -->
 						<view class="title-sub" v-html="update_info.info"></view>
 						<!-- 升级按钮 -->
 						<button class="btn" v-if="downstatus < 1" @click="nowUpdate()">
-							{{$t(`立即升级`)}}
+							{{ $t(`立即升级`) }}
 						</button>
 						<!-- 下载进度 -->
 						<view class="sche-wrap" v-else>
@@ -18,9 +18,9 @@
 							<view class="sche-bg">
 								<view class="sche-bg-jindu" :style="lengthWidth"></view>
 							</view>
-							<text class="down-text">{{$t(`下载进度`)}}:{{ (downSize / 1024 / 1024).toFixed(2) }}M/{{
-                  (fileSize / 1024 / 1024).toFixed(2)
-                }}M</text>
+							<text class="down-text">{{ $t(`下载进度`) }}:{{ (downSize / 1024 / 1024).toFixed(2) }}M/{{
+									(fileSize / 1024 / 1024).toFixed(2)
+							}}M</text>
 						</view>
 					</view>
 				</view>
@@ -31,400 +31,400 @@
 </template>
 
 <script>
-	let vm;
-	import {
-		getUpdateInfo
-	} from '@/api/public.js'
+let vm;
+import {
+	getUpdateInfo
+} from '@/api/public.js'
 
-	export default {
-		name: "appUpdate",
-		//@是否强制更新
-		props: {
-			tabbar: {
-				type: Boolean,
-				default: false, //是否有原生tabbar组件
-			},
-			getVer: {
-				type: Boolean,
-				default: false, //是否有原生tabbar组件
-			},
+export default {
+	name: "appUpdate",
+	//@是否强制更新
+	props: {
+		tabbar: {
+			type: Boolean,
+			default: false, //是否有原生tabbar组件
 		},
-		data() {
+		getVer: {
+			type: Boolean,
+			default: false, //是否有原生tabbar组件
+		},
+	},
+	data() {
+		return {
+			popup_show: false, //弹窗是否显示
+			platform: "", //ios or android
+			version: "1.0.0", //当前软件版本
+			need_update: false, // 是否更新
+			downing: false, //是否下载中
+			downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
+			update_info: {
+				os: "", //设备系统
+				version: "", //最新版本
+				info: "", //升级说明
+			},
+			fileSize: 0, //文件大小
+			downSize: 0, //已下载大小
+			viewObj: null, //原生遮罩view
+		};
+	},
+	created() {
+		vm = this;
+		if (!this.getVer) this.update()
+	},
+	computed: {
+		// 下载进度计算
+		lengthWidth: function () {
+			let w = (this.downSize / this.fileSize) * 100;
+			if (!w) {
+				w = 0;
+			} else {
+				w = w.toFixed(2);
+			}
 			return {
-				popup_show: false, //弹窗是否显示
-				platform: "", //ios or android
-				version: "1.0.0", //当前软件版本
-				need_update: false, // 是否更新
-				downing: false, //是否下载中
-				downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
-				update_info: {
-					os: "", //设备系统
-					version: "", //最新版本
-					info: "", //升级说明
-				},
-				fileSize: 0, //文件大小
-				downSize: 0, //已下载大小
-				viewObj: null, //原生遮罩view
+				width: w + "%", //return 宽度半分比
 			};
 		},
-		created() {
-			vm = this;
-			if (!this.getVer) this.update()
+		getHeight() {
+			let bottom = 0;
+			if (this.tabbar) {
+				bottom = 50;
+			}
+			return {
+				bottom: bottom + "px",
+				height: "auto",
+			};
 		},
-		computed: {
-			// 下载进度计算
-			lengthWidth: function() {
-				let w = (this.downSize / this.fileSize) * 100;
-				if (!w) {
-					w = 0;
-				} else {
-					w = w.toFixed(2);
-				}
-				return {
-					width: w + "%", //return 宽度半分比
-				};
-			},
-			getHeight() {
-				let bottom = 0;
-				if (this.tabbar) {
-					bottom = 50;
-				}
-				return {
-					bottom: bottom + "px",
-					height: "auto",
-				};
-			},
+	},
+	methods: {
+		// 检查更新
+		update() {
+			// #ifdef APP-PLUS
+			// 获取手机系统信息
+			uni.getSystemInfo({
+				success: function (res) {
+					vm.platform = res.platform; //ios  or android
+					console.log("手机系统信息", vm.platform);
+				},
+			});
+
+			// 获取版本号
+			plus.runtime.getProperty(plus.runtime.appid, function (inf) {
+				vm.version = inf.version;
+			});
+			console.log("当前版本", vm.version);
+			this.getUpdateInfo(); //获取更新信息
+			// #endif
 		},
-		methods: {
-			// 检查更新
-			update() {
-				// #ifdef APP-PLUS
-				// 获取手机系统信息
-				uni.getSystemInfo({
-					success: function(res) {
-						vm.platform = res.platform; //ios  or android
-						console.log("手机系统信息", vm.platform);
-					},
-				});
 
-				// 获取版本号
-				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
-					vm.version = inf.version;
+		// 获取线上版本信息
+		getUpdateInfo() {
+			//向后台发起请求，获取最新版本号
+			getUpdateInfo(this.platform === "ios" ? 2 : 1)
+				.then((res) => {
+					console.log(res)
+					if (Array.isArray(res.data)) {
+						return this.$emit('isNew')
+					}
+					const tagDate = uni.getStorageSync('app_update_time') || '',
+						nowDate = new Date().toLocaleDateString();
+					if (tagDate !== nowDate && !this.getVer) {
+						uni.setStorageSync('app_update_time', new Date().toLocaleDateString());
+					} else if ((tagDate !== nowDate) && this.getVer) {
+						if (!res.data.is_force) return
+					} else if (tagDate == nowDate && !this.getVer && !res.data.is_force) {
+						return
+					}
+					// 这里的返回的数据跟后台约定
+					let data = res.data;
+					// 循环获取当前设备对应的更新数据
+					vm.update_info = data;
+					if (!vm.update_info.platform) {
+						// 后台未配置当前系统的升级数据
+					} else {
+						console.log('111111111111111')
+						vm.checkUpdate(); ///检查是否更新
+					}
+				})
+				.catch((err) => {
+					vm.popup_show = false
+					console.log(err);
 				});
-				console.log("当前版本", vm.version);
-				this.getUpdateInfo(); //获取更新信息
-				// #endif
-			},
-
-			// 获取线上版本信息
-			getUpdateInfo() {
-				//向后台发起请求，获取最新版本号
-				getUpdateInfo(this.platform === "ios" ? 2 : 1)
-					.then((res) => {
-						console.log(res)
-						if(Array.isArray(res.data)){
-						 return	this.$emit('isNew')
-						}
-						const tagDate = uni.getStorageSync('app_update_time') || '',
-							nowDate = new Date().toLocaleDateString();
-						if (tagDate !== nowDate && !this.getVer) {
-							uni.setStorageSync('app_update_time', new Date().toLocaleDateString());
-						} else if ((tagDate !== nowDate) && this.getVer) {
-							if (!res.data.is_force) return
-						} else if (tagDate == nowDate && !this.getVer && !res.data.is_force) {
-							return
-						}
-						// 这里的返回的数据跟后台约定
-						let data = res.data;
-						// 循环获取当前设备对应的更新数据
-						vm.update_info = data;
-						if (!vm.update_info.platform) {
-							// 后台未配置当前系统的升级数据
-						} else {
-							console.log('111111111111111')
-							vm.checkUpdate(); ///检查是否更新
-						}
-					})
-					.catch((err) => {
-						vm.popup_show = false
-						console.log(err);
+		},
+		// 检查是否更新
+		checkUpdate() {
+			vm.need_update = vm.compareVersion(vm.version, vm.update_info.version); // 检查是否需要升级
+			if (vm.need_update) {
+				vm.popup_show = true; //线上版本号大于当前安装的版本号  显示升级框
+				if (vm.tabbar) {
+					//页面是否有原生tabbar组件
+					// 创建原生view用来遮罩tabbar的点击事件 (如果是没有用原生的tabbar这一步可以取消)
+					vm.viewObj = new plus.nativeObj.View("viewObj", {
+						bottom: "0px",
+						left: "0px",
+						height: "50px",
+						width: "100%",
+						backgroundColor: "rgba(0,0,0,.6)",
 					});
-			},
-			// 检查是否更新
-			checkUpdate() {
-				vm.need_update = vm.compareVersion(vm.version, vm.update_info.version); // 检查是否需要升级
-				if (vm.need_update) {
-					vm.popup_show = true; //线上版本号大于当前安装的版本号  显示升级框
-					if (vm.tabbar) {
-						//页面是否有原生tabbar组件
-						// 创建原生view用来遮罩tabbar的点击事件 (如果是没有用原生的tabbar这一步可以取消)
-						vm.viewObj = new plus.nativeObj.View("viewObj", {
-							bottom: "0px",
-							left: "0px",
-							height: "50px",
-							width: "100%",
-							backgroundColor: "rgba(0,0,0,.6)",
-						});
-						vm.viewObj.show(); //显示原生遮罩
-					}
-				} else {
-					this.$emit('isNew')
+					vm.viewObj.show(); //显示原生遮罩
 				}
-			},
+			} else {
+				this.$emit('isNew')
+			}
+		},
 
-			// 取消更新
-			closeUpdate() {
-				if (vm.update_info.is_force) {
-					// 强制更新，取消退出app
-					this.platform == "android" ?
-						plus.runtime.quit() :
-						plus.ios
+		// 取消更新
+		closeUpdate() {
+			if (vm.update_info.is_force) {
+				// 强制更新，取消退出app
+				this.platform == "android" ?
+					plus.runtime.quit() :
+					plus.ios
 						.import("UIApplication")
 						.sharedApplication()
 						.performSelector("exit");
-				} else {
-					vm.popup_show = false; //关闭升级弹窗
-					if (vm.viewObj) vm.viewObj.hide(); //隐藏原生遮罩
-				}
-			},
-			// 立即更新
-			nowUpdate() {
-				if (vm.downing) return false; //如果正在下载就停止操作
-				vm.downing = true; //状态改变 正在下载中
-
-				if (/\.apk$/.test(vm.update_info.url)) {
-					// 如果是apk地址
-					vm.download_wgt(); // 安装包/升级包更新
-				} else if (/\.wgt$/.test(vm.update_info.url)) {
-					// 如果是更新包
-					vm.download_wgt(); // 安装包/升级包更新
-				} else {
-					plus.runtime.openURL(vm.update_info.url, function() {
-						//调用外部浏览器打开更新地址
-						plus.nativeUI.toast("打开错误");
-					});
-				}
-			},
-			// 下载升级资源包
-			download_wgt() {
-				plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
-				let options = {
-					method: "get",
-				};
-				let dtask = plus.downloader.createDownload(
-					vm.update_info.url,
-					options,
-					function(d, status) {}
-				);
+			} else {
+				vm.popup_show = false; //关闭升级弹窗
+				if (vm.viewObj) vm.viewObj.hide(); //隐藏原生遮罩
+			}
+		},
+		// 立即更新
+		nowUpdate() {
+			if (vm.downing) return false; //如果正在下载就停止操作
+			vm.downing = true; //状态改变 正在下载中
 
-				dtask.addEventListener("statechanged", function(task, status) {
-					if (status === null) {} else if (status == 200) {
-						//在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西///////////////////////////////////////////////////
-						vm.downstatus = task.state;
-						switch (task.state) {
-							case 3: // 已接收到数据
-								vm.downSize = task.downloadedSize;
-								if (task.totalSize) {
-									vm.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
-								}
-								break;
-							case 4:
-								vm.installWgt(task.filename); // 安装wgt包
-								break;
-						}
-					} else {
-						plus.nativeUI.closeWaiting();
-						plus.nativeUI.toast("下载出错");
-						vm.downing = false;
-						vm.downstatus = 0;
-					}
+			if (/\.apk$/.test(vm.update_info.url)) {
+				// 如果是apk地址
+				vm.download_wgt(); // 安装包/升级包更新
+			} else if (/\.wgt$/.test(vm.update_info.url)) {
+				// 如果是更新包
+				vm.download_wgt(); // 安装包/升级包更新
+			} else {
+				plus.runtime.openURL(vm.update_info.url, function () {
+					//调用外部浏览器打开更新地址
+					plus.nativeUI.toast("打开错误");
 				});
-				dtask.start();
-			},
-
-			// 安装文件
-			installWgt(path) {
-				plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
-				plus.runtime.install(
-					path, {},
-					function() {
-						plus.nativeUI.closeWaiting();
-						// 应用资源下载完成！
-						plus.nativeUI.alert("应用资源下载完成！", function() {
-							plus.runtime.restart();
-						});
-					},
+			}
+		},
+		// 下载升级资源包
+		download_wgt() {
+			plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
+			let options = {
+				method: "get",
+			};
+			let dtask = plus.downloader.createDownload(
+				vm.update_info.url,
+				options,
+				function (d, status) { }
+			);
 
-					function(e) {
-						plus.nativeUI.closeWaiting();
-						// 安装更新文件失败
-						plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
+			dtask.addEventListener("statechanged", function (task, status) {
+				if (status === null) { } else if (status == 200) {
+					//在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西///////////////////////////////////////////////////
+					vm.downstatus = task.state;
+					switch (task.state) {
+						case 3: // 已接收到数据
+							vm.downSize = task.downloadedSize;
+							if (task.totalSize) {
+								vm.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
+							}
+							break;
+						case 4:
+							vm.installWgt(task.filename); // 安装wgt包
+							break;
 					}
-				);
-			},
-			// 对比版本号
-			compareVersion(ov, nv) {
-				if (!ov || !nv || ov == "" || nv == "") {
-					return false;
+				} else {
+					plus.nativeUI.closeWaiting();
+					plus.nativeUI.toast("下载出错");
+					vm.downing = false;
+					vm.downstatus = 0;
 				}
-				let b = false,
-					ova = ov.split(".", 4),
-					nva = nv.split(".", 4);
-				for (let i = 0; i < ova.length && i < nva.length; i++) {
-					let so = ova[i],
-						no = parseInt(so),
-						sn = nva[i],
-						nn = parseInt(sn);
-					if (nn > no || sn.length > so.length) {
-						return true;
-					} else if (nn < no) {
-						return false;
-					}
+			});
+			dtask.start();
+		},
+
+		// 安装文件
+		installWgt(path) {
+			plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
+			plus.runtime.install(
+				path, {},
+				function () {
+					plus.nativeUI.closeWaiting();
+					// 应用资源下载完成！
+					plus.nativeUI.alert("应用资源下载完成！", function () {
+						plus.runtime.restart();
+					});
+				},
+
+				function (e) {
+					plus.nativeUI.closeWaiting();
+					// 安装更新文件失败
+					plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
 				}
-				if (nva.length > ova.length && 0 == nv.indexOf(ov)) {
+			);
+		},
+		// 对比版本号
+		compareVersion(ov, nv) {
+			if (!ov || !nv || ov == "" || nv == "") {
+				return false;
+			}
+			let b = false,
+				ova = ov.split(".", 4),
+				nva = nv.split(".", 4);
+			for (let i = 0; i < ova.length && i < nva.length; i++) {
+				let so = ova[i],
+					no = parseInt(so),
+					sn = nva[i],
+					nn = parseInt(sn);
+				if (nn > no || sn.length > so.length) {
 					return true;
-				} else {
+				} else if (nn < no) {
 					return false;
 				}
-			},
+			}
+			if (nva.length > ova.length && 0 == nv.indexOf(ov)) {
+				return true;
+			} else {
+				return false;
+			}
 		},
-	};
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.popup-bg {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		position: fixed;
-		top: 0;
-		left: 0rpx;
-		right: 0;
-		bottom: 0;
-		width: 750rpx;
-		background-color: rgba(0, 0, 0, 0.6);
-		z-index: 10000;
-	}
+.popup-bg {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0rpx;
+	right: 0;
+	bottom: 0;
+	width: 750rpx;
+	background-color: rgba(0, 0, 0, 0.6);
+	z-index: 10000;
+}
 
-	.popup-content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
+.popup-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.popup-content-show {
+	animation: mymove 500ms;
+	transform: scale(1);
+}
+
+@keyframes mymove {
+	0% {
+		transform: scale(0);
+		/*开始为原始大小*/
 	}
 
-	.popup-content-show {
-		animation: mymove 500ms;
+	100% {
 		transform: scale(1);
 	}
+}
 
-	@keyframes mymove {
-		0% {
-			transform: scale(0);
-			/*开始为原始大小*/
-		}
+.update-wrap {
+	width: 580rpx;
+	border-radius: 18rpx;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: #ffffff;
+	padding: 170rpx 30rpx 0;
 
-		100% {
-			transform: scale(1);
-		}
+	.top-img {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 256rpx;
+		top: -128rpx;
 	}
 
-	.update-wrap {
-		width: 580rpx;
-		border-radius: 18rpx;
-		position: relative;
+	.content {
 		display: flex;
 		flex-direction: column;
-		background-color: #ffffff;
-		padding: 170rpx 30rpx 0;
+		align-items: center;
+		padding-bottom: 40rpx;
 
-		.top-img {
-			position: absolute;
-			left: 0;
-			width: 100%;
-			height: 256rpx;
-			top: -128rpx;
+		.title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #6526f3;
 		}
 
-		.content {
+		.title-sub {
+			text-align: center;
+			font-size: 24rpx;
+			color: #666666;
+			padding: 30rpx 0;
+		}
+
+		.btn {
+			width: 460rpx;
 			display: flex;
-			flex-direction: column;
 			align-items: center;
-			padding-bottom: 40rpx;
-
-			.title {
-				font-size: 32rpx;
-				font-weight: bold;
-				color: #6526f3;
-			}
-
-			.title-sub {
-				text-align: center;
-				font-size: 24rpx;
-				color: #666666;
-				padding: 30rpx 0;
-			}
-
-			.btn {
-				width: 460rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #ffffff;
-				font-size: 30rpx;
-				height: 80rpx;
-				line-height: 80rpx;
-				border-radius: 100px;
-				background-color: #6526f3;
-				margin-top: 20rpx;
-			}
+			justify-content: center;
+			color: #ffffff;
+			font-size: 30rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			border-radius: 100px;
+			background-color: #6526f3;
+			margin-top: 20rpx;
 		}
 	}
+}
+
+.close-ioc {
+	width: 70rpx;
+	height: 70rpx;
+	margin-top: 30rpx;
+}
 
-	.close-ioc {
-		width: 70rpx;
-		height: 70rpx;
-		margin-top: 30rpx;
+.sche-wrap {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 10rpx 50rpx 0;
+
+	.sche-wrap-text {
+		font-size: 24rpx;
+		color: #666;
+		margin-bottom: 20rpx;
 	}
 
-	.sche-wrap {
+	.sche-bg {
+		position: relative;
+		background-color: #cccccc;
+		height: 30rpx;
+		border-radius: 100px;
+		width: 480rpx;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
-		justify-content: flex-end;
-		padding: 10rpx 50rpx 0;
 
-		.sche-wrap-text {
-			font-size: 24rpx;
-			color: #666;
-			margin-bottom: 20rpx;
-		}
-
-		.sche-bg {
-			position: relative;
-			background-color: #cccccc;
+		.sche-bg-jindu {
+			position: absolute;
+			left: 0;
+			top: 0;
 			height: 30rpx;
+			min-width: 40rpx;
 			border-radius: 100px;
-			width: 480rpx;
-			display: flex;
-			align-items: center;
-
-			.sche-bg-jindu {
-				position: absolute;
-				left: 0;
-				top: 0;
-				height: 30rpx;
-				min-width: 40rpx;
-				border-radius: 100px;
-				background: url(images/round.png) #5775e7 center right 4rpx no-repeat;
-				background-size: 26rpx 26rpx;
-			}
+			background: url(images/round.png) #5775e7 center right 4rpx no-repeat;
+			background-size: 26rpx 26rpx;
 		}
+	}
 
-		.down-text {
-			font-size: 24rpx;
-			color: #5674e5;
-			margin-top: 16rpx;
-		}
+	.down-text {
+		font-size: 24rpx;
+		color: #5674e5;
+		margin-top: 16rpx;
 	}
+}
 </style>