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="openPopup" />
				</view>
				<navigator class="user" url="#" @click.stop="openPopup">
					<image class="profile-photo" v-if="userMsg.attinfos[0].url" :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-daka" />
							{{ 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="#">
				<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>

		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>

		<u-popup :show="showPopup" :customStyle="popupStyle" bgColor="#F7F7F7" :overlay="false" zIndex="9998" mode="left"
			@close="showPopup = false">
			<view :style="{ 'height': spaceUsage }" />
			<view class="head-p">
				账号信息
				<text class="cuIcon-close" @click="showPopup = false" />
			</view>

			<upload maxCount="1" @uploadCallback="uploadCallback">
				<navigator class="portrait-p-box" url="#">
					<view class="label">
						头像
					</view>
					<view class="content">
						<image class="profile-photo" v-if="userMsg.attinfos[0].url" :src="userMsg.attinfos[0].url"
							mode="aspectFill" />
						<view v-else class="profile-photo">
							<view class="substitution">
								<text class="iconfont icon-wode-xuanzhong" />
							</view>
						</view>
						<text class="iconfont icon-a-wodetiaozhuan" />
					</view>
				</navigator>
			</upload>
			<view class="rests-p-box">
				<view class="row">
					<view class="label">
						工号
					</view>
					<view class="content">
						{{ userMsg.accountno }}
					</view>
				</view>
				<navigator url="#" class="row" @click="openModal('name', '姓名', userMsg.name, '请填写姓名')">
					<view class="label">
						姓名
					</view>
					<view class="content">
						{{ userMsg.name }}
						<text class="iconfont icon-a-wodetiaozhuan" />
					</view>
				</navigator>
				<block v-if="userMsg.hr.userid">
					<navigator url="#" class="row" @click="openModal('email', '邮箱', userMsg.hr.email, '请填写邮箱')">
						<view class="label">
							邮箱
						</view>
						<view class="content">
							{{ userMsg.hr.email || '--' }}
							<text class="iconfont icon-a-wodetiaozhuan" />
						</view>
					</navigator>
					<view class="row">
						<view class="label">
							部门
						</view>
						<view class="content">
							{{ userMsg.hr.depname || '--' }}
						</view>
					</view>
					<view class="row">
						<view class="label">
							职位
						</view>
						<view class="content">
							{{ userMsg.hr.position || '--' }}
						</view>
					</view>
				</block>
			</view>
		</u-popup>
		<u-overlay :show="showPopup" zIndex="9997" @click="showPopup = false" />

		<u-modal :show="changeUser.showModal" @confirm="changeUserMsg" @cancel="changeUser.showModal = false"
			showCancelButton ref="uModal" :asyncClose="true">
			<view class="modal-content">
				<view class="title">
					修改{{ changeUser.title }}
				</view>
				<input class="input" v-model="changeUser.changeValue" type="text" :placeholder="changeUser.placeholder" />
			</view>
		</u-modal>
	</view>
</template>

<script>
import upload from "../../../components/my-upload.vue";
import {
	queryStr,
	CheckEmail
} from "../../../utils/basicInspection"
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"
			},
			popupStyle: {
				width: "88.000vw",
				background: "#F7F7F7",
				padding: "2.667vw",
				boxSizing: "border-box"
			},
			userMsg: {},
			showPopup: false,
			spaceUsage: 0,
			changeUser: {
				name: "",
				showModal: false,
				title: "",
				changeValue: "",
				placeholder: "",
			}
		};
	},
	created() {
		this.getUserMsg()
	},
	methods: {
		/* 打开modal */
		openModal(name, title, value, placeholder) {
			this.changeUser = {
				name,
				showModal: true,
				title,
				changeValue: "",
				placeholder: value || placeholder,
			}
		},
		/* 修改用户信息 */
		changeUserMsg() {
			let changeUser = this.changeUser,
				content = {
					name: this.userMsg.name,
					email: this.userMsg.hr.email || "",
					phonenumber: this.userMsg.phonenumber
				};
			if (changeUser.changeValue == '') return this.changeUser.showModal = false;
			if (changeUser.name == 'name') {
				content.name = queryStr(changeUser.changeValue, '已移除非法字符');
			} else if (changeUser.name == 'email') {
				if (!CheckEmail(changeUser.changeValue.trim())) return this.$refs.uModal.loading = false;
				content.email = changeUser.changeValue.trim();
			}
			this.$Http.basic({
				id: 20230608105602,
				content
			}).then(res => {
				console.log("修改用户信息", res)
				if (this.cutoff(res.msg, '修改成功')) return;
				this.userMsg.name = content.name;
				this.userMsg.hr.email && (this.userMsg.hr.email = content.email);
				this.changeUser.showModal = 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;
			})
		},
		openPopup() {
			this.spaceUsage = this.$refs.Dustom.getHeight();
			this.showPopup = true;
		},
		uploadCallback(attachmentids) {
			let attinfos = [];
			//删除原本头像
			if (this.userMsg.attinfos.length) this.$Http.basic({
				"classname": "system.attachment.Attachment",
				"method": "deleteFileLink",
				"content": {
					"linksids": this.userMsg.attinfos.map(v => v.linksid)
				}
			}).then(res => {
				console.log("删除原本头像", res)
				if (this.cutoff(res.msg)) return;
				this.userMsg.attinfos = attinfos;
			})
			//绑定新头像
			if (attachmentids) this.$Http.basic({
				"classname": "system.attachment.Attachment",
				"method": "createFileLink",
				"content": {
					"ownertable": "sys_users",
					"ownerid": uni.getStorageSync('userMsg').userid,
					"usetype": "headportrait",
					"attachmentids": attachmentids
				}
			}).then(res => {
				console.log("绑定头像", res)
				if (this.cutoff(res.msg)) return;
				attinfos = res.data;
				this.userMsg.attinfos = attinfos;
			})
		},
		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;

}

.head-p {
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 21px;
	font-size: 15px;
	color: #333333;
	line-height: 21px;

	.cuIcon-close {
		padding-left: 10px;
	}
}


.portrait-p-box,
.rests-p-box {
	width: 310px;
	background: #FFFFFF;
	box-sizing: border-box;
	padding-right: 10px;
	border-radius: 4px;
	overflow: hidden;
}

.portrait-p-box {
	height: 60px;
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.label {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #666666;
		margin-left: 15px;
	}

	.content {
		display: flex;
		align-items: center;

		.icon-a-wodetiaozhuan {
			font-size: 18px;
			color: #999;
		}

		.profile-photo {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			overflow: hidden;

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

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

.rests-p-box {
	margin-top: 10px;

	.row {
		display: flex;
		width: 310px;
		box-sizing: border-box;
		padding: 13px 10px 12px 15px;

		.label {
			min-width: 28px;
			flex: 1;
			font-size: 14px;
			line-height: 20px;
		}

		.content {
			line-height: 20px;
			font-size: 14px;
			color: #333333;

			.icon-a-wodetiaozhuan {
				font-size: 14px;
			}
		}
	}
}

.modal-content {
	width: 100%;

	.title {
		width: 100%;
		text-align: center;
		font-size: 18px;
		color: #333;
	}

	.input {
		width: 100%;
		margin-top: 22px;
		border: 1px solid #888;
		height: 30px;
		line-height: 30px;
		padding-left: 6px;
		font-size: 14px;
		border-radius: 4px;
	}
}
</style>