v3-lab-xcx/pages/mine/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">
				<view class="user-img-box" @click="selectImage">
					<img v-if="userData.avatar" :src="baseUrl+userData.avatar">
					<img v-else src="@/images/basicsModules/icon_01.png">
					<view>{{userData.avatar?'编辑':'未上传'}}</view>
				</view>
				<view class="name-box">
					<view>{{userData.userName}}</view>
					<view>{{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.avatarUrl">
						<img v-else src="@/images/basicsModules/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('none')">
						<view class="min-num-view color-one">{{creditScore}}</view>
						<view class="bottom-min-num-view">
							<img class="img-one" src="@/images/basicsModules/icon_wd_xyf.png">
							<view>信用分</view>
						</view>
					</view>
					<view class="null-p"></view>
					<view class="min-num-box" @click="goUserPage('none')">
						<view class="min-num-view color-two">{{bonusPoints}}</view>
						<view class="bottom-min-num-view">
							<img class="img-two" src="@/images/basicsModules/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/basicsModules/icon_wd_dh.png">
							<view>兑换礼品</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<mineConfigurationSlot v-for="(item,index) in mineConfigData" :key="index" :mineConfig="item">
		</mineConfigurationSlot>
		<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,
		fingerprintQuantity,
		fingerprintQueryList,
		systemAppletLayoutSelect,
		systemUserProfile
	} from '@/api/basicsModules/index.js'
	import {
		tabBar
	} from '@/components/tabBar.vue'

	import {
		mineConfigurationSlot
	} from '@/components/mineConfigurationSlot'
	import {
		getMineConfig
	} from '@/utils/mineConfig'

	export default {
		components: {
			tabBar,
			mineConfigurationSlot,
		},
		data() {
			return {
				baseUrl: config.base_url,
				mineConfigData: [],
				//页面状态
				pageType: false,
				//认证数据
				certification: {

				},
				userType: 0,
				userData: {
					deptName: "",
					professional: "",
					userName: "",
				},
				securityAlertNum: 0,
				adminSubCount: 0,
				wranDoCount: 0,
				//奖励分
				bonusPoints: 0,
				//信用分
				creditScore: 0,
				//用户签名
				signatureUrl: '',
				// 人脸
				ifFaceFeature: "",
				//签名
				isUpload: "",
				Quantity: 0, //指纹录取数量

			}
		},
		onLoad() {

		},
		onShow() {
			this.simpleInfo();
			this.systemAppletLayoutSelect();
			if (uni.getStorageSync('token') && uni.getStorageSync('userId') && uni.getStorageSync('userType')) {
				this.userType = uni.getStorageSync('userType')
				//this.studentinfoFacemy();
			} else {
				uni.removeStorageSync('token');
				uni.removeStorageSync('userId');
				uni.removeStorageSync('userType');
				uni.redirectTo({
					url: '/pages/login',
				});
			}
		},

		methods: {
			//获取菜单配置
			async systemAppletLayoutSelect() {
				const {
					data
				} = await systemAppletLayoutSelect({
					module: 'mine'
				})
				if (data.code == 200) {
					let list = JSON.parse(JSON.stringify(data.data))
					for (let i = 0; i < list.length; i++) {
						list[i].layout = JSON.parse(list[i].layout);
					}
					this.$set(this, 'mineConfigData', getMineConfig(list));
				}
			},
			//学生端-信用分/奖励分/扫一扫按钮
			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/integralManage/codeSuccess?q=' +
									encodeURIComponent(JSON.stringify(res.result))
							});
						}
					});
				} else if (type == 'none') {
					uni.showToast({
						title: '暂未开放',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//获取个人信息
			async simpleInfo() {
				const {
					data
				} = await systemUserProfile();
				if (data.code == 200) {
					this.$set(this, 'userData', data.data)
					uni.setStorageSync('faceImg', data.data.faceImg);
					this.$set(this, 'pageType', true)
				}
			},
			//获取个人奖励分/信用分
			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();
						} 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/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/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/basicsModules/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/basicsModules/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>