You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.4 KiB
Vue
85 lines
3.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="tab-bar">
|
|
<view class="tab-item" :class="{ active: currentTab === tab }" v-for="(t, tab) in tabs" :key="tab" @tap="switchTab(tab)">{{ t }}</view>
|
|
</view>
|
|
|
|
<view v-if="list.length === 0" class="empty-state">
|
|
<view class="empty-icon">📋</view>
|
|
<view>暂无预约记录</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 || item.examination_item_name }}</view>
|
|
<view class="status-tag" :class="getStatusClass(item.status !== undefined ? item.status : (item.appointment_status || 0))">
|
|
{{ getStatusText(item.status !== undefined ? item.status : (item.appointment_status || 0)) }}
|
|
</view>
|
|
</view>
|
|
<view class="info-row" v-if="item.appointment_time">
|
|
<text class="info-label">预约时间</text>
|
|
<text class="info-value highlight">{{ formatTime(item.appointment_time) }}</text>
|
|
</view>
|
|
<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">{{ formatTime(item.apply_time || item.created_at) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getApplicationList } from '../../services/application'
|
|
import { formatTime, getStatusText, getStatusClass } from '../../utils/format'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabs: ['全部', '待检查', '已完成', '已取消'],
|
|
currentTab: 0,
|
|
list: []
|
|
}
|
|
},
|
|
onShow() { this.loadData() },
|
|
onPullDownRefresh() { this.loadData().finally(() => uni.stopPullDownRefresh()) },
|
|
methods: {
|
|
formatTime, getStatusText, getStatusClass,
|
|
switchTab(idx) { this.currentTab = idx; this.loadData() },
|
|
async loadData() {
|
|
try {
|
|
// 全部 = 不传status, 然后过滤
|
|
const res = await getApplicationList({})
|
|
let all = res.data.list || []
|
|
// tab: 0全部, 1已预约(待检查), 2已完成, 4已取消
|
|
if (this.currentTab === 0) {
|
|
this.list = all
|
|
} else {
|
|
const statusMap = { 1: [1, 2], 2: [3], 3: [4] }
|
|
this.list = all.filter(i => (statusMap[this.currentTab] || []).includes(i.status))
|
|
}
|
|
} catch (e) { this.list = [] }
|
|
},
|
|
goDetail(item) {
|
|
uni.navigateTo({ url: `/pages/application/detail?id=${item.id}` })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.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: 18rpx 0; font-size: 28rpx; color: #666; border-radius: 12rpx; }
|
|
.tab-item.active { background: #2B7FD2; color: #FFF; font-weight: 600; }
|
|
.list-card { padding: 28rpx 30rpx; }
|
|
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; }
|
|
.item-name { font-size: 32rpx; font-weight: 600; color: #333; flex: 1; }
|
|
.info-row { display: flex; justify-content: space-between; padding: 6rpx 0; font-size: 26rpx; }
|
|
.info-label { color: #999; }
|
|
.info-value { color: #333; }
|
|
.highlight { color: #2B7FD2; font-weight: 500; }
|
|
</style>
|