v3-lab-xcx/pages/views/pupilPage/pupilMine.vue

<template>
	<view class="pupilMine">
		<!-- 背景渐变色 -->
		<view class="back-img-box"></view>
		<!-- 信息面板 -->
		<view class="user-info-box">
			<view class="left-img-box">
				<img v-if="userData.avatar" class="avatar-img" :src="userData.avatar">
				<img v-else class="avatar-img" src="@/pages/images/icon_01.png">
				<img class="edit-img" src="@/pages/images/newImage/icon_wd_bj@1x.png">
			</view>
			<view class="right-name-box">
				<view class="right-name-top-box">
					<view>{{userData.userName}}</view>
					<view v-if="negativeType">负面清单</view>
				</view>
				<view class="right-name-bottom-box">{{userData.deptName}}</view>
			</view>
		</view>
		<!-- 信用分面板 -->
		<view class="points-max-box">
			<view class="points-big-box">
				<view class="num-p colorA">{{creditScore?creditScore:'-'}}</view>
				<view class="img-box">
					<img src="@/pages/images/newImage/icon_wd_xyf@1x.png">
					<view>信用分</view>
				</view>
			</view>
			<view class="border-null-p"></view>
			<view class="points-big-box">
				<view class="num-p colorB">{{bonusPoints?bonusPoints:'-'}}</view>
				<view class="img-box">
					<img src="@/pages/images/newImage/icon_wd_jlf@1x.png">
					<view>奖励分</view>
				</view>
			</view>
			<view class="border-null-p"></view>
			<view class="points-big-box">
				<view class="num-p colorC">扫一扫</view>
				<view class="img-box">
					<img style="margin-left:30rpx;" src="@/pages/images/newImage/icon_wd_dh@1x.png">
					<view>积分兑换</view>
				</view>
			</view>
		</view>
		<!-- 按钮部分 -->
		<view class="button-max-big-box">
			<view class="button-big-box" @click="goPage('entryAndExitRecordPupil')">
				<img class="left-img" src="@/pages/images/newImage/icon_wd_jcjl.png">
				<view class="left-text-p">进出记录</view>
				<view class="right-text-p"></view>
				<img class="right-img" src="@/pages/images/newImage/icon_wd_gd@1x.png">
			</view>
		</view>
		<view class="button-max-big-box">
			<view class="button-big-box" @click="goPage('identityAuthenticationPupil')">
				<img class="left-img" src="@/pages/images/newImage/icon_wd_sfyz@1x.png">
				<view class="left-text-p">身份验证</view>
				<view class="right-text-p"></view>
				<img class="right-img" src="@/pages/images/newImage/icon_wd_gd@1x.png">
			</view>
			<view class="button-big-box" @click="goPage('electronicSignaturePupil')">
				<img class="left-img" src="@/pages/images/newImage/icon_wd_dzqm@1x.png">
				<view class="left-text-p">电子签名</view>
				<view class="right-text-p"></view>
				<img class="right-img" src="@/pages/images/newImage/icon_wd_gd@1x.png">
			</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,
		systemUserProfile,
		examPointsRecordGetMyPointsLogInfo,
	} from '@/pages/api/index.js'
	import {
		pageRestrictVerify
	} from '@/utils/index'
	import {
		tabBar
	} from '@/pages/component/tabBar.vue'
	export default {
		name: "pupilMine",
		components: {
			tabBar,
		},
		data() {
			return {
				userData:{},
				bonusPoints:null,
				creditScore:null,
				negativeType:false,
			}
		},
		created() {

		},
		mounted() {
			this.systemUserProfile();
			this.examPointsRecordGetMyPointsLogInfo();
		},
		methods: {
			goPage(type) {
				if (!pageRestrictVerify(type)) {
					uni.showToast({
						title: '没有相关权限,请联系管理员',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (type == 'entryAndExitRecordPupil') {
					//进出记录

				}else if (type == 'identityAuthenticationPupil') {
					//身份验证

				} else if (type == 'electronicSignaturePupil') {
					//电子签名

				}
			},
			//获取个人信息
			async systemUserProfile() {
				const {
					data
				} = await systemUserProfile();
				if (data.code == 200) {
					this.$set(this, 'userData', data.data)
					uni.setStorageSync('faceImg', data.data.faceImg);
				}
			},
			//查询学生-信用分/奖励分
			async examPointsRecordGetMyPointsLogInfo() {
				const {
					data
				} = await examPointsRecordGetMyPointsLogInfo();
				if (data.code == 200) {
					this.bonusPoints = data.data.bonusPoints;
					this.creditScore = data.data.creditScore;
				}
			},
			//退出按钮
			clickOut() {
				let self = this;
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认要退出吗',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.logout();
						} else if (res.cancel) {}
					}
				});
			},
			//退出登录
			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/views/login/login',
					});
				}
			},
			// 头像上传
			selectImage() {
				let self = this;
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(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 + '/system/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_basics/views/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>
	.pupilMine {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.back-img-box{
			z-index:0;
			position: absolute;
			top:0;
			left: 0;
			width:750rpx;
			height:291rpx;
		  background: linear-gradient(180deg, rgba(1,131,250,1) 0%, rgba(255,255,255,0) 100%);
		}
		.user-info-box{
			z-index:10;
			margin:39rpx 24rpx 0;
			display: flex;
			.left-img-box{
				width:132rpx;
				height:132rpx;
				position: relative;
				margin-right:22rpx;
				.avatar-img{
					position: absolute;
					top:6rpx;
					left:6rpx;
					width:116rpx;
					height:116rpx;
					border-radius:50%;
					border:2rpx solid #fff;
				}
				.edit-img{
					z-index:5;
					position: absolute;
					right:0;
					bottom:6rpx;
					width:40rpx;
					height:40rpx;
				}
			}
			.right-name-box{
				padding-top:6rpx;
				.right-name-top-box{
					display: flex;
					view:nth-child(1){
						height:68rpx;
						line-height:62rpx;
						font-size:32rpx;
						color:#fff;
					}
					view:nth-child(2){
						margin-top:14rpx;
						margin-left:30rpx;
						width: 120rpx;
						height:40rpx;
						line-height:40rpx;
						background: #FF8C00;
						border-radius: 50rpx;
						font-size:24rpx;
						color:#fff;
						text-align: center;
					}
				}
				.right-name-bottom-box{
						height:50rpx;
						line-height:50rpx;
						font-size:28rpx;
						color:#fff;
				}
			}
		}
		.points-max-box{
			z-index:10;
			width: 690rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin:38rpx 30rpx 0;
			display: flex;
			.points-big-box{
				flex:1;
				.num-p{
					margin:39rpx 0 19rpx 0;
					text-align: center;
					font-size:28rpx;
					line-height:39rpx;
				}
				.img-box{
					display: flex;
					img{
						width:30rpx;
						height:30rpx;
						display: block;
						margin:0 20rpx 0 42rpx;
					}
					view{
						color:#333333;
						line-height:30rpx;
						font-size:28rpx;
					}
				}
				.colorA{
					color:#0183FA;
				}
				.colorB{
					color:#26C736;
				}
				.colorC{
					color:#333333;
				}
			}
			.border-null-p{
				width:1rpx;
				height:40rpx;
				margin:60rpx 0 0;
				background-color: #e0e0e0;
			}
		}
		.button-max-big-box{
			background-color: #fff;
			border-radius:20rpx;
			margin:20rpx 30rpx 0;
			.button-big-box:nth-child(1){
				border-top:none;
			}
			.button-big-box{
				border-top:1px solid #E0E0E0;
				display: flex;
				padding:0 30rpx 0 26rpx;
				.left-img{
					display: block;
					width:36rpx;
					height:36rpx;
					margin-top:25rpx;
					margin-right:21rpx;
				}
				.left-text-p{
					flex:1;
					front-size:30rpx;
					line-height:40rpx;
					margin:20rpx 0;
				}
				.right-text-p{
					front-size:30rpx;
					line-height:40rpx;
					margin:20rpx 0;
				}
				.right-img{
					display: block;
					width:30rpx;
					height:30rpx;
					margin-top:28rpx;
				}
			}
		}
		.out-button {
			position absolute;
			bottom: 140rpx;
			left: 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			text-align center;
			background #0183FA;
			color: #ffffff;
			font-size: 30rpx;
			margin: 0 auto;
		}
	}
</style>