405 lines
9.0 KiB
Vue
405 lines
9.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 顶部导航栏 -->
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="添加日程"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="140rpx"
|
|
:border="false"
|
|
backgroundColor="#eee"
|
|
>
|
|
<template #right>
|
|
<view class="nav-right" @click="submitSchedule">
|
|
<text class="submit-text">提交</text>
|
|
</view>
|
|
</template>
|
|
</uni-nav-bar>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<view class="main-content">
|
|
<!-- 患者选择 -->
|
|
<view class="form-section" @click="selectPatient">
|
|
<view class="section-label">
|
|
<text class="label-text">患者</text>
|
|
</view>
|
|
<view class="section-content">
|
|
<text class="content-text">{{ selectedPatient || '请选择患者' }}</text>
|
|
<uni-icons type="right" class ="icon" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期选择 -->
|
|
<view class="form-section " @click="selectDate" style="margin-top: 20rpx;">
|
|
<view class="section-label ">
|
|
<text class="label-text">日期</text>
|
|
</view>
|
|
<view class="section-content">
|
|
<text class="content-text">{{ selectedDate }}</text>
|
|
<uni-icons class ="icon" type="right" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 随访内容 -->
|
|
<view class="form-section content-section cloumn">
|
|
<view class="section-label">
|
|
<text class="label-text">随访内容</text>
|
|
</view>
|
|
<view class="content-input-area">
|
|
<textarea
|
|
class="content-textarea"
|
|
v-model="followUpContent"
|
|
placeholder="请输入随访内容"
|
|
:maxlength="500"
|
|
auto-height
|
|
></textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提醒选项 -->
|
|
<view class="reminder-section">
|
|
<!-- 提醒我 -->
|
|
<view class="reminder-item" @click="toggleRemindMe">
|
|
<text class="reminder-text">提醒我</text>
|
|
<view class="checkbox" :class="{ active: remindMe }">
|
|
<uni-icons v-if="remindMe" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提醒患者 -->
|
|
<view class="reminder-item" @click="toggleRemindPatient">
|
|
<text class="reminder-text">提醒患者</text>
|
|
<view class="checkbox" :class="{ active: remindPatient }">
|
|
<uni-icons v-if="remindPatient" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-overlay :show="show">
|
|
<view class="warp">
|
|
|
|
<view class="calendarbox">
|
|
<view class="calendartop">
|
|
<view class="title">时间日期</view>
|
|
<view class="datebox">
|
|
<view class="year">{{ headerYear }}</view>
|
|
<view class="day">{{ headerDay }}</view>
|
|
</view>
|
|
</view>
|
|
<uni-calendar class="uni-calendar--hook" @change="change" @monthSwitch="monthSwitch" />
|
|
<view class="calendarbottom">
|
|
<view class="cancel" @click="show=false">取消</view>
|
|
<view class="ok">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-overlay>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import navTo from '@/utils/navTo.js';
|
|
import api from '@/api/api.js';
|
|
// 表单数据
|
|
const show=ref(false);
|
|
const selectedPatient = ref('');
|
|
const selectedDate = ref('');
|
|
const datetime = ref('');
|
|
const followUpContent = ref('请于近日来院复诊、复查');
|
|
const remindMe = ref(false);
|
|
const remindPatient = ref(true);
|
|
const headerYear = ref('');
|
|
const headerDay = ref('');
|
|
const patientUuid = ref('');
|
|
// 返回上一页
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
};
|
|
const addFollowUps=()=>{
|
|
api.addFollowUps({
|
|
patient_uuid: patientUuid.value,
|
|
note: followUpContent.value,
|
|
datetime: datetime.value,
|
|
isremindpatient: remindPatient.value?1:0,
|
|
isremindme:remindMe.value?1:0,
|
|
type:1
|
|
}).then(res=>{
|
|
console.log(res)
|
|
if(res.code==200){
|
|
uni.showToast({ title: '提交成功', icon: 'success' });
|
|
setTimeout(()=>uni.navigateBack(),700);
|
|
}
|
|
})
|
|
}
|
|
// 提交日程
|
|
const submitSchedule = () => {
|
|
if (!selectedPatient.value) {
|
|
uni.showToast({
|
|
title: '请选择患者',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
addFollowUps();
|
|
};
|
|
|
|
// 选择患者
|
|
const selectPatient = () => {
|
|
navTo({
|
|
url:'/pages_app/selectPatientSingle/selectPatientSingle',
|
|
events: {
|
|
onPatientsSelected: (data) => {
|
|
selectedPatient.value = data.realName;
|
|
patientUuid.value = data.uuid;
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
// 选择日期
|
|
const selectDate = () => {
|
|
show.value=true;
|
|
// 使用uni-datetime-picker弹窗选择日期
|
|
|
|
};
|
|
|
|
// 切换提醒我
|
|
const toggleRemindMe = () => {
|
|
remindMe.value = !remindMe.value;
|
|
};
|
|
|
|
// 切换提醒患者
|
|
const toggleRemindPatient = () => {
|
|
remindPatient.value = !remindPatient.value;
|
|
};
|
|
|
|
// 页面显示时初始化
|
|
onShow(() => {
|
|
initPage();
|
|
});
|
|
const change=(e)=>{
|
|
console.log('change 返回:', e)
|
|
if(e && e.fulldate){
|
|
const d = new Date(e.fulldate);
|
|
const y = d.getFullYear();
|
|
const m = d.getMonth()+1;
|
|
const dd = d.getDate();
|
|
const weekdays = ['日','一','二','三','四','五','六'];
|
|
const w = weekdays[d.getDay()];
|
|
headerYear.value = `${y}年`;
|
|
headerDay.value = `${m}月${dd}日周${w}`;
|
|
datetime.value = `${y}-${m}-${dd}`;
|
|
selectedDate.value = `${y}年${m}月${dd}日(星期${w})`;
|
|
}
|
|
};
|
|
|
|
const monthSwitch=(e)=>{
|
|
console.log('monthSwitchs 返回:', e)
|
|
}
|
|
|
|
// 初始化页面
|
|
const initPage = () => {
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = today.getMonth() + 1;
|
|
const day = today.getDate();
|
|
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
const weekday = weekdays[today.getDay()];
|
|
selectedDate.value = `${year}年${month}月${day}日(星期${weekday})`;
|
|
datetime.value = `${year}-${month}-${day}`;
|
|
headerYear.value = `${year}年`;
|
|
headerDay.value = `${month}月${day}日周${weekday}`;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
.calendarbox{
|
|
margin-top: 140rpx;
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
:deep(.uni-calendar-item--checked){
|
|
background:#ff3346!important;
|
|
border-radius: 50%;
|
|
color:#fff;
|
|
}
|
|
:deep(.uni-calendar-item--isDay){
|
|
border-radius: 50%;
|
|
background:#ff3346!important;
|
|
}
|
|
|
|
|
|
.calendartop {
|
|
width:100%;
|
|
.title{
|
|
font-size:34rpx;
|
|
padding:20rpx 30rpx 8rpx;
|
|
}
|
|
.datebox{
|
|
background:#ff3346;
|
|
display: flex;
|
|
width:100%;
|
|
color:#fff;
|
|
font-size: 46rpx;
|
|
padding:20rpx 30rpx;
|
|
box-sizing:border-box;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.calendarbottom{
|
|
color:#ff3346;
|
|
display: flex;
|
|
box-sizing:border-box;
|
|
padding:30rpx 40rpx 40rpx;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
.ok{
|
|
font-size: 28rpx;
|
|
margin-left: 40rpx;
|
|
}
|
|
.cancel{
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
|
|
}
|
|
|
|
/* 导航栏右侧按钮样式 */
|
|
.nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.submit-text {
|
|
font-size: 32rpx;
|
|
color: #8B2316;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 主要内容区域 */
|
|
.main-content {
|
|
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
/* 表单区域样式 */
|
|
.form-section {
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
align-items: center;
|
|
justify-content:space-between;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&.content-section {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.section-label {
|
|
width: 160rpx;
|
|
flex-shrink: 0;
|
|
|
|
.label-text {
|
|
font-size: 32rpx;
|
|
color: #8B2316;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.section-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.content-text {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.icon{
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
.content-input-area {
|
|
flex: 1;
|
|
margin-top: 20rpx;
|
|
width:100%;
|
|
.content-textarea {
|
|
width: 100%;
|
|
min-height: 200rpx;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 1.5;
|
|
border: none;
|
|
outline: none;
|
|
resize: none;
|
|
}
|
|
}
|
|
}
|
|
.cloumn{
|
|
flex-direction: column;
|
|
}
|
|
/* 提醒选项区域 */
|
|
.reminder-section {
|
|
background-color: #ffffff;
|
|
margin-top: 20rpx;
|
|
|
|
.reminder-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.reminder-text {
|
|
font-size: 32rpx;
|
|
color: #8B2316;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #cccccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #ffffff;
|
|
|
|
&.active {
|
|
background-color: #8B2316;
|
|
border-color: #8B2316;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|