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="#" @click.stop="showUserCenter" />
				</view>
				<navigator class="user" url="#" @click.stop="showUserCenter">
					<image class="profile-photo" v-if="userMsg.attinfos.length" :src="userMsg.attinfos[0].url"
						mode="aspectFill" />
					<view v-else 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-shoujihao" />
							{{ userMsg.phonenumber || '未填写' }}
							<block v-if="userMsg.hr.userid">
								<text style="margin: 0 10px;">
									|
								</text>
								{{ userMsg.hr.position || '未知职位' }}
							</block>
						</view>
					</view>
				</navigator>
			</view>
		</cu-custom>
		<view class="nav-box">
			<navigator class="nav-item" url="/pages/index/mine-modules/changePassword">
				<text class="iconfont icon-mima" />
				<view class="view">
					修改登录密码
				</view>
				<text class="iconfont icon-a-wodetiaozhuan" />
			</navigator>
			<navigator class="nav-item" v-if="usePort == 'wechat'" url="#" @tap="bindingWechat">
				<text class="iconfont icon-wode-xuanzhong" />
				<view class="view">
					绑定微信
				</view>
				<view class="already-bound" v-if="userMsg.wechatuserinfo.avatarUrl || false">
					<view class="portrait">
						<image class="image" :src="userMsg.wechatuserinfo.avatarUrl" mode="aspectFit" />
					</view>
					<text>
						已绑定
					</text>
				</view>
				<view class="not-bound" v-else>
					未绑定
				</view>
				<text class="iconfont icon-a-wodetiaozhuan" />
			</navigator>
		</view>
		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>
		<user-center ref="userCenter" :userMsg="userMsg" @getMsg="getUserMsg" />
	</view>
</template>

<script>
import userCenter from "../mine-modules/userCenter.vue"
export default {
	name: 'Mine',
	components: { userCenter },
	data() {
		return {
			usePort: this.usePort,
			uninitialized: true,
			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: {},
		};
	},
	methods: {
		init(forcedUpdating = true) {
			this.uninitialized = false;
			this.getUserMsg()
		},
		// 获取用户信息
		getUserMsg() {
			this.$Http.basic({
				id: 20230608105102,
				content: {
					nocache: true
				}
			}).then(res => {
				console.log("用户信息", res)
				if (this.cutoff(res.msg)) return;
				this.userMsg = res.data;
			})
		},
		/* 打开用户中心 */
		showUserCenter() {
			this.$refs.userCenter.show = !this.$refs.userCenter.show;
			this.$refs.userCenter.spaceUsage = this.$refs.Dustom.getHeight();
		},
		logOut() {
			uni.showModal({
				title: '提示',
				content: '是否确认退出登录',
				success: ({ confirm }) => {
					if (confirm) uni.reLaunch({
						url: "/pages/login/login"
					})
				},
			})
		},
		/* 绑定或解绑微信 */
		bindingWechat(e) {
			let that = this;
			if (this.userMsg.iswechatbinding) {
				uni.showModal({
					title: "提示",
					content: "是否解除绑定",
					success: (res) => {
						if (res.confirm) handleBDWechat(0);
					}
				})
			} else {
				handleBDWechat(1);
			}
			function handleBDWechat(isbinging) {
				wx.getUserProfile({
					desc: '用于完善用户资料',
					success: ({
						userInfo
					}) => {
						wx.login({
							success(res) {
								if (res.code) that.$Http.basic({
									id: 20230608105702,
									content: {
										"wechat_code": res.code,
										isbinging, // 0解绑 1绑定
										wechatuserinfo: userInfo,
										"appid": "wxd162e1286b6d7ecd"
									}
								}).then(s => {
									console.log("微信绑定", isbinging, s)
									if (s.msg != '成功') return wx.showToast({
										title: s.data,
										icon: "none"
									});
									setTimeout(() => {
										wx.showToast({
											title: isbinging == 0 ? '解除成功' : '绑定成功',
											icon: "none"
										})
									}, 100);
									that.getUserMsg();
								})
							}
						})
					},
					fail: () => {
						wx.showToast({
							title: '操作失败，未获得授权',
							icon: "none"
						})
					}
				})
			}

		},
	}
}
</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;
		}

		/* 绑定wx */
		.already-bound {
			display: flex;
			align-items: center;
			font-size: 0;

			text {
				font-size: 13px;
			}

			.image {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				margin-right: 6px;
			}
		}

		.not-bound {
			display: flex;
			align-items: center;
			font-size: 13px;
			color: #FF3B30;
		}

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

.cu-bar .content {
	overflow: auto !important;

}
</style>