prevent_drowning_app/pages/mine/index.vue

<template>
  <view class="home" :style="'padding-top:'+nvaHeight+'px;padding-bottom:'+footHeight+'rpx'">
	<view class="navbox">
		<uni-nav-bar :title="title" leftWidth='400rpx'  color="#ffffff"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
			<block slot="left">
				<view class="topl flexc">
					<image src="@/static/images/home/adr.png" ></image>
					<view class="over">{{city}}</view>
				</view>
			</block>
		</uni-nav-bar>
	</view>	
	<view class="hmain flex1">
		<!--  -->
		<view class="mtop flexc mb15">
			<view class="overh flex1" @click="handleToInfo">
				<view class="tit flexc ">
					<view class="over">{{name}}</view>
					<view class="roles flexcc">{{roleGroup}}</view></view>
				<view class="flexc num">
					<image src="@/static/images/mine/phone.png"></image>
					{{kaPho(phone)}}
				</view>
			</view>
			<view class="headimg" @click.stop="handleToAvatar">
				<image v-if="avatar"  :src="avatar"  mode="aspectFill"></image>
				<image src="@/static/images/mine/head.png" v-else></image>
			</view>	
		</view>
		
		<view class="htabs flexcj">
			<view class="htab flexc">
				<view class="imgs flex0 flexc">
					<image src="@/static/images/home/htaba.png" class="imga"></image>
				</view>
				<view class="flex1" @click="getNoticeFn">
					<view class="tit mb5">防溺通知</view>
					<view class="txt">预警提醒 守护安全</view>
				</view>
			</view>
			<view class="htab flexc" @click="getRzList">
				<view class="imgs flex0 flexc">
					<image src="@/static/images/home/htabb.png" class="imgb"></image>
				</view>
				<view class="flex1">
					<view class="tit mb5">绑定认证</view>
					<view class="txt">绑定监护 溺水早知</view>
				</view>
			</view>
		</view>
		<view class="mb12" v-if="bannerList&&bannerList.length">
			<banner :list="bannerList" height="148"></banner>
		</view>
		<view class="minbox">
			<view class="mines flexc" @click="handleToSetting">
				<view class="imgs"><image src="@/static/images/mine/minea.png" class="imga"></image></view>
				<view class="tit">我的设置</view>
				<view class="rimg"><image src="@/static/images/mine/rimg.png"></image></view>
			</view>
			<view class="mines flexc" @click="handleUpassword">
				<view class="imgs"><image src="@/static/images/mine/mineb.png" class="imgb"></image></view>
				<view class="tit">修改密码</view>
				<view class="rimg"><image src="@/static/images/mine/rimg.png"></image></view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="mines flexc" @click="onlineWgt">
				<view class="imgs"><image src="@/static/images/mine/minec.png" class="imgc"></image></view>
				<view class="tit">当前版本</view>
				<view class="txt">V.1.0.3.</view>
				<view class="rimg"><image src="@/static/images/mine/rimg.png"></image></view>
			</view>
			<!-- #endif -->
			<view class="mines flexc" @click="handleLogout">
				<view class="imgs"><image src="@/static/images/mine/mined.png" class="imgc"></image></view>
				<view class="tit">退出登录</view>
				<view class="rimg"><image src="@/static/images/mine/rimg.png"></image></view>
			</view>
		</view>
		<!-- 完善按钮 -->
		<view class="rxfbtn" v-if="initFace=='Y'">
			<view class="rxbtn flexc">
				<image src="@/static/images/home/rztip.png" class="imga flex0"></image>
				<view class="tit flex1 over">1分钟完善信息，守护孩子的安全</view>
				<view class="btn flexcc flex0">去完善</view>
				<image src="@/static/images/home/wclose.png" class="imgb flex0" @click="getzrCloseFn"></image>
			</view>
		</view>
		
	</view>
	<loading></loading>
	 <footers v-if="isfootflag"  :footerindex="footerindex"></footers>
  </view>
</template>

<script>
import footers from '@/components/footer/footer.vue'
import {findVersion,getUserProfile} from "@/api/system/user.js"
import banner from '@/components/swiper/banner.vue'
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
import {getBannerListNoPage} from "@/api/work/index.js"
import config from '@/config'
const baseUrl = config.baseUrl
  export default {
	components:{footers,banner},
	data(){
		return{
			footerindex:'mine',
			isfootflag:true,
			activeColor:'#A7A7A7',
			nactiveColor:'#E6E6E6',
			footHeight:'150',
			nvaHeight:44,
			backgroundColor: "transparent",
			title:'',
			city:"潜山市",
			initFace:'Y',//y:显示
			roleGroup:'',
			baseUrl:config.baseUrl,
			name: this.$store.state.user.nickName,
			phone: this.$store.state.user.phonenumber,
			wgtcode: this.$store.state.user.wgtcode,
			platform: 'Android',
			bannerList:[],
		}
	},
	computed: {
		avatar() {
			return this.$store.state.user.avatar
		},
		windowHeight() {
			return uni.getSystemInfoSync().windowHeight - 50
		}
	},
	onShow() {
		this.initFace=this.$store.state.user.initFace||'Y';
		if(this.initFace=='Y'){
			this.footHeight=282
		}
	},
    onLoad: function() {
		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
		this.getBanner()
		getUserProfile().then(response => {
		  this.roleGroup = response.roleGroup
		  // this.postGroup = response.postGroup
		})
    },
	
	methods:{
		checkPermi,checkRole,
		kaPho(val){
			if(val){
				return val.substring(0,3)+'****'+val.substring(7)
			}
		},
		getzrCloseFn(){
			this.$store.dispatch('checkInitFace', 'N').then(() => {
				this.initFace='N';
				this.footHeight='150';
			})
		},
		getRzList(){
			this.$tab.navigateTo(`/work/pages/rz/index`) 
		},
		getNoticeFn(type){
			this.$tab.navigateTo(`/news/pages/notice/index`) 
		},
		// 修改密码
		handleUpassword(){
			this.$tab.navigateTo(`/pages/mine/pwd/index`)  
		},
		handleToSetting() {
		  this.$tab.navigateTo('/pages/mine/setting/index')
		},
		handleToInfo() {
		  this.$tab.navigateTo('/pages/mine/info/index')
		},
		handleToAvatar() {
		  this.$tab.navigateTo('/pages/mine/avatar/index')
		},
		handleLogout() {
			this.$modal.confirm('确定注销并退出系统吗？').then(() => {
				this.$store.dispatch('LogOut').then(() => {
					this.$tab.reLaunch('/pages/login')
				})
			})
		},
		getBanner(){
			var params={
				status:'0',
				type:'2',//个人中心
			}
			getBannerListNoPage(params).then(res=>{
				if(res.code==200){
					var arr=[];
					if(res.rows&&res.rows.length){
						res.rows.map(v => {
							if(v.imgUrl){
								var newArr=v.imgUrl.split(',')
								arr=arr.concat(newArr)
							}
						})
					}
					this.bannerList = arr;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		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" scoped>
.home{height: 100vh;background: linear-gradient(127deg, #DFEBFF, #F1F6FF, #E2EDFF);padding-bottom: 150rpx;display: flex;flex-direction: column;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	
	.topl{padding-left: 6rpx;overflow: hidden;
		image{width: 18rpx;height: 20rpx;margin-right: 12rpx;flex: 0 0 auto;}
		view{font-weight: bold;font-size: 24rpx;color: #272727;}
	}
}
.hmain{padding: 0 24rpx;overflow: auto;
	.rxfbtn{position: fixed;left:0rpx;right: 0rpx;bottom: 150rpx;padding: 10rpx 24rpx;}
	.rxbtn{width: 100%;background: #4280FB;border-radius: 20rpx;padding: 16rpx 22rpx 16rpx 16rpx;
		.imga{width: 58rpx;height: 60rpx;margin-right: 14rpx;}
		.imgb{width: 20rpx;height: 20rpx;margin-left: 20rpx;}
		.tit{font-weight: bold;font-size: 26rpx;color: #FFFFFF;}
		.btn{background: #FFFFFF;padding: 0 26rpx;height: 58rpx;
box-shadow: 0px 0px 0px 0px #2B6AE7;
border-radius: 30rpx;font-weight: bold;
font-size: 26rpx;color: #2B73FF;}
	}
}

.mtop{padding-top: 20rpx;
	.tit{font-size: 36rpx;font-weight: bold;color: #272727;margin-bottom: 12rpx;
		.roles{background: #DDEAFF;font-weight: bold;font-size:20rpx;color: #4E8CEE;border-radius: 18rpx;padding: 0 16rpx;line-height: 30rpx; flex: 0 0 auto;
border: 2rpx solid #4775EA;margin-left: 20rpx;}
	}
	.num{font-weight: 500;font-size: 24rpx;color: #808080;
		image{width: 16rpx;height: 20rpx;margin-right: 10rpx;}	
	}
	.headimg{width: 110rpx;height: 110rpx;flex: 0 0 auto;margin-left: 12rpx;
		image{width: 100%;height: 100%;}
	}
}
.htabs{margin-bottom: 26rpx;
	.htab{width: 48%;height: 140rpx;background: #FFFFFF;border-radius: 20rpx;padding: 0 24rpx;box-sizing: border-box;
		.imgs{width: 74rpx;height: 70rpx;margin-right: 14rpx;
			.imga{width: 72rpx;height: 70rpx;}
			.imgb{width: 74rpx;height: 68rpx;}
		}
		.tit{font-weight: bold;font-size: 28rpx;color: #000000;}
		.txt{font-weight: 500;font-size: 24rpx;color: #666666;}
	}
}
.minbox{background: #FFFFFF;border-radius: 20rpx;
	.mines{padding: 30rpx 26rpx 30rpx 30rpx;
		.imgs{width: 48rpx;height: 48rpx;display: flex;align-items: center;justify-content: center;margin-right: 24rpx;flex:0 0 auto;
			.imga{width: 48rpx;height: 46rpx;}
			.imgb{width: 42rpx;height: 46rpx;}
			.imgc{width: 48rpx;height: 48rpx;}
		}
		.rimg{width: 12rpx;height: 22rpx;margin-left: 24rpx;flex:0 0 auto;
			image{width: 100%;height: 100%;}
		}
		.tit{font-weight: 500;font-size: 30rpx;color: #000000;flex: 1;}
		.txt{flex: 0 0 auto;font-weight: 500;font-size: 26rpx;color: #666666;}
	}
}
</style>