|
|
<template>
|
|
|
<view class="container">
|
|
|
<view class="user-bar card">
|
|
|
<view class="user-info">
|
|
|
<view class="user-avatar">👤</view>
|
|
|
<view>
|
|
|
<view class="user-name">{{ patientName }}，您好</view>
|
|
|
<view class="user-desc">欢迎使用医技预约系统</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="logout-btn" @tap="handleLogout">退出</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="tab-bar">
|
|
|
<view class="tab-item" :class="{ active: currentTab === 0 }" @tap="switchTab(0)">待预约</view>
|
|
|
<view class="tab-item" :class="{ active: currentTab === 1 }" @tap="switchTab(1)">已预约</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="list.length === 0" class="empty-state">
|
|
|
<view class="empty-icon">📋</view>
|
|
|
<view>{{ currentTab === 0 ? '暂无待预约的检查项目' : '暂无已预约的检查项目' }}</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-for="item in list" :key="item.id" class="card list-card" @tap="goDetail(item)">
|
|
|
<view class="card-header">
|
|
|
<view class="item-name">{{ item.examination_item_name }}</view>
|
|
|
<view class="status-tag" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
|
|
|
</view>
|
|
|
<view class="card-info">
|
|
|
<view class="info-row"><text class="info-label">执行科室</text><text class="info-value">{{ item.examination_department_name || '-' }}</text></view>
|
|
|
<view class="info-row"><text class="info-label">申请科室</text><text class="info-value">{{ item.apply_department_name || '-' }}</text></view>
|
|
|
<view class="info-row"><text class="info-label">申请时间</text><text class="info-value">{{ formatTime(item.apply_time) }}</text></view>
|
|
|
</view>
|
|
|
<view v-if="item.appointment_info" class="appointment-info">
|
|
|
<view class="info-row"><text class="info-label">预约时间</text><text class="info-value highlight">{{ formatTime(item.appointment_info.appointment_time) }}</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getApplicationList } from '../../services/application'
|
|
|
import { useUserStore } from '../../store/user'
|
|
|
import { formatTime, getStatusText, getStatusClass } from '../../utils/format'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return { currentTab: 0, list: [], loading: false }
|
|
|
},
|
|
|
computed: {
|
|
|
patientName() { return useUserStore().patientName }
|
|
|
},
|
|
|
onShow() { this.loadData() },
|
|
|
onPullDownRefresh() { this.loadData().finally(() => uni.stopPullDownRefresh()) },
|
|
|
methods: {
|
|
|
formatTime, getStatusText, getStatusClass,
|
|
|
switchTab(idx) { this.currentTab = idx; this.loadData() },
|
|
|
async loadData() {
|
|
|
if (this.loading) return
|
|
|
this.loading = true
|
|
|
try {
|
|
|
const res = await getApplicationList({ status: this.currentTab === 0 ? 0 : 1 })
|
|
|
this.list = res.data.list || []
|
|
|
} catch (e) { this.list = [] }
|
|
|
this.loading = false
|
|
|
},
|
|
|
goDetail(item) {
|
|
|
uni.navigateTo({ url: `/pages/application/detail?id=${item.id}` })
|
|
|
},
|
|
|
handleLogout() {
|
|
|
uni.showModal({ title: '提示', content: '确定要退出登录吗？', success: (res) => {
|
|
|
if (res.confirm) { useUserStore().logout() }
|
|
|
}})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.user-bar { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; }
|
|
|
.user-info { display: flex; align-items: center; }
|
|
|
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: #E8F4FD; display: flex; align-items: center; justify-content: center; font-size: 40rpx; margin-right: 20rpx; }
|
|
|
.user-name { font-size: 32rpx; font-weight: 600; color: #333; }
|
|
|
.user-desc { font-size: 24rpx; color: #999; margin-top: 4rpx; }
|
|
|
.logout-btn { font-size: 26rpx; color: #999; padding: 12rpx 24rpx; border: 2rpx solid #E8E8E8; border-radius: 8rpx; }
|
|
|
.tab-bar { display: flex; background: #FFF; border-radius: 16rpx; padding: 8rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
.tab-item { flex: 1; text-align: center; padding: 20rpx 0; font-size: 30rpx; color: #666; border-radius: 12rpx; transition: all 0.2s; }
|
|
|
.tab-item.active { background: #2B7FD2; color: #FFF; font-weight: 600; }
|
|
|
.list-card { padding: 30rpx; }
|
|
|
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
|
|
|
.item-name { font-size: 32rpx; font-weight: 600; color: #333; }
|
|
|
.card-info { border-top: 2rpx solid #F5F5F5; padding-top: 16rpx; }
|
|
|
.info-row { display: flex; justify-content: space-between; padding: 8rpx 0; font-size: 26rpx; }
|
|
|
.info-label { color: #999; }
|
|
|
.info-value { color: #333; }
|
|
|
.info-value.highlight { color: #2B7FD2; font-weight: 500; }
|
|
|
.appointment-info { border-top: 2rpx solid #F5F5F5; margin-top: 16rpx; padding-top: 16rpx; }
|
|
|
</style>
|