You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1261 lines
35 KiB
1261 lines
35 KiB
<!--个人资料详情页面-->
|
|
<template>
|
|
<view class="personal-info-container">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="nav-bar">
|
|
<view class="nav-content">
|
|
<view class="nav-left" @click="goBack">
|
|
<text class="back-icon">←</text>
|
|
</view>
|
|
<view class="nav-title">个人资料</view>
|
|
<view class="nav-right">
|
|
<text class="action-btn" @click="saveProfile" v-if="isEditing">保存</text>
|
|
<text class="action-btn" @click="toggleEdit" v-else>编辑</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 页面内容 -->
|
|
<view class="content-wrapper">
|
|
<scroll-view scroll-y class="scroll-container">
|
|
|
|
<!-- 头像区域 -->
|
|
<view class="avatar-section">
|
|
<view class="avatar-container" @click="handleAvatarUpload" v-if="isEditing">
|
|
<image
|
|
:src="formData.head_img || '/static/icon-img/tou.png'"
|
|
mode="aspectFill"
|
|
class="avatar-image"
|
|
/>
|
|
<view class="avatar-overlay">
|
|
<text class="camera-icon">📷</text>
|
|
<text class="avatar-text">点击更换头像</text>
|
|
</view>
|
|
</view>
|
|
<view class="avatar-display" v-else>
|
|
<image
|
|
:src="formData.head_img || '/static/icon-img/tou.png'"
|
|
mode="aspectFill"
|
|
class="avatar-image"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 基本信息 -->
|
|
<view class="info-section">
|
|
<view class="section-title">基本信息</view>
|
|
|
|
<!-- 姓名 -->
|
|
<view class="form-item">
|
|
<text class="label">姓名</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.name"
|
|
placeholder="请输入姓名"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.name || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 性别 -->
|
|
<view class="form-item">
|
|
<text class="label">性别</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
:range="genderOptions"
|
|
range-key="name"
|
|
:value="getPickerIndex(genderOptions, formData.gender)"
|
|
@change="onGenderChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ getDisplayText(genderOptions, formData.gender) || '请选择性别' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ getDisplayText(genderOptions, formData.gender) || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 生日 -->
|
|
<view class="form-item">
|
|
<text class="label">生日</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="date"
|
|
:value="formData.birthday"
|
|
@change="onBirthdayChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ formData.birthday || '请选择生日' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ formData.birthday || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 电话 -->
|
|
<view class="form-item">
|
|
<text class="label">电话</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.phone"
|
|
placeholder="请输入电话号码"
|
|
type="number"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.phone || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 邮箱 -->
|
|
<view class="form-item">
|
|
<text class="label">邮箱</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.email"
|
|
placeholder="请输入邮箱地址"
|
|
type="email"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.email || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 微信号 -->
|
|
<view class="form-item">
|
|
<text class="label">微信号</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.wx"
|
|
placeholder="请输入微信号"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.wx || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 学历 -->
|
|
<view class="form-item">
|
|
<text class="label">学历</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
:range="educationOptions"
|
|
range-key="name"
|
|
:value="getPickerIndex(educationOptions, formData.education)"
|
|
@change="onEducationChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ getDisplayText(educationOptions, formData.education) || '请选择学历' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ getDisplayText(educationOptions, formData.education) || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 家庭住址 -->
|
|
<view class="form-item">
|
|
<text class="label">家庭住址</text>
|
|
<textarea
|
|
v-if="isEditing"
|
|
v-model="formData.address"
|
|
placeholder="请输入家庭住址"
|
|
class="textarea-field"
|
|
auto-height
|
|
/>
|
|
<text v-else class="value">{{ formData.address || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 祖籍 -->
|
|
<view class="form-item">
|
|
<text class="label">祖籍</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.native_place"
|
|
placeholder="请输入祖籍"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.native_place || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 个人简介 -->
|
|
<view class="form-item">
|
|
<text class="label">个人简介</text>
|
|
<textarea
|
|
v-if="isEditing"
|
|
v-model="formData.profile"
|
|
placeholder="请输入个人简介"
|
|
class="textarea-field"
|
|
auto-height
|
|
/>
|
|
<text v-else class="value">{{ formData.profile || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 应急联系人电话 -->
|
|
<view class="form-item">
|
|
<text class="label">应急联系人电话</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.emergency_contact_phone"
|
|
placeholder="请输入应急联系人电话"
|
|
type="number"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.emergency_contact_phone || '未填写' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份证信息 -->
|
|
<view class="info-section">
|
|
<view class="section-title">身份证信息</view>
|
|
|
|
<!-- 身份证正面 -->
|
|
<view class="form-item">
|
|
<text class="label">身份证正面</text>
|
|
<view class="id-card-container">
|
|
<view class="id-card-upload" @click="uploadIdCardFront" v-if="isEditing">
|
|
<image
|
|
v-if="formData.id_card_front"
|
|
:src="formData.id_card_front"
|
|
mode="aspectFit"
|
|
class="id-card-image"
|
|
/>
|
|
<view v-else class="upload-placeholder">
|
|
<text class="upload-icon">📷</text>
|
|
<text class="upload-text">点击上传身份证正面</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="id-card-display">
|
|
<image
|
|
v-if="formData.id_card_front"
|
|
:src="formData.id_card_front"
|
|
mode="aspectFit"
|
|
class="id-card-image"
|
|
@click="previewImage(formData.id_card_front)"
|
|
/>
|
|
<text v-else class="value">未上传</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份证反面 -->
|
|
<view class="form-item">
|
|
<text class="label">身份证反面</text>
|
|
<view class="id-card-container">
|
|
<view class="id-card-upload" @click="uploadIdCardBack" v-if="isEditing">
|
|
<image
|
|
v-if="formData.id_card_back"
|
|
:src="formData.id_card_back"
|
|
mode="aspectFit"
|
|
class="id-card-image"
|
|
/>
|
|
<view v-else class="upload-placeholder">
|
|
<text class="upload-icon">📷</text>
|
|
<text class="upload-text">点击上传身份证反面</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="id-card-display">
|
|
<image
|
|
v-if="formData.id_card_back"
|
|
:src="formData.id_card_back"
|
|
mode="aspectFit"
|
|
class="id-card-image"
|
|
@click="previewImage(formData.id_card_back)"
|
|
/>
|
|
<text v-else class="value">未上传</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 详细信息 -->
|
|
<view class="info-section">
|
|
<view class="section-title">详细信息</view>
|
|
|
|
<!-- 花名 -->
|
|
<view class="form-item">
|
|
<text class="label">花名</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.info.name"
|
|
placeholder="请输入花名"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.info.name || '未填写' }}</text>
|
|
</view>
|
|
|
|
|
|
<!-- 民族 -->
|
|
<view class="form-item">
|
|
<text class="label">民族</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
:range="ethnicityOptions"
|
|
range-key="name"
|
|
:value="getPickerIndex(ethnicityOptions, formData.info.ethnicity)"
|
|
@change="onEthnicityChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ getDisplayText(ethnicityOptions, formData.info.ethnicity) || '请选择民族' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ getDisplayText(ethnicityOptions, formData.info.ethnicity) || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 年龄 -->
|
|
<view class="form-item">
|
|
<text class="label">年龄</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.info.age"
|
|
placeholder="请输入年龄"
|
|
type="number"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.info.age || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 司龄 -->
|
|
<view class="form-item">
|
|
<text class="label">司龄</text>
|
|
<text class="value readonly">{{ formData.info.tenure || '未计算' }}</text>
|
|
</view>
|
|
|
|
<!-- 转正时间 -->
|
|
<view class="form-item">
|
|
<text class="label">转正时间</text>
|
|
<text class="value readonly">{{ formData.info.regular_date || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 是否转正 -->
|
|
<view class="form-item">
|
|
<text class="label">是否转正</text>
|
|
<text class="value readonly">{{ getDisplayText(booleanOptions, formData.info.is_regular) || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 政治面貌 -->
|
|
<view class="form-item">
|
|
<text class="label">政治面貌</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
:range="politicsOptions"
|
|
range-key="name"
|
|
:value="getPickerIndex(politicsOptions, formData.info.politics)"
|
|
@change="onPoliticsChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ getDisplayText(politicsOptions, formData.info.politics) || '请选择政治面貌' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ getDisplayText(politicsOptions, formData.info.politics) || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 毕业院校 -->
|
|
<view class="form-item">
|
|
<text class="label">毕业院校</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.info.university"
|
|
placeholder="请输入毕业院校"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.info.university || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 专业 -->
|
|
<view class="form-item">
|
|
<text class="label">专业</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.info.major"
|
|
placeholder="请输入专业"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.info.major || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 毕业时间 -->
|
|
<view class="form-item">
|
|
<text class="label">毕业时间</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="date"
|
|
:value="formData.info.graduation_date"
|
|
@change="onGraduationDateChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ formData.info.graduation_date || '请选择毕业时间' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ formData.info.graduation_date || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 婚姻状况 -->
|
|
<view class="form-item">
|
|
<text class="label">婚姻状况</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
:range="maritalStatusOptions"
|
|
range-key="name"
|
|
:value="getPickerIndex(maritalStatusOptions, formData.info.marital_status)"
|
|
@change="onMaritalStatusChange"
|
|
class="picker-field"
|
|
>
|
|
<view class="picker-display">
|
|
{{ getDisplayText(maritalStatusOptions, formData.info.marital_status) || '请选择婚姻状况' }}
|
|
</view>
|
|
</picker>
|
|
<text v-else class="value">{{ getDisplayText(maritalStatusOptions, formData.info.marital_status) || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 银行卡号 -->
|
|
<view class="form-item">
|
|
<text class="label">银行卡号</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.info.bank_card"
|
|
placeholder="请输入银行卡号"
|
|
type="number"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.info.bank_card || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 开户行 -->
|
|
<view class="form-item">
|
|
<text class="label">开户行</text>
|
|
<input
|
|
v-if="isEditing"
|
|
v-model="formData.info.bank_name"
|
|
placeholder="请输入开户行"
|
|
class="input-field"
|
|
/>
|
|
<text v-else class="value">{{ formData.info.bank_name || '未填写' }}</text>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item">
|
|
<text class="label">备注</text>
|
|
<textarea
|
|
v-if="isEditing"
|
|
v-model="formData.info.remark"
|
|
placeholder="请输入备注信息"
|
|
class="textarea-field"
|
|
auto-height
|
|
/>
|
|
<text v-else class="value">{{ formData.info.remark || '未填写' }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDict, uploadFile } from '@/common/util.js'
|
|
import apiRoute from '@/api/apiRoute.js'
|
|
|
|
export default {
|
|
name: 'PersonalInfo',
|
|
data() {
|
|
return {
|
|
isEditing: false,
|
|
loading: false,
|
|
// 原始数据备份，用于检测是否有未保存的更改
|
|
originalData: {},
|
|
formData: {
|
|
head_img: '',
|
|
name: '',
|
|
gender: '',
|
|
birthday: '',
|
|
phone: '',
|
|
email: '',
|
|
wx: '',
|
|
education: '',
|
|
address: '',
|
|
native_place: '',
|
|
profile: '',
|
|
emergency_contact_phone: '',
|
|
id_card_front: '',
|
|
id_card_back: '',
|
|
// 只读字段
|
|
employee_number: '',
|
|
status: '',
|
|
account_type: '',
|
|
join_time: '',
|
|
// personnel_info 表字段
|
|
info: {
|
|
name: '',
|
|
ethnicity: '',
|
|
age: '',
|
|
tenure: '',
|
|
regular_date: '',
|
|
is_regular: '',
|
|
politics: '',
|
|
university: '',
|
|
major: '',
|
|
graduation_date: '',
|
|
household_place: '',
|
|
household_type: '',
|
|
household_address: '',
|
|
current_address: '',
|
|
emergency_contact: '',
|
|
emergency_phone: '',
|
|
marital_status: '',
|
|
bank_card: '',
|
|
bank_name: '',
|
|
contract_expire: '',
|
|
is_rehired: '',
|
|
remark: ''
|
|
}
|
|
},
|
|
// 字典数据
|
|
genderOptions: [],
|
|
educationOptions: [],
|
|
statusOptions: [],
|
|
ethnicityOptions: [],
|
|
politicsOptions: [],
|
|
maritalStatusOptions: [],
|
|
householdTypeOptions: [],
|
|
booleanOptions: []
|
|
}
|
|
},
|
|
async onLoad() {
|
|
await this.loadDictData()
|
|
await this.loadUserProfile()
|
|
},
|
|
methods: {
|
|
// 检测数据是否有变更
|
|
hasUnsavedChanges() {
|
|
if (!this.isEditing) return false
|
|
|
|
// 深度比较当前数据和原始数据
|
|
const currentData = JSON.stringify(this.formData)
|
|
const originalData = JSON.stringify(this.originalData)
|
|
return currentData !== originalData
|
|
},
|
|
|
|
// 返回上一页
|
|
goBack() {
|
|
// 如果在编辑模式且有未保存的更改，显示确认提示
|
|
if (this.isEditing && this.hasUnsavedChanges()) {
|
|
uni.showModal({
|
|
title: '确认离开',
|
|
content: '离开这个页面后未保存的内容会丢失',
|
|
confirmText: '离开',
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 用户确认离开，退出编辑模式并返回
|
|
this.isEditing = false
|
|
// 恢复原始数据
|
|
this.formData = JSON.parse(JSON.stringify(this.originalData))
|
|
uni.navigateBack()
|
|
}
|
|
// 如果用户取消，不做任何操作，保留在当前页面
|
|
}
|
|
})
|
|
} else {
|
|
// 没有未保存的更改，直接返回
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
|
|
// 切换编辑模式
|
|
toggleEdit() {
|
|
if (this.isEditing) {
|
|
// 当前在编辑模式，要退出编辑
|
|
if (this.hasUnsavedChanges()) {
|
|
uni.showModal({
|
|
title: '确认退出编辑',
|
|
content: '退出编辑后未保存的内容会丢失',
|
|
confirmText: '退出',
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 用户确认退出，恢复原始数据
|
|
this.formData = JSON.parse(JSON.stringify(this.originalData))
|
|
this.isEditing = false
|
|
}
|
|
// 如果用户取消，继续编辑模式
|
|
}
|
|
})
|
|
} else {
|
|
// 没有未保存的更改，直接退出编辑
|
|
this.isEditing = false
|
|
}
|
|
} else {
|
|
// 进入编辑模式
|
|
this.isEditing = true
|
|
}
|
|
},
|
|
|
|
// 加载字典数据
|
|
async loadDictData() {
|
|
try {
|
|
this.genderOptions = await getDict('gender')
|
|
this.educationOptions = await getDict('education')
|
|
this.statusOptions = await getDict('personnel_status')
|
|
this.booleanOptions = await getDict('global_true_or_false')
|
|
|
|
// 暂时使用本地数据，避免字典服务问题
|
|
this.ethnicityOptions = [
|
|
{name: "汉族", value: "han"},
|
|
{name: "蒙古族", value: "menggu"},
|
|
{name: "回族", value: "hui"},
|
|
{name: "藏族", value: "zang"},
|
|
{name: "其他", value: "other"}
|
|
]
|
|
|
|
this.politicsOptions = [
|
|
{name: "中共党员", value: "party_member"},
|
|
{name: "中共预备党员", value: "probationary_member"},
|
|
{name: "共青团员", value: "league_member"},
|
|
{name: "民主党派", value: "democratic_party"},
|
|
{name: "无党派人士", value: "non_partisan"},
|
|
{name: "群众", value: "masses"}
|
|
]
|
|
|
|
this.maritalStatusOptions = [
|
|
{name: "未婚", value: "single"},
|
|
{name: "已婚", value: "married"},
|
|
{name: "离异", value: "divorced"},
|
|
{name: "丧偶", value: "widowed"}
|
|
]
|
|
|
|
this.householdTypeOptions = [
|
|
{name: "城镇户口", value: "urban"},
|
|
{name: "农村户口", value: "rural"},
|
|
{name: "集体户口", value: "collective"}
|
|
]
|
|
} catch (error) {
|
|
console.error('加载字典数据失败:', error)
|
|
uni.showToast({
|
|
title: '加载数据失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 加载用户资料
|
|
async loadUserProfile() {
|
|
try {
|
|
this.loading = true
|
|
const res = await apiRoute.getPersonnelInfo({})
|
|
|
|
if (res.code === 1) {
|
|
// 确保 info 对象存在
|
|
const data = res.data || {}
|
|
this.formData = {
|
|
...this.formData,
|
|
...data,
|
|
info: {
|
|
...this.formData.info,
|
|
...(data.info || {})
|
|
}
|
|
}
|
|
// 保存原始数据备份
|
|
this.originalData = JSON.parse(JSON.stringify(this.formData))
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '获取用户信息失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('获取用户信息失败:', error)
|
|
uni.showToast({
|
|
title: '网络错误',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
// 保存个人资料
|
|
async saveProfile() {
|
|
try {
|
|
// 验证必填字段
|
|
if (!this.formData.name) {
|
|
uni.showToast({
|
|
title: '请输入姓名',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.formData.phone) {
|
|
uni.showToast({
|
|
title: '请输入电话号码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.loading = true
|
|
|
|
const updateData = {
|
|
head_img: this.formData.head_img,
|
|
name: this.formData.name,
|
|
gender: this.formData.gender,
|
|
birthday: this.formData.birthday,
|
|
phone: this.formData.phone,
|
|
email: this.formData.email,
|
|
wx: this.formData.wx,
|
|
education: this.formData.education,
|
|
address: this.formData.address,
|
|
native_place: this.formData.native_place,
|
|
profile: this.formData.profile,
|
|
emergency_contact_phone: this.formData.emergency_contact_phone,
|
|
id_card_front: this.formData.id_card_front,
|
|
id_card_back: this.formData.id_card_back,
|
|
info: {
|
|
name: this.formData.info.name,
|
|
ethnicity: this.formData.info.ethnicity,
|
|
age: this.formData.info.age,
|
|
politics: this.formData.info.politics,
|
|
university: this.formData.info.university,
|
|
major: this.formData.info.major,
|
|
graduation_date: this.formData.info.graduation_date,
|
|
household_place: this.formData.info.household_place,
|
|
household_type: this.formData.info.household_type,
|
|
household_address: this.formData.info.household_address,
|
|
current_address: this.formData.info.current_address,
|
|
emergency_contact: this.formData.info.emergency_contact,
|
|
emergency_phone: this.formData.info.emergency_phone,
|
|
marital_status: this.formData.info.marital_status,
|
|
bank_card: this.formData.info.bank_card,
|
|
bank_name: this.formData.info.bank_name,
|
|
contract_expire: this.formData.info.contract_expire,
|
|
is_rehired: this.formData.info.is_rehired,
|
|
remark: this.formData.info.remark
|
|
}
|
|
}
|
|
|
|
const res = await apiRoute.editPersonnelInfo(updateData)
|
|
|
|
if (res.code === 1) {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
this.isEditing = false
|
|
// 更新原始数据备份
|
|
this.originalData = JSON.parse(JSON.stringify(this.formData))
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '保存失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('保存失败:', error)
|
|
uni.showToast({
|
|
title: '网络错误',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
// 处理头像上传
|
|
handleAvatarUpload() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.uploadAvatar(res.tempFilePaths[0])
|
|
}
|
|
})
|
|
},
|
|
|
|
// 上传头像（使用通用 uploadFile 方法）
|
|
uploadAvatar(filePath) {
|
|
uni.showLoading({
|
|
title: '上传头像中...',
|
|
mask: true
|
|
})
|
|
|
|
uploadFile(
|
|
filePath,
|
|
// 成功回调
|
|
(fileData) => {
|
|
this.formData.head_img = fileData.url
|
|
uni.showToast({
|
|
title: '头像上传成功',
|
|
icon: 'success'
|
|
})
|
|
uni.hideLoading()
|
|
},
|
|
// 失败回调
|
|
(error) => {
|
|
console.error('上传头像失败:', error)
|
|
uni.showToast({
|
|
title: error.msg || error.message || '头像上传失败',
|
|
icon: 'none'
|
|
})
|
|
uni.hideLoading()
|
|
}
|
|
)
|
|
},
|
|
|
|
|
|
// 性别选择变化
|
|
onGenderChange(e) {
|
|
const index = e.detail.value
|
|
this.formData.gender = this.genderOptions[index].value
|
|
},
|
|
|
|
// 学历选择变化
|
|
onEducationChange(e) {
|
|
const index = e.detail.value
|
|
this.formData.education = this.educationOptions[index].value
|
|
},
|
|
|
|
// 生日选择变化
|
|
onBirthdayChange(e) {
|
|
this.formData.birthday = e.detail.value
|
|
},
|
|
|
|
// 获取picker的索引
|
|
getPickerIndex(options, value) {
|
|
const index = options.findIndex(item => item.value == value)
|
|
return index >= 0 ? index : 0
|
|
},
|
|
|
|
// 获取显示文本
|
|
getDisplayText(options, value) {
|
|
const item = options.find(item => item.value == value)
|
|
return item ? item.name : ''
|
|
},
|
|
|
|
// 上传身份证正面
|
|
uploadIdCardFront() {
|
|
this.uploadIdCard('front')
|
|
},
|
|
|
|
// 上传身份证反面
|
|
uploadIdCardBack() {
|
|
this.uploadIdCard('back')
|
|
},
|
|
|
|
// 上传身份证
|
|
uploadIdCard(type) {
|
|
console.log('点击身份证上传:', type)
|
|
|
|
// 检查编辑模式
|
|
if (!this.isEditing) {
|
|
uni.showToast({
|
|
title: '请先点击编辑按钮',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
console.log('选择图片成功:', res)
|
|
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
|
this.uploadIdCardFile(res.tempFilePaths[0], type)
|
|
} else {
|
|
uni.showToast({
|
|
title: '未选择图片',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.error('选择图片失败:', err)
|
|
uni.showToast({
|
|
title: '选择图片失败: ' + (err.errMsg || '未知错误'),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 上传身份证文件（使用通用 uploadFile 方法）
|
|
uploadIdCardFile(filePath, type) {
|
|
const title = type === 'front' ? '身份证正面' : '身份证反面'
|
|
|
|
console.log(`开始上传${title}:`, filePath)
|
|
|
|
uni.showLoading({
|
|
title: `上传${title}中...`,
|
|
mask: true
|
|
})
|
|
|
|
uploadFile(
|
|
filePath,
|
|
// 成功回调
|
|
(fileData) => {
|
|
console.log(`${title}上传成功:`, fileData)
|
|
|
|
if (type === 'front') {
|
|
this.formData.id_card_front = fileData.url
|
|
} else if (type === 'back') {
|
|
this.formData.id_card_back = fileData.url
|
|
}
|
|
|
|
uni.showToast({
|
|
title: `${title}上传成功`,
|
|
icon: 'success'
|
|
})
|
|
|
|
uni.hideLoading()
|
|
},
|
|
// 失败回调
|
|
(error) => {
|
|
console.error(`上传${title}失败:`, error)
|
|
|
|
const errorMsg = error?.msg || error?.message || '上传失败'
|
|
uni.showToast({
|
|
title: `${title}${errorMsg}`,
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
|
|
uni.hideLoading()
|
|
}
|
|
)
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
urls: [url],
|
|
current: url
|
|
})
|
|
},
|
|
|
|
// 民族选择变化
|
|
onEthnicityChange(e) {
|
|
const index = e.detail.value
|
|
this.formData.info.ethnicity = this.ethnicityOptions[index].value
|
|
},
|
|
|
|
// 政治面貌选择变化
|
|
onPoliticsChange(e) {
|
|
const index = e.detail.value
|
|
this.formData.info.politics = this.politicsOptions[index].value
|
|
},
|
|
|
|
// 转正时间选择变化
|
|
onRegularDateChange(e) {
|
|
this.formData.info.regular_date = e.detail.value
|
|
},
|
|
|
|
// 是否转正选择变化
|
|
onIsRegularChange(e) {
|
|
const index = e.detail.value
|
|
this.formData.info.is_regular = this.booleanOptions[index].value
|
|
},
|
|
|
|
// 毕业时间选择变化
|
|
onGraduationDateChange(e) {
|
|
this.formData.info.graduation_date = e.detail.value
|
|
},
|
|
|
|
// 婚姻状况选择变化
|
|
onMaritalStatusChange(e) {
|
|
const index = e.detail.value
|
|
this.formData.info.marital_status = this.maritalStatusOptions[index].value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.personal-info-container {
|
|
background-color: #181A20;
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-bar {
|
|
background-color: #181A20;
|
|
padding-top: var(--status-bar-height);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.nav-content {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.nav-left {
|
|
width: 60px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.back-icon {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-right {
|
|
width: 80px; /* 增加宽度避免换行 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
/* 微信小程序胶囊按钮适配 */
|
|
/* #ifdef MP-WEIXIN */
|
|
margin-right: 100px; /* 为胶囊按钮预留足够空间 */
|
|
/* #endif */
|
|
}
|
|
|
|
.action-btn {
|
|
color: #29d3b4;
|
|
font-size: 14px;
|
|
padding: 5px 10px;
|
|
white-space: nowrap; /* 防止文字换行 */
|
|
display: inline-block;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding-top: calc(var(--status-bar-height) + 44px);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.scroll-container {
|
|
height: calc(100vh - var(--status-bar-height) - 44px);
|
|
}
|
|
|
|
// 头像区域
|
|
.avatar-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30px 0;
|
|
background: linear-gradient(135deg, #29d3b4 0%, #1e9a7a 100%);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.avatar-display {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.avatar-container:active .avatar-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.camera-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.avatar-text {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
// 信息区域
|
|
.info-section {
|
|
background-color: #242731;
|
|
border-radius: 12px;
|
|
margin: 0 15px 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section-title {
|
|
padding: 15px 20px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #29d3b4;
|
|
border-bottom: 1px solid #3a3d4a;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid #3a3d4a;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.form-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
width: 100px;
|
|
font-size: 14px;
|
|
color: #a0a3bd;
|
|
line-height: 40px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
height: 40px;
|
|
background-color: #3a3d4a;
|
|
border: 1px solid #4a4d5a;
|
|
border-radius: 6px;
|
|
padding: 0 12px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.textarea-field {
|
|
flex: 1;
|
|
min-height: 80px;
|
|
background-color: #3a3d4a;
|
|
border: 1px solid #4a4d5a;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.picker-field {
|
|
flex: 1;
|
|
}
|
|
|
|
.picker-display {
|
|
height: 40px;
|
|
background-color: #3a3d4a;
|
|
border: 1px solid #4a4d5a;
|
|
border-radius: 6px;
|
|
padding: 0 12px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.picker-display::after {
|
|
content: '>';
|
|
color: #a0a3bd;
|
|
transform: rotate(90deg);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
line-height: 40px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.value.readonly {
|
|
color: #a0a3bd;
|
|
}
|
|
|
|
// 身份证相关样式
|
|
.id-card-container {
|
|
flex: 1;
|
|
}
|
|
|
|
.id-card-upload, .id-card-display {
|
|
width: 100%;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid #4a4d5a;
|
|
background-color: #3a3d4a;
|
|
}
|
|
|
|
.id-card-upload {
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.id-card-upload:hover {
|
|
border-color: #29d3b4;
|
|
background-color: #464a5a;
|
|
}
|
|
|
|
.id-card-upload:active {
|
|
transform: scale(0.98);
|
|
background-color: #2a2e3a;
|
|
}
|
|
|
|
.id-card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.upload-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #a0a3bd;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.id-card-display {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|