782 lines
23 KiB
Vue
782 lines
23 KiB
Vue
<template>
|
||
<view class="person-page">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="个人资料"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="140rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar>
|
||
|
||
<scroll-view class="content" scroll-y>
|
||
<!-- 基本资料分组 -->
|
||
<view class="section-header">基本资料</view>
|
||
|
||
<!-- 头像 -->
|
||
<view class="row" @click="onChooseAvatar">
|
||
<view class="label"><text>头像</text><text class="req">*</text></view>
|
||
<view class="value value-avatar">
|
||
<image :src="docUrl+form.photo" mode="aspectFill" class="avatar" />
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 姓名 -->
|
||
<view class="row">
|
||
<view class="label"><text>姓名</text><text class="req">*</text></view>
|
||
<view class="value">{{ form.realName }}</view>
|
||
</view>
|
||
|
||
<!-- 性别 -->
|
||
<view class="row" @click="onPickGender">
|
||
<view class="label"><text>性别</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ getGenderText(form.sex) }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 出生日期 -->
|
||
<view class="row" @click="onPickBirthday">
|
||
<view class="label"><text>出生日期</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.birthDate || '' }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 手机号码 -->
|
||
<view class="row" @click="onEditPhone">
|
||
<view class="label"><text>手机号</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.mobile }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 邮箱 -->
|
||
<view class="row" @click="onEditEmail">
|
||
<view class="label"><text>邮箱</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.email || '' }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 专业资料分组 -->
|
||
<view class="section-header">专业资料</view>
|
||
|
||
<!-- 医院地址 -->
|
||
<view class="row" @click="openAreaPicker">
|
||
<view class="label"><text>医院</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text v-if="!regionText" class="placeholder">请选择医院</text>
|
||
<text v-else>{{ regionText }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 科室 -->
|
||
<view class="row" @click="onPickDept">
|
||
<view class="label"><text>科室</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.officeName }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 科室电话 -->
|
||
<view class="row" @click="onEditDeptPhone">
|
||
<view class="label"><text>科室电话</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.officePhone }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 职称 -->
|
||
<view class="row" @click="onPickTitle">
|
||
<view class="label"><text>职称</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.positionName }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 执业医师证编号 -->
|
||
<view class="row" @click="onEditLicenseNo">
|
||
<view class="label"><text>执业医师证编号</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.certificate }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 执业医师证照片/胸牌 -->
|
||
<view class="row" @click="onChooseLicenseImg">
|
||
<view class="label"><text>执业医师证图片或胸牌</text><text class="req">*</text></view>
|
||
<view class="value value-license">
|
||
<image :src="docUrl+form.certificateImg" mode="aspectFill" class="license-thumb" />
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 专长 -->
|
||
<view class="row" @click="onEditSpecialty">
|
||
<view class="label"><text>专长</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ getSpecialtyText() }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 个人简介 -->
|
||
<view class="row" @click="onEditIntro">
|
||
<view class="label"><text>个人简介</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.intro || '暂无简介' }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 省市区选择器 -->
|
||
<view v-if="showAreaPicker" class="picker-mask" @click="closeAreaPicker"></view>
|
||
<view v-if="showAreaPicker" class="picker-panel">
|
||
<view class="picker-header">
|
||
<text class="picker-btn" @click="closeAreaPicker">取消</text>
|
||
<text class="picker-title">选择地区</text>
|
||
<text class="picker-btn ok" @click="confirmArea">确定</text>
|
||
</view>
|
||
<picker-view v-if="provinces.length && cities.length && areas.length" class="picker-view" :indicator-style="indicatorStyle" :value="pickerIndex" @change="onAreaChange">
|
||
<picker-view-column>
|
||
<view v-for="(p,pi) in provinces" :key="pi" class="picker-item">{{ p.name }}</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(c,ci) in cities" :key="ci" class="picker-item">{{ c.name }}</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(a,ai) in areas" :key="ai" class="picker-item">{{ a.name }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
<view v-else class="picker-empty">地区数据加载中...</view>
|
||
</view>
|
||
|
||
<!-- 日期选择器 -->
|
||
<view v-if="showDatePicker" class="picker-mask" @click="closeDatePicker"></view>
|
||
<view v-if="showDatePicker" class="picker-panel">
|
||
<view class="picker-header">
|
||
<text class="picker-btn" @click="closeDatePicker">取消</text>
|
||
<text class="picker-title">选择出生日期</text>
|
||
<text class="picker-btn ok" @click="confirmDate">确定</text>
|
||
</view>
|
||
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="datePickerIndex" @change="onDateChange">
|
||
<picker-view-column>
|
||
<view v-for="(year, index) in years" :key="index" class="picker-item">{{ year }}年</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(month, index) in months" :key="index" class="picker-item">{{ month }}月</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(day, index) in days" :key="index" class="picker-item">{{ day }}日</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
|
||
<!-- 科室选择器 -->
|
||
<view v-if="showDeptPicker" class="picker-mask" @click="closeDeptPicker"></view>
|
||
<view v-if="showDeptPicker" class="picker-panel">
|
||
<view class="picker-header">
|
||
<text class="picker-btn" @click="closeDeptPicker">取消</text>
|
||
<text class="picker-title">选择科室</text>
|
||
<text class="picker-btn ok" @click="confirmDept">确定</text>
|
||
</view>
|
||
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="deptPickerIndex" @change="onDeptChange">
|
||
<picker-view-column>
|
||
<view v-for="(dept, index) in deptList" :key="index" class="picker-item">{{ dept }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
|
||
<!-- 职称选择器 -->
|
||
<view v-if="showTitlePicker" class="picker-mask" @click="closeTitlePicker"></view>
|
||
<view v-if="showTitlePicker" class="picker-panel">
|
||
<view class="picker-header">
|
||
<text class="picker-btn" @click="closeTitlePicker">取消</text>
|
||
<text class="picker-title">选择职称</text>
|
||
<text class="picker-btn ok" @click="confirmTitle">确定</text>
|
||
</view>
|
||
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="titlePickerIndex" @change="onTitleChange">
|
||
<picker-view-column>
|
||
<view v-for="(title, index) in titleList" :key="index" class="picker-item">{{ title }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import api from '@/api/api';
|
||
import areaList from '@/utils/areaList.js';
|
||
import docUrl from '@/utils/docUrl';
|
||
const form = ref({
|
||
// 基本资料字段
|
||
photo: '',
|
||
realName: '',
|
||
sex: 0,
|
||
birthDate: '',
|
||
mobile: '',
|
||
email: '',
|
||
// 专业资料字段
|
||
hospitalName: '',
|
||
officeName: '',
|
||
officePhone: '',
|
||
positionName: '',
|
||
certificate: '',
|
||
certificateImg: '',
|
||
intro: '',
|
||
// 地址相关字段
|
||
provId: 0,
|
||
cityId: 0,
|
||
countyId: 0,
|
||
// 专长列表
|
||
specialityList: []
|
||
});
|
||
|
||
// 地址选择相关变量
|
||
const regionText = ref('');
|
||
const provinces = ref([]);
|
||
const cities = ref([]);
|
||
const areas = ref([]);
|
||
const pickerIndex = ref([0,0,0]);
|
||
const showAreaPicker = ref(false);
|
||
const indicatorStyle = `height: 80rpx;`;
|
||
|
||
// 日期选择相关变量
|
||
const showDatePicker = ref(false);
|
||
const years = ref([]);
|
||
const months = ref([]);
|
||
const days = ref([]);
|
||
const datePickerIndex = ref([0, 0, 0]);
|
||
|
||
// 科室选择相关变量
|
||
const showDeptPicker = ref(false);
|
||
const deptList = ref([
|
||
'内科', '外科', '妇产科', '儿科', '眼科', '耳鼻喉科', '口腔科', '皮肤科',
|
||
'神经科', '精神科', '肿瘤科', '康复科', '急诊科', '麻醉科', '病理科',
|
||
'检验科', '影像科', '药剂科', '护理部', '肝病科', '消化科', '心内科',
|
||
'呼吸科', '肾内科', '内分泌科', '血液科', '风湿科', '感染科', 'ICU',
|
||
'手术室', '门诊部', '住院部', '体检中心', '其他'
|
||
]);
|
||
const deptPickerIndex = ref([0]);
|
||
|
||
// 职称选择相关变量
|
||
const showTitlePicker = ref(false);
|
||
const titleList = ref([
|
||
'住院医师', '主治医师', '副主任医师', '主任医师',
|
||
'住院中医师', '主治中医师', '副主任中医师', '主任中医师',
|
||
'住院药师', '主管药师', '副主任药师', '主任药师',
|
||
'住院护师', '主管护师', '副主任护师', '主任护师',
|
||
'住院技师', '主管技师', '副主任技师', '主任技师',
|
||
'助理医师', '执业医师', '执业助理医师',
|
||
'医士', '医师', '主管医师', '副主任医师', '主任医师',
|
||
'护士', '护师', '主管护师', '副主任护师', '主任护师',
|
||
'技师', '主管技师', '副主任技师', '主任技师',
|
||
'其他'
|
||
]);
|
||
const titlePickerIndex = ref([0]);
|
||
|
||
const goBack = () => uni.navigateBack();
|
||
|
||
// 获取性别文本
|
||
const getGenderText = (sex) => {
|
||
const genderMap = { 0: '女', 1: '男' };
|
||
return genderMap[sex] || '';
|
||
};
|
||
const getDiseaseList = async () => {
|
||
const res = await api.getDiseaseList({});
|
||
console.log('疾病列表API响应:', res);
|
||
if (res.code === 200) {
|
||
deptList.value = res.data.diseaseList.map(item => item.diseaseName);
|
||
}
|
||
};
|
||
const getPositionList = async () => {
|
||
const res = await api.getPositionList({});
|
||
console.log('职称列表API响应:', res);
|
||
if (res.code === 200 ) {
|
||
titleList.value = res.data.positionList.map(item => item.positionName);
|
||
}
|
||
};
|
||
const getOfficeList = async () => {
|
||
const res = await api.getOfficeList({});
|
||
console.log('科室列表API响应:', res);
|
||
if (res.code === 200 ) {
|
||
deptList.value = res.data.officeList.map(item => item.officeName);
|
||
}
|
||
};
|
||
|
||
// 获取专长文本
|
||
const getSpecialtyText = () => {
|
||
if (!form.value.specialityList || form.value.specialityList.length === 0) {
|
||
return '暂无专长';
|
||
}
|
||
return form.value.specialityList.map(item => item.diseaseName).join('、');
|
||
};
|
||
const getExpertByUuid = async () => {
|
||
try {
|
||
const res = await api.getExpertByUuid({});
|
||
console.log('专家信息API响应:', res);
|
||
|
||
if (res.code === 200 && res.data && res.data.expert) {
|
||
const expert = res.data.expert;
|
||
const specialityList = res.data.specialityList || [];
|
||
|
||
// 直接使用API返回的字段结构
|
||
form.value = {
|
||
photo: expert.photo || '',
|
||
realName: expert.realName || '',
|
||
sex: expert.sex || 0,
|
||
birthDate: expert.birthDate || '',
|
||
mobile: expert.mobile || '',
|
||
email: expert.email || '',
|
||
hospitalName: expert.hospitalName || '',
|
||
officeName: expert.officeName || '',
|
||
officePhone: expert.officePhone || '',
|
||
positionName: expert.positionName || '',
|
||
certificate: expert.certificate || '',
|
||
certificateImg: expert.certificateImg || '',
|
||
intro: expert.intro || '',
|
||
provId: expert.provId || 0,
|
||
cityId: expert.cityId || 0,
|
||
countyId: expert.countyId || 0,
|
||
specialityList: specialityList
|
||
};
|
||
|
||
// 设置地址信息（如果有省市区ID）
|
||
if (expert.provId && expert.cityId && expert.countyId) {
|
||
// 这里可以根据ID设置地址，暂时先设置医院名称
|
||
regionText.value = expert.hospitalName || '';
|
||
}
|
||
|
||
console.log('解析后的表单数据:', form.value);
|
||
} else {
|
||
console.error('获取专家信息失败:', res.msg || '未知错误');
|
||
uni.showToast({
|
||
title: res.msg || '获取个人信息失败',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('获取专家信息异常:', error);
|
||
uni.showToast({
|
||
title: '网络请求失败',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
}
|
||
};
|
||
// 通用打开裁剪器
|
||
const openCropper = (callback, opts = {}) => {
|
||
const { destWidth = 600, rectWidth = 300, fileType = 'jpg' } = opts;
|
||
const url = `/uni_modules/uview-plus/components/u-avatar-cropper/u-avatar-cropper?destWidth=${destWidth}&rectWidth=${rectWidth}&fileType=${fileType}`;
|
||
uni.navigateTo({
|
||
url,
|
||
success: (res) => {
|
||
res.eventChannel.on('uAvatarCropper', (path) => {
|
||
if (typeof callback === 'function') callback(path);
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const onChooseAvatar = () => {
|
||
openCropper((path) => {
|
||
form.value.avatar = path;
|
||
});
|
||
};
|
||
|
||
const onChooseLicenseImg = () => {
|
||
openCropper((path) => {
|
||
form.value.licenseImg = path;
|
||
}, { destWidth: 1000, rectWidth: 500 });
|
||
};
|
||
|
||
// 地址选择相关函数
|
||
const normalizeNode = (node) => ({
|
||
code: node?.code || '',
|
||
name: node?.label || node?.value || node?.name || '',
|
||
children: Array.isArray(node?.children) ? node.children : []
|
||
});
|
||
|
||
const getAreaTree = () => {
|
||
const raw = areaList && (areaList.default || areaList);
|
||
return Array.isArray(raw) ? raw.map(normalizeNode) : [];
|
||
};
|
||
|
||
const buildData = () => {
|
||
const tree = getAreaTree();
|
||
provinces.value = tree.length ? tree : [{ code: '', name: '', children: [] }];
|
||
const pIdx = Math.min(pickerIndex.value[0], Math.max(provinces.value.length - 1, 0));
|
||
const pNode = provinces.value[pIdx];
|
||
cities.value = (pNode?.children || []).map(normalizeNode);
|
||
if (!cities.value.length) cities.value = [{ code: '', name: '', children: [] }];
|
||
const cIdx = Math.min(pickerIndex.value[1], Math.max(cities.value.length - 1, 0));
|
||
const cNode = cities.value[cIdx];
|
||
areas.value = (cNode?.children || []).map(normalizeNode);
|
||
if (!areas.value.length) areas.value = [{ code: '', name: '' }];
|
||
};
|
||
|
||
const openAreaPicker = () => {
|
||
showAreaPicker.value = true;
|
||
pickerIndex.value = [0,0,0];
|
||
buildData();
|
||
};
|
||
|
||
const closeAreaPicker = () => {
|
||
showAreaPicker.value = false;
|
||
};
|
||
|
||
const onAreaChange = (e) => {
|
||
const val = (e && e.detail && e.detail.value) ? e.detail.value : [0,0,0];
|
||
const [pi, ci, ai] = val;
|
||
if (pi !== pickerIndex.value[0]) {
|
||
pickerIndex.value = [pi, 0, 0];
|
||
buildData();
|
||
return;
|
||
}
|
||
if (ci !== pickerIndex.value[1]) {
|
||
pickerIndex.value = [pi, ci, 0];
|
||
buildData();
|
||
return;
|
||
}
|
||
pickerIndex.value = [pi, ci, ai];
|
||
};
|
||
|
||
const confirmArea = () => {
|
||
const p = provinces.value[pickerIndex.value[0]];
|
||
const c = cities.value[pickerIndex.value[1]];
|
||
const a = areas.value[pickerIndex.value[2]];
|
||
regionText.value = [p?.name, c?.name, a?.name].filter(Boolean).join(' ');
|
||
// 更新表单中的医院地址
|
||
form.value.hospitalName = regionText.value;
|
||
closeAreaPicker();
|
||
};
|
||
|
||
// 日期选择相关函数
|
||
const initDatePicker = () => {
|
||
const currentDate = new Date();
|
||
const currentYear = currentDate.getFullYear();
|
||
const currentMonth = currentDate.getMonth() + 1;
|
||
const currentDay = currentDate.getDate();
|
||
|
||
// 生成年份列表（从1900年到今年）
|
||
years.value = [];
|
||
for (let year = currentYear; year >= 1900; year--) {
|
||
years.value.push(year);
|
||
}
|
||
|
||
// 生成月份列表
|
||
months.value = [];
|
||
for (let month = 1; month <= 12; month++) {
|
||
months.value.push(month);
|
||
}
|
||
|
||
// 生成日期列表
|
||
updateDays(currentYear, currentMonth);
|
||
|
||
// 设置默认选中当前日期
|
||
datePickerIndex.value = [0, currentMonth - 1, currentDay - 1];
|
||
};
|
||
|
||
const updateDays = (year, month) => {
|
||
const daysInMonth = new Date(year, month, 0).getDate();
|
||
days.value = [];
|
||
for (let day = 1; day <= daysInMonth; day++) {
|
||
days.value.push(day);
|
||
}
|
||
};
|
||
|
||
const openDatePicker = () => {
|
||
showDatePicker.value = true;
|
||
initDatePicker();
|
||
};
|
||
|
||
const closeDatePicker = () => {
|
||
showDatePicker.value = false;
|
||
};
|
||
|
||
const onDateChange = (e) => {
|
||
const val = e.detail.value;
|
||
const [yearIndex, monthIndex, dayIndex] = val;
|
||
|
||
const selectedYear = years.value[yearIndex];
|
||
const selectedMonth = months.value[monthIndex];
|
||
|
||
// 更新日期列表
|
||
updateDays(selectedYear, selectedMonth);
|
||
|
||
// 检查选择的日期是否晚于今天
|
||
const selectedDate = new Date(selectedYear, selectedMonth - 1, days.value[dayIndex] || 1);
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
|
||
if (selectedDate > today) {
|
||
// 如果选择的日期晚于今天，重置为今天
|
||
const currentDate = new Date();
|
||
const currentYear = currentDate.getFullYear();
|
||
const currentMonth = currentDate.getMonth() + 1;
|
||
const currentDay = currentDate.getDate();
|
||
|
||
const yearIdx = years.value.findIndex(y => y === currentYear);
|
||
const monthIdx = months.value.findIndex(m => m === currentMonth);
|
||
const dayIdx = days.value.findIndex(d => d === currentDay);
|
||
|
||
if (yearIdx !== -1 && monthIdx !== -1 && dayIdx !== -1) {
|
||
datePickerIndex.value = [yearIdx, monthIdx, dayIdx];
|
||
}
|
||
} else {
|
||
datePickerIndex.value = val;
|
||
}
|
||
};
|
||
|
||
const confirmDate = () => {
|
||
const [yearIndex, monthIndex, dayIndex] = datePickerIndex.value;
|
||
const selectedYear = years.value[yearIndex];
|
||
const selectedMonth = months.value[monthIndex];
|
||
const selectedDay = days.value[dayIndex];
|
||
|
||
// 格式化日期
|
||
const formattedDate = `${selectedYear}-${String(selectedMonth).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`;
|
||
|
||
// 更新表单数据
|
||
form.value.birthDate = formattedDate;
|
||
|
||
closeDatePicker();
|
||
};
|
||
|
||
// 科室选择相关函数
|
||
const openDeptPicker = () => {
|
||
showDeptPicker.value = true;
|
||
// 如果当前有选中的科室，设置默认选中项
|
||
if (form.value.officeName) {
|
||
const index = deptList.value.findIndex(dept => dept === form.value.officeName);
|
||
if (index !== -1) {
|
||
deptPickerIndex.value = [index];
|
||
}
|
||
}
|
||
};
|
||
|
||
const closeDeptPicker = () => {
|
||
showDeptPicker.value = false;
|
||
};
|
||
|
||
const onDeptChange = (e) => {
|
||
const val = e.detail.value;
|
||
deptPickerIndex.value = val;
|
||
};
|
||
|
||
const confirmDept = () => {
|
||
const selectedIndex = deptPickerIndex.value[0];
|
||
const selectedDept = deptList.value[selectedIndex];
|
||
|
||
// 更新表单数据
|
||
form.value.officeName = selectedDept;
|
||
|
||
closeDeptPicker();
|
||
};
|
||
|
||
// 职称选择相关函数
|
||
const openTitlePicker = () => {
|
||
showTitlePicker.value = true;
|
||
// 如果当前有选中的职称，设置默认选中项
|
||
if (form.value.positionName) {
|
||
const index = titleList.value.findIndex(title => title === form.value.positionName);
|
||
if (index !== -1) {
|
||
titlePickerIndex.value = [index];
|
||
}
|
||
}
|
||
};
|
||
|
||
const closeTitlePicker = () => {
|
||
showTitlePicker.value = false;
|
||
};
|
||
|
||
const onTitleChange = (e) => {
|
||
const val = e.detail.value;
|
||
titlePickerIndex.value = val;
|
||
};
|
||
|
||
const confirmTitle = () => {
|
||
const selectedIndex = titlePickerIndex.value[0];
|
||
const selectedTitle = titleList.value[selectedIndex];
|
||
|
||
// 更新表单数据
|
||
form.value.positionName = selectedTitle;
|
||
|
||
closeTitlePicker();
|
||
};
|
||
|
||
const onPickGender = () => {};
|
||
const onPickBirthday = () => {
|
||
openDatePicker();
|
||
};
|
||
const onEditPhone = () => {};
|
||
const onEditEmail = () => {};
|
||
const onPickDept = () => {
|
||
openDeptPicker();
|
||
};
|
||
const onEditDeptPhone = () => {};
|
||
const onPickTitle = () => {
|
||
openTitlePicker();
|
||
};
|
||
const onEditLicenseNo = () => {};
|
||
const onEditSpecialty = () => {};
|
||
const onEditIntro = () => {};
|
||
|
||
onShow(() => {
|
||
// 可在此处拉取并回填个人资料
|
||
getExpertByUuid();
|
||
getPositionList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.person-page {
|
||
background-color: #ffffff;
|
||
height: 100vh;
|
||
}
|
||
.content {
|
||
position: fixed;
|
||
top: calc(var(--status-bar-height) + 44px);
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.section-header {
|
||
background-color: #d9d9d9;
|
||
color: #8B2316;
|
||
font-size: 28rpx;
|
||
padding: 18rpx 24rpx;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 28rpx 24rpx;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
}
|
||
.label {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
color: #222;
|
||
}
|
||
.req {
|
||
color: #e44d3a;
|
||
margin-left: 8rpx;
|
||
}
|
||
.value {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #666;
|
||
font-size: 30rpx;
|
||
}
|
||
.with-arrow text {
|
||
margin-right: 14rpx;
|
||
}
|
||
.value-avatar {
|
||
gap: 14rpx;
|
||
}
|
||
.avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.value-license {
|
||
gap: 14rpx;
|
||
}
|
||
.license-thumb {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 8rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
/* 地区选择器样式 */
|
||
.picker-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.picker-panel {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.picker-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 24rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.picker-title {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.picker-btn {
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.picker-btn.ok {
|
||
color: #38c1b1;
|
||
}
|
||
|
||
.picker-view {
|
||
height: 480rpx;
|
||
}
|
||
|
||
.picker-item {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
|
||
.picker-empty {
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
color: #999;
|
||
}
|
||
</style>
|