8.26 17：41
This commit is contained in:
zoujiandong
parent
b6120d9a40
commit
ef5b3fb59f
26
components/empty/empty.vue
Normal file
26
components/empty/empty.vue
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<view class="emptybox">
|
||||||
|
<up-image :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
|
||||||
|
<text class="empty-text">暂无数据</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { onShow } from "@dcloudio/uni-app";
|
||||||
|
import emptyImg from "@/static/icon_empty.png"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.emptybox{
|
||||||
|
height:800rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.empty-text{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
38
components/navBar/navbar.vue
Normal file
38
components/navBar/navbar.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<uni-nav-bar
|
||||||
|
left-icon="left"
|
||||||
|
:title="title"
|
||||||
|
@clickLeft="goBack"
|
||||||
|
fixed
|
||||||
|
color="#8B2316"
|
||||||
|
height="140rpx"
|
||||||
|
:border="false"
|
||||||
|
backgroundColor="#eeeeee"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { onShow } from "@dcloudio/uni-app";
|
||||||
|
cosnt props=defineProps({
|
||||||
|
title:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 方法
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack({
|
||||||
|
fail() {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
30
pages.json
30
pages.json
@ -451,6 +451,36 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "schedule/schedule",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "uni-app分页",
|
||||||
|
"app": {
|
||||||
|
"bounce": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "visit/visit",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "uni-app分页",
|
||||||
|
"app": {
|
||||||
|
"bounce": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "patientDetail/patientDetail",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "uni-app分页",
|
||||||
|
"app": {
|
||||||
|
"bounce": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "idcardAuth/idcardAuth",
|
"path": "idcardAuth/idcardAuth",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
137
pages_app/patientDetail/patientDetail.vue
Normal file
137
pages_app/patientDetail/patientDetail.vue
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<uni-nav-bar
|
||||||
|
left-icon="left"
|
||||||
|
title="患者详情"
|
||||||
|
@clickLeft="goBack"
|
||||||
|
fixed
|
||||||
|
color="#8B2316"
|
||||||
|
height="140rpx"
|
||||||
|
:border="false"
|
||||||
|
backgroundColor="#eeeeee"
|
||||||
|
>
|
||||||
|
<template #right>
|
||||||
|
<view class="nav-right" @click="editPatient">
|
||||||
|
<uni-icons type="compose" size="22" color="#8B2316"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-nav-bar>
|
||||||
|
|
||||||
|
<!-- 头部信息卡片 -->
|
||||||
|
<view class="card header-card">
|
||||||
|
<image class="avatar" src="/static/avatar-a.png" mode="aspectFill"></image>
|
||||||
|
<view class="base-info">
|
||||||
|
<view class="name-row">
|
||||||
|
<text class="name">aa</text>
|
||||||
|
<uni-icons type="person" size="20" color="#c0392b" style="margin-left: 8rpx;"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="line"><text class="label">昵称：</text><text class="value">Android</text></view>
|
||||||
|
<view class="line"><text class="label">年龄：</text><text class="value">23</text><text class="sep">｜</text><text class="label">民族：</text><text class="value">未知</text></view>
|
||||||
|
<view class="line multi">
|
||||||
|
<text class="label">地区：</text>
|
||||||
|
<text class="value">内蒙古自治区呼伦贝尔市莫力达瓦达斡尔族自治旗</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 功能分组条目 -->
|
||||||
|
<view class="cell" @click="openGroup" style="margin-top: 20rpx;">
|
||||||
|
<text class="cell-label">分组</text>
|
||||||
|
<view class="cell-right">
|
||||||
|
<text class="hint">分组了，分组2</text>
|
||||||
|
<uni-icons type="right" color="#999" size="18"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cell" @click="editDesc">
|
||||||
|
<text class="cell-label">描述</text>
|
||||||
|
<view class="cell-right">
|
||||||
|
<text class="hint">补充患者关键信息，方便随访患者</text>
|
||||||
|
<uni-icons type="right" color="#999" size="18"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cell">
|
||||||
|
<text class="cell-label">电话号码</text>
|
||||||
|
<view class="cell-right">
|
||||||
|
<text class="phone">18012345600</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 患者病史 -->
|
||||||
|
<view class="section-title">患者病史</view>
|
||||||
|
<view class="card history-card">
|
||||||
|
<text class="history-text" :class="{ fold: !showAllHistory }">{{ historyText }}</text>
|
||||||
|
<text class="toggle" @click="toggleHistory">{{ showAllHistory ? '收起' : '展开全部' }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部操作 -->
|
||||||
|
<view class="actions">
|
||||||
|
<view class="action" @click="sendMessage">
|
||||||
|
<up-image :src="msgImg" width="44rpx" height="44rpx" ></up-image>
|
||||||
|
<text class="action-text">发消息</text>
|
||||||
|
</view>
|
||||||
|
<view class="action" @click="goMakePlan">
|
||||||
|
<up-image :src="planImg" width="44rpx" height="44rpx" ></up-image>
|
||||||
|
<text class="action-text">制定随访计划</text>
|
||||||
|
</view>
|
||||||
|
<view class="action" @click="recordIllness">
|
||||||
|
<up-image :src="recordImg" width="44rpx" height="44rpx" ></up-image>
|
||||||
|
<text class="action-text">记录病情</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { onShow } from '@dcloudio/uni-app'
|
||||||
|
import msgImg from "@/static/icon_message_big.png"
|
||||||
|
import planImg from "@/static/image_backgrond_red_big1.png"
|
||||||
|
import recordImg from "@/static/image_backgrond_red_big.png"
|
||||||
|
const showAllHistory = ref(false)
|
||||||
|
const historyText = '2025年检查出戊型肝炎, 同时患有结核。有饮酒史、无吸烟史, 无输血或其他血液制品史, 使用过恩…'
|
||||||
|
|
||||||
|
const goBack = ()=> uni.navigateBack()
|
||||||
|
const editPatient = ()=> uni.showToast({ title:'编辑资料', icon:'none' })
|
||||||
|
const openGroup = ()=> uni.showToast({ title:'分组', icon:'none' })
|
||||||
|
const editDesc = ()=> uni.showToast({ title:'编辑描述', icon:'none' })
|
||||||
|
const sendMessage = ()=> uni.showToast({ title:'发消息', icon:'none' })
|
||||||
|
const goMakePlan = ()=> uni.navigateTo({ url:'/pages_app/visit/visit' })
|
||||||
|
const recordIllness = ()=> uni.showToast({ title:'记录病情', icon:'none' })
|
||||||
|
const toggleHistory = ()=> showAllHistory.value = !showAllHistory.value
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content { background:#f5f5f5; min-height:100vh; }
|
||||||
|
.nav-right { padding-right: 20rpx; }
|
||||||
|
|
||||||
|
.card { background:#ffffff; padding: 20rpx; }
|
||||||
|
.header-card { display:flex; }
|
||||||
|
.avatar { width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-right: 20rpx; }
|
||||||
|
.base-info { flex:1; }
|
||||||
|
.name-row { display:flex; align-items:center; margin-bottom: 10rpx; }
|
||||||
|
.name { font-size: 40rpx; color:#222; font-weight: 600; }
|
||||||
|
.line { font-size: 28rpx; color:#666; margin-top: 6rpx; display:flex; align-items:center; }
|
||||||
|
.label { color:#999;white-space: nowrap; }
|
||||||
|
.value { color:#333; }
|
||||||
|
.sep { color:#ddd; margin: 0 10rpx; }
|
||||||
|
.multi{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.cell { display:flex; align-items:center; justify-content:space-between; background:#ffffff; padding: 28rpx 30rpx; border-top:1rpx solid #efefef; }
|
||||||
|
.cell:first-of-type { margin-top: 10rpx; border-top:none; }
|
||||||
|
.cell-label { font-size: 28rpx; color:#333; }
|
||||||
|
.cell-right { display:flex; align-items:center; }
|
||||||
|
.hint { font-size: 28rpx; color:#999; margin-right: 12rpx; }
|
||||||
|
.phone { font-size: 32rpx; color:#b10000; }
|
||||||
|
|
||||||
|
.section-title { padding: 16rpx 30rpx; color:#8B2316; font-size: 30rpx; margin-top: 20rpx; }
|
||||||
|
.history-card { position: relative; }
|
||||||
|
.history-text { font-size: 28rpx; color:#666; line-height: 1.7; display:block; }
|
||||||
|
.history-text.fold { display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||||
|
.toggle { position:absolute; right: 20rpx; bottom: 16rpx; color:#b10000; font-size: 28rpx; }
|
||||||
|
|
||||||
|
.actions { background:#ffffff; margin-top: 20rpx;}
|
||||||
|
.action { display:flex; align-items:center;justify-content: center; padding: 28rpx 30rpx; border-top:1rpx solid #f0f0f0; }
|
||||||
|
.action-text { font-size:28rpx; color:#333; margin-left: 12rpx; }
|
||||||
|
</style>
|
||||||
@ -20,7 +20,7 @@
|
|||||||
</uni-nav-bar>
|
</uni-nav-bar>
|
||||||
|
|
||||||
<!-- 消息列表区域 -->
|
<!-- 消息列表区域 -->
|
||||||
<view class="message-list">
|
<view class="message-list" v-if="activeTab === 'message'">
|
||||||
<!-- 消息项 -->
|
<!-- 消息项 -->
|
||||||
<view class="message-item" @click="openMessage">
|
<view class="message-item" @click="openMessage">
|
||||||
<view class="message-avatar">
|
<view class="message-avatar">
|
||||||
@ -46,11 +46,102 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 患者列表区域 -->
|
||||||
|
<view class="patient-list" v-if="activeTab === 'list'">
|
||||||
|
<!-- 特殊操作项 -->
|
||||||
|
<view class="special-actions">
|
||||||
|
<view class="action-item" @click="addNewPatient">
|
||||||
|
<view class="action-icon new-patient">
|
||||||
|
<uni-icons type="person" size="24" color="#ffffff"></uni-icons>
|
||||||
|
<uni-icons type="plus" size="16" color="#ffffff" style="position: absolute; right: 8rpx; bottom: 8rpx;"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="action-text">新的患者</text>
|
||||||
|
<uni-icons type="right" size="20" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-item" @click="managePatientGroups">
|
||||||
|
<view class="action-icon group-icon">
|
||||||
|
<view class="grid-icon">
|
||||||
|
<view class="grid-item"></view>
|
||||||
|
<view class="grid-item"></view>
|
||||||
|
<view class="grid-item"></view>
|
||||||
|
<view class="grid-item"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="action-text">患者分组 (随访5人)</text>
|
||||||
|
<uni-icons type="right" size="20" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="listbox">
|
||||||
|
<!-- 使用 up-index-list 索引组件，数据动态渲染 -->
|
||||||
|
<up-index-list :index-list="indexList" custom-nav-height="140rpx">
|
||||||
|
<template v-for="group in patientGroups" :key="group.letter">
|
||||||
|
<up-index-item >
|
||||||
|
<up-index-anchor :text="group.letter" />
|
||||||
|
|
||||||
|
<view class="group-section">
|
||||||
|
<view class="patient-item" v-for="item in group.items" :key="item.name" @click="openPatient(item.name)">
|
||||||
|
<template v-if="item.placeholder">
|
||||||
|
<view class="patient-avatar-placeholder">
|
||||||
|
<uni-icons type="person" size="32" color="#ffffff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<image class="patient-avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||||
|
</template>
|
||||||
|
<view class="patient-info">
|
||||||
|
<text class="patient-name">{{ item.name }}</text>
|
||||||
|
<view class="patient-badge" v-if="item.badge">
|
||||||
|
<text class="badge-text">{{ item.badge }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="patient-status">
|
||||||
|
<uni-icons type="compose" size="20" color="#8B2316"></uni-icons>
|
||||||
|
<text class="follow-date">随访于{{ item.date }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-index-item>
|
||||||
|
</template>
|
||||||
|
</up-index-list>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="plan" v-if="activeTab === 'plan'">
|
||||||
|
<empty></empty>
|
||||||
|
|
||||||
|
<!-- 悬浮添加按钮 -->
|
||||||
|
<view class="floating-add-btn" @click="showAddMenu">
|
||||||
|
<uni-icons type="plus" size="24" color="#ffffff"></uni-icons>
|
||||||
|
<text class="btn-text">添加</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 添加菜单弹窗 -->
|
||||||
|
<view class="add-menu-popup" v-if="showAddMenuFlag" @click="hideAddMenu">
|
||||||
|
<view class="menu-content" @click.stop>
|
||||||
|
<!-- 添加日程 -->
|
||||||
|
<view class="menu-item" @click="addSchedule">
|
||||||
|
<up-image :src="dayImg" width="34rpx" height="34rpx" ></up-image>
|
||||||
|
<text class="menu-text">添加日程</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<view class="menu-divider"></view>
|
||||||
|
|
||||||
|
<!-- 添加随访计划 -->
|
||||||
|
<view class="menu-item" @click="addFollowUpPlan">
|
||||||
|
<up-image :src="planImg" width="34rpx" height="34rpx" ></up-image>
|
||||||
|
<text class="menu-text">添加随访计划</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 底部标签栏 -->
|
<!-- 底部标签栏 -->
|
||||||
<view class="tab-bar">
|
<view class="tab-bar">
|
||||||
<view class="tab-item active" @click="switchTab('message')">
|
<view class="tab-item active" @click="switchTab('message')">
|
||||||
<text class="tab-text">患者消息</text>
|
<text class="tab-text">患者消息</text>
|
||||||
<view class="tab-line"></view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="tab-item" @click="switchTab('list')">
|
<view class="tab-item" @click="switchTab('list')">
|
||||||
<text class="tab-text">患者列表</text>
|
<text class="tab-text">患者列表</text>
|
||||||
@ -62,9 +153,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, getCurrentInstance } from 'vue';
|
||||||
import { onShow } from "@dcloudio/uni-app";
|
import { onShow } from "@dcloudio/uni-app";
|
||||||
|
import dayImg from "@/static/visit_data11.png"
|
||||||
|
import planImg from "@/static/visitplan.png"
|
||||||
|
|
||||||
// 消息列表数据
|
// 消息列表数据
|
||||||
const messageList = ref([
|
const messageList = ref([
|
||||||
@ -79,6 +173,82 @@
|
|||||||
|
|
||||||
// 当前激活的标签
|
// 当前激活的标签
|
||||||
const activeTab = ref('message');
|
const activeTab = ref('message');
|
||||||
|
const letters = ref(['A','C','E','L']);
|
||||||
|
const activeLetter = ref('A');
|
||||||
|
const scrollIntoViewId = ref('');
|
||||||
|
let scrollingByClick = false;
|
||||||
|
|
||||||
|
// 控制添加菜单弹窗显示
|
||||||
|
const showAddMenuFlag = ref(false);
|
||||||
|
|
||||||
|
// 组件实例（用于 selectorQuery 作用域）
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
|
// up-index-list 数据源（与当前示例分组一致）
|
||||||
|
const indexList = ref([]);
|
||||||
|
// 列表高度（像素）：窗口高度 - 顶部导航(rpx转px) - 底部tab(约100rpx->px) - 操作区(约200rpx->px)
|
||||||
|
const groupsListHeight = ref(0);
|
||||||
|
const rpxToPx = (rpx) => {
|
||||||
|
const { screenWidth } = uni.getSystemInfoSync();
|
||||||
|
return Math.round((screenWidth / 750) * rpx);
|
||||||
|
};
|
||||||
|
const computeListHeight = () => {
|
||||||
|
const { windowHeight } = uni.getSystemInfoSync();
|
||||||
|
const reserved = rpxToPx(240); // 140rpx(nav) + 100rpx(tab) 近似
|
||||||
|
groupsListHeight.value = Math.max(0, windowHeight - reserved);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分组数据（可从接口返回后赋值）
|
||||||
|
const patientGroups = ref([]);
|
||||||
|
|
||||||
|
// 动态生成索引字母
|
||||||
|
const rebuildIndexList = () => {
|
||||||
|
indexList.value = patientGroups.value.map(g => g.letter);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成模拟数据
|
||||||
|
const generateMockDate = () => {
|
||||||
|
const start = new Date(2019, 0, 1).getTime();
|
||||||
|
const end = new Date().getTime();
|
||||||
|
const d = new Date(start + Math.random() * (end - start));
|
||||||
|
const y = d.getFullYear();
|
||||||
|
const m = `${d.getMonth() + 1}`.padStart(2, '0');
|
||||||
|
const day = `${d.getDate()}`.padStart(2, '0');
|
||||||
|
return `${y}-${m}-${day}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateMockGroups = () => {
|
||||||
|
const lettersPool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
|
||||||
|
const avatarSamples = ['/static/avatar-a.png','/static/avatar-l.png','/static/avatar-l2.png'];
|
||||||
|
const groups = [];
|
||||||
|
lettersPool.forEach((L) => {
|
||||||
|
// 随机产生0-3个患者
|
||||||
|
const count = Math.floor(Math.random() * 3);
|
||||||
|
if (count === 0) return;
|
||||||
|
const items = Array.from({length: count}).map((_, i) => {
|
||||||
|
const usePlaceholder = Math.random() < 0.4;
|
||||||
|
return {
|
||||||
|
name: `${L}患者${i+1}`,
|
||||||
|
avatar: usePlaceholder ? '' : avatarSamples[Math.floor(Math.random()*avatarSamples.length)],
|
||||||
|
placeholder: usePlaceholder,
|
||||||
|
badge: Math.random() < 0.2 ? 'GOOD' : '',
|
||||||
|
date: generateMockDate()
|
||||||
|
};
|
||||||
|
});
|
||||||
|
groups.push({ letter: L, items });
|
||||||
|
});
|
||||||
|
return groups;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载模拟数据
|
||||||
|
const loadMockGroups = () => {
|
||||||
|
uni.showLoading({ title: '加载中' });
|
||||||
|
setTimeout(() => {
|
||||||
|
patientGroups.value = generateMockGroups();
|
||||||
|
rebuildIndexList();
|
||||||
|
uni.hideLoading();
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
// 返回上一页
|
// 返回上一页
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
@ -118,10 +288,7 @@
|
|||||||
// 患者消息页面逻辑
|
// 患者消息页面逻辑
|
||||||
break;
|
break;
|
||||||
case 'list':
|
case 'list':
|
||||||
// 跳转到患者列表页面
|
// 显示患者列表
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages_app/myPatient/myPatient'
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
case 'plan':
|
case 'plan':
|
||||||
// 跳转到随访计划页面
|
// 跳转到随访计划页面
|
||||||
@ -133,9 +300,62 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 添加新患者
|
||||||
|
const addNewPatient = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '添加新患者',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 管理患者分组
|
||||||
|
const managePatientGroups = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '管理患者分组',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开患者详情
|
||||||
|
const openPatient = (patientName) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: `打开患者: ${patientName}`,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加随访计划
|
||||||
|
const addFollowUpPlan = () => {
|
||||||
|
showAddMenuFlag.value = false;
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages_app/visit/visit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加日程
|
||||||
|
const addSchedule = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages_app/schedule/schedule'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 显示添加菜单
|
||||||
|
const showAddMenu = () => {
|
||||||
|
showAddMenuFlag.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 隐藏添加菜单
|
||||||
|
const hideAddMenu = () => {
|
||||||
|
showAddMenuFlag.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用 up-index-list 后不再需要手动滚动联动逻辑
|
||||||
|
|
||||||
// 页面显示时加载数据
|
// 页面显示时加载数据
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
loadMessageList();
|
loadMessageList();
|
||||||
|
loadMockGroups();
|
||||||
|
computeListHeight();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 加载消息列表
|
// 加载消息列表
|
||||||
@ -149,6 +369,7 @@
|
|||||||
.content {
|
.content {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导航栏右侧按钮样式
|
// 导航栏右侧按钮样式
|
||||||
@ -286,4 +507,245 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 患者列表样式
|
||||||
|
.patient-list {
|
||||||
|
height:calc(100vh - 265rpx);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
.listbox{
|
||||||
|
flex:1;
|
||||||
|
padding-bottom: 100rpx;
|
||||||
|
}
|
||||||
|
.groups-scroll {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-actions {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.action-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.new-patient {
|
||||||
|
background-color: #8B2316;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.group-icon {
|
||||||
|
background-color: #8B2316;
|
||||||
|
|
||||||
|
.grid-icon {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 2rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.letter-index {
|
||||||
|
position: fixed;
|
||||||
|
right: 10rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 10rpx 5rpx;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
.letter-item {
|
||||||
|
padding: 8rpx 12rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #8B2316;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-section {
|
||||||
|
.group-header {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 80rpx 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-avatar,
|
||||||
|
.patient-avatar-placeholder {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-avatar-placeholder {
|
||||||
|
background-color: #ff6b6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.patient-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-badge {
|
||||||
|
background-color: #d4a574;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.badge-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.follow-date {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-add-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 140rpx; /* Adjust based on nav-bar height */
|
||||||
|
right: 30rpx;
|
||||||
|
background-color: #8B2316;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 999;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-menu-popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-content {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
|
||||||
|
width: 80%;
|
||||||
|
max-width: 400rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
margin: 0 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
378
pages_app/schedule/schedule.vue
Normal file
378
pages_app/schedule/schedule.vue
Normal file
@ -0,0 +1,378 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<uni-nav-bar
|
||||||
|
left-icon="left"
|
||||||
|
title="添加日程"
|
||||||
|
@clickLeft="goBack"
|
||||||
|
fixed
|
||||||
|
color="#8B2316"
|
||||||
|
height="140rpx"
|
||||||
|
:border="false"
|
||||||
|
backgroundColor="#ffffff"
|
||||||
|
>
|
||||||
|
<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">2025年</view>
|
||||||
|
<view class="day">11月22日周六</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";
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const show=ref(false);
|
||||||
|
const selectedPatient = ref('');
|
||||||
|
const selectedDate = ref('');
|
||||||
|
const followUpContent = ref('请于近日来院复诊、复查');
|
||||||
|
const remindMe = ref(false);
|
||||||
|
const remindPatient = ref(true);
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交日程
|
||||||
|
const submitSchedule = () => {
|
||||||
|
if (!selectedPatient.value) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择患者',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '日程添加成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 延迟返回上一页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择患者
|
||||||
|
const selectPatient = () => {
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: ['张三', '李四', '王五', '赵六'],
|
||||||
|
success: (res) => {
|
||||||
|
selectedPatient.value = ['张三', '李四', '王五', '赵六'][res.tapIndex];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择日期
|
||||||
|
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)
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
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})`;
|
||||||
|
};
|
||||||
|
</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>
|
||||||
180
pages_app/visit/visit.vue
Normal file
180
pages_app/visit/visit.vue
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<uni-nav-bar
|
||||||
|
left-icon="left"
|
||||||
|
title="添加随访计划"
|
||||||
|
@clickLeft="goBack"
|
||||||
|
fixed
|
||||||
|
color="#8B2316"
|
||||||
|
height="140rpx"
|
||||||
|
:border="false"
|
||||||
|
backgroundColor="#ffffff"
|
||||||
|
>
|
||||||
|
<template #right>
|
||||||
|
<view class="nav-right" @click="submitPlan">
|
||||||
|
<text class="submit-text">提交</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-nav-bar>
|
||||||
|
|
||||||
|
<!-- 患者选择 -->
|
||||||
|
<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" size="20" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 随访内容列表 -->
|
||||||
|
<view class="title-bar">随访内容</view>
|
||||||
|
<scroll-view class="visit-list" scroll-y scroll-with-animation :scroll-into-view="scrollIntoViewId">
|
||||||
|
<view class="visit-item" v-for="(item, idx) in visits" :key="item.id" :id="`visit-${item.id}`">
|
||||||
|
<view class="left">
|
||||||
|
<uni-icons type="close" size="20" :color="idx===0 ? '#cfcfcf' : '#c0392b'" @click="removeVisit(idx)"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="mid">
|
||||||
|
<text class="visit-text">{{ idx+1 }}.{{ defaultContent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="right" @click="pickDate(idx)">
|
||||||
|
<text class="date-text">{{ item.date }}</text>
|
||||||
|
<uni-icons type="right" size="20" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 添加随访日程按钮 -->
|
||||||
|
<view class="add-row" @click="addVisit">
|
||||||
|
<text class="plus">＋</text>
|
||||||
|
<text class="add-text">添加随访日程</text>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref,nextTick } from 'vue';
|
||||||
|
import { onShow } from "@dcloudio/uni-app";
|
||||||
|
|
||||||
|
const selectedPatient = ref('');
|
||||||
|
const defaultContent = '请近日来医院复诊、复查';
|
||||||
|
const visits = ref([
|
||||||
|
{ id: 1, date: formatDate(new Date()) },
|
||||||
|
{ id: 2, date: formatDate(addMonths(new Date(), 6)) },
|
||||||
|
{ id: 3, date: formatDate(addMonths(new Date(), 12)) },
|
||||||
|
{ id: 4, date: formatDate(addMonths(new Date(), 24)) }
|
||||||
|
]);
|
||||||
|
const remindMe = ref(false);
|
||||||
|
const remindPatient = ref(true);
|
||||||
|
const scrollIntoViewId = ref('');
|
||||||
|
|
||||||
|
function formatDate(d){
|
||||||
|
const y=d.getFullYear();
|
||||||
|
const m=`${d.getMonth()+1}`.padStart(2,'0');
|
||||||
|
const day=`${d.getDate()}`.padStart(2,'0');
|
||||||
|
const w=['日','一','二','三','四','五','六'][d.getDay()];
|
||||||
|
return `${y}.${m}.${day}(星期${w})`;
|
||||||
|
}
|
||||||
|
function addMonths(d, m){
|
||||||
|
const nd=new Date(d);
|
||||||
|
nd.setMonth(nd.getMonth()+m);
|
||||||
|
return nd;
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack=()=>uni.navigateBack();
|
||||||
|
const submitPlan=()=>{
|
||||||
|
uni.showToast({ title: '已提交', icon: 'success' });
|
||||||
|
setTimeout(()=>uni.navigateBack(),1000);
|
||||||
|
};
|
||||||
|
const selectPatient=()=>{
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList:['张三','李四','王五','赵六'],
|
||||||
|
success:(res)=>{ selectedPatient.value=['张三','李四','王五','赵六'][res.tapIndex]; }
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addVisit=()=>{
|
||||||
|
const id= Date.now();
|
||||||
|
visits.value.push({ id, date: formatDate(new Date()) });
|
||||||
|
// 下一帧滚动到新项
|
||||||
|
nextTick(()=>{ scrollIntoViewId.value = `visit-${id}`; });
|
||||||
|
};
|
||||||
|
const removeVisit=(idx)=>{
|
||||||
|
if(idx===0) return; // 第一条不可删
|
||||||
|
visits.value.splice(idx,1);
|
||||||
|
};
|
||||||
|
const pickDate=(idx)=>{
|
||||||
|
uni.showDatePicker({
|
||||||
|
mode:'date',
|
||||||
|
value:new Date().toISOString().split('T')[0],
|
||||||
|
success:(res)=>{
|
||||||
|
visits.value[idx].date = formatDate(new Date(res.value));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleRemindMe=()=>{ remindMe.value=!remindMe.value; };
|
||||||
|
const toggleRemindPatient=()=>{ remindPatient.value=!remindPatient.value; };
|
||||||
|
|
||||||
|
onShow(()=>{});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-right { display: flex; align-items: center; }
|
||||||
|
.submit-text { font-size: 32rpx; color: #8B2316; font-weight: 500; }
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: 30rpx; background: #ffffff; border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
.section-label { width: 160rpx; flex-shrink: 0; }
|
||||||
|
.label-text { font-size: 32rpx; color: #8B2316; font-weight: 500; }
|
||||||
|
.section-content { display: flex; align-items: center; }
|
||||||
|
.content-text { font-size: 32rpx; color:#333; }
|
||||||
|
}
|
||||||
|
.title-bar { padding: 20rpx 30rpx; color:#8B2316; font-size: 32rpx; background:#ffffff; margin-top: 20rpx; border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0; }
|
||||||
|
|
||||||
|
.visit-list {
|
||||||
|
/* 让列表在可视区域内滚动 */
|
||||||
|
height: 400rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.visit-item { box-sizing:border-box;display:flex; align-items:center; padding: 26rpx 30rpx; border-bottom:1rpx solid #f0f0f0; }
|
||||||
|
.visit-item .left { width: 60rpx; display:flex; justify-content:center; }
|
||||||
|
.visit-item .mid { flex:1; }
|
||||||
|
.visit-text { font-size: 30rpx; color:#333; display: inline-block;white-space: nowrap;width:80%;overflow: hidden;}
|
||||||
|
.visit-item .right { flex:1;display:flex; align-items:center; }
|
||||||
|
.date-text { display: inline-block;white-space: nowrap; font-size: 30rpx; color:#333; margin-right: 10rpx; }
|
||||||
|
|
||||||
|
.add-row { display:flex; align-items:center; padding: 26rpx 30rpx; background:#ffffff; margin-top: 20rpx; }
|
||||||
|
.plus { color:#8B2316; font-size: 36rpx; margin-right: 14rpx; }
|
||||||
|
.add-text { color:#8B2316; font-size: 32rpx; }
|
||||||
|
|
||||||
|
.reminder-section { background:#ffffff; margin-top: 20rpx; }
|
||||||
|
.reminder-item { display:flex; align-items:center; justify-content:space-between; padding: 30rpx; border-bottom:1rpx solid #f0f0f0; }
|
||||||
|
.reminder-item: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:#ffffff; }
|
||||||
|
.checkbox.active { background:#8B2316; border-color:#8B2316; }
|
||||||
|
</style>
|
||||||
BIN
static/icon_message_big.png
Normal file
BIN
static/icon_message_big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/image_backgrond_red_big.png
Normal file
BIN
static/image_backgrond_red_big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
static/image_backgrond_red_big1.png
Normal file
BIN
static/image_backgrond_red_big1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/visit_data11.png
Normal file
BIN
static/visit_data11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/visitplan.png
Normal file
BIN
static/visitplan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,3 +1,5 @@
|
|||||||
|
## 2.0.11（2025-08-18）
|
||||||
|
- 修复 图标点击事件返回
|
||||||
## 2.0.9（2024-01-12）
|
## 2.0.9（2024-01-12）
|
||||||
fix: 修复图标大小默认值错误的问题
|
fix: 修复图标大小默认值错误的问题
|
||||||
## 2.0.8（2023-12-14）
|
## 2.0.8（2023-12-14）
|
||||||
|
|||||||
@ -85,8 +85,8 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
_onClick() {
|
_onClick(e) {
|
||||||
this.$emit('click')
|
this.$emit('click', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "uni-icons",
|
"id": "uni-icons",
|
||||||
"displayName": "uni-icons 图标",
|
"displayName": "uni-icons 图标",
|
||||||
"version": "2.0.9",
|
"version": "2.0.11",
|
||||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-ui",
|
"uni-ui",
|
||||||
@ -11,7 +11,9 @@
|
|||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": "^3.2.14"
|
"HBuilderX": "^3.2.14",
|
||||||
|
"uni-app": "^4.08",
|
||||||
|
"uni-app-x": "^4.61"
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
@ -34,53 +36,74 @@
|
|||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
"type": "component-vue"
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": ["uni-scss"],
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "x",
|
||||||
"aliyun": "y"
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "y",
|
"vue": {
|
||||||
"app-nvue": "y",
|
"vue2": "√",
|
||||||
"app-uvue": "y"
|
"vue3": "√"
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"web": {
|
||||||
"Safari": "y",
|
"safari": "√",
|
||||||
"Android Browser": "y",
|
"chrome": "√"
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
},
|
||||||
"H5-pc": {
|
"app": {
|
||||||
"Chrome": "y",
|
"vue": "√",
|
||||||
"IE": "y",
|
"nvue": "√",
|
||||||
"Edge": "y",
|
"android": {
|
||||||
"Firefox": "y",
|
"extVersion": "",
|
||||||
"Safari": "y"
|
"minVersion": "29"
|
||||||
},
|
},
|
||||||
"小程序": {
|
"ios": "√",
|
||||||
"微信": "y",
|
"harmony": "√"
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y",
|
|
||||||
"钉钉": "y",
|
|
||||||
"快手": "y",
|
|
||||||
"飞书": "y",
|
|
||||||
"京东": "y"
|
|
||||||
},
|
},
|
||||||
"快应用": {
|
"mp": {
|
||||||
"华为": "y",
|
"weixin": "√",
|
||||||
"联盟": "y"
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
},
|
},
|
||||||
"Vue": {
|
"quickapp": {
|
||||||
"vue2": "y",
|
"huawei": "√",
|
||||||
"vue3": "y"
|
"union": "√"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"uni-app-x": {
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"android": {
|
||||||
|
"extVersion": "",
|
||||||
|
"minVersion": "29"
|
||||||
|
},
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user