573 lines
15 KiB
Vue
573 lines
15 KiB
Vue
<template>
|
|
<view class="detail-page">
|
|
<scroll-view class="detail-scroll" scroll-y :scroll-with-animation="true">
|
|
<view v-if="loading" class="loading-state">
|
|
<TnLoading show :animation="true" mode="flower" color="#F97316" :size="80" />
|
|
</view>
|
|
|
|
<template v-else-if="record">
|
|
<view class="detail-container">
|
|
<!-- 类型头部 -->
|
|
<view class="type-header">
|
|
<view class="type-icon-wrap" :style="{ backgroundColor: typeStyle.bg }">
|
|
<TnIcon :name="typeStyle.icon" :size="52" :color="typeStyle.color" />
|
|
</view>
|
|
<view class="type-info">
|
|
<text class="type-label">{{ typeLabel }}</text>
|
|
<text class="type-date">{{ formatFullDate(record.date) }}</text>
|
|
</view>
|
|
<TnTag :type="typeTagType" size="sm" shape="circleRight">{{ typeLabel }}</TnTag>
|
|
</view>
|
|
|
|
<!-- 宠物信息 -->
|
|
<view class="info-section">
|
|
<text class="section-title">关联宠物</text>
|
|
<view class="info-card">
|
|
<view class="pet-info-row">
|
|
<view class="pet-avatar-wrap">
|
|
<TnAvatar :url="petDisplayAvatar" :icon="petDisplayAvatar ? '' : 'floral'"
|
|
:size="80" shape="circle" bg-color="#FFF7ED" />
|
|
</view>
|
|
<view class="pet-info-text">
|
|
<text class="pet-name">{{ petName || '未知宠物' }}</text>
|
|
<text class="pet-breed">{{ petBreed || '' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 记录详情 -->
|
|
<view class="info-section">
|
|
<text class="section-title">记录信息</text>
|
|
<view class="info-card">
|
|
<view v-if="record.title" class="info-row">
|
|
<text class="info-label">标题</text>
|
|
<text class="info-value">{{ record.title }}</text>
|
|
</view>
|
|
<view v-if="record.title" class="info-divider" />
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">日期</text>
|
|
<text class="info-value">{{ formatFullDate(record.date) }}</text>
|
|
</view>
|
|
<view v-if="record.nextDate" class="info-divider" />
|
|
|
|
<view v-if="record.nextDate" class="info-row">
|
|
<text class="info-label">下次提醒</text>
|
|
<text class="info-value next-date">{{ formatFullDate(record.nextDate) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 类型专属信息 -->
|
|
<view v-if="record.type === 'vaccine' && (record.vaccineName || record.batchNumber || record.brand)" class="info-section">
|
|
<text class="section-title">疫苗信息</text>
|
|
<view class="info-card">
|
|
<template v-if="record.vaccineName">
|
|
<view class="info-row">
|
|
<text class="info-label">疫苗名称</text>
|
|
<text class="info-value">{{ record.vaccineName }}</text>
|
|
</view>
|
|
<view class="info-divider" />
|
|
</template>
|
|
<template v-if="record.batchNumber">
|
|
<view class="info-row">
|
|
<text class="info-label">批号</text>
|
|
<text class="info-value">{{ record.batchNumber }}</text>
|
|
</view>
|
|
<view class="info-divider" />
|
|
</template>
|
|
<template v-if="record.brand">
|
|
<view class="info-row">
|
|
<text class="info-label">品牌</text>
|
|
<text class="info-value">{{ record.brand }}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="record.type === 'deworm' && (record.dewormType || record.brand)" class="info-section">
|
|
<text class="section-title">驱虫信息</text>
|
|
<view class="info-card">
|
|
<template v-if="record.dewormType">
|
|
<view class="info-row">
|
|
<text class="info-label">驱虫类型</text>
|
|
<text class="info-value">{{ getDewormLabel(record.dewormType) }}</text>
|
|
</view>
|
|
<view class="info-divider" />
|
|
</template>
|
|
<template v-if="record.brand">
|
|
<view class="info-row">
|
|
<text class="info-label">品牌</text>
|
|
<text class="info-value">{{ record.brand }}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="record.type === 'medical' && record.diagnosis" class="info-section">
|
|
<text class="section-title">就诊信息</text>
|
|
<view class="info-card">
|
|
<view class="info-row">
|
|
<text class="info-label">诊断</text>
|
|
<text class="info-value">{{ record.diagnosis }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 补充信息 -->
|
|
<view v-if="showExtraInfo" class="info-section">
|
|
<text class="section-title">补充信息</text>
|
|
<view class="info-card">
|
|
<template v-if="record.hospital">
|
|
<view class="info-row">
|
|
<text class="info-label">医院</text>
|
|
<text class="info-value">{{ record.hospital }}</text>
|
|
</view>
|
|
<view class="info-divider" />
|
|
</template>
|
|
<template v-if="record.doctor">
|
|
<view class="info-row">
|
|
<text class="info-label">医生</text>
|
|
<text class="info-value">{{ record.doctor }}</text>
|
|
</view>
|
|
<view class="info-divider" />
|
|
</template>
|
|
<template v-if="record.cost">
|
|
<view class="info-row">
|
|
<text class="info-label">费用</text>
|
|
<text class="info-value cost-value">¥{{ record.cost }}</text>
|
|
</view>
|
|
<view class="info-divider" />
|
|
</template>
|
|
<template v-if="record.description">
|
|
<view class="info-row desc-row">
|
|
<text class="info-label">描述</text>
|
|
<text class="info-value desc-text">{{ record.description }}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<view v-else class="empty-state">
|
|
<TnEmpty mode="data" :size="200" color="tn-gray-disabled" />
|
|
<text class="empty-text">记录不存在</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view v-if="record" class="bottom-bar" :style="{ paddingBottom: safeBottom + 'px' }">
|
|
<TnButton bg-color="#FEF2F2" text-color="#EF4444" shape="round" :bold="true"
|
|
width="45%" height="88" @click="handleDelete">
|
|
<TnIcon name="delete-fill" :size="28" color="#EF4444" />
|
|
<text class="btn-text">删除</text>
|
|
</TnButton>
|
|
<TnButton text-color="#FFFFFF" shape="round" :bold="true" :custom-style="primaryButtonStyle"
|
|
width="45%" height="88" @click="handleEdit">
|
|
<TnIcon name="edit-fill" :size="28" />
|
|
<text class="btn-text">编辑</text>
|
|
</TnButton>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'
|
|
import TnEmpty from '@/uni_modules/tuniaoui-vue3/components/empty/src/empty.vue'
|
|
import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
|
|
import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
|
|
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
|
|
import TnTag from '@/uni_modules/tuniaoui-vue3/components/tag/src/tag.vue'
|
|
|
|
interface HealthRecord {
|
|
_id: string
|
|
pet_id: string
|
|
type: string
|
|
title: string
|
|
date: number
|
|
nextDate: string
|
|
hospital: string
|
|
doctor: string
|
|
description: string
|
|
vaccineName: string
|
|
batchNumber: string
|
|
dewormType: string
|
|
brand: string
|
|
diagnosis: string
|
|
cost: number
|
|
}
|
|
|
|
const typeStyleMap: Record<string, { icon: string; color: string; bg: string }> = {
|
|
vaccine: { icon: 'safe-fill', color: '#3B82F6', bg: '#EFF6FF' },
|
|
deworm: { icon: 'notice-fill', color: '#8B5CF6', bg: '#F5F3FF' },
|
|
medical: { icon: 'write-feather', color: '#F97316', bg: '#FFF7ED' },
|
|
checkup: { icon: 'data-fill', color: '#14B8A6', bg: '#F0FDFA' },
|
|
other: { icon: 'inventory-fill', color: '#64748B', bg: '#F8FAFC' },
|
|
}
|
|
|
|
const typeLabelMap: Record<string, string> = {
|
|
vaccine: '疫苗', deworm: '驱虫', medical: '病历', checkup: '体检', other: '其他',
|
|
}
|
|
|
|
const typeTagTypeMap: Record<string, string> = {
|
|
vaccine: 'primary', deworm: 'info', medical: 'warning', checkup: 'success', other: '',
|
|
}
|
|
|
|
const dewormLabelMap: Record<string, string> = {
|
|
internal: '体内驱虫', external: '体外驱虫', both: '体内外同驱',
|
|
}
|
|
const primaryButtonStyle = {
|
|
background: 'linear-gradient(135deg, #F97316, #FB923C)',
|
|
}
|
|
|
|
const loading = ref(true)
|
|
const record = ref<HealthRecord | null>(null)
|
|
const recordId = ref('')
|
|
const petName = ref('')
|
|
const petBreed = ref('')
|
|
const petDisplayAvatar = ref('')
|
|
const safeBottom = ref(0)
|
|
const hasLoaded = ref(false)
|
|
|
|
const typeStyle = computed(() => typeStyleMap[record.value?.type || ''] || typeStyleMap.other)
|
|
const typeLabel = computed(() => typeLabelMap[record.value?.type || ''] || '')
|
|
const typeTagType = computed(() => (typeTagTypeMap[record.value?.type || ''] || 'info') as any)
|
|
|
|
const showExtraInfo = computed(() => {
|
|
if (!record.value) return false
|
|
return !!(record.value.hospital || record.value.doctor || record.value.cost || record.value.description)
|
|
})
|
|
|
|
onLoad((options: any) => {
|
|
if (options?.id) {
|
|
recordId.value = options.id
|
|
}
|
|
const sys = uni.getSystemInfoSync()
|
|
safeBottom.value = sys.safeAreaInsets?.bottom || 0
|
|
loadDetail()
|
|
})
|
|
|
|
onShow(() => {
|
|
if (hasLoaded.value && recordId.value) {
|
|
loadDetail(false)
|
|
}
|
|
})
|
|
|
|
function formatFullDate(dateVal: string | number) {
|
|
if (!dateVal) return ''
|
|
let ms: number
|
|
if (typeof dateVal === 'string') {
|
|
ms = Date.parse(dateVal)
|
|
} else if (typeof dateVal === 'number') {
|
|
ms = dateVal < 1e12 ? dateVal * 1000 : dateVal
|
|
} else {
|
|
return ''
|
|
}
|
|
if (Number.isNaN(ms)) return ''
|
|
const d = new Date(ms)
|
|
const y = d.getFullYear()
|
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
return `${y}年${m}月${day}日`
|
|
}
|
|
|
|
function getSpeciesLabel(species: string) {
|
|
const map: Record<string, string> = { dog: '狗狗', cat: '猫咪', bird: '鸟类', hamster: '仓鼠', rabbit: '兔子', fish: '鱼类' }
|
|
return map[species] || ''
|
|
}
|
|
|
|
function getDewormLabel(type: string) {
|
|
return dewormLabelMap[type] || type
|
|
}
|
|
|
|
async function loadDetail(showLoading = true) {
|
|
try {
|
|
if (showLoading) loading.value = true
|
|
const uid = uni.getStorageSync('uid')
|
|
if (!uid || !recordId.value) {
|
|
loading.value = false
|
|
return
|
|
}
|
|
const res = await uniCloud.callFunction({
|
|
name: 'recordManager',
|
|
data: { action: 'detail', uid, recordId: recordId.value },
|
|
})
|
|
if (res.result?.code === 0 && res.result.data) {
|
|
record.value = res.result.data as HealthRecord
|
|
loadPetInfo(record.value.pet_id)
|
|
} else {
|
|
loading.value = false
|
|
}
|
|
} catch (e) {
|
|
console.warn('加载记录详情失败', e)
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function loadPetInfo(petId: string) {
|
|
try {
|
|
const uid = uni.getStorageSync('uid')
|
|
const res = await uniCloud.callFunction({
|
|
name: 'petManager',
|
|
data: { action: 'detail', uid, petId },
|
|
})
|
|
if (res.result?.code === 0 && res.result.data) {
|
|
const pet = res.result.data
|
|
petName.value = pet.name || ''
|
|
if (pet.species) {
|
|
const speciesLabel = getSpeciesLabel(pet.species)
|
|
petBreed.value = speciesLabel ? `${speciesLabel}` : ''
|
|
if (pet.breed) petBreed.value += ` · ${pet.breed}`
|
|
} else if (pet.breed) {
|
|
petBreed.value = pet.breed
|
|
}
|
|
if (pet.avatarUrl?.startsWith('cloud://')) {
|
|
try {
|
|
const fileRes = await uniCloud.getTempFileURL({ fileList: [pet.avatarUrl] })
|
|
petDisplayAvatar.value = fileRes.fileList?.[0]?.tempFileURL || ''
|
|
} catch (e) { petDisplayAvatar.value = '' }
|
|
} else {
|
|
petDisplayAvatar.value = pet.avatarUrl || ''
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn('加载宠物信息失败', e)
|
|
} finally {
|
|
loading.value = false
|
|
hasLoaded.value = true
|
|
}
|
|
}
|
|
|
|
function handleEdit() {
|
|
uni.navigateTo({ url: `/pages/record/edit?id=${recordId.value}` })
|
|
}
|
|
|
|
function handleDelete() {
|
|
uni.showModal({
|
|
title: '确认删除',
|
|
content: '确定要删除这条记录吗？删除后不可恢复。',
|
|
confirmColor: '#EF4444',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
try {
|
|
const uid = uni.getStorageSync('uid')
|
|
const res2 = await uniCloud.callFunction({
|
|
name: 'recordManager',
|
|
data: { action: 'delete', uid, recordId: recordId.value },
|
|
})
|
|
if (res2.result?.code === 0) {
|
|
uni.showToast({ title: '已删除', icon: 'success' })
|
|
setTimeout(() => uni.navigateBack(), 1200)
|
|
} else {
|
|
uni.showToast({ title: '删除失败', icon: 'none' })
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: '删除失败', icon: 'none' })
|
|
}
|
|
}
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$primary: #F97316;
|
|
$primary-bg: #FFF7ED;
|
|
$text-dark: #1E293B;
|
|
$text-body: #475569;
|
|
$text-muted: #94A3B8;
|
|
$card-bg: #FFFFFF;
|
|
$shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
$radius-lg: 24rpx;
|
|
|
|
.detail-page {
|
|
height: 100vh;
|
|
background: #F8FAFC;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-scroll {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detail-container {
|
|
padding: 24rpx 28rpx 180rpx;
|
|
}
|
|
|
|
.loading-state {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 400rpx;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 200rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
margin-top: 20rpx;
|
|
font-size: 28rpx;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.type-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 20rpx 24rpx;
|
|
background: $card-bg;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow;
|
|
}
|
|
|
|
.type-icon-wrap {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.type-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6rpx;
|
|
min-width: 0;
|
|
}
|
|
|
|
.type-label {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
}
|
|
|
|
.type-date {
|
|
font-size: 24rpx;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.info-section {
|
|
margin-top: 28rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
margin-bottom: 14rpx;
|
|
padding-left: 4rpx;
|
|
}
|
|
|
|
.info-card {
|
|
background: $card-bg;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow;
|
|
padding: 0 28rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
gap: 12rpx;
|
|
min-height: 88rpx;
|
|
|
|
&.desc-row {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.info-divider {
|
|
height: 1rpx;
|
|
background: #F1F5F9;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
width: 128rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: $text-body;
|
|
text-align: right;
|
|
word-break: break-all;
|
|
|
|
&.next-date {
|
|
color: $primary;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.cost-value {
|
|
color: #EF4444;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
&.desc-text {
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
.pet-info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.pet-avatar-wrap {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pet-info-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
min-width: 0;
|
|
}
|
|
|
|
.pet-name {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
}
|
|
|
|
.pet-breed {
|
|
font-size: 24rpx;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.bottom-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24rpx;
|
|
padding: 16rpx 28rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.btn-text {
|
|
margin-left: 8rpx;
|
|
}
|
|
</style>
|