property/user_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="navbg"></image>
		<view class="mbox">
			<view class="infobox flexc" @click="handleToInfo">
				<image  @click.stop="handleToAvatar" :src="avatarimg" class="limg" mode="aspectFill"></image>
				<view class="cbox">
					<view class="tit flexc">{{name?name:'登录账号'}}
					
						<view class="deptbox">
							<image :src="wyimg"></image>
							<view>业主</view>
						</view>
					</view>
					<!-- <view class="txt">点击详情 享受更多精彩信息</view> -->
					<view class="txt">幸福小区12#1101</view>
					<!-- <view class="flexc pr" v-if="deptName">
						<image :src="headl"></image>
							<view class="txt">{{deptName}}点击登录 享受更多精彩信息</view>
						<image :src="headr"></image>
					</view> -->
				</view>
				<image :src="wrimg" class="wrimg"></image>
				<!-- 登录 -->
			<!-- 	<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> -->
				<!-- 未登录 -->
				
			</view>
			<view class="conts flexc">
				<view class="contn" v-if="checkPermi([''])" @click="handleToYy">
					<view class="img">
						<image :src="listimga" class="imga"></image>
					</view>
					<view class="ctit">我的报修</view>
				</view>
				<view class="contn" v-if="checkPermi([''])" @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 class="contn">
					<view class="img">
						<image :src="listimgd" class="imgd"></image>
					</view>
					<view class="ctit">家政订单</view>	
				</view>
			</view>
			<view class="mbgbox">
				<view class="flexc mine_list" @click="getClockcontFn" v-if="checkPermi([''])">
					<view class="limg">
						<image :src="listimge" class="imga"></image>
					</view>
					<view class="tit flex1">物业费账单</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="getYqMeetFn">
					<view class="limg">
						<image :src="listimgf" class="imgb"></image>
					</view>
					<view class="tit flex1">优惠券</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="getClockcontFn" v-if="checkPermi([''])">
					<view class="limg">
						<image :src="listimgg" class="imgc"></image>
					</view>
					<view class="tit flex1">积分收支</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="getYqMeetFn">
					<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="getClockcontFn" v-if="checkPermi([''])">
					<view class="limg">
						<image :src="listimgi" class="imge"></image>
					</view>
					<view class="tit flex1">我的互动</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="getYqMeetFn">
					<view class="limg">
						<image :src="listimgj" class="imgd"></image>
					</view>
					<view class="tit flex1">我的收藏</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="getClockcontFn" v-if="checkPermi([''])">
					<view class="limg">
						<image :src="listimgk" 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="listimgl" 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="listimgm" class="imgd"></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="listimgn" class="imgf"></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
	const webUrl=config.webUrl
	export default {
		data() {
			return {
				bgimg: require("@/static/images/mine/mbg.png"),
				avatarimg:require("@/static/images/mine/head.png"),
				listimga: require('@/static/images/mine/mtaba.png'),
				listimgb: require('@/static/images/mine/mtabb.png'),
				listimgc: require('@/static/images/mine/mtabc.png'),
				listimgd: require('@/static/images/mine/mtabd.png'),
				listimge: require('@/static/images/mine/mtabe.png'),
				listimgf: require('@/static/images/mine/mtabf.png'),
				listimgg: require('@/static/images/mine/mtabg.png'),
				listimgh: require('@/static/images/mine/mtabh.png'),
				listimgi: require('@/static/images/mine/mtabi.png'),
				listimgj: require('@/static/images/mine/mtabj.png'),
				listimgk: require('@/static/images/mine/mtabk.png'),
				listimgl: require('@/static/images/mine/mtabl.png'),
				listimgm: require('@/static/images/mine/mtabm.png'),
				listimgn: require('@/static/images/mine/mtabn.png'),

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

				name: this.$store.state.user.nickName,
				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() {
		}, 
		
		methods: {
			checkPermi,checkRole,
			// 待我审批
			handleToYy(){
				this.$tab.navigateTo("/pages/order/list")
			},
			//访客预约
			handleToAddYy(){
				this.$tab.navigateTo("/pages/order/come")
			},
			//在线会议
			getYqMeetFn(){
				// var url='https://www.baidu.com'
				this.$tab.navigateTo("/pages/common/webview/index?url="+webUrl)
			},
			//我的会议
			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")
			},
			// 考勤设置
			handleToKq(){
				this.$tab.navigateTo('/work/pages/clock/kaorules')
			},
			// 考勤记录
			getClockjlFn(){
				this.$tab.navigateTo("/work/pages/record/clockin")
			},
			// 考勤统计
			getClockcontFn(){
				this.$tab.navigateTo("/work/pages/clock/personnel")
			},
			// 设置
			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;	}
.deptbox{height: 34rpx;position: relative;margin-left: 16rpx;padding-left: 40rpx;box-sizing: border-box;padding-top: 4rpx;
	image{width: 102rpx;height: 34rpx;position: absolute;left: 0;top: 0;}
	view{font-weight: bold;font-size: 22rpx;color: #FFFFFF;position: relative;z-index: 2;height: 30rpx;min-width: 60rpx;background: linear-gradient(90deg, #FFB54D, #FE5B0E);border-radius: 0 15rpx 15rpx 0;}
}
.zxbox{ 
	.navbg{width: 100%;height: 782rpx;}
	.mbox{padding: 148rpx 24rpx 0;z-index: 1;position: relative;
		.infobox{margin-bottom: 48rpx;padding: 0 20rpx;
			.limg{width: 98rpx;height: 98rpx;flex: 0 0 auto;margin-right: 24rpx;border-radius: 50%;box-sizing: border-box;border: 6rpx solid #FFFFFF;}
			.cbox{flex: 1;z-index: 1;
				.tit{font-weight: bold;font-size: 36rpx;color: #161616;margin-bottom: 10rpx;}
				.txt{font-weight: 500;font-size: 26rpx;color: #76829B;}
			}
			.wrimg{width: 14rpx;height: 26rpx;flex: 0 0 auo;}
		}
		.conts{box-sizing: border-box;background: #FFFFFF;box-shadow: 0px 0px 10rpx 0px #EFD3B6;border-radius: 20rpx;
			.contn{padding: 32rpx 0 28rpx;
				display: flex;align-items: center;flex: 0 0 auto;width: 25%;flex-direction: column;
				.img{width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 16rpx;flex: 0 0 auto;
					.imga{width: 48rpx;height: 46rpx;}
					.imgb{width: 48rpx;height: 48rpx;}
					.imgc{width: 46rpx;height: 48rpx;}
					.imgd{width: 40rpx;height: 50rpx;}
				}
				.ctit{font-weight: bold;font-size: 26rpx;color: #272727;}
			}
		}
		.mbgbox{width: 100%;margin-bottom: 24rpx;padding-top: 32rpx;
			.mine_list{
				padding: 28rpx 36rpx;
				.limg{flex: 0 0 auto;width: 32rpx;height: 32rpx;margin-right: 26rpx;display: flex;align-items: center;justify-content: center;
					.imga{width: 30rpx;height: 30rpx;}//15 15
					.imgb{width: 30rpx;height: 26rpx;}//15 13
					.imgc{width: 30rpx;height: 32rpx;}//15 16
					.imgd{width: 32rpx;height: 32rpx;}//16 16
					.imge{width: 26rpx;height: 30rpx;}//13 15
					.imgf{width: 26rpx;height: 32rpx;}//13 16
				}
				.tit{font-weight: bold;font-size: 26rpx;color: #272727;}
				.txt{font-weight: 500;font-size: 26rpx;color: #666666;margin-left: 20rpx;flex: 0 0 auto;}
				.rimg{width: 14rpx;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>