xinhuaqujiaoyuju/pages/profile/profile.vue

<template>
	<view class="user">
		<!--头部-->
		<view class="user-section" :class="'bg-' + themeColor.name">
			<!--用户信息-->
			<view class="user-info-box">
				<view class="portrait-box" v-if="hasLogin">
					<image class="portrait" :src="avatar"></image>
					<text class="username">
						{{user.nickName}}
						{{ user.phonenumber}}
					</text>
				</view>
				<view class="portrait-box" v-else @tap="navTo(`/pages/public/login`)">
					<image class="portrait" :src="headImg"></image>
					<text class="username">
						{{'登录/注册'}}
					</text>
				</view>
			</view>
		</view>
		<!-- 个人中心 内容区-->
		<view class="cover-container" :style="[
			{
				transform: coverTransform,
				transition: coverTransition
			}
		]" @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" :src="arc"></image>

			<!-- 个人资料 -->
			<view class="set">
				<view class="list-cell b-b" :class="{ 'm-t': item.class === 'mT' }" v-for="item in setList"
					:key="item.title" @tap="navTo(item.url)" hover-class="cell-hover" :hover-stay-time="50">
					<text class="cell-tit updateDotParent">{{ item.title }}<i v-show="item.title =='检查更新'"></i></text><!-- v-bind:class="{'updateTipDot':neepUpdate}" -->
					<text class="cell-tip">{{ item.content }}</text>
					<text class="cell-more iconfont iconyou"></text>
					{{item.tatle}}
				</view>
				
			</view>

			<!-- <view class="cu-list menu sm-border card-menu">
				<view class="cu-item">
					<view class="content flex align-center">
						<text class="cuIcon-colorlens" :class="'text-' + themeColor.name"></text>
						<view class="padding solid radius shadow-blur" :class="'bg-' + themeColor.name"></view>
						<view class="title">主题色：<text :class="'text-' + themeColor.name">{{
							themeColor.title
						}}</text></view>
					</view>
					<view class="action">
						<button class="cu-btn round shadow" @click="showColorModal" :class="'bg-' + themeColor.name">
							<text class="cuIcon-colorlens"></text> 选择主题
						</button>
					</view>
				</view>
			</view> -->
			<view v-if="hasLogin" class="list-cell log-out-btn" :class="'text-' + themeColor.name" @tap="toLogout">
				<text class="cell-tit">退出登录</text>
			</view>
			<!-- 选择颜色模态框 -->
			<view class="cu-modal" :class="{ show: colorModal }">
				<view class="cu-dialog">
					<view class="cu-bar justify-end solid-bottom">
						<view class="content">选择颜色</view>
						<view class="action" @tap="colorModal = false">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="grid col-5 padding">
						<view class="padding-xs" v-for="(item, index) in themeList" :key="index" @tap="SetColor(item)"
							:data-color="item.name">
							<view class="padding-tb radius" :class="'bg-' + item.name">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		mapMutations
	} from 'vuex';
	import listCell from '@/components/oa-list-cell';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell
		},
		data() {
			return {
				hasLogin: false,
				user: {

				},
				colorModal: false,
				mycenterList: this.$mConstDataConfig.mycenterList,
				themeList: this.$mConstDataConfig.themeList,
				setList: this.$mConstDataConfig.setList,
				headImg: this.$mAssetsPath.headImg,
				userBg: this.$mAssetsPath.userBg,
				arc: this.$mAssetsPath.arc,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				avatar:'',
				//控制有更新时的提示红点
				neepUpdate:this.$needUpdate,
			};
		},
		onShow() {
			// 初始化数据
			this.initData();
		},
		onLoad() {
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform === 'ios') {
				this.CustomBar = 0;
			}
			// #endif
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {}
		},
		// #endif
		methods: {
			handleTip(isNewVersion) {
				this.isNewVersion = isNewVersion;
			},
			handleVersionUpgradeShow() {
				this.isVersionUpgradeShow = false;
			},
			// 数据初始化
			initData() {
				this.user = uni.getStorageSync('user');
				// 缓存大小
				//this.setList[2].content = `${uni.getStorageInfoSync().currentSize} kb`;
				let that = this;
				// #ifdef APP-PLUS
				 plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {  
					//version属性  
				   that.setList[3].content = `V ` + wgtinfo.version
				} );
				// this.setList[3].content = `当前版本 V` + plus.runtime.version;
				// #endif
				this.hasLogin = this.$store.getters.hasLogin;
				//this.user = this.$store.state.user;
				//console.log(JSON.stringify(this.user))file:///C:/Users/Administrator/Desktop/portrait.png
				if(this.user.avatar){
					this.avatar = this.$mConfig.baseUrl + this.user.avatar;
				}else{
					this.avatar = "../../static/portrait.png";
				}
				
				uni.setTabBarStyle({
					selectedColor: this.themeColor.color,
					borderStyle: 'white'
				});
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				});
				this.themeColor.tabList && this.themeColor.tabList.forEach((selectedIconPath, index) => {
					uni.setTabBarItem({
						index,
						selectedIconPath
					});
				});

			},

			showColorModal() {
				this.colorModal = true;
			},
			SetColor(item) {
				this.colorModal = false;
				this.themeColor = item;
				this.$mStore.commit('setThemeColor', item);
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				});
				uni.setTabBarStyle({
					selectedColor: this.themeColor.color,
					borderStyle: 'white'
				});
				this.themeColor.tabList && this.themeColor.tabList.forEach((selectedIconPath, index) => {
					uni.setTabBarItem({
						index,
						selectedIconPath
					});
				});
			},

			// 统一跳转接口,拦截未登录路由
			navTo(route) {
				if (!route) return;
				if (route === 'clearCache') {
					uni.showModal({
						content: '确定要清除缓存吗',
						success: e => {
							if (e.confirm) {
								uni.clearStorageSync();
								this.setList[2].content = '0 kb';
								this.$mStore.commit('login', this.user);
								this.$mHelper.toast('清除缓存成功');
							}
						}
					});
					return;
				} else if (route === 'versionUpgrade') {
					//当前版本号
					let nativeVersion = null
					let that = this
					// #ifdef APP-PLUS
					plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
					 nativeVersion = wgtinfo.version || plus.runtime.version
					  console.log("本地运行时版本"+nativeVersion)
					 that.checkUpdate(nativeVersion);
					} );
					// #endif
					 console.log("本地版本"+nativeVersion)
					
					// this.checkUpdate(wgtinfo.version || plus.runtime.version);
					//检查版本号
					// this.checkUpdate(nativeVersion);
					// this.isVersionUpgradeShow = true;
					// if (this.isNewVersion) {
					// 	this.$mHelper.toast('已经是最新版本');
					// }
					return;
				} else {
					this.$mRouter.push({
						route
					});
				}
			},

			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			toLogout() {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确认退出吗？",
					success: function(res) {
						if (res.confirm) {
							that.$store.commit('logout', that.$store.state);
							uni.reLaunch({
								url: '/pages/public/login'
							})
						}
					}
				})
			},
			//检查服务器版本号
			checkUpdate(nativeVersion) {
				console.log("版本号为："+nativeVersion)
				//请求的url
				let url = this.$mConfig.baseUrl + '/appinterface/ip/version';
				//用户token 必传参数
				let token = this.$preToken + ' ' + this.$store.state.accessToken;
				this.$http.request({
						url: url,
						header: {
							'content-type': 'application/json'
						},
					}).then(r => {
						//获取到的app最新版本号
						//获取url，如果含有中文，进行编码处理
						let url = encodeURI(r.data.dataUrl);
						let app_last_version = r.data.lastVersion;

						// console.log("下载地址"+url)
						// console.log("服务器版本：" + app_last_version)
						// console.log("客户端版本：" + nativeVersion)
						//比较两个版本
						let result = this.compareVersion(nativeVersion, app_last_version);
						console.log("需要更新"+result)
						console.log(this.$mConfig.baseUrl + r.data.dataUrl)
						// result为true，表示本地版本小于服务器版本
						if (result) {
							var that = this
							uni.showModal({
								title: "有新的版本",
								content: "请确认是否更新?",
								success: (info) => {
									console.log("服务器版本：" + app_last_version)
									console.log("客户端版本：" + nativeVersion)
									if (info.confirm) {
										// console.log(plus.os.name)
										// 因为App.vue中不能直接使用组件，这里用到了vuex来调用下载进度的组件
										// 显示下载进度弹窗
										//this.$store.commit('setHide',true)
										if (plus.os.name.toLowerCase() == 'ios') {
											// ios直接跳转到下载页面
											let downloadUrl = this.$mConfig.baseUrl + r.data.dataUrl
											return plus.runtime.openURL(downloadUrl)
										} else {
											let downloadUrl = this.$mConfig.baseUrl + r.data.dataUrl
											if(downloadUrl.substring(downloadUrl.lastIndexOf(".")+1) == "apk"){
												return that.downloadApk(downloadUrl)
											}else if(downloadUrl.substring(downloadUrl.lastIndexOf(".")+1) == "wgt"){
												return that.downloadWgt(downloadUrl)
											}
										}
									}
								}
							})
							//下载apk
							// this.$mHelper.toast('准备下载新版本');
							// let downloadUrl = this.$mConfig.baseUrl + r.data.dataUrl
							// console.log(downloadUrl)
							// this.downloadApk(downloadUrl);
							//安装apk
						} else {
							this.$mHelper.toast('已经是最新版本');

						}
					})
					.catch(() => {
						toastMsg('warning', "失败");
					});
			},
			compareVersion(nativeVersion, lastVersion) {
				nativeVersion = nativeVersion.split('.');
				lastVersion = lastVersion.split('.');
				let n = Math.max(nativeVersion.length, lastVersion.length)
				for (let i = 0; i < n; i++) {
					let code1 = (nativeVersion[i] === undefined) ? 0 : parseInt(nativeVersion[i]);
					let code2 = (lastVersion[i] === undefined) ? 0 : parseInt(lastVersion[i]);
					if (code1 > code2) {
						return false
					} else if (code1 < code2) {
						return true
					}
				}
				return false;
			},
			downloadApk(url) {
				let that = this;
				let watiting = plus.nativeUI.showWaiting("下载文件...");
				let dtask = plus.downloader.createDownload(url, {
					method: "GET",
					retry: 0,
				});

				dtask.addEventListener(
					"statechanged",
					function(task, status) {
						if (!dtask) {
							return;
						}
						switch (task.state) {
							case 1:
								break;
							case 2:
								break;
							case 3:
								var nowData = Math.floor(
									(task.downloadedSize * 100) / task.totalSize
								);
								watiting.setTitle("已下载：" + nowData + "%");
								if (nowData === 100) {
									watiting.toast("正在准备环境，请稍后！");
									watiting.close();
								}
								break;
							case 4:
								// 安装apk资源包
								plus.runtime.install(
									dtask.filename, {},
									function() {
										plus.nativeUI.closeWaiting();
										this.$needUpdate = false;
										plus.runtime.restart();
										//  plus.nativeUI.alert("更新完成！", function () {
										// //  更新完成后重启应用
										// plus.runtime.restart();
										//  });
									},
									function(e) {
										plus.nativeUI.closeWaiting();
										plus.nativeUI.toast("安装更新失败！");
										this.$needUpdate = true;
									}
								);
								break;
							default:
								break;
						}
					},
					false
				);
				dtask.setRequestHeader("Access-Control-Allow-Origin", "*");
				dtask.start();
			},

			//安装wgt
			downloadWgt(url){
				
				uni.downloadFile({  
					url: url,  
					success: (downloadResult) => {  
						// console.log(plus.runtime.version)
						// console.log(url)
						// console.log(downloadResult.tempFilePath+'==========='+downloadResult.statusCode)
						plus.nativeUI.showWaiting("下载wgt文件...");
						if (downloadResult.statusCode === 200) {  
							plus.nativeUI.toast("正在准备环境...");
							plus.runtime.install(downloadResult.tempFilePath, {  
								force: false  
							}, function() {  
								plus.nativeUI.closeWaiting();
								plus.nativeUI.toast("更新成功，正在重启应用！");
								this.$needUpdate = false;
								plus.runtime.restart();  
							}, function(e) {  
								plus.nativeUI.closeWaiting();
								plus.nativeUI.toast("安装更新失败！"+e);
								this.$needUpdate = true;
								console.log(e)
							});  
						}  
					}  
				});  
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: $page-color-base;
	}
	
	.updateDotParent{
		position:relative;
	}
	.updateTipDot {
		display:block;
		background:#f00;
		border-radius:50%;
		width:8px;
		height:8px;
		top:9px;
		left:73px;
		position:absolute;
	}
	
	.user {
		.promotion-center {
			background: #fff;
			margin-bottom: 20upx;

			/*分类列表*/
			.category-list {
				width: 100%;
				padding: 0 0 30upx 0;
				border-bottom: solid 2upx #f6f6f6;
				display: flex;
				flex-wrap: wrap;

				.category {
					width: 33.3%;
					margin-top: 50upx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					.img {
						width: 100%;
						display: flex;
						justify-content: center;

						.iconfont {
							font-size: $font-lg + 24upx;
						}
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 24upx;
						color: #3c3c3c;
					}

					.share-btn {
						height: 142upx;
						text-align: left;
						background: none;
						padding: 0;
						margin: 0;
					}

					.share-btn:after {
						border: none;
						border-radius: none;
					}
				}
			}
		}

		.order-section {
			@extend %section;
			padding: 28upx 0;

			.order-item {
				@extend %flex-center;
				width: 120upx;
				height: 120upx;
				border-radius: 10upx;
				font-size: $font-sm;
				color: $font-color-dark;
				position: relative;
			}

			.badge {
				position: absolute;
				top: 0;
				right: 4upx;
			}

			.iconfont {
				font-size: 48upx;
			}

			.icon-shouhoutuikuan {
				font-size: 44upx;
			}
		}

		.no-foot-print {
			text-align: center;
			padding: 48upx 0;

			.no-foot-print-icon {
				font-size: $font-lg + 2upx;
				margin-right: 10upx;
			}
		}

		.set {
			padding: $spacing-base 0;

		}

		.cu-list.card-menu {
			margin: $spacing-base 0;

			.title {
				margin-left: $spacing-base;
			}
		}

		.user-section {
			height: 520upx;
			padding: 100upx 30upx 0;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 60vw;
				opacity: 0.84;
			}

			.user-info-box {
				height: 180upx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				justify-content: space-between;

				.portrait-box {
					display: flex;
					align-items: center;

					.portrait {
						width: 130upx;
						height: 130upx;
						border: 5upx solid #fff;
						border-radius: 50%;
					}

					.username {
						font-size: $font-lg + 6upx;
						color: $color-white;
						margin-left: 20upx;
					}

					button {
						background-color: transparent;
						font-size: $font-lg + 6upx;
						color: $font-color-dark;
						border: none;
					}

					button::after {
						border: none;
					}
				}
			}

			.vip-card-box {
				display: flex;
				flex-direction: column;
				color: #f7d680;
				height: 240upx;
				background: url('/static/vip-card.png');
				background-size: 100% 100%;
				border-radius: 16upx 16upx 0 0;
				overflow: hidden;
				position: relative;
				padding: 20upx 24upx;

				.b-btn {
					position: absolute;
					right: 24upx;
					top: 24upx;
					width: 160upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					font-size: 22upx;
					color: #36343c;
					border-radius: 20px;
					background: linear-gradient(to left, #f9e6af, #ffd465);
					z-index: 1;
				}

				.tit {
					font-size: $font-base + 2upx;
					color: #f7d680;
					margin-bottom: 28upx;

					.iconfont {
						color: #f6e5a3;
						display: inline-block;
						margin-right: 16upx;
					}
				}
			}
		}

		.cover-container {
			margin-top: -150upx;
			padding: 0 30upx 20upx;
			position: relative;
			background-color: $page-color-base;

			.arc {
				position: absolute;
				left: 0;
				top: -34upx;
				width: 100%;
				height: 36upx;
			}

			.promotion-center {
				background: #fff;
				margin-bottom: 20upx;

				/*分类列表*/
				.category-list {
					width: 100%;
					padding: 0 0 30upx 0;
					border-bottom: solid 2upx #f6f6f6;
					display: flex;
					flex-wrap: wrap;

					.category {
						width: 33.3%;
						margin-top: 50upx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						.img {
							width: 100%;
							display: flex;
							justify-content: center;

							.iconfont {
								font-size: $font-lg + 24upx;
							}
						}

						.text {
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 24upx;
							color: #3c3c3c;
						}

						.share-btn {
							height: 142upx;
							text-align: left;
							background: none;
							padding: 0;
							margin: 0;
						}

						.share-btn:after {
							border: none;
							border-radius: none;
						}
					}
				}
			}

			.tj-sction {
				@extend %section;
				display: flex;

				.tj-item {
					@extend %flex-center;
					flex: 1;
					flex-direction: column;
					margin: 30upx 0;
					font-size: $font-sm;
					color: #75787d;
					/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
				}

				/*.tj-item:last-child {*/
				/*border-right: none;*/
				/*}*/
				.num {
					font-size: $font-base;
				}

				.red {
					color: $base-color;
				}
			}

		}
	}
	
	.log-out-btn{
		border: 1px solid;
		border-radius: 10px;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		justify-content: space-around;
		display: flex;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
</style>