FE-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="baseUrl+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="userData.status == 2 || userData.status == 3">
						{{userData.status == 2?'负面清单':(userData.status == 3?'黑名单':'')}}
					</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" @click="scanCode()">
				<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" :class="faceImg?'color-D':''" >{{!faceImg?'未上传':'已上传'}}</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" :class="signatureUrl?'color-D':''" >{{!signatureUrl?'未上传':'已上传'}}</view>
				<img class="right-img" src="@/pages/images/newImage/icon_wd_gd@1x.png">
			</view>
		</view>
		<view class="null-flex-p"></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,
		studentinfoFacemy,
		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 {
				baseUrl: config.base_url,
				userData: {},
				bonusPoints: null,
				creditScore: null,
				faceImg: '',
				signatureUrl: '',

			}
		},
		created() {

		},
		mounted() {
			this.systemUserProfile();
			this.examPointsRecordGetMyPointsLogInfo();
		},
		methods: {
		
			scanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (res.result.indexOf('mid') != -1 &&
							res.result.indexOf('sid') != -1 &&
							res.result.indexOf('pid') != -1 &&
							res.result.indexOf('pri') != -1) {
							uni.navigateTo({
								url: '/pages_student/views/integralManage/codeSuccess?q=' +
									encodeURIComponent(JSON.stringify(res.result))
							});
						} else {
							uni.showToast({
								title: '请扫描正确的二维码',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					}
				});
			},
			goPage(type) {
				if (!type) {
					uni.showToast({
						title: '暂未开放',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!pageRestrictVerify(type)) {
					uni.showToast({
						title: '没有相关权限,请联系管理员',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (type == 'entryAndExitRecordPupil') {
					//进出记录
					uni.navigateTo({
						url: "/pages_student/views/myRecord/index",
					});
				} else if (type == 'identityAuthenticationPupil') {
					//身份验证
					uni.navigateTo({
						url: "/pages_basics/views/faceImage",
					});
				} else if (type == 'electronicSignaturePupil') {
					//电子签名
					uni.navigateTo({
						url: "/pages_basics/views/signature/signature?item="+this.signatureUrl,//电子签名
					});
				}
			},
			//获取个人信息
			async systemUserProfile() {
				const {
					data
				} = await systemUserProfile();
				if (data.code == 200) {
					this.$set(this, 'userData', data.data)
					this.faceImg=data.data.faceImg;
					this.signatureUrl=data.data.signature
					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-y: scroll;
		overflow-x: hidden;
		padding-bottom:100rpx;

		.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;
				}
			}
			.color-D{
				color:#0183FA!important;
			}
		}
		.null-flex-p{
			flex:1;
		}
		.out-button {
			// position absolute;
			// bottom: 140rpx;
			// left: 75rpx;
			margin:20rpx 0 20rpx 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			text-align center;
			background #0183FA;
			color: #ffffff;
			font-size: 30rpx;
		}
	}
</style>