GSExamProj/pages/user/user.vue

<template>
	<view class="hole-page">
		<view class="nav-bar"></view>
		<!-- <view class="user-upper">
			<view class="avatar">
				<image :src="avatarUrl" mode=""></image>
			</view>
			<view class="upper-rig">
				<span>{{ username }}</span>
				<span>{{ phone }}</span>
			</view>
		</view> -->
		<view class="lower-section">
			<u-cell-group style="width: 100%; margin: 15rpx auto; background-color: #fff; box-sizing: border-box; padding: 0 15rpx 15rpx 15rpx;" :border="false">
				<u-cell
					title="个人信息" 
					:isLink="true" 
					icon="/static/personal.png"
					url="/pages/personalInfo/personalInfo"
					:border="false"
					style="border-bottom: 1px solid #dbdbdb;"
				>
				</u-cell>
				<u-cell 
					title="修改密码" 
					:isLink="true" 
					icon="/static/fixPwd.png"
					url="/pages/fixPwd/fixPwd"
					:border="false"
					style="border-bottom: 1px solid #dbdbdb;"
				>
				</u-cell>
			</u-cell-group>
			<u-cell-group style="width: 100%; margin: 15rpx auto; background-color: #fff; box-sizing: border-box; padding: 0 15rpx 15rpx 15rpx;" :border="false">
				<u-cell
					title="我的积分" 
					:isLink="true" 
					icon="/static/myPoints.png"
					:border="false"
					url="/pages/myPoints/myPoints"
					style="border-bottom: 1px solid #dbdbdb;"
				>
				</u-cell>
				<u-cell
					title="我的工时" 
					icon="/static/workTime.png"
					:border="false"
					style="border-bottom: 1px solid #dbdbdb;"
				>
				</u-cell>
			</u-cell-group>
			<u-cell-group style="width: 100%; margin: 15rpx auto; background-color: #fff; box-sizing: border-box; padding: 0 15rpx 15rpx 15rpx;" :border="false">
				<u-cell
					title="考试成绩" 
					:isLink="true" 
					icon="/static/score.png"
					url="/pages/examScore/examScore"
					:border="false"
					style="border-bottom: 1px solid #dbdbdb;"
				>
				</u-cell>
				<u-cell
					title="自测练习" 
					:isLink="true" 
					icon="/static/practise.png"
					url="/pages/pracScore/pracScore"
					:border="false"
					style="border-bottom: 1px solid #dbdbdb;"
				>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="exit" @click="exitLogin">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: 'https://img.51miz.com/Element/00/38/03/97/917488dc_E380397_8f92a53e.png',
				username: uni.getStorageSync('username'),
				phone: uni.getStorageSync('phone'),
				pwdFormData: {
					pwdVal: '',
					rePwdVal: ''
				},
				username: uni.getStorageSync('name'),
				phone: uni.getStorageSync('phone')
			}
		},
		methods: {
			waitOpen () {
				uni.showToast({
					icon: 'none',
					title: '该功能尚未开放，敬请期待！'
				})
			},
			exitLogin () {
				uni.showModal({
					title: '退出登录',
					content: '确定退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			},
			pwdFormSubmit () {
				let that = this
				let pwdReg = /^\S*(?=\S{8,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
				console.log(this.pwdFormData.pwdVal, this.pwdFormData.rePwdVal)
				if (this.pwdFormData.pwdVal != this.pwdFormData.rePwdVal) {
					uni.showToast({
						icon: 'none',
						title: '请确保两次密码输入一致！',
						duration: 2000
					})
				} else if (this.pwdFormData.pwdVal == '' || this.pwdFormData.rePwdVal == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写密码和确认密码！',
						duration: 2000
					})
				} else if (!pwdReg.test(this.pwdFormData.pwdVal) && !pwdReg.test(this.pwdFormData.rePwdVal)) {
					uni.showToast({
						icon: 'none',
						title: '密码至少包含8位大小写字母、特殊字符和数字！',
						duration: 2000
					})
				} else {
					uni.request({
						url: publicPath + '/user/updatePassword',
						method: 'POST',
						header: {
							'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
						},
						data: {
							id: uni.getStorageSync('id'),
							password: this.pwdFormData.pwdVal,
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							console.log(res)
							if (res.data.resMsg == 'success') {
								uni.showToast({
									icon: 'success',
									title: '密码修改成功！',
									duration: 2000,
									success: () => {
										setTimeout(() => {
											that.showPwdPopup = false
										}, 2000)
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '密码修改失败，请稍后再试！'
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hole-page{
		background-color: #f7fbfe;
		width: 100%;
		height: 100vh;
		.nav-bar{
			width: 100%;
			height: var(--status-bar-height);
			padding-top: var(--status-bar-height);
		}
		.user-upper{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #D7D7D7;
			display: flex;
			.avatar{
				width: 22%;
				height: 150rpx;
				border-radius: 50%;
				border: 1px solid #c8cecf;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.upper-rig{
				flex: 1;
				box-sizing: border-box;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}
		.lower-section{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			.pwd-popup{
				width: 600rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				.pop-tit{
					font-size: 22px;
				}
				.form-area{
					width: 100%;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					margin: 30rpx auto;
					.common-ipt{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 10rpx auto;
					}
					.submit-btn{
						background-color: #008afb;
						color: #fff;
						font-size: 14px;
						box-sizing: border-box;
						padding: 5rpx 0;
					}
				}
			}
		}
		.exit{
			width: 60%;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20vh auto;
			margin-bottom: 0;
			background-color: #219ef8;
			color: #fff;
			border-radius: 15rpx;
		}
	}
</style>