water_affairs/pages/index/modules/mine.vue

<template>
	<view>
		<cu-custom heighten="94" ref="Dustom"
			bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png">
			<view slot="head" class="head" :style="{ 'height': headHeight, 'top': posTop }">
				<view class="custom-bar" :style="{ 'height': customBar }">
					<navigator class="iconfont icon-wode-xuanzhong" url="#">

					</navigator>
				</view>
				<navigator class="user" url="#">
					<view class="profile-photo">
						<view class="substitution">
							<text class="iconfont icon-wode-xuanzhong" />
						</view>
					</view>
					<view class="text">
						<view class="name u-line-1">
							{{ userMsg.name }}
						</view>
						<view class="replenish">
							<text class="iconfont icon-daka" />
							{{ userMsg.phonenumber || '未填写' }}
							<text style="margin: 0 10px;">
								|
							</text>
							{{ userMsg.hr.position || '未知职位' }}
						</view>
					</view>
				</navigator>
			</view>
		</cu-custom>
		<view class="nav-box">
			<navigator class="nav-item" url="#">
				<text class="iconfont icon-wode-xuanzhong" />
				<view class="view">
					修改登录密码
				</view>
				<text class="iconfont icon-wode-xuanzhong" />
			</navigator>
			<navigator class="nav-item" url="#">
				<text class="iconfont icon-wode-xuanzhong" />
				<view class="view">
					修改登录手机号
				</view>
				<text class="iconfont icon-wode-xuanzhong" />
			</navigator>
			<navigator class="nav-item" url="#">
				<text class="iconfont icon-wode-xuanzhong" />
				<view class="view">
					绑定微信
				</view>
				<text class="iconfont icon-wode-xuanzhong" />
			</navigator>
		</view>
		<upload>
		</upload>
		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>
	</view>
</template>

<script>
import upload from "../../../components/my-upload.vue";
export default {
	name: 'Mine',
	components: { upload },
	data() {
		return {
			posTop: this.tovw(this.StatusBar),
			headHeight: this.tovw(this.CustomBar - this.StatusBar),
			customBar: this.tovw(this.CustomBar - this.StatusBar),
			butStyle: {
				position: "fixed",
				bottom: '32vw',
				left: "2.667vw",
				width: "94.667vw",
				height: "12vw",
				background: "rgba(255,255,255,0.1)",
				borderRadius: "1.067vw",
				border: "0.267vw solid rgba(255,255,255,0.5)",
				fontSize: "4vw",
				color: "#FFFFFF"
			},
			userMsg: {}
		};
	},
	created() {
		this.getUserMsg()
	},
	methods: {
		// 获取用户信息
		getUserMsg() {
			this.$Http.basic({
				id: 20230608105102,
				content: {
					nocache: true
				}
			}).then(res => {
				if (this.cutoff(res.msg)) return;
				this.userMsg = res.data;
			})
		},
		logOut() {
			uni.showModal({
				title: '提示',
				content: '是否确认退出登录',
				success: ({ confirm }) => {
					if (confirm) uni.reLaunch({
						url: "/pages/login/login"
					})
				},
			})
		},
	},
}
</script>

<style lang="scss">
.head {
	position: fixed;
	width: 100vw;
	z-index: 99991;


	.custom-bar {
		width: 100vw;
		position: relative;

		.iconfont {
			position: absolute;
			bottom: 14px;
			font-size: 16px;
			color: #FFFFFF;
			margin-left: 10px;
		}
	}

	.user {
		display: flex;
		height: 84px;
		width: 100vw;
		padding: 10px;
		box-sizing: border-box;

		.profile-photo {
			width: 64px;
			height: 64px;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
			margin-right: 10px;

			.substitution {
				width: 64px;
				line-height: 64px;
				text-align: center;
				background: #EFF4FA;

				.iconfont {
					font-size: 32px;
					color: #7C98BB;
				}
			}


		}

		.text {
			flex: 1;
			height: 64px;
			width: 0;

			.name {
				height: 24px;
				line-height: 24px;
				font-size: 17px;
				color: #FFFFFF;
				margin-top: 5px;
			}

			.replenish {
				margin-top: 10px;
				line-height: 20px;
				font-size: 14px;
				color: #FFFFFF;

				.iconfont {
					font-size: 14px;
					margin-right: 5px;
				}
			}
		}
	}
}

.nav-box {
	width: 355px;
	margin: 10px auto 0;
	border-radius: 4px;
	overflow: hidden;
	background: rgba($color: #fff, $alpha: 0.1);

	.nav-item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 45px;
		padding: 0 10px;
		box-sizing: border-box;
		color: #fff;
		font-size: 14px;

		.view {
			flex: 1;
			margin-left: 10px;
		}

		.iconfont {
			font-size: 14px;
			flex-shrink: 0;
		}
	}
}



.cu-bar .content {
	overflow: auto !important;
}
</style>