453 lines
12 KiB
Vue
453 lines
12 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<view class="switcher">
|
|
<view
|
|
v-for="item in recordTypes"
|
|
:key="item.value"
|
|
class="switch-item"
|
|
:class="{ active: currentType === item.value }"
|
|
@click="switchType(item.value)"
|
|
>
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="list.length" class="list">
|
|
<view v-for="item in list" :key="item._id" class="record-card">
|
|
<view class="record-header">
|
|
<view class="record-title">{{ item.projectName || '未命名权益项目' }}</view>
|
|
<view v-if="currentType === 'treatment'" class="status" :class="item.statusClass">
|
|
{{ item.statusLabel }}
|
|
</view>
|
|
<view v-else class="status status-blue">已治疗</view>
|
|
</view>
|
|
|
|
<template v-if="currentType === 'treatment'">
|
|
<view class="summary-row">
|
|
<view class="summary-item">
|
|
<text class="summary-label">总数</text>
|
|
<text class="summary-value">{{ item.usageCount }}</text>
|
|
</view>
|
|
<view class="summary-item highlight">
|
|
<text class="summary-label">剩余数</text>
|
|
<text class="summary-value">{{ item.restUsageCount }}</text>
|
|
</view>
|
|
<view class="summary-item">
|
|
<text class="summary-label">有效期</text>
|
|
<text class="summary-value">{{ item.validTimeText }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">购买日期</text>
|
|
<text class="detail-value">{{ item.purchaseDate }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">治疗科室</text>
|
|
<text class="detail-value">{{ item.treatmentDeptName || '--' }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">录单人</text>
|
|
<text class="detail-value"><WwUser :openid="item.creator || item.billdCreator || item.billDoctorId" :fallback="item.creatorName || item.billdCreatorName || '--'" /></text>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<view class="detail-row">
|
|
<text class="detail-label">治疗日期</text>
|
|
<text class="detail-value">{{ item.treatmentDate }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">治疗数</text>
|
|
<text class="detail-value strong">{{ item.deductUsageCount }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">治疗部位</text>
|
|
<text class="detail-value">{{ item.treatmentArea || '--' }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">治疗科室</text>
|
|
<text class="detail-value">{{ item.treatmentDeptName || '--' }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">治疗医生</text>
|
|
<text class="detail-value"><WwUser :openid="item.treatmentDoctorUserId || item.doctorUserId || item.doctorId || item.executorUserId" :fallback="item.doctorName || item.treatmentDoctorName || '--'" /></text>
|
|
</view>
|
|
<view v-if="item.treatmentRemark" class="remark">{{ item.treatmentRemark }}</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="loading" class="state">加载中...</view>
|
|
<view v-else class="state">暂无{{ currentType === 'treatment' ? '权益记录' : '治疗明细' }}</view>
|
|
|
|
<uni-load-more
|
|
v-if="list.length"
|
|
:status="loadMoreStatus"
|
|
:contentText="loadMoreText"
|
|
@clickLoadMore="loadMore"
|
|
/>
|
|
|
|
<view
|
|
v-if="canBenefitEntry"
|
|
class="fab"
|
|
:style="{ bottom: `${floatingBottom}px` }"
|
|
@click="goToBenefitEntry"
|
|
>
|
|
<uni-icons type="plusempty" size="24" color="#fff" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import dayjs from 'dayjs';
|
|
import { storeToRefs } from 'pinia';
|
|
import api from '@/utils/api';
|
|
import useAccountStore from '@/store/account';
|
|
import { toast } from '@/utils/widget';
|
|
import WwUser from '@/components/ww-user/index.vue';
|
|
|
|
const props = defineProps({
|
|
data: { type: Object, default: () => ({}) },
|
|
archiveId: { type: String, default: '' },
|
|
floatingBottom: { type: Number, default: 16 },
|
|
});
|
|
|
|
const recordTypes = [
|
|
{ label: '权益记录', value: 'treatment' },
|
|
{ label: '治疗明细', value: 'deduct' },
|
|
];
|
|
const currentType = ref('treatment');
|
|
const list = ref([]);
|
|
const page = ref(1);
|
|
const pageSize = 10;
|
|
const total = ref(0);
|
|
const loading = ref(false);
|
|
|
|
const accountStore = useAccountStore();
|
|
const { account, doctorInfo } = storeToRefs(accountStore);
|
|
const { getDoctorInfo } = accountStore;
|
|
const canBenefitEntry = computed(() => doctorInfo.value?.benefitEntryEnabled === true);
|
|
|
|
const loadMoreStatus = computed(() => {
|
|
if (loading.value) return 'loading';
|
|
return list.value.length < total.value ? 'more' : 'no-more';
|
|
});
|
|
const loadMoreText = {
|
|
contentdown: '点击加载更多',
|
|
contentrefresh: '加载中...',
|
|
contentnomore: '没有更多了',
|
|
};
|
|
|
|
function getCorpId() {
|
|
const team = uni.getStorageSync('ykt_case_current_team') || {};
|
|
return String(team.corpId || doctorInfo.value?.corpId || account.value?.corpId || '');
|
|
}
|
|
|
|
async function ensureDoctor() {
|
|
if (doctorInfo.value || !account.value?.openid) return;
|
|
await getDoctorInfo();
|
|
}
|
|
|
|
function formatDate(value) {
|
|
if (!value) return '--';
|
|
const date = dayjs(value);
|
|
return date.isValid() ? date.format('YYYY-MM-DD') : '--';
|
|
}
|
|
|
|
function mapTreatment(row) {
|
|
const expired = row.validTime && dayjs(row.validTime).isBefore(dayjs(), 'day');
|
|
return {
|
|
...row,
|
|
_id: String(row._id || row.id || `${row.projectId}_${row.billTime}`),
|
|
usageCount: row.usageCount ?? 0,
|
|
restUsageCount: row.restUsageCount ?? 0,
|
|
validTimeText: !row.validTime ? '无限期' : `${formatDate(row.validTime)}${expired ? '（已过期）' : ''}`,
|
|
purchaseDate: formatDate(row.billTime || row.createTreatementTime),
|
|
statusLabel: expired ? '已过期' : row.restUsageCount > 0 ? '可使用' : '已用完',
|
|
statusClass: expired ? 'status-red' : row.restUsageCount > 0 ? 'status-green' : 'status-gray',
|
|
creatorName: row.creatorName || row.billdCreatorName || '',
|
|
};
|
|
}
|
|
|
|
function mapDeduct(row) {
|
|
return {
|
|
...row,
|
|
_id: String(row._id || row.id || `${row.projectId}_${row.treatmentTime}`),
|
|
treatmentDate: formatDate(row.treatmentTime || row.createTreatementTime),
|
|
deductUsageCount: row.deductUsageCount ?? 0,
|
|
doctorName: row.doctorName || row.treatmentDoctorName || '',
|
|
};
|
|
}
|
|
|
|
async function fetchList(reset = false) {
|
|
if (!props.archiveId || loading.value) return;
|
|
if (reset) {
|
|
page.value = 1;
|
|
total.value = 0;
|
|
list.value = [];
|
|
}
|
|
|
|
await ensureDoctor();
|
|
const corpId = getCorpId();
|
|
if (!corpId) return;
|
|
|
|
loading.value = true;
|
|
try {
|
|
const params = {
|
|
corpId,
|
|
customerId: String(props.archiveId),
|
|
page: page.value,
|
|
pageSize,
|
|
};
|
|
const res = currentType.value === 'treatment'
|
|
? await api('getTreatmentRecord', params, false)
|
|
: await api('getDeductRecord', { ...params, deductStatus: ['deducted'] }, false);
|
|
if (!res?.success) {
|
|
toast(res?.message || '获取权益数据失败');
|
|
return;
|
|
}
|
|
const payload = res?.data && typeof res.data === 'object' ? res.data : res;
|
|
const rows = Array.isArray(res?.list)
|
|
? res.list
|
|
: Array.isArray(payload?.list)
|
|
? payload.list
|
|
: Array.isArray(payload?.data)
|
|
? payload.data
|
|
: Array.isArray(payload)
|
|
? payload
|
|
: [];
|
|
total.value = Number(res?.total ?? payload?.total ?? rows.length);
|
|
const mapped = rows.map(currentType.value === 'treatment' ? mapTreatment : mapDeduct);
|
|
list.value = page.value === 1 ? mapped : [...list.value, ...mapped];
|
|
page.value += 1;
|
|
} catch (error) {
|
|
toast('获取权益数据失败');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function switchType(type) {
|
|
if (currentType.value === type) return;
|
|
currentType.value = type;
|
|
fetchList(true);
|
|
}
|
|
|
|
function loadMore() {
|
|
if (list.value.length < total.value) fetchList();
|
|
}
|
|
|
|
function goToBenefitEntry() {
|
|
if (!canBenefitEntry.value || !props.archiveId) return;
|
|
const team = uni.getStorageSync('ykt_case_current_team') || {};
|
|
const rawGroupId = String(props.data?.chatGroupId || props.data?.groupId || '');
|
|
const groupId = rawGroupId.startsWith('GROUP') ? rawGroupId.slice(5) : rawGroupId;
|
|
const teamId = String(team.teamId || team._id || team.id || '');
|
|
const teamName = String(team.name || team.teamName || '');
|
|
const corpId = getCorpId();
|
|
const patientName = String(props.data?.name || '');
|
|
const query = [
|
|
`groupId=${encodeURIComponent(groupId)}`,
|
|
`patientId=${encodeURIComponent(props.archiveId)}`,
|
|
`patientName=${encodeURIComponent(patientName)}`,
|
|
`teamId=${encodeURIComponent(teamId)}`,
|
|
`teamName=${encodeURIComponent(teamName)}`,
|
|
`corpId=${encodeURIComponent(corpId)}`,
|
|
].join('&');
|
|
uni.navigateTo({ url: `/pages/message/benefit-entry?${query}` });
|
|
}
|
|
|
|
onMounted(() => fetchList(true));
|
|
|
|
watch(() => props.archiveId, (value, oldValue) => {
|
|
if (value && value !== oldValue) fetchList(true);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wrap {
|
|
padding: 20rpx 28rpx 180rpx;
|
|
}
|
|
|
|
.switcher {
|
|
display: flex;
|
|
padding: 6rpx;
|
|
background: #eef4ff;
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.switch-item {
|
|
flex: 1;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
text-align: center;
|
|
color: #5d6878;
|
|
font-size: 26rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.switch-item.active {
|
|
color: #0877f1;
|
|
background: #fff;
|
|
font-weight: 600;
|
|
box-shadow: 0 4rpx 12rpx rgba(8, 119, 241, 0.1);
|
|
}
|
|
|
|
.list {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.record-card {
|
|
margin-bottom: 20rpx;
|
|
padding: 24rpx;
|
|
background: #fff;
|
|
border-radius: 18rpx;
|
|
box-shadow: 0 10rpx 26rpx rgba(31, 41, 55, 0.06);
|
|
}
|
|
|
|
.record-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 2rpx solid #f1f3f5;
|
|
}
|
|
|
|
.record-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: #1f2937;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.status {
|
|
flex-shrink: 0;
|
|
padding: 8rpx 14rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.status-green {
|
|
color: #16834b;
|
|
background: #e8f8ef;
|
|
}
|
|
|
|
.status-red {
|
|
color: #d14343;
|
|
background: #fff0f0;
|
|
}
|
|
|
|
.status-gray {
|
|
color: #6b7280;
|
|
background: #f1f3f5;
|
|
}
|
|
|
|
.status-blue {
|
|
color: #0877f1;
|
|
background: #eaf3ff;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
margin: 20rpx 0;
|
|
padding: 18rpx 0;
|
|
background: #f8fafc;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.summary-item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: center;
|
|
border-right: 2rpx solid #e7ebf0;
|
|
}
|
|
|
|
.summary-item:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.summary-label,
|
|
.summary-value {
|
|
display: block;
|
|
}
|
|
|
|
.summary-label {
|
|
color: #8a94a3;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.summary-value {
|
|
margin-top: 8rpx;
|
|
color: #27364a;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.summary-item.highlight .summary-value {
|
|
color: #0877f1;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
padding-top: 16rpx;
|
|
font-size: 25rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.detail-label {
|
|
width: 136rpx;
|
|
flex-shrink: 0;
|
|
color: #8a94a3;
|
|
}
|
|
|
|
.detail-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: #3b4654;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detail-value.strong {
|
|
color: #0877f1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.remark {
|
|
margin-top: 18rpx;
|
|
padding: 16rpx;
|
|
color: #687385;
|
|
background: #f8fafc;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.state {
|
|
padding: 240rpx 0;
|
|
color: #9aa0a6;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.fab {
|
|
position: fixed;
|
|
right: 32rpx;
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: 52rpx;
|
|
background: #0877f1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 20rpx 36rpx rgba(8, 119, 241, 0.3);
|
|
z-index: 1000;
|
|
}
|
|
</style>
|