FE-V2-XCX/pages/mine.vue

<!-- 我的 -->
<template>
	<view id="mine">
		<view class="top-max-big-box" v-if="pageType">
			<!--老师-->
			<view class="top-max-box-two" v-if="userType==1&&certification.auditStatus">
				<view class="user-img-box" @click="selectImage">
					<img v-if="userData.avatar" :src="userData.avatarUrl">
					<img v-else  src="@/images/icon_01.png">
					<view>{{userData.avatar?'编辑':'未上传'}}</view>
				</view>
				<view class="name-box">
					<view>{{userData.userName}}</view>
					<view>{{userData.professional}}丨{{userData.deptName}}</view>
				</view>
			</view>
			<!--学生-->
			<view class="user-top-max-box-one" v-if="userType==2">
				<view class="back-posi"></view>
				<view class="top-max-box-one">
					<view class="user-img-box" @click="selectImage">
						<img v-if="userData.avatar" :src="userData.avatar">
						<img v-else  src="@/images/icon_01.png">
						<view>{{userData.avatar?'编辑':'未上传'}}</view>
					</view>
					<view class="name-box">
						<view class="name-box-min">
							<view>{{userData.userName}}</view>
							<view :class="userData.status == 2?'view-color-one':(userData.status == 3?'view-color-two':(userData.status == 1?'view-color-tree':''))">{{userData.status == 2?'负面清单':(userData.status == 3?'黑名单':(userData.status == 1?'正常':''))}}</view>
						</view>
						<view class="name-box-user">{{userData.professional}}丨{{userData.deptName}}</view>
					</view>
				</view>
				<view class="num-max-box">
					<view class="min-num-box" @click="goUserPage(1)">
						<view class="min-num-view color-one">{{creditScore}}</view>
						<view class="bottom-min-num-view">
							<img class="img-one" src="@/images/icon_wd_xyf.png">
							<view>信用分</view>
						</view>
					</view>
					<view class="null-p"></view>
					<view class="min-num-box" @click="goUserPage(2)">
						<view class="min-num-view color-two">{{bonusPoints}}</view>
						<view class="bottom-min-num-view">
							<img class="img-two" src="@/images/icon_wd_jlf.png">
							<view>奖励分</view>
						</view>
					</view>
					<view class="null-p"></view>
					<view class="min-num-box" @click="goUserPage(3)">
						<view class="min-num-view">扫一扫</view>
						<view class="bottom-min-num-view">
							<img class="img-two" src="@/images/icon_wd_dh.png">
							<view>兑换礼品</view>
						</view>
					</view>
				</view>
			</view>
			<view class="button-max-big-box">
				<view class="button-max-box" @click="goPage('alarm')" v-if="userType==1">
					<img class="left-img" src="@/images/icon_003.png">
					<view>安全警报</view>
					<view class="view-three-one" v-if="securityAlertNum>0">{{securityAlertNum}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
				<view class="button-max-box" @click="goPage('laboratory')" v-if="userType==1">
					<img class="left-img" src="@/images/icon_002.png">
					<view>我的实验室</view>
					<view class="view-three-two" v-if="adminSubCount>0">{{adminSubCount}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
				<view class="button-max-box" @click="goPage('record')" v-if="userType==1">
					<img class="left-img" src="@/images/icon_004.png">
					<view>预案执行记录</view>
					<view class="view-three-two" v-if="wranDoCount>0">{{wranDoCount}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
				<view class="button-max-box" @click="goPage('faceImage')">
					<img class="left-img" src="@/images/icon_001.png">
					<view>人脸图像</view>
					<view class="view-three-type" :class="!ifFaceFeature?'colorA':'marginType'">{{!ifFaceFeature?'去认证':'已认证'}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
				<view class="button-max-box" @click="goPage('signature')">
					<img class="left-img" src="@/images/icon_wd_dzqm.png">
					<view>电子签名</view>
					<view class="view-three-type" :class="!isUpload?'colorA':'marginType'">{{!isUpload?'未上传':'已上传'}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
				<view class="button-max-box" @click="goPage('signature')">
					<img class="left-img" src="@/images/icon_wd_zw.png">
					<view>指纹</view>
					<view class="view-three-type" :class="!isUpload?'colorA':'marginType'">{{!isUpload?'无':'已配置3个'}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
				<view class="button-max-box" @click="goPage('upStudentCard')" v-if="userType==2&&certification.auditStatus">
					<img class="left-img" src="@/images/icon_03.png">
					<view>学生卡绑定</view>
					<view class="view-three-type" :class="certification.auditStatus.code == 2 || certification.auditStatus.code == 3?'colorA':'marginType'">
						{{certification.auditStatus.code == 0?'待审核':(certification.auditStatus.code == 1?'已绑定':(certification.auditStatus.code == 2?'未通过':(certification.auditStatus.code == 3?'去绑定':'')))}}
					</view>
					<img class="right-img" v-if="certification.auditStatus.code == 2 || certification.auditStatus.code == 3" src="@/images/icon_04.png">
				</view>
			</view>
		</view>
		<view class="out-button" @click="clickOut">退出登录</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { logout,studentinfoFacemy,simpleInfo,getSafeWarnList,getMyPointsLogInfo,querySignature} from '@/api/index.js'
	import { tabBar } from '@/component/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				//页面状态
				pageType:false,
                //认证数据
			    certification:{
					
				},
			    userType:0,
			    userData:{
                    deptName: "",
                    professional: "",
                    userName: "",
				},
                securityAlertNum:0,
                adminSubCount:0,
                wranDoCount:0,
				//奖励分
				bonusPoints:0,
				//信用分
				creditScore:0,
				//用户签名
				signatureUrl:'',
				// 人脸
				ifFaceFeature:"",
				//签名
				isUpload:"",
				
			}
		},
		onLoad() {
         
		},
		onShow(){
			
		    if(uni.getStorageSync('token')&&uni.getStorageSync('userId')&&uni.getStorageSync('userType')){
                this.userType = uni.getStorageSync('userType')
				this.studentinfoFacemy();
                this.simpleInfo();
				this.querySignature();
			}else{
                uni.removeStorageSync('token');
                uni.removeStorageSync('userId');
                uni.removeStorageSync('userType');
                uni.redirectTo({
                    url: '/pages/login',
                });
			}
		},
		
		methods: {
		    //学生端-信用分/奖励分/扫一扫按钮
            goUserPage(type){
                let self = this;
                if(type == 1){
                    uni.navigateTo({
                        url: '/pages_student/mine/creditPoints',
                    });
				}else if(type == 2){
                    uni.navigateTo({
                        url: '/pages_student/mine/rewardPoints',
                    });
				}else if(type == 3){
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							uni.navigateTo({
								url: '/pages_student/mine/codeSuccess?q='+encodeURIComponent(JSON.stringify(res.result))
							});
						}
					});
				}
			},
            //获取个人信息
            async simpleInfo(){
                const {data} = await simpleInfo();
				if(data.code == 200){
				    this.userData = data.data;
				    this.userData.avatar=data.data.avatar;
				    this.userData.avatarUrl=config.base_url+data.data.avatar;
				    if(this.userType == 1){
				        this.getSafeWarnList();
					}else if(this.userType == 2){
						this.getMyPointsLogInfo();
					}
					if(data.data.count){
						this.adminSubCount = data.data.count.adminSubCount;
						this.wranDoCount = data.data.count.wranDoCount;
					}
					this.pageType = true;
				}
            },
			
			
			//查询用户电子签名
			async querySignature(){
				let _this=this;
			    const {data} = await querySignature();
				if(data.code == 200){
				
					_this.isUpload=data.data.isUpload;
					_this.signatureUrl=data.data.signature;
					console.log(_this.certification.isUpload)
				}
			},
            //获取个人奖励分/信用分
            async getMyPointsLogInfo(){
                const {data} = await getMyPointsLogInfo();
				if(data.code == 200){
					this.bonusPoints = data.data.bonusPoints;
					this.creditScore = data.data.creditScore;
				}
            },
            //获取报警信息列表
            async getSafeWarnList(){
                let obj = {
                    pageNum:1,
                    pageSize:1,
                    count:0,
                    groupStatus:1,
                };
                const {data} = await getSafeWarnList(obj);
                if(data.code == 200){
                    if(data.rows[0]){
                        this.securityAlertNum = data.rows[0].todayHappenCount;
					}else{
                        this.securityAlertNum = 0;
					}
                }
            },
            //获取当前身份人脸验证状态与学生卡上传状态
            async studentinfoFacemy(){
                let obj = {
                    studentsId:uni.getStorageSync('userId')
                }
                const {data} = await studentinfoFacemy(obj)
				if(data.code == 200){
				    this.certification = data.data;
					this.ifFaceFeature = data.data.ifFaceFeature;
				}
            },
		    //退出按钮
            clickOut(){
                let self = this;
                uni.showModal({
                    // title: '确认要退出吗?',
                    content: '确认要退出吗',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.logout();
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
			},
			//退出登录
            async logout() {
                let self = this;
                const {data} = await logout();
                if(data.code == 200){
                    uni.removeStorageSync('token');
                    uni.removeStorageSync('userId');
                    uni.removeStorageSync('userType');
                    uni.redirectTo({
                        url: '/pages/login',
                    });
                }
            },
			//页面跳转
            goPage(type){
                if(type == 'upStudentCard'){//学生卡上传
                    // if(this.certification.auditStatus.code  == 2||this.certification.auditStatus.code  == 3){
					uni.navigateTo({
						url: '/pages_student/mine/upStudentCard',
					});
					// }
				}else if(type == 'pointsRecord'){//积分记录
                    uni.navigateTo({
                        url: '/pages_student/mine/pointsRecord',
                    });
				}else if(type == 'faceImage'){//人脸图像
                    uni.navigateTo({
                        url: '/pages/faceImage',
                    });
				}else if(type == 'laboratory'){
                    uni.navigateTo({
                        url: '/pages_manage/workbench/laboratory/meLaboratory',//我的实验室
                    });
                }else if(type == 'alarm'){
                    uni.navigateTo({
                        url: '/pages_manage/workbench/securityAlert/securityAlertList',//安全警报
                    });
                }else if(type == 'record'){
                    uni.navigateTo({
                        url: '/pages_manage/workbench/plan/planList',//预案执行记录
                    });
                }else if(type == 'signature'){
                    uni.navigateTo({
                        url: '/pages_manage/workbench/signature/signature?item='+this.signatureUrl,//电子签名
                    });
                }
				
				
			},
			// 头像上传
			selectImage() {
			    let self = this;
			    wx.chooseImage({
			        count: 1,
			        sizeType: ["original", "compressed"],
			        sourceType: ["album", "camera"],
			        success: function(res) {
						console.log("res1",res)
			            let tempFilePaths = res.tempFilePaths[0];
			            self.uploadImg(tempFilePaths);
			        }
			    });
			},
			async uploadImg(tempFilePaths){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							uni.navigateTo({
								url: '/pages/avatar?src='+config.base_url+res.data.url,//预案执行记录
							});
							
							
							
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#mine{
		height:100%;
		.top-max-big-box{
			/*background:#ffffff;*/
			.user-top-max-box-one{
				overflow hidden
				background url("@/images/img_wd_bg.png") no-repeat
				background-size:100%;
				height:350rpx;
				.top-max-box-one{
					background #fff
					margin:40rpx 40rpx 0;
					z-index:1;
					height:180rpx;
					border-top-right-radius 20rpx
					border-top-left-radius 20rpx
					display flex
					overflow hidden
					.user-img-box{
						height:120rpx;
						width:100rpx;
						margin:30rpx 53rpx 0 22rpx;
						img{
							height:100rpx;
							width:100rpx;
							border-radius:50%;
						}
						view{
							font-size:22rpx;
							color:#666666;
							text-align center
							line-height:22rpx;
							margin-top:10rpx;
						}
					}
					.name-box{
						margin-top:30rpx;
						.name-box-min{
							display flex
							overflow hidden
							margin-bottom:11rpx;
							view:nth-child(1){
								height:48rpx;
								line-height:48rpx;
								font-size: 30rpx;
								color: #333;
							}
							view:nth-child(2){
								height:30rpx;
								line-height:30rpx;
								font-size:20rpx;
								padding:0 20rpx;
								margin:9rpx 0 9rpx 20rpx;
							}
							view-color-one{
								background #FDD255;
							}
							view-color-two{
								background #A2A2A2;
							}
							view-color-tree{
								background #0183FA;
							}
						}
						.name-box-user{
							line-height:41rpx;
							font-size: 22rpx;
							color: #333;
						}
					}

				}
				.num-max-box{
					width:670rpx;
					background #fff
					border-bottom-right-radius 20rpx
					border-bottom-left-radius 20rpx
					height:130rpx;
					margin:0 40rpx;
					display flex
					.min-num-box{
						flex:1;
						.min-num-view{
							margin-top:30rpx;
							height:30rpx;
							line-height:30rpx;
							font-size:22rpx;
							text-align center
						}
						.color-one{
							font-weight:700;
							font-size:26rpx;
							color:#2B99FE;
						}
						.color-two{
							font-weight:700;
							font-size:26rpx;
							color:#FDD255;
						}
						.bottom-min-num-view{
							display flex
							margin-top:20rpx;
							.img-one{
								width:25rpx;
								height:28rpx;
								margin: 0 10rpx 0 58rpx;
							}
							.img-two{
								width:28rpx;
								height:26rpx;
								margin: 0 10rpx 0 59rpx;
							}
							view{
								font-size:22rpx;
							}
						}
					}
				}
				.null-p{
					background #dedede
					height:30rpx;
					width:2rpx;
					margin:50rpx 0 0;
				}
			}
			.top-max-box-two{
				background url("@/images/img_wd_bg.png")
				background-size:100%;
				height:245rpx;
				display flex
				overflow hidden
				.user-img-box{
					height:120rpx;
					width:100rpx;
					margin:50rpx 53rpx 0 22rpx;
					img{
						height:100rpx;
						width:100rpx;
						border-radius:50%;
					}
					view{
						font-size:22rpx;
						color:#fff;
						text-align center
						line-height:22rpx;
						margin-top:10rpx;
					}
				}
				.name-box{
					margin-top:50rpx;
					view:nth-child(1){
						line-height:48rpx;
						margin-bottom:11rpx;
						font-size: 30rpx;
						color: #fff;
					}
					view:nth-child(2){
						line-height:41rpx;
						font-size: 22rpx;
						color: #fff;
					}
				}

			}
			.button-max-big-box{
				background #fff
				padding:0 20rpx;
				margin-top:30rpx;
				.button-max-box{
					height:100rpx;
					display flex
					border-top:1rpx solid #e0e0e0;
					.left-img{
						height:30rpx;
						width:30rpx;
						margin:34rpx 44rpx 0 0;
					}
					view{
						line-height:100rpx;
					}
					view:nth-child(2){
						flex:1;
						color:#333333;
						font-size: 30rpx;
					}
					.right-img{
						height:24rpx;
						width:12rpx;
						margin:39rpx 0 0 0;
					}
					.colorA{
						color:#E45656!important;
					}
					.marginType{
						margin-right:12rpx;
					}
					.view-three-one{
						width:30rpx;
						height:30rpx;
						text-align center
						background #FF4552
						border-radius:50%;
						font-size:20rpx;
						line-height:30rpx;
						color:#fff;
						margin:36rpx 20rpx;
					}
					.view-three-two{
						width:30rpx;
						height:30rpx;
						text-align center
						border-radius:50%;
						font-size:20rpx;
						line-height:30rpx;
						color:#999;
						margin:36rpx 20rpx;

					}
					.view-three-type{
						width:120rpx;
						text-align center;
						color:#CCCCCC;
						font-size: 26rpx;
					}
				}
				.button-max-box:nth-child(1){
					border:none;
				}
			}
		}
		.out-button{
			position absolute
			bottom:140rpx;
			left:25rpx;
			width:700rpx;
			height:100rpx;
			line-height:100rpx;
			border-radius:10rpx;
			text-align center
			background #E0E0E0
			color:#0183FA;
			font-size: 30rpx;
			margin:0 auto;
		}
	}
</style>