my.vue 3.37 KB
<template>
	<view class="my-info">
		<view class="header u-f u-f-jcsb u-f-aic" @tap='goProfile'>
			<view class="hl">
				<view class="u-f u-f-jcfs ">
					<image style="width: 50px; height: 50px;border-radius: 50%; background-color: #eeeeee;" :src="src"
						mode="aspectFit">
					</image>
					<view class="hl-r">
						<view class="name">
							{{info.nickName}}
						</view>
						<view class="company">
							{{leader}}
						</view>
					</view>
				</view>
			</view>
			<view>
				<uni-icons type="arrowright" size="20" color="gray"></uni-icons>
			</view>
		</view>
		<view class="divider"></view>
		<view class="center">
			<view class="u-f pass" @tap="resetPwd">
				<view class="common-mr">
					<text class="iconfont icon-mima"></text>
				</view>
				<view class="u-f1 common-b">
					修改密码
				</view>
				<view>
					<uni-icons type="arrowright" size="20" color="gray"></uni-icons>
				</view>
			</view>
			<view class="u-f about" @tap="aboutUs">
				<view class="common-mr">
					<text class="iconfont icon-guanyuwomen"></text>
				</view>
				<view class="u-f1 common-b">
					关于我们
				</view>
				<view>
					<uni-icons type="arrowright" size="20" color="gray"></uni-icons>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="btn" type="warn" @tap="logOut">退出系统</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				version: this.$conf.version,
				src: '',
				info: {},
				leader: ''
			}
		},
		onLoad() {
			this.$api.user.getProfile().then(res => {

				this.leader = res.data.data.dept.leader;
				this.src = res.data.data.avatar;
				this.info = res.data.data;
				try {
					uni.setStorageSync('my_profile', res.data.data);
				} catch (e) {
					// error
				}
			})
		},
		methods: {
			goProfile() {
				uni.navigateTo({
					url: 'profile'
				})
			},
			resetPwd() {
				uni.navigateTo({
					url: 'reset-pwd'
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: 'about-us'
				})
			},
			logOut() {
				const self = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出系统吗?',
					success: function(res) {
						if (res.confirm) {
							self.$store.dispatch("logout");
							try {
							    uni.clearStorageSync();
							} catch (e) {
							    // error
							};
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}
					}
				})

			}
		},
	}
</script>

<style lang="scss" scoped>
	.my-info {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;

		.header {
			height: 200rpx;
			padding: 0 50rpx;

			.hl {
				.hl-r {
					height: 60rpx;
					margin: 5rpx 0 0 $uni-spacing-row-base;

					.name {
						margin-bottom: $uni-spacing-col-sm;
						font-weight: bold;
					}

					.company {
						font-size: $uni-font-size-sm;
					}
				}
			}
		}

		.divider {
			height: $uni-spacing-col-sm;
			margin: 0 50rpx;
			background-color: #f8f8f8;
		}

		.center {
			padding: 0 50rpx;

			.pass {
				height: 110rpx;
				line-height: 120rpx;
			}

			.about {
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.footer {
			margin-top: 80rpx;
			padding: 0 50rpx;

			.btn {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				font-size: $uni-font-size-lg;
			}
		}
	}

	.common-mr {
		margin-right: $uni-spacing-row-base;
	}

	.common-b {
		border-bottom: 2rpx solid $uni-border-color;
	}
</style>