zheng_xie_ui/pages/mine/index.vue

<template>
  <view class="mine-container" >
    <!--顶部个人信息栏-->
		<view class="home_top">
		  <uni-nav-bar title="我的" :background-color="backgroundColor" :border="navborder" statusBar='true' fixed="true">
			  <!-- checkPermi(['system:notice:list']) -->
			  <!-- <block slot="left" >
			  		<view class="min_top" @click="getMessage">
			  			<image :src="noticimg"></image>
						<view class="circ"></view>
			  		</view>
			  </block> -->
		  </uni-nav-bar> 
	  </view>
	  <image :src="abg" class="abg"></image>
	 
	<view style="margin-top: -487rpx;position: relative;padding:0 34rpx 20rpx;">
		<view class="header_top flexc mb6" @click="handleToinfo">
			<image v-if="avatar" @click.stop="handleToAvatar" :src="avatar" class="flex0 limg" mode="aspectFill"></image>
			<image v-else @click.stop="handleToAvatar" :src="avatarimg" class="flex0 limg" mode="aspectFill"></image>
			<view class="flex1 hcen">
				<view class="f17 fw c16 mb8 flexc">{{name}}
				<!-- <text v-if="choseroles=='teacher'">老师</text>
				<text v-if="choseroles=='school'">学校管理员</text>
				<text v-if="choseroles=='parents'">家长</text> -->
				</view>
				<!-- <view class="f15 co6" v-if="choseroles=='teacher'">{{schoolName}}/{{discipline}}</view>
				<view class="f15 co6" v-else-if="choseroles!='parents'" >{{schoolName}}</view> -->
			</view>
			<image :src="rimg" class="flex0 rimg"></image>
		</view>
		<view class="mnbox">
			<view class="mn_tit">账号设置</view>
			<view class="mn_list">
				<view class="mlist flexc"  @click="handleUpassword">
					<view class="mlistl"><image :src="miconj" class="imgh"></image></view>
					<view class="mlistc">修改密码</view>
				</view>
				<view class="mlist flexc"  @click="handlePrivacy">
					<view class="mlistl"><image :src="miconf" class="imgd"></image></view>
					<view class="mlistc">用户协议</view>
				</view>
				<view class="mlist flexc"  @click="onlineWgt">
					<view class="mlistl"><image :src="micong" class="imgg"></image></view>
					<view class="mlistc">版本更新</view>
				</view>
				<view class="mlist flexc"  @click="handleLogout">
					<view class="mlistl"><image :src="miconl" class="imgc"></image></view>
					<view class="mlistc">退出登录</view>
				</view>
			</view>
		</view>
	</view>
	<footers v-if="isfootflag" :footlist="footlist" :footerindex="footerindex" :color_checked="color_checked" :color_nochecked="color_nochecked" :isHomeIndex="true"></footers>
 </view>
</template>

<script>
	import footers from '@/components/footer/footer.vue'
  import config from '@/config'
  const baseUrl = config.baseUrl
  import storage from '@/utils/storage'
  import {findVersion} from "@/api/system/user.js"
  import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  import {getInfo } from '@/api/login'
  
  export default {
	components:{footers},
    data() {
      return {
		  footlist:[
		  	{module:'home',title:'首页',icon_checked:require('@/static/images/tabbar/home_.png'),icon_nochecked:require('@/static/images/tabbar/home.png')},
		  	{module:'mine',title:'我的',icon_checked:require('@/static/images/tabbar/mine_.png'),icon_nochecked:require('@/static/images/tabbar/mine.png')},
		  	],
		  footerindex:'mine',
		  isfootflag:true,
		  color_checked :'161616',
		  color_nochecked :'666666',
		  abg:require('@/static/images/mine/habg.png'),
		  noticimg:require('@/static/images/mine/mnotic.png'),
		  rimg:require('@/static/images/mine/rimg.png'),
		  wrimg:require('@/static/images/mine/wrimg.png'),	 
		  miconf:require('@/static/images/mine/miconf.png'),
		  miconj:require('@/static/images/mine/miconj.png'),
		  miconl:require('@/static/images/mine/miconl.png'),
		  micong:require('@/static/images/mine/micong.png'),
		
		type:0,
		confdat:{tit:'系统提示',txt:"确定注销并退出系统吗？",closetxt:'取消',suretxt:'确认'},
		  backgroundColor:"transparent",
		  navborder:false,
		  timetit:'',
		  timelist:[],
		  timetype:'',
		  discipline:'',
		  schoolName:'',
		  schoolId:'',
		  classId:'',
		  
		  teacherClass:[],
		  roles:'',
		  baseUrl:'',
        name: this.$store.state.user.name,
		avatarimg:require("@/static/images/mine/profile.png"),
		platform:'Android',  
        // version: getApp().globalData.config.appInfo.version
      }
    },
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
	  choseroles() {
	    return this.$store.state.user.choseroles
	  },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
	onShow() {
	},
	onLoad() {
		this.baseUrl=baseUrl;
	},
	onPageScroll(e) {
		var scrollTop=Number(e.scrollTop);
		if(scrollTop>0){
			this.backgroundColor='#c4defb'
		}else{
			this.backgroundColor='transparent'
		}
	},
    methods: {
		checkPermi, checkRole,
		onlineWgt() {
			let that = this;
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				that.$store.dispatch('SetwgtFn',widgetInfo.version).then(()=>{
				})
				that.comparisonVersionNo(widgetInfo.versionCode);
			});
			// that.comparisonVersionNo()
		},
		comparisonVersionNo(versionCode) {
			
			let that = this;
			// console.log("aaaaaaa===versionCode", versionCode);
			const parmas = {
				model: that.platform
			}
			console.log(parmas)
			findVersion(parmas).then(res => {
				console.log(res,2)
				if (res.code == "200") {
					let versionNos = res.data.code;
					console.log(versionNos,'versionNos')
					// console.log(res.data.path);
					let filePath = res.data.path;
					if (versionNos != 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; //
			});
		},
		getConfirm(){
			this.$store.dispatch('LogOut').then(() => {
			  this.$tab.reLaunch('/pages/index/index')
			})
		},
		handlePrivacy(){
			this.$tab.navigateTo(`/pages/agreement`)  
		},
		handleUpassword(){
			this.$tab.navigateTo(`/pages/mine/pwd/index`)  
		},
	
		
		handleToAvatar() {
		  this.$tab.navigateTo('/pages/mine/avatar/index')
		},
      handleToinfo() {
        this.$tab.navigateTo('/pages/mine/info/index')
      },
      
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index/index')
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f6f7;
  }
  .home_top /deep/ .uni-navbar__placeholder{height: 0 !important;}
.abg{width: 100%;height: 622rpx;}
.min_top{position: relative;width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;
	image{width: 32rpx;height: 32rpx;}
	.circ{width: 12rpx;height: 12rpx;background: #EB5663;border-radius: 50%;position: absolute;right: 4rpx;top: 4rpx;}
}
.header_top{padding: 34rpx 26rpx;
	.limg{width: 120rpx;height: 120rpx;border-radius: 50%;margin-right: 26rpx;}
	.rimg{width: 14rpx;height: 24rpx;margin-left: 26rpx;}
	.hcen{
		text{height: 34rpx;background: #89A8F6;border-radius: 16rpx;line-height: 34rpx;font-weight: normal;font-size: 24rpx;color: #ffffff;display: inline-block;min-width: 78rpx;padding: 0 10rpx;box-sizing: border-box;margin-left: 24rpx;}
	}
}
.bgf{
	.mlist{padding:30rpx 34rpx;
		.mlistl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx;
			.imga{width: 38rpx;height: 38rpx;}
			.imgb{width: 32rpx;height: 32rpx;}
			.imgc{width: 30rpx;height: 30rpx;}
			.imgd{width: 32rpx;height: 34rpx;}
			.imge{width: 32rpx;height: 26rpx;}
			.imgf{width: 32rpx;height: 30rpx;}
			.imgg{width: 34rpx;height: 34rpx;}
			.imgi{width: 34rpx;height: 34rpx;}
			.imgk{width: 32rpx;height: 30rpx;}
		}
		.mlistc{flex: 1;font-size: 32rpx;font-weight: 500;
	color: #161616;}
		.mlistr{width: 14rpx;height: 24rpx;marign-left:16rpx}
	}
}

.mnbox{
	background: #FFFFFF;border-radius: 18rpx;margin-bottom: 24rpx;padding: 40rpx 0 16rpx;
	.mn_tit{font-size: 32rpx;font-weight: bold;
color: #161616;padding-left: 68rpx;position: relative;margin-bottom: 12rpx;
		&::before{width: 6rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;left: 36rpx;top: 4rpx;content: '';bottom: 4rpx;}
	}
	.mn_list{display: flex;flex-wrap: wrap;
		.mlist{width: 25%;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;padding: 26rpx 0;
			.mlistl{width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 16rpx;
				.imga{width: 42rpx;height: 44rpx;}
				.imgb{width: 44rpx;height: 44rpx;}
				.imgc{width: 44rpx;height: 42rpx;}
				.imgd{width: 42rpx;height: 44rpx;}
				.imge{width: 44rpx;height: 42rpx;}
				.imgf{width: 32rpx;height: 30rpx;}
				.imgg{width: 44rpx;height: 44rpx;}
				.imgh{width: 40rpx;height: 44rpx;}
				.imgk{width: 40rpx;height: 42rpx;}
			}
			.mlistc{flex: 1;font-size: 30rpx;font-weight: 500;color: #666666;}
		}
	}
	
}


  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
      padding: 15px 15px 45px 15px;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
</style>