fix
This commit is contained in:
SunCheng
@@ -1,20 +1,30 @@
|
||||
<template>
|
||||
<van-dialog
|
||||
<template>
|
||||
<PopupContainer
|
||||
v-model:show="show"
|
||||
title="新增交易分类"
|
||||
show-cancel-button
|
||||
show-confirm-button
|
||||
confirm-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="resetAddForm"
|
||||
>
|
||||
<van-field
|
||||
v-model="classifyName"
|
||||
placeholder="请输入新的交易分类"
|
||||
/>
|
||||
</van-dialog>
|
||||
<van-form ref="addFormRef">
|
||||
<van-field
|
||||
v-model="classifyName"
|
||||
name="name"
|
||||
label="分类名称"
|
||||
placeholder="请输入分类名称"
|
||||
:rules="[{ required: true, message: '请输入分类名称' }]"
|
||||
/>
|
||||
</van-form>
|
||||
</PopupContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import PopupContainer from './PopupContainer.vue'
|
||||
|
||||
const emit = defineEmits(['confirm'])
|
||||
|
||||
@@ -39,6 +49,11 @@ const handleConfirm = () => {
|
||||
classifyName.value = ''
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetAddForm = () => {
|
||||
classifyName.value = ''
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open
|
||||
|
||||
843
Web/src/components/Budget/BudgetCard.vue.bak
Normal file
843
Web/src/components/Budget/BudgetCard.vue.bak
Normal file
@@ -0,0 +1,843 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<!-- 普通预算卡片 -->
|
||||
<div
|
||||
v-if="!budget.noLimit"
|
||||
class="common-card budget-card"
|
||||
:class="{ 'cursor-default': budget.category === 2 }"
|
||||
@click="toggleExpand"
|
||||
>
|
||||
<div class="budget-content-wrapper">
|
||||
<!-- 折叠状态 -->
|
||||
<div
|
||||
v-if="!isExpanded"
|
||||
class="budget-collapsed"
|
||||
>
|
||||
<div class="collapsed-header">
|
||||
<div class="budget-info">
|
||||
<slot name="tag">
|
||||
<van-tag
|
||||
:type="budget.type === BudgetPeriodType.Year ? 'warning' : 'primary'"
|
||||
plain
|
||||
class="status-tag"
|
||||
>
|
||||
{{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
|
||||
<span
|
||||
v-if="budget.isMandatoryExpense"
|
||||
class="mandatory-mark"
|
||||
>📌</span>
|
||||
</van-tag>
|
||||
</slot>
|
||||
<h3 class="card-title">
|
||||
{{ budget.name }}
|
||||
</h3>
|
||||
<span
|
||||
v-if="budget.selectedCategories?.length"
|
||||
class="card-subtitle"
|
||||
>
|
||||
({{ budget.selectedCategories.join('、') }})
|
||||
</span>
|
||||
</div>
|
||||
<van-icon
|
||||
name="arrow-down"
|
||||
class="expand-icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="collapsed-footer">
|
||||
<div class="collapsed-item">
|
||||
<span class="compact-label">实际/目标</span>
|
||||
<span class="compact-value">
|
||||
<slot name="collapsed-amount">
|
||||
{{
|
||||
budget.current !== undefined && budget.limit !== undefined
|
||||
? `¥${budget.current?.toFixed(0) || 0} / ¥${budget.limit?.toFixed(0) || 0}`
|
||||
: '--'
|
||||
}}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="collapsed-item">
|
||||
<span class="compact-label">达成率</span>
|
||||
<span
|
||||
class="compact-value"
|
||||
:class="percentClass"
|
||||
>{{ percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展开状态 -->
|
||||
<div
|
||||
v-else
|
||||
class="budget-inner-card"
|
||||
>
|
||||
<div
|
||||
class="card-header"
|
||||
style="margin-bottom: 0"
|
||||
>
|
||||
<div class="budget-info">
|
||||
<slot name="tag">
|
||||
<van-tag
|
||||
:type="budget.type === BudgetPeriodType.Year ? 'warning' : 'primary'"
|
||||
plain
|
||||
class="status-tag"
|
||||
>
|
||||
{{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
|
||||
<span
|
||||
v-if="budget.isMandatoryExpense"
|
||||
class="mandatory-mark"
|
||||
>📌</span>
|
||||
</van-tag>
|
||||
</slot>
|
||||
<h3
|
||||
class="card-title"
|
||||
style="max-width: 120px"
|
||||
>
|
||||
{{ budget.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<slot name="actions">
|
||||
<van-button
|
||||
v-if="budget.description"
|
||||
:icon="showDescription ? 'info' : 'info-o'"
|
||||
size="small"
|
||||
:type="showDescription ? 'primary' : 'default'"
|
||||
plain
|
||||
@click.stop="showDescription = !showDescription"
|
||||
/>
|
||||
<van-button
|
||||
icon="orders-o"
|
||||
size="small"
|
||||
plain
|
||||
title="查询关联账单"
|
||||
@click.stop="handleQueryBills"
|
||||
/>
|
||||
<template v-if="budget.category !== 2">
|
||||
<van-button
|
||||
icon="edit"
|
||||
size="small"
|
||||
plain
|
||||
@click.stop="$emit('click', budget)"
|
||||
/>
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="budget-body">
|
||||
<div
|
||||
v-if="budget.selectedCategories?.length"
|
||||
class="category-tags"
|
||||
>
|
||||
<van-tag
|
||||
v-for="cat in budget.selectedCategories"
|
||||
:key="cat"
|
||||
size="mini"
|
||||
class="category-tag"
|
||||
plain
|
||||
round
|
||||
>
|
||||
{{ cat }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="amount-info">
|
||||
<slot name="amount-info" />
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<slot name="progress-info">
|
||||
<span class="period-type">{{ periodLabel }}{{ budget.category === 0 ? '使用' : '达成' }}</span>
|
||||
<van-progress
|
||||
:percentage="Math.min(percentage, 100)"
|
||||
stroke-width="8"
|
||||
:color="progressColor"
|
||||
:show-pivot="false"
|
||||
/>
|
||||
<span
|
||||
class="percent"
|
||||
:class="percentClass"
|
||||
>{{ percentage }}%</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="progress-section time-progress">
|
||||
<span class="period-type">时间进度</span>
|
||||
<van-progress
|
||||
:percentage="timePercentage"
|
||||
stroke-width="4"
|
||||
color="var(--van-gray-6)"
|
||||
:show-pivot="false"
|
||||
/>
|
||||
<span class="percent">{{ timePercentage }}%</span>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
name="collapse"
|
||||
@enter="onEnter"
|
||||
@after-enter="onAfterEnter"
|
||||
@leave="onLeave"
|
||||
@after-leave="onAfterLeave"
|
||||
>
|
||||
<div
|
||||
v-if="budget.description && showDescription"
|
||||
class="budget-collapse-wrapper"
|
||||
>
|
||||
<div class="budget-description">
|
||||
<div
|
||||
class="description-content rich-html-content"
|
||||
v-html="budget.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联账单列表弹窗 -->
|
||||
<PopupContainer
|
||||
v-model="showBillListModal"
|
||||
title="关联账单列表"
|
||||
height="75%"
|
||||
>
|
||||
<TransactionList
|
||||
:transactions="billList"
|
||||
:loading="billLoading"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
:show-checkbox="false"
|
||||
@click="handleBillClick"
|
||||
@delete="handleBillDelete"
|
||||
/>
|
||||
</PopupContainer>
|
||||
</div>
|
||||
|
||||
<!-- 不记额预算卡片 -->
|
||||
<div
|
||||
v-else
|
||||
class="common-card budget-card no-limit-card"
|
||||
:class="{ 'cursor-default': budget.category === 2 }"
|
||||
@click="toggleExpand"
|
||||
>
|
||||
<div class="budget-content-wrapper">
|
||||
<!-- 折叠状态 -->
|
||||
<div
|
||||
v-if="!isExpanded"
|
||||
class="budget-collapsed"
|
||||
>
|
||||
<div class="collapsed-header">
|
||||
<div class="budget-info">
|
||||
<slot name="tag">
|
||||
<van-tag
|
||||
type="success"
|
||||
plain
|
||||
class="status-tag"
|
||||
>
|
||||
{{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
|
||||
</van-tag>
|
||||
</slot>
|
||||
<h3 class="card-title">
|
||||
{{ budget.name }}
|
||||
</h3>
|
||||
<span
|
||||
v-if="budget.selectedCategories?.length"
|
||||
class="card-subtitle"
|
||||
>
|
||||
({{ budget.selectedCategories.join('、') }})
|
||||
</span>
|
||||
</div>
|
||||
<van-icon
|
||||
name="arrow-down"
|
||||
class="expand-icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="collapsed-footer no-limit-footer">
|
||||
<div class="collapsed-item">
|
||||
<span class="compact-label">实际</span>
|
||||
<span class="compact-value">
|
||||
<slot name="collapsed-amount">
|
||||
{{ budget.current !== undefined ? `¥${budget.current?.toFixed(0) || 0}` : '--' }}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展开状态 -->
|
||||
<div
|
||||
v-else
|
||||
class="budget-inner-card"
|
||||
>
|
||||
<div
|
||||
class="card-header"
|
||||
style="margin-bottom: 0"
|
||||
>
|
||||
<div class="budget-info">
|
||||
<slot name="tag">
|
||||
<van-tag
|
||||
type="success"
|
||||
plain
|
||||
class="status-tag"
|
||||
>
|
||||
{{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
|
||||
</van-tag>
|
||||
</slot>
|
||||
<h3
|
||||
class="card-title"
|
||||
style="max-width: 120px"
|
||||
>
|
||||
{{ budget.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<slot name="actions">
|
||||
<van-button
|
||||
v-if="budget.description"
|
||||
:icon="showDescription ? 'info' : 'info-o'"
|
||||
size="small"
|
||||
:type="showDescription ? 'primary' : 'default'"
|
||||
plain
|
||||
@click.stop="showDescription = !showDescription"
|
||||
/>
|
||||
<van-button
|
||||
icon="orders-o"
|
||||
size="small"
|
||||
plain
|
||||
title="查询关联账单"
|
||||
@click.stop="handleQueryBills"
|
||||
/>
|
||||
<template v-if="budget.category !== 2">
|
||||
<van-button
|
||||
icon="edit"
|
||||
size="small"
|
||||
plain
|
||||
@click.stop="$emit('click', budget)"
|
||||
/>
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="budget-body">
|
||||
<div
|
||||
v-if="budget.selectedCategories?.length"
|
||||
class="category-tags"
|
||||
>
|
||||
<van-tag
|
||||
v-for="cat in budget.selectedCategories"
|
||||
:key="cat"
|
||||
size="mini"
|
||||
class="category-tag"
|
||||
plain
|
||||
round
|
||||
>
|
||||
{{ cat }}
|
||||
</van-tag>
|
||||
</div>
|
||||
|
||||
<div class="no-limit-amount-info">
|
||||
<div class="amount-item">
|
||||
<span>
|
||||
<span class="label">实际</span>
|
||||
<span
|
||||
class="value"
|
||||
style="margin-left: 12px"
|
||||
>¥{{ budget.current?.toFixed(0) || 0 }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-limit-notice">
|
||||
<span>
|
||||
<van-icon
|
||||
name="info-o"
|
||||
style="margin-right: 4px"
|
||||
/>
|
||||
不记额预算 - 直接计入存款明细
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
name="collapse"
|
||||
@enter="onEnter"
|
||||
@after-enter="onAfterEnter"
|
||||
@leave="onLeave"
|
||||
@after-leave="onAfterLeave"
|
||||
>
|
||||
<div
|
||||
v-if="budget.description && showDescription"
|
||||
class="budget-collapse-wrapper"
|
||||
>
|
||||
<div class="budget-description">
|
||||
<div
|
||||
class="description-content rich-html-content"
|
||||
v-html="budget.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联账单列表弹窗 -->
|
||||
<PopupContainer
|
||||
v-model="showBillListModal"
|
||||
title="关联账单列表"
|
||||
height="75%"
|
||||
>
|
||||
<TransactionList
|
||||
:transactions="billList"
|
||||
:loading="billLoading"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
:show-checkbox="false"
|
||||
@click="handleBillClick"
|
||||
@delete="handleBillDelete"
|
||||
/>
|
||||
</PopupContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { BudgetPeriodType } from '@/constants/enums'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import { getTransactionList } from '@/api/transactionRecord'
|
||||
|
||||
const props = defineProps({
|
||||
budget: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
progressColor: {
|
||||
type: String,
|
||||
default: 'var(--van-primary-color)'
|
||||
},
|
||||
percentClass: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
periodLabel: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const isExpanded = ref(props.budget.category === 2)
|
||||
const showDescription = ref(false)
|
||||
const showBillListModal = ref(false)
|
||||
const billList = ref([])
|
||||
const billLoading = ref(false)
|
||||
|
||||
const toggleExpand = () => {
|
||||
// 存款类型（category === 2）强制保持展开状态，不可折叠
|
||||
if (props.budget.category === 2) {
|
||||
return
|
||||
}
|
||||
isExpanded.value = !isExpanded.value
|
||||
}
|
||||
|
||||
const handleQueryBills = async () => {
|
||||
showBillListModal.value = true
|
||||
billLoading.value = true
|
||||
|
||||
try {
|
||||
const classify = props.budget.selectedCategories
|
||||
? props.budget.selectedCategories.join(',')
|
||||
: ''
|
||||
|
||||
if (classify === '') {
|
||||
// 如果没有选中任何分类，则不查询
|
||||
billList.value = []
|
||||
billLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
const response = await getTransactionList({
|
||||
page: 1,
|
||||
pageSize: 100,
|
||||
startDate: props.budget.periodStart,
|
||||
endDate: props.budget.periodEnd,
|
||||
classify: classify,
|
||||
type: props.budget.category,
|
||||
sortByAmount: true
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
billList.value = response.data || []
|
||||
} else {
|
||||
billList.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查询账单列表失败:', error)
|
||||
billList.value = []
|
||||
} finally {
|
||||
billLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const percentage = computed(() => {
|
||||
if (!props.budget.limit) {
|
||||
return 0
|
||||
}
|
||||
return Math.round((props.budget.current / props.budget.limit) * 100)
|
||||
})
|
||||
|
||||
const timePercentage = computed(() => {
|
||||
if (!props.budget.periodStart || !props.budget.periodEnd) {
|
||||
return 0
|
||||
}
|
||||
const start = new Date(props.budget.periodStart).getTime()
|
||||
const end = new Date(props.budget.periodEnd).getTime()
|
||||
const now = new Date().getTime()
|
||||
|
||||
if (now <= start) {
|
||||
return 0
|
||||
}
|
||||
if (now >= end) {
|
||||
return 100
|
||||
}
|
||||
|
||||
return Math.round(((now - start) / (end - start)) * 100)
|
||||
})
|
||||
|
||||
const onEnter = (el) => {
|
||||
el.style.height = '0'
|
||||
el.style.overflow = 'hidden'
|
||||
// Force reflow
|
||||
el.offsetHeight
|
||||
el.style.transition = 'height 0.3s ease-in-out'
|
||||
el.style.height = `${el.scrollHeight}px`
|
||||
}
|
||||
|
||||
const onAfterEnter = (el) => {
|
||||
el.style.height = ''
|
||||
el.style.overflow = ''
|
||||
el.style.transition = ''
|
||||
}
|
||||
|
||||
const onLeave = (el) => {
|
||||
el.style.height = `${el.scrollHeight}px`
|
||||
el.style.overflow = 'hidden'
|
||||
// Force reflow
|
||||
el.offsetHeight
|
||||
el.style.transition = 'height 0.3s ease-in-out'
|
||||
el.style.height = '0'
|
||||
}
|
||||
|
||||
const onAfterLeave = (el) => {
|
||||
el.style.height = ''
|
||||
el.style.overflow = ''
|
||||
el.style.transition = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.budget-card {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 8px 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.budget-card.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.no-limit-card {
|
||||
border-left: 3px solid var(--van-success-color);
|
||||
}
|
||||
|
||||
.collapsed-footer.no-limit-footer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.budget-content-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.budget-inner-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 折叠状态样式 */
|
||||
.budget-collapsed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.collapsed-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.collapsed-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-compact {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.status-tag-compact) {
|
||||
padding: 2px 6px !important;
|
||||
font-size: 11px !important;
|
||||
height: auto !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapsed-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.collapsed-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.collapsed-item:first-child {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.collapsed-item:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.compact-label {
|
||||
font-size: 12px;
|
||||
color: var(--van-text-color-2);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.compact-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.compact-value.warning {
|
||||
color: var(--van-warning-color);
|
||||
}
|
||||
|
||||
.compact-value.income {
|
||||
color: var(--van-success-color);
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: var(--van-primary-color);
|
||||
font-size: 14px;
|
||||
transition: transform 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
color: var(--van-primary-color);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.budget-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--van-text-color-2);
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
opacity: 0.7;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.amount-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 12px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.info-item) .label {
|
||||
font-size: 12px;
|
||||
color: var(--van-text-color-2);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
:deep(.info-item) .value {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.value.expense) {
|
||||
color: var(--van-danger-color);
|
||||
}
|
||||
|
||||
:deep(.value.income) {
|
||||
color: var(--van-success-color);
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--van-gray-6);
|
||||
}
|
||||
|
||||
.progress-section :deep(.van-progress) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.period-type {
|
||||
white-space: nowrap;
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.percent {
|
||||
white-space: nowrap;
|
||||
width: 35px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.percent.warning {
|
||||
color: var(--van-warning-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.percent.income {
|
||||
color: var(--van-success-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time-progress {
|
||||
margin-top: -8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.time-progress .period-type,
|
||||
.time-progress .percent {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.no-limit-notice {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--van-text-color-2);
|
||||
background-color: var(--van-light-gray);
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.no-limit-amount-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0px 0;
|
||||
}
|
||||
|
||||
.amount-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.amount-item .label {
|
||||
font-size: 12px;
|
||||
color: var(--van-text-color-2);
|
||||
}
|
||||
|
||||
.amount-item .value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--van-success-color);
|
||||
}
|
||||
|
||||
.budget-collapse-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.budget-description {
|
||||
border-top: 1px solid var(--van-border-color);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.description-content {
|
||||
font-size: 11px;
|
||||
color: var(--van-gray-6);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.mandatory-mark {
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -38,9 +38,7 @@
|
||||
:disabled="form.noLimit"
|
||||
>
|
||||
{{ form.category === BudgetCategory.Expense ? '硬性消费' : '硬性收入' }}
|
||||
<span class="mandatory-tip">
|
||||
当前周期 月/年 按天数自动累加(无记录时)
|
||||
</span>
|
||||
<span class="mandatory-tip"> 当前周期 月/年 按天数自动累加(无记录时) </span>
|
||||
</van-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,127 +1,111 @@
|
||||
<template>
|
||||
<van-popup
|
||||
<PopupContainer
|
||||
v-model:show="visible"
|
||||
position="bottom"
|
||||
:style="{ height: '80%' }"
|
||||
round
|
||||
closeable
|
||||
:title="title"
|
||||
:subtitle="total > 0 ? `共 ${total} 笔交易` : ''"
|
||||
:closeable="true"
|
||||
>
|
||||
<div class="popup-wrapper">
|
||||
<!-- 头部 -->
|
||||
<div class="popup-header">
|
||||
<h2 class="popup-title">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="total > 0"
|
||||
class="popup-subtitle"
|
||||
>
|
||||
共 {{ total }} 笔交易
|
||||
<!-- 交易列表 -->
|
||||
<div class="transactions">
|
||||
<!-- 加载状态 -->
|
||||
<van-loading
|
||||
v-if="loading && transactions.length === 0"
|
||||
class="txn-loading"
|
||||
size="24px"
|
||||
vertical
|
||||
>
|
||||
加载中...
|
||||
</van-loading>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div
|
||||
v-else-if="transactions.length === 0"
|
||||
class="txn-empty"
|
||||
>
|
||||
<div class="empty-icon">
|
||||
<van-icon
|
||||
name="balance-list-o"
|
||||
size="48"
|
||||
/>
|
||||
</div>
|
||||
<div class="empty-text">
|
||||
暂无交易记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易列表 -->
|
||||
<div class="transactions">
|
||||
<!-- 加载状态 -->
|
||||
<van-loading
|
||||
v-if="loading && transactions.length === 0"
|
||||
class="txn-loading"
|
||||
size="24px"
|
||||
vertical
|
||||
>
|
||||
加载中...
|
||||
</van-loading>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div
|
||||
v-else
|
||||
class="txn-list"
|
||||
>
|
||||
<div
|
||||
v-else-if="transactions.length === 0"
|
||||
class="txn-empty"
|
||||
v-for="txn in transactions"
|
||||
:key="txn.id"
|
||||
class="txn-card"
|
||||
@click="onTransactionClick(txn)"
|
||||
>
|
||||
<div class="empty-icon">
|
||||
<div
|
||||
class="txn-icon"
|
||||
:style="{ backgroundColor: txn.iconBg }"
|
||||
>
|
||||
<van-icon
|
||||
name="balance-list-o"
|
||||
size="48"
|
||||
:name="txn.icon"
|
||||
:color="txn.iconColor"
|
||||
/>
|
||||
</div>
|
||||
<div class="empty-text">
|
||||
暂无交易记录
|
||||
<div class="txn-content">
|
||||
<div class="txn-name">
|
||||
{{ txn.reason }}
|
||||
</div>
|
||||
<div class="txn-footer">
|
||||
<div class="txn-time">
|
||||
{{ formatDateTime(txn.occurredAt) }}
|
||||
</div>
|
||||
<span
|
||||
v-if="txn.classify"
|
||||
class="txn-classify-tag"
|
||||
:class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
|
||||
>
|
||||
{{ txn.classify }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="txn-amount">
|
||||
{{ formatAmount(txn.amount, txn.type) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易列表 -->
|
||||
<!-- 加载更多 -->
|
||||
<div
|
||||
v-if="!finished"
|
||||
class="load-more"
|
||||
>
|
||||
<van-loading
|
||||
v-if="loading"
|
||||
size="20px"
|
||||
>
|
||||
加载中...
|
||||
</van-loading>
|
||||
<van-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="loadMore"
|
||||
>
|
||||
加载更多
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 已加载全部 -->
|
||||
<div
|
||||
v-else
|
||||
class="txn-list"
|
||||
class="finished-text"
|
||||
>
|
||||
<div
|
||||
v-for="txn in transactions"
|
||||
:key="txn.id"
|
||||
class="txn-card"
|
||||
@click="onTransactionClick(txn)"
|
||||
>
|
||||
<div
|
||||
class="txn-icon"
|
||||
:style="{ backgroundColor: txn.iconBg }"
|
||||
>
|
||||
<van-icon
|
||||
:name="txn.icon"
|
||||
:color="txn.iconColor"
|
||||
/>
|
||||
</div>
|
||||
<div class="txn-content">
|
||||
<div class="txn-name">
|
||||
{{ txn.reason }}
|
||||
</div>
|
||||
<div class="txn-footer">
|
||||
<div class="txn-time">
|
||||
{{ formatDateTime(txn.occurredAt) }}
|
||||
</div>
|
||||
<span
|
||||
v-if="txn.classify"
|
||||
class="txn-classify-tag"
|
||||
:class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
|
||||
>
|
||||
{{ txn.classify }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="txn-amount">
|
||||
{{ formatAmount(txn.amount, txn.type) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div
|
||||
v-if="!finished"
|
||||
class="load-more"
|
||||
>
|
||||
<van-loading
|
||||
v-if="loading"
|
||||
size="20px"
|
||||
>
|
||||
加载中...
|
||||
</van-loading>
|
||||
<van-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="loadMore"
|
||||
>
|
||||
加载更多
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 已加载全部 -->
|
||||
<div
|
||||
v-else
|
||||
class="finished-text"
|
||||
>
|
||||
已加载全部
|
||||
</div>
|
||||
已加载全部
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</PopupContainer>
|
||||
|
||||
<!-- 交易详情弹窗 -->
|
||||
<TransactionDetailSheet
|
||||
@@ -136,6 +120,7 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
import { getTransactionList } from '@/api/transactionRecord'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -207,13 +192,13 @@ const formatAmount = (amount, type) => {
|
||||
// 根据分类获取图标
|
||||
const getIconByClassify = (classify) => {
|
||||
const iconMap = {
|
||||
'餐饮': 'food',
|
||||
'购物': 'shopping',
|
||||
'交通': 'logistics',
|
||||
'娱乐': 'play-circle',
|
||||
'医疗': 'medic',
|
||||
'工资': 'gold-coin',
|
||||
'红包': 'gift'
|
||||
餐饮: 'food',
|
||||
购物: 'shopping',
|
||||
交通: 'logistics',
|
||||
娱乐: 'play-circle',
|
||||
医疗: 'medic',
|
||||
工资: 'gold-coin',
|
||||
红包: 'gift'
|
||||
}
|
||||
return iconMap[classify] || 'bill'
|
||||
}
|
||||
@@ -256,7 +241,7 @@ const loadData = async (isRefresh = false) => {
|
||||
const newList = response.data || []
|
||||
|
||||
// 转换数据格式，添加显示所需的字段
|
||||
const formattedList = newList.map(txn => ({
|
||||
const formattedList = newList.map((txn) => ({
|
||||
...txn,
|
||||
icon: getIconByClassify(txn.classify),
|
||||
iconColor: getColorByType(txn.type),
|
||||
@@ -308,7 +293,7 @@ const handleSave = () => {
|
||||
const handleDelete = (id) => {
|
||||
showDetail.value = false
|
||||
// 从列表中移除
|
||||
transactions.value = transactions.value.filter(t => t.id !== id)
|
||||
transactions.value = transactions.value.filter((t) => t.id !== id)
|
||||
total.value--
|
||||
// 通知父组件刷新
|
||||
emit('refresh')
|
||||
@@ -331,39 +316,6 @@ watch(visible, (newValue) => {
|
||||
<style scoped>
|
||||
@import '@/assets/theme.css';
|
||||
|
||||
.popup-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
flex-shrink: 0;
|
||||
padding: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
margin-top: var(--spacing-sm);
|
||||
font-size: var(--font-md);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transactions {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -452,7 +404,7 @@ watch(visible, (newValue) => {
|
||||
|
||||
.txn-classify-tag.tag-expense {
|
||||
background-color: rgba(59, 130, 246, 0.15);
|
||||
color: #3B82F6;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.txn-amount {
|
||||
|
||||
@@ -42,7 +42,7 @@ const props = defineProps({
|
||||
default () {
|
||||
return [
|
||||
{ name: 'calendar', label: '日历', icon: 'notes', path: '/calendar-v2' },
|
||||
{ name: 'statistics', label: '统计', icon: 'chart-trending-o', path: '/' },
|
||||
{ name: 'statistics', label: '统计', icon: 'chart-trending-o', path: '/statistics-v2' },
|
||||
{ name: 'balance', label: '账单', icon: 'balance-list', path: '/balance' },
|
||||
{ name: 'budget', label: '预算', icon: 'bill-o', path: '/budget-v2' },
|
||||
{ name: 'setting', label: '设置', icon: 'setting', path: '/setting' }
|
||||
@@ -84,8 +84,10 @@ const getActiveTabFromRoute = (currentPath) => {
|
||||
// 规范化路径: 去掉 -v2 后缀以支持版本切换
|
||||
const normalizedPath = currentPath.replace(/-v2$/, '')
|
||||
|
||||
const matchedItem = navItems.value.find(item => {
|
||||
if (!item.path) {return false}
|
||||
const matchedItem = navItems.value.find((item) => {
|
||||
if (!item.path) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 完全匹配
|
||||
if (item.path === currentPath || item.path === normalizedPath) {
|
||||
@@ -112,15 +114,23 @@ const updateActiveTab = (newTab) => {
|
||||
}
|
||||
|
||||
// 监听外部 modelValue 的变化
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
updateActiveTab(newValue)
|
||||
}, { immediate: true })
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
updateActiveTab(newValue)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 监听路由变化,自动同步底部导航高亮状态
|
||||
watch(() => route.path, (newPath) => {
|
||||
const matchedTab = getActiveTabFromRoute(newPath)
|
||||
updateActiveTab(matchedTab)
|
||||
}, { immediate: true })
|
||||
watch(
|
||||
() => route.path,
|
||||
(newPath) => {
|
||||
const matchedTab = getActiveTabFromRoute(newPath)
|
||||
updateActiveTab(matchedTab)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const handleTabClick = (item, index) => {
|
||||
activeTab.value = item.name
|
||||
@@ -129,7 +139,7 @@ const handleTabClick = (item, index) => {
|
||||
|
||||
// 如果有路径定义,则进行路由跳转
|
||||
if (item.path) {
|
||||
router.push(item.path).catch(err => {
|
||||
router.push(item.path).catch((err) => {
|
||||
// 忽略相同路由导航错误
|
||||
if (err.name !== 'NavigationDuplicated') {
|
||||
console.warn('Navigation error:', err)
|
||||
@@ -195,7 +205,9 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset;
|
||||
box-shadow:
|
||||
0 -4px 24px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 0.5px rgba(255, 255, 255, 0.5) inset;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@@ -218,17 +230,21 @@ onMounted(() => {
|
||||
|
||||
/* 亮色模式文字颜色（默认） */
|
||||
.nav-label {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #9CA3AF;
|
||||
color: #9ca3af;
|
||||
transition: all 0.2s ease;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.nav-label-active {
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@@ -254,15 +270,17 @@ onMounted(() => {
|
||||
backdrop-filter: blur(40px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
||||
border-color: rgba(42, 42, 46, 0.6);
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(255, 255, 255, 0.1) inset;
|
||||
box-shadow:
|
||||
0 -4px 24px rgba(0, 0, 0, 0.25),
|
||||
0 0 0 0.5px rgba(255, 255, 255, 0.1) inset;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
color: #6B6B6F;
|
||||
color: #6b6b6f;
|
||||
}
|
||||
|
||||
.nav-label-active {
|
||||
color: #FAFAF9;
|
||||
color: #fafaf9;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -302,4 +320,4 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -108,37 +108,103 @@ defineEmits(['action-click'])
|
||||
// 根据类型选择SVG图标路径
|
||||
const iconPath = computed(() => {
|
||||
const icons = {
|
||||
search: () => h('g', [
|
||||
h('circle', { cx: '26', cy: '26', r: '18', stroke: 'currentColor', 'stroke-width': '3', fill: 'none' }),
|
||||
h('path', { d: 'M40 40L54 54', stroke: 'currentColor', 'stroke-width': '3', 'stroke-linecap': 'round' })
|
||||
]),
|
||||
data: () => h('g', [
|
||||
h('path', { d: 'M8 48L22 32L36 40L56 16', stroke: 'currentColor', 'stroke-width': '3', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', fill: 'none' }),
|
||||
h('circle', { cx: '8', cy: '48', r: '3', fill: 'currentColor' }),
|
||||
h('circle', { cx: '22', cy: '32', r: '3', fill: 'currentColor' }),
|
||||
h('circle', { cx: '36', cy: '40', r: '3', fill: 'currentColor' }),
|
||||
h('circle', { cx: '56', cy: '16', r: '3', fill: 'currentColor' })
|
||||
]),
|
||||
inbox: () => h('g', [
|
||||
h('path', { d: 'M8 16L32 4L56 16V52C56 54.2 54.2 56 52 56H12C9.8 56 8 54.2 8 52V16Z', stroke: 'currentColor', 'stroke-width': '3', fill: 'none' }),
|
||||
h('path', { d: 'M8 32H20L24 40H40L44 32H56', stroke: 'currentColor', 'stroke-width': '3', fill: 'none' })
|
||||
]),
|
||||
calendar: () => h('g', [
|
||||
h('rect', { x: '8', y: '12', width: '48', height: '44', rx: '4', stroke: 'currentColor', 'stroke-width': '3', fill: 'none' }),
|
||||
h('path', { d: 'M8 24H56', stroke: 'currentColor', 'stroke-width': '3' }),
|
||||
h('path', { d: 'M20 8V16', stroke: 'currentColor', 'stroke-width': '3', 'stroke-linecap': 'round' }),
|
||||
h('path', { d: 'M44 8V16', stroke: 'currentColor', 'stroke-width': '3', 'stroke-linecap': 'round' })
|
||||
]),
|
||||
finance: () => h('g', [
|
||||
h('circle', { cx: '32', cy: '32', r: '24', stroke: 'currentColor', 'stroke-width': '3', fill: 'none' }),
|
||||
h('path', { d: 'M32 16V48', stroke: 'currentColor', 'stroke-width': '3' }),
|
||||
h('path', { d: 'M24 22H36C38.2 22 40 23.8 40 26C40 28.2 38.2 30 36 30H28C25.8 30 24 31.8 24 34C24 36.2 25.8 38 28 38H40', stroke: 'currentColor', 'stroke-width': '3', fill: 'none' })
|
||||
]),
|
||||
chart: () => h('g', [
|
||||
h('rect', { x: '12', y: '36', width: '8', height: '20', rx: '2', fill: 'currentColor' }),
|
||||
h('rect', { x: '28', y: '24', width: '8', height: '32', rx: '2', fill: 'currentColor' }),
|
||||
h('rect', { x: '44', y: '12', width: '8', height: '44', rx: '2', fill: 'currentColor' })
|
||||
])
|
||||
search: () =>
|
||||
h('g', [
|
||||
h('circle', {
|
||||
cx: '26',
|
||||
cy: '26',
|
||||
r: '18',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
fill: 'none'
|
||||
}),
|
||||
h('path', {
|
||||
d: 'M40 40L54 54',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
'stroke-linecap': 'round'
|
||||
})
|
||||
]),
|
||||
data: () =>
|
||||
h('g', [
|
||||
h('path', {
|
||||
d: 'M8 48L22 32L36 40L56 16',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
fill: 'none'
|
||||
}),
|
||||
h('circle', { cx: '8', cy: '48', r: '3', fill: 'currentColor' }),
|
||||
h('circle', { cx: '22', cy: '32', r: '3', fill: 'currentColor' }),
|
||||
h('circle', { cx: '36', cy: '40', r: '3', fill: 'currentColor' }),
|
||||
h('circle', { cx: '56', cy: '16', r: '3', fill: 'currentColor' })
|
||||
]),
|
||||
inbox: () =>
|
||||
h('g', [
|
||||
h('path', {
|
||||
d: 'M8 16L32 4L56 16V52C56 54.2 54.2 56 52 56H12C9.8 56 8 54.2 8 52V16Z',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
fill: 'none'
|
||||
}),
|
||||
h('path', {
|
||||
d: 'M8 32H20L24 40H40L44 32H56',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
fill: 'none'
|
||||
})
|
||||
]),
|
||||
calendar: () =>
|
||||
h('g', [
|
||||
h('rect', {
|
||||
x: '8',
|
||||
y: '12',
|
||||
width: '48',
|
||||
height: '44',
|
||||
rx: '4',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
fill: 'none'
|
||||
}),
|
||||
h('path', { d: 'M8 24H56', stroke: 'currentColor', 'stroke-width': '3' }),
|
||||
h('path', {
|
||||
d: 'M20 8V16',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
'stroke-linecap': 'round'
|
||||
}),
|
||||
h('path', {
|
||||
d: 'M44 8V16',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
'stroke-linecap': 'round'
|
||||
})
|
||||
]),
|
||||
finance: () =>
|
||||
h('g', [
|
||||
h('circle', {
|
||||
cx: '32',
|
||||
cy: '32',
|
||||
r: '24',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
fill: 'none'
|
||||
}),
|
||||
h('path', { d: 'M32 16V48', stroke: 'currentColor', 'stroke-width': '3' }),
|
||||
h('path', {
|
||||
d: 'M24 22H36C38.2 22 40 23.8 40 26C40 28.2 38.2 30 36 30H28C25.8 30 24 31.8 24 34C24 36.2 25.8 38 28 38H40',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '3',
|
||||
fill: 'none'
|
||||
})
|
||||
]),
|
||||
chart: () =>
|
||||
h('g', [
|
||||
h('rect', { x: '12', y: '36', width: '8', height: '20', rx: '2', fill: 'currentColor' }),
|
||||
h('rect', { x: '28', y: '24', width: '8', height: '32', rx: '2', fill: 'currentColor' }),
|
||||
h('rect', { x: '44', y: '12', width: '8', height: '44', rx: '2', fill: 'currentColor' })
|
||||
])
|
||||
}
|
||||
return icons[props.type] || icons.search
|
||||
})
|
||||
@@ -275,7 +341,8 @@ const iconPath = computed(() => {
|
||||
|
||||
// 动画
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.1;
|
||||
}
|
||||
@@ -286,7 +353,8 @@ const iconPath = computed(() => {
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
|
||||
@@ -1,3 +1,37 @@
|
||||
<!--
|
||||
统一弹窗组件
|
||||
|
||||
## 基础用法
|
||||
<PopupContainer v-model:show="show" title="标题">
|
||||
内容
|
||||
</PopupContainer>
|
||||
|
||||
## 确认对话框用法
|
||||
<PopupContainer
|
||||
v-model:show="showConfirm"
|
||||
title="确认操作"
|
||||
show-confirm-button
|
||||
show-cancel-button
|
||||
confirm-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
确定要执行此操作吗？
|
||||
</PopupContainer>
|
||||
|
||||
## 带副标题和页脚
|
||||
<PopupContainer
|
||||
v-model:show="show"
|
||||
title="分类详情"
|
||||
subtitle="共 10 笔交易"
|
||||
>
|
||||
内容区域
|
||||
<template #footer>
|
||||
<van-button type="primary">提交</van-button>
|
||||
</template>
|
||||
</PopupContainer>
|
||||
-->
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<van-popup
|
||||
@@ -52,10 +86,29 @@
|
||||
|
||||
<!-- 底部页脚，固定不可滚动 -->
|
||||
<div
|
||||
v-if="slots.footer"
|
||||
v-if="slots.footer || showConfirmButton || showCancelButton"
|
||||
class="popup-footer-fixed"
|
||||
>
|
||||
<slot name="footer" />
|
||||
<!-- 用户自定义页脚插槽 -->
|
||||
<slot name="footer">
|
||||
<!-- 默认确认/取消按钮 -->
|
||||
<div class="footer-buttons">
|
||||
<van-button
|
||||
v-if="showCancelButton"
|
||||
plain
|
||||
@click="handleCancel"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</van-button>
|
||||
<van-button
|
||||
v-if="showConfirmButton"
|
||||
type="primary"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</van-button>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
@@ -84,10 +137,26 @@ const props = defineProps({
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showConfirmButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
@@ -99,6 +168,16 @@ const visible = computed({
|
||||
|
||||
// 判断是否有操作按钮
|
||||
const hasActions = computed(() => !!slots['header-actions'])
|
||||
|
||||
// 确认按钮点击
|
||||
const handleConfirm = () => {
|
||||
emit('confirm')
|
||||
}
|
||||
|
||||
// 取消按钮点击
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -184,4 +263,15 @@ const hasActions = computed(() => !!slots['header-actions'])
|
||||
background-color: var(--van-background-2);
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer-buttons .van-button {
|
||||
flex: 1;
|
||||
max-width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -93,4 +93,4 @@ defineEmits(['change'])
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,12 @@
|
||||
<van-popup
|
||||
v-model:show="visible"
|
||||
position="bottom"
|
||||
:style="{ height: 'auto', maxHeight: '85%', borderTopLeftRadius: '16px', borderTopRightRadius: '16px' }"
|
||||
:style="{
|
||||
height: 'auto',
|
||||
maxHeight: '85%',
|
||||
borderTopLeftRadius: '16px',
|
||||
borderTopRightRadius: '16px'
|
||||
}"
|
||||
teleport="body"
|
||||
@close="handleClose"
|
||||
>
|
||||
@@ -185,10 +190,7 @@ import { ref, reactive, watch, computed } from 'vue'
|
||||
import { showToast, showDialog } from 'vant'
|
||||
import dayjs from 'dayjs'
|
||||
import ClassifySelector from '@/components/ClassifySelector.vue'
|
||||
import {
|
||||
updateTransaction,
|
||||
deleteTransaction
|
||||
} from '@/api/transactionRecord'
|
||||
import { updateTransaction, deleteTransaction } from '@/api/transactionRecord'
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
@@ -293,7 +295,9 @@ const finishEditAmount = () => {
|
||||
|
||||
// 格式化日期时间显示
|
||||
const formatDateTime = (dateTime) => {
|
||||
if (!dateTime) {return ''}
|
||||
if (!dateTime) {
|
||||
return ''
|
||||
}
|
||||
return dayjs(dateTime).format('YYYY-MM-DD HH:mm')
|
||||
}
|
||||
|
||||
@@ -372,38 +376,39 @@ const handleDelete = async () => {
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonColor: '#EF4444'
|
||||
}).then(async () => {
|
||||
try {
|
||||
deleting.value = true
|
||||
const response = await deleteTransaction(editForm.id)
|
||||
if (response.success) {
|
||||
showToast('删除成功')
|
||||
emit('delete', editForm.id)
|
||||
visible.value = false
|
||||
} else {
|
||||
showToast(response.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除出错:', error)
|
||||
showToast('删除失败')
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}).catch(() => {
|
||||
// 用户取消删除
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
deleting.value = true
|
||||
const response = await deleteTransaction(editForm.id)
|
||||
if (response.success) {
|
||||
showToast('删除成功')
|
||||
emit('delete', editForm.id)
|
||||
visible.value = false
|
||||
} else {
|
||||
showToast(response.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除出错:', error)
|
||||
showToast('删除失败')
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消删除
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.transaction-detail-sheet {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -418,12 +423,12 @@ const handleClose = () => {
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #09090B;
|
||||
color: #09090b;
|
||||
}
|
||||
|
||||
.header-close {
|
||||
font-size: 24px;
|
||||
color: #71717A;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -439,14 +444,14 @@ const handleClose = () => {
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #71717A;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #09090B;
|
||||
color: #09090b;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: opacity 0.2s;
|
||||
@@ -464,28 +469,28 @@ const handleClose = () => {
|
||||
.currency-symbol {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #09090B;
|
||||
color: #09090b;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
max-width: 200px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #09090B;
|
||||
color: #09090b;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 2px solid #E4E4E7;
|
||||
border-bottom: 2px solid #e4e4e7;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: #6366F1;
|
||||
border-bottom-color: #6366f1;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #A1A1AA;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
// 移除 number 类型的上下箭头
|
||||
@@ -513,7 +518,7 @@ const handleClose = () => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #E4E4E7;
|
||||
border-bottom: 1px solid #e4e4e7;
|
||||
|
||||
&.no-border {
|
||||
border-bottom: none;
|
||||
@@ -523,14 +528,14 @@ const handleClose = () => {
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #71717A;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #09090B;
|
||||
color: #09090b;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
@@ -546,7 +551,7 @@ const handleClose = () => {
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #A1A1AA;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.reason-input {
|
||||
@@ -556,11 +561,11 @@ const handleClose = () => {
|
||||
text-align: right;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #09090B;
|
||||
color: #09090b;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: #A1A1AA;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -583,7 +588,7 @@ const handleClose = () => {
|
||||
|
||||
.classify-section {
|
||||
padding: 16px;
|
||||
background: #F4F4F5;
|
||||
background: #f4f4f5;
|
||||
border-radius: 8px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
@@ -597,9 +602,9 @@ const handleClose = () => {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #EF4444;
|
||||
border: 1px solid #ef4444;
|
||||
background: transparent;
|
||||
color: #EF4444;
|
||||
color: #ef4444;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
@@ -609,8 +614,8 @@ const handleClose = () => {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
background: #6366F1;
|
||||
color: #FAFAFA;
|
||||
background: #6366f1;
|
||||
color: #fafafa;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
@@ -621,38 +626,38 @@ const handleClose = () => {
|
||||
// 暗色模式
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.transaction-detail-sheet {
|
||||
background: #18181B;
|
||||
background: #18181b;
|
||||
|
||||
.sheet-header {
|
||||
.header-title {
|
||||
color: #FAFAFA;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.header-close {
|
||||
color: #A1A1AA;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-section {
|
||||
.amount-label {
|
||||
color: #A1A1AA;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
color: #FAFAFA;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.amount-input-wrapper {
|
||||
.currency-symbol {
|
||||
color: #FAFAFA;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
color: #FAFAFA;
|
||||
border-bottom-color: #27272A;
|
||||
color: #fafafa;
|
||||
border-bottom-color: #27272a;
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: #6366F1;
|
||||
border-bottom-color: #6366f1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -660,24 +665,24 @@ const handleClose = () => {
|
||||
|
||||
.form-section {
|
||||
.form-row {
|
||||
border-bottom-color: #27272A;
|
||||
border-bottom-color: #27272a;
|
||||
|
||||
.form-label {
|
||||
color: #A1A1AA;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
color: #FAFAFA;
|
||||
color: #fafafa;
|
||||
|
||||
.reason-input {
|
||||
color: #FAFAFA;
|
||||
color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.classify-section {
|
||||
background: #27272A;
|
||||
background: #27272a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,9 +180,7 @@ import { showToast } from 'vant'
|
||||
import dayjs from 'dayjs'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
import ClassifySelector from '@/components/ClassifySelector.vue'
|
||||
import {
|
||||
updateTransaction
|
||||
} from '@/api/transactionRecord'
|
||||
import { updateTransaction } from '@/api/transactionRecord'
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
@@ -363,7 +361,6 @@ const formatDate = (dateString) => {
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user