yizhizan-h5/pages/my/userinfo.vue

<template>
	<view class="page-container" :style="{ paddingTop: statusBarHeight + 'px' }">
		<!-- 顶部导航栏 -->
		<navBar title="基本信息"></navBar>

		<!-- <nav-bar title="基本信息"></nav-bar> -->

		<view class="usermain">
			<view class="usermain-item ">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text class="usermain-item-title">头像</text>
				</view>
				<view class="avatar-wrapper flex align-center" @click="uploadImg()">
					<!-- #ifndef MP-WEIXIN -->
					<view>
						<image src="../../static/logo.png" v-if="avatar == null"
							style="width: 78rpx;height: 78rpx;border-radius: 50%;" mode="aspectFill"></image>
						<image v-else :src="avatar" mode="" style="width: 78rpx;height: 78rpx;border-radius: 50%;">
						</image>
					</view>
					<!-- #endif -->
					<view class="tip">重新上传</view>
				</view>
			</view>
			<view class="usermain-item item-padding ">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text class="usermain-item-title">姓名</text>
				</view>
				<view class="cu-form-group">
					<input type="nickname" v-model="userName" placeholder="请输入用户名" />
				</view>
			</view>
			<view class="usermain-item item-padding ">
				<view class="form-label">
					<text class="required-mark">*</text>
					<view class="usermain-item-title">性别</view>
				</view>

				<view>
					<view class="cu-form-group">
						<u-radio-group v-model="sex">
							<u-radio shape="circle" :name="1">男</u-radio>
							<u-radio shape="circle" active-color="red" :name="2">女</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<!-- <view class="usermain-item item-padding ">
				<view class="usermain-item-title">年龄</view>
				<view>
					<view class="cu-form-group">
						<input v-model="age" />
					</view>
				</view>
			</view> -->
			
			<!-- 出生年月 -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-mark">*</text>
					<text>出生年月</text>
				</view>
				<view class="date-picker" @click="showDatePicker = true">
					<text class="date-text" v-if="birthDateText">{{ birthDateText }}</text>
					<text class="placeholder-text" v-else>请选择出生年月</text>
					<u-icon name="arrow-down" color="#999" size="24"></u-icon>
				</view>
			
				<u-picker :default-time="birthDateText" v-model="showDatePicker" mode="time" :params="dateParams"
					@confirm="onDateConfirm"></u-picker>
			</view>
			
			<view class="usermain-item item-padding contact-structure">
				<view class="usermain-item-title">联系方式</view>
				<view class="contact-wrapper">
					<text class="phone-display">{{ phoneWithMask }}</text>
					<!-- <text class="modify-link" @click="modifyPhone">修改手机号</text> -->
				</view>
			</view>
			<!-- <view class="usermain-item item-padding">
				<view  >姓名</view>
				<view class="cu-form-group">
					<input    v-model="realName" placeholder="请填写您的真实姓名" />
				</view>
			</view> -->
			<view class="usermain-item item-padding ">
				<view class="usermain-item-title">微信号码</view>
				<view>
					<view class="cu-form-group">
						<input v-model="weChatNum" placeholder="请输入微信号码，方便给求职者交换微信联系" />
					</view>
				</view>
			</view>

			<!-- 接收简历邮箱 -->
			<view class="usermain-item item-padding">
				<view class="usermain-item-title">接收简历邮箱</view>
				<view>
					<view class="cu-form-group">
						<input v-model="hrEmail" placeholder="建议录入企业邮箱" />
					</view>
				</view>
			</view>

			<!-- 我的公司 -->
			<view class="usermain-item item-padding">
				<view class="usermain-item-title">我的公司</view>
				<view>
					<view class="form-input-selector" @click="selectCompany">
						<text v-if="selectedCompany">{{ selectedCompany }}</text>
						<text v-else class="placeholder">请选择公司</text>
						<u-icon name="arrow-right" color="#999" size="36"></u-icon>
					</view>
				</view>
			</view>

			<!-- 我的职务 -->
			<view class="usermain-item item-padding">
				<view class="usermain-item-title">我的职务</view>
				<view>
					<view class="form-input-selector">
						<!-- 	<text v-if="selectedPosition">{{ selectedPosition }}</text>
						<text v-else class="placeholder">请选择职务</text>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon> -->
						<input type="text" v-model="hrPosition" placeholder="请输入职务" @input="filterSymbols"
							style="width: 100%;" :key='inputKey' />
					</view>
				</view>
			</view>
		</view>
		<view class="button-section">
			<view class="submit-btn" @click="messagebtn()">保存</view>
		</view>
		<!-- 权限说明弹窗 -->
		<u-popup mode="top" ref="permission">
			<view class="popup-content">
				<view class="popup-text-permission">选择/拍摄照片需要相机/相册权限，用于上传用户头像</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import configdata from '../../common/config.js';
import navBar from "@/components/nav-bar/index.vue";
export default {
	components: {
		navBar
	},
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			phone: '',
			weChatNum: '', //微信号
			email: '', //接收简历邮箱
			selectedCompany: '深圳市汉瑞国际猎头服务有限公司', // 我的公司
			selectedPosition: '人事总监', // 我的职务
			avatar: '../../static/logo.png',
			userName: '',
			nickName: '',
			userId: '',
			realName: '',
			weChatId: "",
			password: '',
			platform: '',
			createTime: '',
			money: '',
			jiFen: '',
			status: '',
			zhiFuBao: '',
			zhiFuBaoName: '',
			sex: 1,
			age: 0,
			hrInfo: {},
			hrPosition: '',
			hrEmail: '',
			inputKey: '',
			birthDateText: '', // 显示的日期文本
			showDatePicker: false, // 控制日期选择器显示
			dateParams: {
				year: true,
				month: true
			},
		};
	},
	computed: {
		phoneWithMask() {
			if (this.phone && this.phone.length >= 11) {
				return this.phone.substring(0, 3) + '******' + this.phone.substring(9);
			}
			return this.phone || '请设置手机号';
		}
	},
	onLoad(e) {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;

		// this.getUserInfo()
		// this.getUserHr()
		this.inputKey = new Date().getTime()
		// this.avatar = uni.getStorageSync('avatar')
	},
	onShow() {
		this.getUserInfo()
		this.getUserHr()
	},
	methods: {
		filterSymbols(e) {
			// 使用正则表达式过滤掉所有符号（只保留中文、英文、数字）
			let value = e.detail.value
			// 允许：中文、英文、数字
			let filteredValue = value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
			console.log(this.hrPosition);
			// 如果值被修改了
			this.hrPosition = filteredValue
			if (value !== filteredValue) {
				this.inputKey = new Date().getTime()
				uni.showToast({
					title: '禁止输入符号',
					icon: "none"
				})
			}
		},
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		// 修改手机号
		modifyPhone() {
			console.log('点击修改手机号，当前手机号：', this.phone);
			const url = `/pages/my/userphone?currentPhone=${this.phone}`;
			console.log('跳转路径：', url);

			uni.navigateTo({
				url: url,
			});
		},
		// 选择公司
		selectCompany() {
			uni.navigateTo({
				url: '/pages/my/myCompany'
			});
		},
		// 选择职务
		selectPosition() {
			// 这里可以跳转到职务选择页面或显示职务选择弹窗
			console.log('选择职务');
		},
		// 日期选择确认
		onDateConfirm(e) {
			const {
				year,
				month,
				day
			} = e;
			this.birthDateText = `${year}-${String(month).padStart(2, '0')}`;
			this.showDatePicker = false;
		},
		onChooseAvatar(e) {
			let that = this;
			let token = uni.getStorageSync('token');
			uni.uploadFile({
				url: that.config("APIHOST1") +
					'/alioss/upload', //真实的接口地址
				filePath: e.detail.avatarUrl,
				header: {
					token: token
				},
				name: 'file',
				success: uploadFileRes => {
					let url = JSON.parse(uploadFileRes.data);
					that.avatar = url.data
					uni.hideLoading();
				}
			});

		},
		goMyAddress() {
			uni.navigateTo({
				url: '../jifen/myaddress'
			});
		},
		async uploadImg() {
			let token = uni.getStorageSync('token')

			if (!token) {
				this.goLoginInfo();
				return;
			}

			let that = this;
			var url = null;
			uni.showActionSheet({
				// itemList按钮的文字接受的是数组
				itemList: ["查看头像", "从相册选择图片"],
				async success(e) {
					var index = e.tapIndex
					if (index === 0) {
						// 用户点击了预览当前图片
						// 可以自己实现当前头像链接的读取
						let url = that.avatar;
						let arr = []
						arr.push(url)
						uni.previewImage({
							// 预览功能图片也必须是数组的
							urls: arr
						})
					} else if (index === 1) {
						const hasPermission = await that.$queue.checkPermission(
							'camera',
							'选择/拍摄照片需要相机/相册权限，用于上传用户头像',
							that
						);

						// 2. 如果未授权或者用户拒绝，显示提示
						if (!hasPermission) {
							return;
						}
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album','camera'], //从相册选择
							success: function (res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: that.config("APIHOST1") +
										'/alioss/upload', //真实的接口地址

									filePath: res.tempFilePaths[0],
									header: {
										token: token
									},
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										that.avatar = url.data
										uni.hideLoading();
									}
								});
							}
						});
					}
				}
			})
		},
		config: function (name) {
			var info = null;
			if (name) {
				var name2 = name.split("."); //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null;
				} else {
					info = configdata[name] || null;
				}
				if (info == null) {
					let web_config = cache.get("web_config");
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null;
						} else {
							info = web_config[name] || null;
						}
					}
				}
			}
			return info;
		},
		getUserHr() {
			this.$Request.get("/app/HrFirst/getUserHr").then(res => {
				if (res.code === 0) {
					this.hrInfo = res.data.HrEntity
					this.hrPosition = res.data.HrEntity.hrPosition
					this.hrEmail = res.data.HrEntity.hrEmail
				}
			})
		},
		getUserInfo() {
			let userId = uni.getStorageSync('userId')
			// /app/user/selectUserById
			// /app/user/getUserInfo
			// this.$Request.get("/app/user/selectUserById").then(res => {
			this.$Request.get("/app/user/getUserInfo").then(res => {
				if (res.code == 0) {
					this.$queue.setData('avatar', res.data.avatar);
					this.$queue.setData('userId', res.data.userId);
					this.$queue.setData('userName', res.data.userName);
					this.$queue.setData('phone', res.data.phone);
					this.$queue.setData('age', res.data.age);
					this.$queue.setData('weChatNum', res.data.weChatNum)
					this.weChatNum = res.data.weChatNum
					this.sex = res.data.sex
					this.age = res.data.age
					this.phone = res.data.phone;
					this.avatar = res.data.avatar;
					this.userName = res.data.userName;
					this.birthDateText = res.data?.birthday || '';
					if (this.userName == null) {
						this.userName = res.data.nickName;
					} else {
						this.userName = res.data.userName;
					}
					this.selectedCompany = this.$queue.getData('companyName')
				}
				uni.hideLoading();
			});
		},

		// 保存
		messagebtn() {
			if (!this.userName) {
				// this.$queue.showToast('用户名不能为空');
				uni.showToast({
					title: "用户名不能为空",
					icon: "none"
				})
			} else if (!this.phone) {
				// this.$queue.showToast('用户名不能为空');
				uni.showToast({
					title: "联系电话不能为空",
					icon: "none"
				})
			} else if (!this.birthDateText) {
				this.$queue.showToast('请选择出生年月');
			} else {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定保存信息',
					success: e => {
						if (e.confirm) {
							let phone = that.$queue.getData('newPhone') ? this.$queue.getData('newPhone') :
								that.phone
							that.$Request.postJson("/app/user/updateUserInfo", {
								userName: that.userName,
								avatar: that.avatar,
								phone,
								sex: that.sex,
								// age: that.age,
								birthday: this.birthDateText,
								weChatNum: that.weChatNum
							}).then(res => {
								if (res.code === 0) {
									that.$Request.postJson("/app/HrFirst/addHr", {
										hrPosition: this.hrPosition,
										hrEmail: this.hrEmail,
										avatar: this.avatar
									}).then(res => {
										if (res.code === 0) {
											uni.showToast({
												title: '保存成功',
												icon: "none"
											})
											that.getUserInfo()
											setTimeout(function () {
												uni.navigateBack()
											}, 1000)
										} else {
											uni.showToast({
												title: res.msg,
												icon: "none"
											})
										}
									})
									// uni.showToast({
									// 	title: '保存成功',
									// 	icon: "none"
									// })
									// that.getUserInfo()
									// setTimeout(function() {
									// 	uni.navigateBack()
									// }, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						}
					}
				});
			}
		}
	},
	// userphone(){
	// 	uni.navigateTo({
	// 		url:'/pages/my/userphone'
	// 	})
	// }

};
</script>

<style lang="scss" scoped>
.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

button::after {
	border: none;
	background-color: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-decoration: none;
	line-height: 1.35;
	overflow: hidden;
	color: #666666;
	/* background-color: #fff; */
	background-color: rgba(255, 255, 255, 0) !important;
	width: 100%;
	height: 100%;
}

.usermain {
	flex: 1;
	overflow: auto;
	padding-bottom: 40rpx;
}

.usermain-item {
	display: flex;
	flex-direction: column;
	margin: 0 40rpx;
	padding: 20rpx 0;
	// border-bottom: 1rpx solid rgba(229, 229, 229, 0.3);
	gap: 16rpx;
}

.usermain-item-title {
	color: rgba(31, 44, 55, 1);
	font-family: DM Sans;
	font-size: 28rpx;
	font-weight: 500;
	line-height: 44rpx;
	text-align: left;
}

.usermain-item.item-padding {
	/* padding: 0; */
}

.cu-form-group {
	padding: 0;
	background: #ffffff;
	text-align: right;
}

.cu-form-group input {
	background: #ffffff;
	font-size: 28rpx;
	/* color: #fff; */

}

/* 姓名字段样式 - 参考basicInfo.vue */
.usermain-item .form-label {
	color: rgba(31, 44, 55, 1);
	font-family: DM Sans;
	font-size: 32rpx;
	font-weight: 500;
	line-height: 44rpx;
	letter-spacing: 0.5%;
	text-align: left;
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.usermain-item .required-mark {
	color: #FF3B30;
	font-size: 36rpx;
	font-weight: 600;
	margin-right: 8rpx;
}

.usermain-item .cu-form-group {
	background: transparent;
	text-align: left;
	padding: 0;
}

.usermain-item .cu-form-group input {
	width: 100%;
	height: 68rpx;
	font-size: 28rpx;
	border: 1rpx solid rgba(227, 231, 236, 1);
	border-radius: 44rpx;
	color: rgba(23, 23, 37, 1);
	padding: 0 32rpx;
	background: #ffffff;
	font-family: DM Sans;
	font-weight: 400;
}

.usermain-item .cu-form-group input::placeholder {
	color: rgba(155, 155, 155, 1);
	font-size: 28rpx;
}

/* 联系方式样式 */
.contact-structure {
	border-bottom: none !important;
}

.contact-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	margin-top: 8rpx;
}

.phone-display {
	color: rgba(23, 23, 37, 1);
	font-family: DM Sans;
	font-size: 28rpx;
	font-weight: 400;
	line-height: 40rpx;
	letter-spacing: 0.5%;
}

.modify-link {
	color: rgba(24, 144, 255, 1);
	font-family: DM Sans;
	font-size: 28rpx;
	font-weight: 400;
	line-height: 40rpx;
	letter-spacing: 0.5%;
	cursor: pointer;
	text-decoration: none;
}

.modify-link:active {
	opacity: 0.7;
}

/* 头像编辑图标样式 */
.avatar-wrapper {
	.tip {
		font-size: 20rpx;
		line-height: 44rpx;
		color: rgba(1, 107, 246, 1);
		margin-left: 24rpx;
	}
}

.avatar-button {
	position: relative;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
}

.button-section {
	padding: 28rpx 40rpx;
	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
}
.submit-btn {
	flex-shrink: 0;
	border-radius: 999px;
	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
	background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	color: rgba(255, 255, 255, 1);
	font-family: DM Sans;
	font-size: 32rpx;
	font-weight: 400;
	line-height: 48rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16rpx 32rpx;
	box-sizing: border-box;
}

/* 选择器样式 - 参考workExperience页面 */
.form-input-selector {
	width: 100%;
	height: 68rpx;
	padding: 0 40rpx;
	border: 1px solid rgba(227, 231, 236, 1);
	border-radius: 24px;
	background: rgba(255, 255, 255, 1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: all 0.2s ease;

	.placeholder {
		color: #999999;
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	text {
		color: rgba(23, 23, 37, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}
}

.arrow-down {
	color: rgba(96, 98, 102, 1);
	font-size: 24rpx;
	font-weight: 400;
	transform: scale(1.5);
}

.selector-group:active {
	background: #f5f7fa !important;
	transform: scale(0.99);
}

.form-item {
	margin: 0 40rpx 20rpx;

	.form-label {
		color: var(--Neutral/100, rgba(31, 44, 55, 1));
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 44rpx;
		letter-spacing: 0.5%;
		text-align: left;
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.required-mark {
			color: #FF3B30;
			font-size: 18px;
			font-weight: 600;
			margin-right: 8rpx;
		}
	}


	// 日期选择器样式
	.date-picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 75rpx;
		font-size: 14px;
		border: 1px solid rgba(227, 231, 236, 1);
		border-radius: 24px;
		color: rgba(23, 23, 37, 1);
		padding: 12px 16px;

		.date-text {
			color: rgba(23, 23, 37, 1);
			font-family: DM Sans;
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
			letter-spacing: 0%;
			text-align: left;
		}
	}
	
	// 出生年月placeholder样式
	.placeholder-text {
		color: #999;
	}
}
</style>