9.1
This commit is contained in:
zoujiandong
@@ -0,0 +1,280 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user