281 lines
7.2 KiB
Vue
281 lines
7.2 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="form.avatar" 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.name }}</view>
|
|
</view>
|
|
|
|
<!-- 性别 -->
|
|
<view class="row" @click="onPickGender">
|
|
<view class="label"><text>性别</text><text class="req">*</text></view>
|
|
<view class="value with-arrow">
|
|
<text>{{ form.gender }}</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.birthday || '' }}</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="onPickHospital">
|
|
<view class="label"><text>医院</text><text class="req">*</text></view>
|
|
<view class="value with-arrow">
|
|
<text>{{ form.hospital }}</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.department }}</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.departmentPhone }}</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.title }}</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.licenseNo }}</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="form.licenseImg" 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>{{ form.specialty }}</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">
|
|
<uni-icons type="right" size="18" color="#bbb" />
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
|
|
const form = ref({
|
|
avatar: '/static/big_background_my.png',
|
|
name: '邱建东',
|
|
gender: '男',
|
|
birthday: '',
|
|
mobile: '17600668628',
|
|
email: '',
|
|
hospital: '北京博爱医院',
|
|
department: '肝病科',
|
|
departmentPhone: '1234567890',
|
|
title: '主任中医师',
|
|
licenseNo: '12345678',
|
|
licenseImg: '/static/big_background_my.png',
|
|
specialty: '肝炎、肝硬化'
|
|
});
|
|
|
|
const goBack = () => uni.navigateBack();
|
|
|
|
// 通用打开裁剪器
|
|
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 onPickGender = () => {};
|
|
const onPickBirthday = () => {};
|
|
const onEditPhone = () => {};
|
|
const onEditEmail = () => {};
|
|
const onPickHospital = () => {};
|
|
const onPickDept = () => {};
|
|
const onEditDeptPhone = () => {};
|
|
const onPickTitle = () => {};
|
|
const onEditLicenseNo = () => {};
|
|
const onEditSpecialty = () => {};
|
|
const onEditIntro = () => {};
|
|
|
|
onShow(() => {
|
|
// 可在此处拉取并回填个人资料
|
|
});
|
|
</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;
|
|
}
|
|
</style>
|