yuanqu_ui/pages/mine/index.vue

<template>
	<view class="zxbox">
		<view class="navbox">
			<uni-nav-bar color="#ffffff"  :background-color="backgroundColor" :border="false"
				statusBar='true' fixed="true">
			</uni-nav-bar>
		</view>
		<image :src="bgimg" class="bgimg"></image>
		<view class="mbox">
			<view class="infobox flexc" @click="handleToInfo">
				<view class="cbox">
					<view class="tit">{{name?name:'登录账号'}}</view>
					<view class="txt">点击登录 享受更多精彩信息</view>
					<!-- <view class="flexc pr" v-if="deptName">
						<image :src="headl"></image>
							<view class="txt">{{deptName}}点击登录 享受更多精彩信息</view>
						<image :src="headr"></image>
					</view> -->
				</view>
				<!-- 登录 -->
			<!-- 	<image v-if="avatar" @click.stop="handleToAvatar" :src="avatar" class="limg" mode="aspectFill"></image>
				<image v-else @click.stop="handleToAvatar" :src="avatarimg" class="limg" mode="aspectFill"></image> -->
				<!-- 未登录 -->
				<image  @click.stop="handleToAvatar" :src="avatarimg" class="limg" mode="aspectFill"></image>
			</view>
			<view class="conts flexc">
				<view class="contn" v-if="checkPermi(['system:reservat:sh'])" @click="handleToYy">
					<view class="img">
						<image :src="listimga" class="imga"></image>
					</view>
					<view class="ctit">待我审批</view>
				</view>
				<view class="contn" v-if="checkPermi(['system:reservat:list'])" @click="handleToYy">
					<view class="img">
						<image :src="listimgb" class="imgb"></image>
					</view>
					<view class="ctit">预约管理</view>
				</view>
				<!-- <view class="contn">
					<view class="img">
						<image :src="listimgc" class="imgc"></image>
					</view>
					<view class="ctit">访客管理</view>	
				</view> -->
			</view>
			<view class="mbgbox">
				<view class="flexc mine_list" @click="handleToMyhy" v-if="checkPermi(['system:order:list'])">
					<view class="limg">
						<image :src="listimgd" class="imga"></image>
					</view>
					<view class="tit flex1">我的会议预约</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="handleToMyjc" v-if="checkPermi(['system:food:list'])">
					<view class="limg">
						<image :src="listimge" class="imgb"></image>
					</view>
					<view class="tit flex1">我的订餐记录</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<!-- <view class="flexc mine_list" v-if="checkPermi(['system:reservat:add'])" @click="handleToAddYy" >
					<view class="limg">
						<image :src="listimgf" class="imgc"></image>
					</view>
					<view class="tit flex1">访客预约</view>
					<image :src="rimg" class="rimg"></image>
				</view> -->
				<view class="flexc mine_list" @click="handleToSetting">
					<view class="limg">
						<image :src="listimgg" class="imga"></image>
					</view>
					<view class="tit flex1">设置</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="flexc mine_list"@click="onlineWgt">
					<view class="limg">
						<image :src="listimgi" class="imga"></image>
					</view>
					<view class="tit flex1">版本号</view>
					 <view  class="txt">{{wgtcode}}</view>
					 <image :src="rimg" class="rimg"></image>
				</view>
				<!-- #endif -->
				<view class="flexc mine_list" @click="handleLogout">
					<view class="limg">
						<image :src="listimgh" class="imgd"></image>
					</view>
					<view class="tit flex1">退出登录</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<!-- <view class="flexc mine_list" @click="handleUpassword">
					<view class="limg">
						<image :src="listimgh" class="imga"></image>
					</view>
					<view class="tit flex1">修改密码</view>
					<image :src="rimg" class="rimg"></image>
				</view> -->
			</view>
		</view>
		<view class="ztit">安徽中新云计算有限公司提供支持</view>
		<footers v-if="isfootflag" :footerindex="footerindex" :isHomeIndex="false"></footers>

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import footers from '@/components/footer/footer.vue'
	import {findVersion} from "@/api/system/user.js"
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				bgimg: require("@/static/images/mine/habg.png"),
				avatarimg:require("@/static/images/mine/head.png"),
				listimga: require('@/static/images/mine/minea.png'),
				listimgb: require('@/static/images/mine/mineb.png'),
				listimgc: require('@/static/images/mine/minec.png'),
				listimgd: require('@/static/images/mine/mined.png'),
				listimge: require('@/static/images/mine/minee.png'),
				listimgf: require('@/static/images/mine/minef.png'),
				listimgg: require('@/static/images/mine/mineg.png'),
				listimgh: require('@/static/images/mine/mineh.png'),
				listimgi: require('@/static/images/mine/minei.png'),

				head:require('@/static/images/mine/head.png'),
				// wrimg:require("@/static/images/mine/wrimg.png"),
				rimg:require("@/static/images/mine/wrimg.png"),
				border: false,
				backgroundColor: 'transparent',

				name: this.$store.state.user.name,
				deptName:this.$store.state.user.deptName,
				// version: getApp().globalData.config.appInfo.version,
				footerindex: 'mine',
				isfootflag: true,
				noticenum: 0,
				deptId: this.$store.state.user.deptId,
				wgtcode: this.$store.state.user.wgtcode,
				platform: 'Android',
				nvaHeight:44,
			}
		},
		components: {
			footers
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onPageScroll(e) {
			// var scrollTop = Number(e.scrollTop);
			// var listTop=Number(this.listTop)-Number(this.nvaHeight)
			// if (scrollTop <=this.nvaHeight) {
			// 	const opacity = scrollTop / 100 // 计算透明度值
			// 	const color = `rgba(29, 100, 226, ${opacity})`
			// 	this.backgroundColor = color // 更新盒子背景颜色
			// } else {
			// 	// this.backgroundColor = '#00A9F0'
			// }
		}, 
		onLoad() {
			var that=this;
			this.nvaHeight=uni.getSystemInfoSync().statusBarHeight+44;
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				that.$store.dispatch('SetwgtFn', widgetInfo.version).then(() => {
					that.wgtcode=widgetInfo.version
				})
			});
			// #endif
		},
		mounted() {
			// this.getHeightFn()
		}, 
		
		methods: {
			checkPermi,checkRole,
			getHeightFn(){
				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.zxbox').boundingClientRect(data => {
					var top=data.top<0 ? -data.top : data.top;
					this.listTop = data.height//赋值，待会要用
					if (top <=this.nvaHeight) {
						const opacity = top / 100 // 计算透明度值
						const color = `rgba(4, 145, 253, ${opacity})`
						this.backgroundColor = color // 更新盒子背景颜色
					} else {
						this.backgroundColor = '#00A9F0'
					}
				}).exec();
			},
			// 待我审批
			handleToYy(){
				this.$tab.navigateTo("/pages/order/list")
			},
			//访客预约
			handleToAddYy(){
				this.$tab.navigateTo("/pages/order/come")
			},
			//我的会议
			handleToMyhy(){
				this.$tab.navigateTo("/work/pages/yyorder/meetlist")
			},
			//我的就餐
			handleToMyjc(){
				this.$tab.navigateTo("/work/pages/yyorder/eatlist")
			},
			//我的申报
			handleToMysb(){
				// this.$tab.navigateTo("/work/pages/business/list?from=my&type=0")
			},
			// 设置
			handleToSetting() {
			  this.$tab.navigateTo('/pages/mine/setting/index')
			},
			// 修改密码
			handleUpassword(){
				this.$tab.navigateTo(`/pages/mine/pwd/index`)  
			},
			// 账号信息
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			onlineWgt() {
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					that.$store.dispatch('SetwgtFn', widgetInfo.version).then(() => {
						that.wgtcode=widgetInfo.version
					})
					that.comparisonVersionNo(widgetInfo.versionCode);
				});
				// that.comparisonVersionNo()
			},
			comparisonVersionNo(versionCode) {
				let that = this;
				// console.log("aaaaaaa===versionCode", versionCode);
				const parmas = {
					model: that.platform
				}
				findVersion(parmas).then(res => {
					if (res.code == "200") {
						let versionNos = res.data.code;
						console.log(versionNos, 'versionNos')
						// console.log(res.data.path);
						let filePath = res.data.path;
						if (Number(versionNos) > Number(versionCode)) { //服务器返回1更新，0则不更新
							uni.showModal({
								title: '提示',
								content: '发现新版本，是否升级',
								success: function(res) {
									// console.log(widgetInfo.version);
									if (res.confirm) {
										console.log('用户点击确定');
										that.getProperty(filePath);
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							this.$toast('该版本已是最新版')
						}
					}
				}).catch(error => {
					uni.hideLoading()
					console.log(error)
				})
			},
			getProperty(getProperty) {
				// console.log("bbbbbbbbb----------->", getProperty)
				let that = this;
				// 在线升级app/热更新
				that.showwri = true;
				const downloadTask = uni.downloadFile({ //下载文件
					url: baseUrl + getProperty,
					success: (downloadResult) => {
						// console.log(downloadResult);
						if (downloadResult.statusCode == 200) {
							// 更新升级
							plus.runtime.install(downloadResult.tempFilePath, {
								force: true
							}, function() {
								// console.log('install success...');
								that.showwri = false;
								plus.nativeUI.alert("应用资源更新完成！", function() {
									plus.runtime.restart();
								});
							}, function(e) {
								that.showwri = false;
								plus.nativeUI.alert("更新失败，请稍后再试");
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => { //下载文件的进度
					that.totalBytesWritten = res.totalBytesWritten; //当前下载大小
					that.progress = res.progress; //当前下载比例
					that.totalBytesExpectedToWrite = res.totalBytesExpectedToWrite; //
				});
			},
		}
	}
</script>

<style lang="scss">
page{background-color: #ffffff;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;
	.topl{width: 274rpx;height: 50rpx;margin-left: 14rpx;}
	.topr{width: 36rpx;height: 36rpx;position: relative;margin-right: 10rpx;
		image{width: 100%;height: 100%;}
		// .cir{background: #FF4747;font-size: 14rpx;color: #FFFFFF;border-radius: 50%;border: 2rpx solid #FFFFFF;min-width: 20rpx;height: 20rpx;
		// 	position: absolute;right: -5rpx;top: -5rpx;text-align: center;line-height: 16rpx;
		// }
		.cir{width: 14rpx;height: 14rpx;background: #DF0024;border-radius: 50%;position: absolute;right: -7rpx;top: -7rpx;}
	}	
}
.zxbox{ 
	.bgimg{width: 100%;height: 344rpx;}
	.mbox{margin-top: -190rpx;padding: 0 34rpx;z-index: 1;position: relative;
		.infobox{margin-bottom: 46rpx;padding: 0 20rpx;
			.limg{width: 140rpx;height: 140rpx;flex: 0 0 auto;margin-right: 26rpx;border-radius: 50%;border: 4rpx solid  #ffffff;box-sizing: border-box;}
			.cbox{flex: 1;z-index: 1;
				image{width: 32rpx;height: 38rpx;}
				.tit{font-weight: bold;font-size: 40rpx;color: #161616;margin-bottom: 20rpx;}
				.txt{font-weight: bold;font-size: 26rpx;color: #8A9AB5;}
			}
		}
		.conts{border-bottom: 2rpx solid #E6E6E6;;box-sizing: border-box;
			.contn{padding: 26rpx 0 44rpx;
				display: flex;align-items: center;flex: 0 0 auto;width: 33.3%;flex-direction: column;
				.img{width: 52rpx;height: 52rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 16rpx;flex: 0 0 auto;
					.imga{width: 48rpx;height: 52rpx;}
					.imgb{width: 52rpx;height: 46rpx;}
					.imgc{width: 50rpx;height: 52rpx;}
				}
				.ctit{font-weight: bold;font-size: 26rpx;color: #161616;}
			}
		}
		.mbgbox{width: 100%;margin-bottom: 24rpx;padding-top: 32rpx;
			.mine_list{
				padding: 28rpx 20rpx;
				.limg{flex: 0 0 auto;width: 32rpx;height: 30rpx;margin-right: 22rpx;display: flex;align-items: center;justify-content: center;
					.imga{width: 30rpx;height: 30rpx;}
					.imgb{width: 22rpx;height: 30rpx;}
					.imgc{width: 28rpx;height: 30rpx;}
					.imgd{width: 32rpx;height: 26rpx;}
				}
				.tit{font-weight: bold;font-size: 26rpx;color: #161616;}
				.txt{font-weight: 500;font-size: 26rpx;color: #666666;margin-left: 20rpx;flex: 0 0 auto;}
				.rimg{width: 16rpx;height: 26rpx;margin-left: 20rpx;flex: 0 0 auto;}
			}
		}
	}
}

.ztit{font-size: 24rpx;color:#c6c6c9;text-align: center;flex:0 0 auto;margin-bottom: 28rpx;margin-top: 40rpx;}

</style>