yuanqu_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="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 { 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'),
		
		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"),
        // 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
      }
    },
	onUnload(){
		uni.$off('refreshdatalis')
	},
	onPullDownRefresh:function(){
		this.init();
		this.getClassFn();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onShow() {
		var choseroles=this.$store.state.user.choseroles;
		if(this.roles&&choseroles&&this.roles!=choseroles){
			this.roles=choseroles;
			this.schoolName=this.$store.state.user.deptName
			// 当前人的角色
			if(uni.getStorageSync('checkclass')&&choseroles=='teacher'){
				var newobj=JSON.parse(JSON.stringify(uni.getStorageSync('checkclass')))
				this.discipline=newobj.discipline;
				this.schoolName=newobj.schoolName;
				this.schoolId=newobj.schoolId;
				this.classId=newobj.classId;
			}
		}
	},
	onLoad() {
		this.baseUrl=baseUrl;
		// var choseroles=this.$store.state.user.choseroles;
		// this.roles=choseroles;
		// this.schoolName=this.$store.state.user.deptName
		// // 当前人的角色
		// if(uni.getStorageSync('checkclass')&&choseroles=='teacher'){
		// 	var newobj=JSON.parse(JSON.stringify(uni.getStorageSync('checkclass')))
		// 	this.discipline=newobj.discipline;
		// 	this.schoolName=newobj.schoolName;
		// 	this.schoolId=newobj.schoolId;
		// 	this.classId=newobj.classId;
		// }

			
		
		// uni.$on('refreshdatalis',(e) => {
		// 	this.getClassFn();
		// })
		// this.getClassFn()
	},
	onPageScroll(e) {
		var scrollTop=Number(e.scrollTop);
		if(scrollTop>0){
			this.backgroundColor='#c4defb'
		}else{
			this.backgroundColor='transparent'
		}
	},
    methods: {
		checkPermi, checkRole,
		handleLogout() {
				  this.type=1
		  // this.$modal.confirm('确定注销并退出系统吗？').then(() => {
		  //   this.$store.dispatch('LogOut').then(() => {
		  //     this.$tab.reLaunch('/pages/index/index')
		  //   })
		  // })
		},
		getConfirm(){
			this.$store.dispatch('LogOut').then(() => {
			  this.$tab.reLaunch('/pages/index/index')
			})
		},
		getClassFn(){
			var that=this;
			var choseroles=this.$store.state.user.choseroles||'';
			if(choseroles=='school'){
				that.classId='';
				that.schoolId=that.$store.state.user.deptId;
				that.getclassListFn()
			}else{
				// this.$store.dispatch('GetInforoles').then(resd => {
				// 	if(resd.code==200){
				// 		var roles=that.$store.state.user.choseroles;
				// 		that.roles=roles;
				// 		var res=resd.data;
				// 		if(roles=='teacher'){
				// 		 if(res.user&&res.user.teacherClass&&res.user.teacherClass.length){
				// 			var newArr=res.user.teacherClass;
				// 			that.teacherClass = newArr.map(v => {
				// 				return {
				// 					dictLabel: v.className,
				// 					dictValue: v.classId
				// 				}
				// 			})
				// 		 }
				// 		}else if(roles=='parents'){
				// 		}else{
				// 			// 学校
				// 			that.classId='';
				// 			that.schoolId=that.$store.state.user.deptId;
				// 			that.getclassListFn()
				// 		}
				// 	}
					
				// })
			}
			
			// getInfo().then(res=>{
			// 	if(res.code==200){
			// 		if(res.user&&res.user.teacherClass&&res.user.teacherClass.length){
			// 			var newArr=res.user.teacherClass;
			// 			that.teacherClass = newArr.map(v => {
			// 				return {
			// 					dictLabel: v.className,
			// 					dictValue: v.classId
			// 				}
			// 			})
			// 		}
			// 	}
			// })
		},
		// 班级
		getclassListFn(){
			getDeptList(this.schoolId).then(res=>{
				if(res.code==200){
					this.teacherClass = res.data.map(v => {
						return {
							dictLabel: v.deptName,
							dictValue:v.deptId
						}
					})
				}else{
					this.$toast(res.msg)
				}
			})
		},
		handleAuth(){
			var roles=this.$store.state.user.roles;
			if(roles.length>0){
				this.$tab.navigateTo('/mine/pages/mine/auth') 
			}else{
				//当前只有一种身份
				this.$toast("您当前只有一种身份")
				// this.$tab.reLaunch('/pages/index/index') 
			}
		},
		handleaddAuth(){
			this.$tab.navigateTo('/mine/pages/mine/auth?type=add') 
		},
		handleCollect(){
			 this.$tab.navigateTo('/mine/pages/trends/mycollect')
		},
		handleToinfo(){
			 this.$tab.navigateTo('/mine/pages/mine/exit')
		},
		handlePrivacy(){
			this.$tab.navigateTo(`/pages/agreement`)  
		},
		handleUpassword(){
			this.$tab.navigateTo(`/pages/mine/pwd/index`)  
		},
		handleSchool(){
			var id=this.$store.state.user.deptId
			this.$tab.navigateTo('/mine/pages/mine/applyregister?type=update&id='+id)
			// this.$tab.navigateTo('/mine/pages/mine/applyteacher')
		},
		handleWord(){
			this.$tab.navigateTo('/mine/pages/mine/word')
		},
		handleQuery(){
			this.$tab.navigateTo('/mine/pages/login/query?from=mine')
		},
		handleClass(){
			this.$tab.navigateTo('/mine/pages/mine/addclass')
		},
		handlelimit(){
			this.$tab.navigateTo('/mine/pages/mine/limit')
		},
		handleClassSet(){
			this.$tab.navigateTo('/mine/pages/mine/setclass')
		},
		handleaddStu(){
			this.$tab.navigateTo('/mine/pages/mine/setstuent')
		},
		handleTime(e){
			this.type=5;
			this.timetype=e;
		},
		getKeyNext(data){
			this.type=3;
			this.classId=data;
			this.getConfigKey(data)
		},
		handleZhaccount(){
			this.$tab.navigateTo('/work/pages/examine/zhaccount')
		},
		handleTkcourse(){
			this.$tab.navigateTo('/work/pages/examine/tkcourse')
		},
		handleToAvatar() {
		  this.$tab.navigateTo('/pages/mine/avatar/index')
		},
		getKeyFn(data){
			var params={
				'configKey':this.classId,
				'configValue':data,
				"configType":this.timetype
			}
			getupdConfigKey(params).then(res=>{
				if(res.code==200){
					this.$toast('修改成功')
					this.type=0;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getClose(){
			this.type=0
		},
		getConfigKey(e){
			var params={
				configType:this.timetype,
				configKey:e
			}
			//班级id
			// configType "1:准备下课 2:延迟下课",
			getConfigKey(params).then(res=>{
				if(res.code==200){
					this.type=3
					this.timetit=res.msg||5;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		
		
      handleToInfo() {
        this.$tab.navigateTo('/pages/mine/info/index')
      },
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index/index')
          })
        })
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleJiaoLiuQun() {
        this.$modal.showToast('QQ群：133713780')
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</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>