210 lines
8.0 KiB
Vue
210 lines
8.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="随访计划"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="180rpx"
|
|
:border="false"
|
|
backgroundColor="#eee"
|
|
>
|
|
<template #right>
|
|
<view class="nav-right">
|
|
|
|
<text class="save-btn" @click="showAddMenu" >添加</text>
|
|
</view>
|
|
</template>
|
|
</uni-nav-bar>
|
|
<view class="plan">
|
|
<scroll-view
|
|
class="plan-scroll"
|
|
scroll-y="true"
|
|
refresher-enabled="true"
|
|
:refresher-triggered="followUpRefreshing"
|
|
@refresherrefresh="onFollowUpRefresh"
|
|
@scrolltolower="onFollowUpLoadMore"
|
|
:lower-threshold="100"
|
|
>
|
|
<view class="plan-list" v-if="groupedFollowUpList.length > 0">
|
|
<view class="plan-group" v-for="group in groupedFollowUpList" :key="group.yearMonth">
|
|
<view class="group-header">{{ group.yearMonth }}</view>
|
|
<view class="plan-card" v-for="item in group.items" :key="item.uuid" @click="goFollowDetail(item)">
|
|
<view class="left-rail">
|
|
<text class="day">{{ formatDay(item.datetime) }}</text>
|
|
</view>
|
|
<view class="linebox">
|
|
<up-image :src="lineImg" width="14rpx" height="180rpx" ></up-image>
|
|
</view>
|
|
<view class="right-content">
|
|
<view class="leftcontent">
|
|
<view class="note">{{ item.note }}</view>
|
|
<view class="name">{{ item.patientname }}</view>
|
|
</view>
|
|
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="load-more" v-if="followUpLoading">
|
|
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
|
|
<text class="load-text">加载中...</text>
|
|
</view>
|
|
<view class="no-more" v-if="!followUpHasMore && followUpList.length > 0">
|
|
<text class="no-more-text">没有更多数据了</text>
|
|
</view>
|
|
</view>
|
|
<empty v-else></empty>
|
|
</scroll-view>
|
|
|
|
<!-- <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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import dayjs from 'dayjs'
|
|
import api from '@/api/api.js'
|
|
import navTo from '@/utils/navTo.js'
|
|
import dayImg from '@/static/visit_data11.png'
|
|
import planImg from '@/static/visitplan.png'
|
|
import lineImg from '@/static/item_visitplan_fg.png'
|
|
|
|
const formatYearMonth = (input) => {
|
|
if (!input) return ''
|
|
const d = dayjs(input)
|
|
return d.isValid() ? d.format('YYYY年MM月') : ''
|
|
}
|
|
const formatDay = (input) => {
|
|
if (!input) return ''
|
|
const d = dayjs(input)
|
|
return d.isValid() ? d.format('DD日') : ''
|
|
}
|
|
|
|
const followUpList = ref([])
|
|
const followUpLoading = ref(false)
|
|
const followUpRefreshing = ref(false)
|
|
const followUpHasMore = ref(true)
|
|
const followUpPageSize = ref(10)
|
|
const page = ref(1)
|
|
|
|
const groupedFollowUpList = computed(() => {
|
|
if (!followUpList.value || followUpList.value.length === 0) return []
|
|
const groups = new Map()
|
|
followUpList.value.forEach(item => {
|
|
const yearMonth = formatYearMonth(item.datetime)
|
|
if (!groups.has(yearMonth)) groups.set(yearMonth, [])
|
|
groups.get(yearMonth).push(item)
|
|
})
|
|
return Array.from(groups.entries()).map(([yearMonth, items]) => ({
|
|
yearMonth,
|
|
items: items.sort((a, b) => new Date(a.datetime) - new Date(b.datetime))
|
|
})).sort((a, b) => new Date(a.items[0].datetime) - new Date(b.items[0].datetime))
|
|
})
|
|
|
|
const getFollowUpList = async (isRefresh = false) => {
|
|
if (followUpLoading.value) return
|
|
followUpLoading.value = true
|
|
try {
|
|
const currentPage = isRefresh ? 1 : page.value
|
|
const res = await api.followUpList({ page: currentPage, pageSize: followUpPageSize.value })
|
|
if (res.code === 200) {
|
|
const newData = res.data.list || []
|
|
if (isRefresh) {
|
|
followUpList.value = newData
|
|
page.value = 1
|
|
} else {
|
|
followUpList.value = [...followUpList.value, ...newData]
|
|
}
|
|
followUpHasMore.value = newData.length >= followUpPageSize.value
|
|
if (!isRefresh) page.value++
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: '获取数据失败', icon: 'error' })
|
|
} finally {
|
|
followUpLoading.value = false
|
|
followUpRefreshing.value = false
|
|
}
|
|
}
|
|
|
|
const onFollowUpRefresh = async () => {
|
|
followUpRefreshing.value = true
|
|
await getFollowUpList(true)
|
|
uni.showToast({ title: '刷新成功', icon: 'none' })
|
|
}
|
|
const onFollowUpLoadMore = async () => {
|
|
if (!followUpHasMore.value || followUpLoading.value) return
|
|
await getFollowUpList(false)
|
|
}
|
|
const goBack = () => uni.navigateBack()
|
|
const showAddMenuFlag = ref(false)
|
|
const showAddMenu = () => { showAddMenuFlag.value = true }
|
|
const hideAddMenu = () => { showAddMenuFlag.value = false }
|
|
const addFollowUpPlan = () => { showAddMenuFlag.value = false; uni.navigateTo({ url: '/pages_app/visit/visit?from=visitPlan' }) }
|
|
const addSchedule = () => { showAddMenuFlag.value = false; uni.navigateTo({ url: '/pages_app/schedule/schedule' }) }
|
|
const goFollowDetail = (raw) => { if (!raw) return; navTo({ url: `/pages_app/followDetail/followDetail?followUpUuid=${encodeURIComponent(raw.uuid || '')}&patient_name=${raw.patientname}` }) }
|
|
|
|
onShow(() => {
|
|
followUpList.value = []
|
|
page.value = 1
|
|
followUpHasMore.value = true
|
|
followUpLoading.value = false
|
|
followUpRefreshing.value = false
|
|
getFollowUpList(true)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.save-btn {
|
|
font-size: 32rpx;
|
|
color: #8b2316;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.content { background-color: #f5f5f5; height: 100vh; overflow-y: hidden; }
|
|
.linebox{ margin:0 20rpx; }
|
|
.plan{ position: fixed; top: 180rpx; left: 0; right: 0; bottom:0rpx; }
|
|
.plan-scroll { height: 100%; }
|
|
.plan-list{ padding-bottom: 20rpx; }
|
|
.plan-group{ background:#f5f5f5; }
|
|
.group-header{ text-align: center; background:#e4e4e4; color:#333; font-size: 30rpx; padding: 20rpx 30rpx; }
|
|
.plan-card{ display:flex; align-items:center; background:#fff; padding: 26rpx 30rpx; border-bottom:1rpx solid #f0f0f0; }
|
|
.left-rail{ display:flex; align-items:center; color:#8B2316; }
|
|
.left-rail .day{ font-size: 36rpx; margin-right: 12rpx; }
|
|
.right-content{ flex:1; display:flex; align-items:center; justify-content:space-between; }
|
|
.right-content .note{ font-size: 30rpx; color:#333; }
|
|
.right-content .name{ margin-top: 30rpx; font-size: 28rpx; color:#8B2316; }
|
|
.load-more { display:flex; align-items:center; justify-content:center; padding:30rpx; color:#999; }
|
|
.load-more .load-text { margin-left:10rpx; font-size:28rpx; }
|
|
.no-more { display:flex; align-items:center; justify-content:center; padding:30rpx; }
|
|
.no-more .no-more-text{ font-size:28rpx; color:#999; }
|
|
.floating-add-btn { position: fixed; bottom: 140rpx; 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); }
|
|
.floating-add-btn .btn-text{ font-size:20rpx; color:#fff; 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:#fff; 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; }
|
|
.menu-item:last-child{ border-bottom:none; }
|
|
.menu-text{ font-size:32rpx; color:#333; margin-left:20rpx; }
|
|
.menu-divider{ height:1rpx; background:#f0f0f0; margin:0 40rpx; }
|
|
</style>
|
|
|