我的

pages/index/modules/mine.vue

@@ -4,12 +4,12 @@
 			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>
+					<navigator class="iconfont icon-wode-xuanzhong" url="#" @click.stop="openPopup" />
 				</view>
-				<navigator class="user" url="#">
-					<view class="profile-photo">
+				<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>
@@ -21,15 +21,18 @@
 						<view class="replenish">
 							<text class="iconfont icon-daka" />
 							{{ userMsg.phonenumber || '未填写' }}
-							<text style="margin: 0 10px;">
-								|
-							</text>
-							{{ userMsg.hr.position || '未知职位' }}
+							<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" />
@@ -53,14 +56,101 @@
 				<text class="iconfont icon-wode-xuanzhong" />
 			</navigator>
 		</view>
-		<upload>
-		</upload>
+
 		<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 },
@@ -81,13 +171,65 @@ export default {
 				fontSize: "4vw",
 				color: "#FFFFFF"
 			},
-			userMsg: {}
+			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({
@@ -96,10 +238,46 @@ export default {
 					nocache: true
 				}
 			}).then(res => {
-				if (this.cutoff(res.msg)) return;
+				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: '提示',
@@ -222,9 +400,127 @@ export default {
 	}
 }
 
-
-
 .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>