941 lines
28 KiB
Vue
941 lines
28 KiB
Vue
<template>
|
||
<view class="person-page">
|
||
<!-- 顶部导航栏 -->
|
||
<navBar title="个人资料" />
|
||
|
||
<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" @click="onEdit('name',form.realName)">
|
||
<view class="label"><text>姓名</text><text class="req">*</text></view>
|
||
<view class="value with-arrow">
|
||
<text>{{ form.realName }}</text>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</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="onEdit('email',form.email)">
|
||
<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="onEdit('officePhone',form.officePhone)">
|
||
<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="onEdit('certificate',form.certificate)">
|
||
<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 intro">
|
||
<text>{{ getSpecialtyText() }}</text>
|
||
|
||
</view>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</view>
|
||
|
||
<!-- 个人简介 -->
|
||
<view class="row" @click="onEdit('intro',form.intro)">
|
||
<view class="label"><text>个人简介</text></view>
|
||
<view class="value with-arrow intro">
|
||
<text>{{ form.intro || '暂无简介' }}</text>
|
||
|
||
</view>
|
||
<uni-icons type="right" size="18" color="#bbb" />
|
||
</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="(office, index) in officeList" :key="index" class="picker-item">{{ office.name }}</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.name }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</view>
|
||
<!-- 专长多选弹窗 -->
|
||
<view v-if="showSpecialtyPicker" class="picker-mask" @click="closeSpecialtyPicker"></view>
|
||
<view v-if="showSpecialtyPicker" class="picker-panel specialties" @click.stop>
|
||
<view class="picker-header">
|
||
<text class="picker-btn" @click="closeSpecialtyPicker">取消</text>
|
||
<text class="picker-title">请选择专长</text>
|
||
<text class="picker-btn ok" @click="confirmSpecialties">确定</text>
|
||
</view>
|
||
<view class="specialty-grid">
|
||
<view
|
||
v-for="(item,idx) in specialtyOptions"
|
||
:key="idx"
|
||
class="specialty-item"
|
||
:class="{ selected: isSpecialtySelected(item), disabled: isMaxSelected && !isSpecialtySelected(item) }"
|
||
@click.stop="toggleSpecialty(item)"
|
||
>
|
||
<text>{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="tips">最多可选择10项（{{ selectedSpecialties.length }}/10）</view>
|
||
</view>
|
||
<qf-image-cropper v-if="showCropper" :src="cropperSrc" :width="400" :height="400" :radius="30" @crop="handleCrop"></qf-image-cropper>
|
||
<!-- 性别选择器 -->
|
||
<view v-if="showGenderPicker" class="picker-mask" @click="closeGenderPicker"></view>
|
||
<view v-if="showGenderPicker" class="picker-panel" @click.stop>
|
||
<view class="picker-header">
|
||
<text class="picker-btn" @click="closeGenderPicker">取消</text>
|
||
<text class="picker-title">选择性别</text>
|
||
<text class="picker-btn ok" @click="confirmGender">确定</text>
|
||
</view>
|
||
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="genderPickerIndex" @change="onGenderChange">
|
||
<picker-view-column>
|
||
<view v-for="(g, gi) in genderList" :key="gi" class="picker-item">{{ g }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref,computed } from 'vue';
|
||
import { onShow,onLoad,onUnload} from "@dcloudio/uni-app";
|
||
import api from '@/api/api';
|
||
import areaList from '@/utils/areaList.js';
|
||
import docUrl from '@/utils/docUrl';
|
||
import navTo from '@/utils/navTo';
|
||
import navBar from '@/components/navBar/navBar.vue';
|
||
import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
|
||
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 cropperSrc = ref('');
|
||
const showCropper = ref(false);
|
||
// 科室选择相关变量
|
||
const showDeptPicker = ref(false);
|
||
|
||
// 性别选择
|
||
const showGenderPicker = ref(false)
|
||
const genderList = ref(['男', '女'])
|
||
const genderPickerIndex = ref([0])
|
||
|
||
const onPickGender = () => {
|
||
// 打开时根据当前值预选
|
||
const idx = genderList.value.findIndex(g => g === getGenderText(form.value.sex))
|
||
genderPickerIndex.value = [idx >= 0 ? idx : 0]
|
||
showGenderPicker.value = true
|
||
}
|
||
const closeGenderPicker = () => { showGenderPicker.value = false }
|
||
const onGenderChange = (e) => { genderPickerIndex.value = e.detail.value }
|
||
const confirmGender = () => {
|
||
const idx = genderPickerIndex.value[0] || 0
|
||
const g = genderList.value[idx]
|
||
// 写回 form.sex（0男/1女 或根据你项目定义）
|
||
form.value.sex = g === '男' ? 0 : 1
|
||
showGenderPicker.value = false
|
||
}
|
||
const deptList = ref([
|
||
'内科', '外科', '妇产科', '儿科', '眼科', '耳鼻喉科', '口腔科', '皮肤科',
|
||
'神经科', '精神科', '肿瘤科', '康复科', '急诊科', '麻醉科', '病理科',
|
||
'检验科', '影像科', '药剂科', '护理部', '肝病科', '消化科', '心内科',
|
||
'呼吸科', '肾内科', '内分泌科', '血液科', '风湿科', '感染科', 'ICU',
|
||
'手术室', '门诊部', '住院部', '体检中心', '其他'
|
||
]);
|
||
const deptPickerIndex = ref([0]);
|
||
const onEdit = (name,value) => {
|
||
navTo({
|
||
url: `/pages_app/writeInfo/writeInfo?editType=${name}&value=${value}`
|
||
});
|
||
};
|
||
// 职称选择相关变量
|
||
const showTitlePicker = ref(false);
|
||
const titleList = ref([]);
|
||
const diseaseList = ref([]);
|
||
const officeList = ref([]);
|
||
const titlePickerIndex = ref([0]);
|
||
// 专长多选
|
||
const showSpecialtyPicker = ref(false)
|
||
const specialtyOptions = ref([
|
||
'肝炎','药物肝病','中西医结合','肝硬化','肝衰竭','乙型肝炎','肝癌介入','寄生虫病',
|
||
'产科肝病','胆结石','小儿肝病','肝癌外科','胆囊炎','免疫肝病','脂肪肝病','胆囊息肉',
|
||
'酒精肝病','肝癌内科','先天肝病','中医肝胆','肝移植','其他'
|
||
])
|
||
const selectedSpecialties = ref([])
|
||
const isMaxSelected = computed(() => selectedSpecialties.value.length >= 10)
|
||
const onEditSpecialty = () => {
|
||
selectedSpecialties.value = (form.value.specialityList || []).map(i => i.diseaseName || i)
|
||
showSpecialtyPicker.value = true
|
||
}
|
||
const goBack = () => uni.navigateBack();
|
||
const closeSpecialtyPicker = () => { showSpecialtyPicker.value = false }
|
||
const isSpecialtySelected = (name) => selectedSpecialties.value.includes(name)
|
||
const toggleSpecialty = (name) => {
|
||
const i = selectedSpecialties.value.indexOf(name)
|
||
if (i > -1) { selectedSpecialties.value.splice(i,1); return }
|
||
if (isMaxSelected.value) return
|
||
selectedSpecialties.value.push(name)
|
||
}
|
||
const confirmSpecialties = () => {
|
||
form.value.specialityList = selectedSpecialties.value.map(n => ({ diseaseName: n }))
|
||
showSpecialtyPicker.value = false
|
||
}
|
||
// 获取性别文本
|
||
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) {
|
||
diseaseList.value = res.data;
|
||
}
|
||
};
|
||
const getPositionList = async () => {
|
||
const res = await api.getPositionList({});
|
||
console.log('职称列表API响应:', res);
|
||
if (res.code === 200 ) {
|
||
titleList.value = res.data
|
||
}
|
||
};
|
||
const getOfficeList = async () => {
|
||
const res = await api.getOfficeList({});
|
||
console.log('科室列表API响应:', res);
|
||
if (res.code === 200 ) {
|
||
officeList.value = res.data
|
||
}
|
||
};
|
||
|
||
// 获取专长文本
|
||
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 cropType = ref('avatar');
|
||
const onChooseAvatar = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album'],
|
||
success: (res) => {
|
||
cropperSrc.value = res.tempFilePaths[0];
|
||
showCropper.value = true;
|
||
}
|
||
});
|
||
};
|
||
const handleCrop = (e) => {
|
||
console.log(e);
|
||
if(cropType.value === 'avatar'){
|
||
form.value.photo = e.tempFilePath;
|
||
}else{
|
||
form.value.certificateImg = e.tempFilePath;
|
||
}
|
||
|
||
showCropper.value = false;
|
||
};
|
||
|
||
const onChooseLicenseImg = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album'],
|
||
success: (res) => {
|
||
cropperSrc.value = res.tempFilePaths[0];
|
||
cropType.value = 'license';
|
||
showCropper.value = true;
|
||
}
|
||
});
|
||
};
|
||
|
||
// 地址选择相关函数
|
||
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];
|
||
console.log(titleList.value[selectedIndex]);
|
||
const selectedTitle = titleList.value[selectedIndex].name;
|
||
|
||
// 更新表单数据
|
||
form.value.positionName = selectedTitle;
|
||
|
||
closeTitlePicker();
|
||
};
|
||
|
||
const onPickBirthday = () => {
|
||
openDatePicker();
|
||
};
|
||
const onEditPhone = () => {};
|
||
const onEditEmail = () => {};
|
||
const onPickDept = () => {
|
||
openDeptPicker();
|
||
};
|
||
const onEditDeptPhone = () => {};
|
||
const onPickTitle = () => {
|
||
openTitlePicker();
|
||
};
|
||
const onEditLicenseNo = () => {};
|
||
|
||
const onEditIntro = () => {};
|
||
onLoad(() => {
|
||
getExpertByUuid();
|
||
});
|
||
onShow(() => {
|
||
// 可在此处拉取并回填个人资料
|
||
uni.$off('writeInfoSaved')
|
||
uni.$on('writeInfoSaved', ({ editType, content }) => {
|
||
switch (editType) {
|
||
case 'email': form.value.email = content; break
|
||
case 'name': form.value.realName = content; break
|
||
case 'officePhone': form.value.officePhone = content; break
|
||
case 'certificate': form.value.certificate = content; break
|
||
case 'intro': form.value.intro = content; break
|
||
default: break
|
||
}
|
||
})
|
||
getPositionList();
|
||
getOfficeList();
|
||
//getDiseaseList();
|
||
});
|
||
onUnload(() => {
|
||
uni.$off('writeInfoSaved')
|
||
})
|
||
</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;
|
||
}
|
||
.intro{
|
||
flex: 1;
|
||
max-width:80%;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.with-arrow text {
|
||
|
||
margin-right: 14rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.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;
|
||
}
|
||
/* 专长弹窗 */
|
||
.picker-panel.specialties { max-height: 70vh; }
|
||
.specialty-grid {
|
||
padding: 24rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20rpx;
|
||
max-height: calc(70vh - 160rpx);
|
||
overflow-y: auto;
|
||
}
|
||
.specialty-item {
|
||
border: 2rpx solid #e0e0e0;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx 10rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
background: #fff;
|
||
}
|
||
.specialty-item.selected {
|
||
border-color: #8B2316;
|
||
color: #8B2316;
|
||
background: #fff7f5;
|
||
}
|
||
.specialty-item.disabled {
|
||
opacity: .5;
|
||
}
|
||
.tips {
|
||
padding: 16rpx 24rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|