Files
zkxw/mobile-h5/components/TodoPanel.vue
T
zlwuandCursor 8793fa07cc feat(mobile-h5): add styles, mocks, components, and demo pages
Land Token-based SCSS modules, menu/biz mocks, reusable shell
components, and home plus list/detail/form/comps template pages
aligned with the Vant Weapp UI demo.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-10 14:03:36 +08:00

62 lines
2.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="todo-panel panel" style="padding: 0; overflow: hidden">
<view class="panel-hd" style="padding: 28rpx 24rpx 0">
<text class="panel-title">待办摘要</text>
<view class="hint" @click="$emit('more')">查看全部 ›</view>
</view>
<view style="padding: 24rpx">
<view class="todo-stats">
<view class="todo-stat tone-warn" @click="$emit('stat-click', 'approve')">
<view class="stat-icon"><van-icon name="passed" /></view>
<text class="num">{{ stats.approve }}</text>
<text class="label">待审批</text>
</view>
<view class="todo-stat tone-pay" @click="$emit('stat-click', 'pay')">
<view class="stat-icon"><van-icon name="balance-list-o" /></view>
<text class="num">{{ stats.pay }}</text>
<text class="label">待确认缴费</text>
</view>
<view class="todo-stat tone-danger" @click="$emit('stat-click', 'alert')">
<view class="stat-icon"><van-icon name="warning-o" /></view>
<text class="num">{{ stats.alert }}</text>
<text class="label">异常提醒</text>
</view>
</view>
<view class="todo-list">
<view
v-for="t in items"
:key="t.id"
class="todo-item"
@click="$emit('item-click', t)"
>
<view class="ti-icon" :class="t.iconClass">
<van-icon :name="t.icon" />
</view>
<view class="ti-body">
<view class="ti-title">{{ t.title }}</view>
<view class="ti-desc">{{ t.desc }}</view>
</view>
<view class="ti-right">
<van-tag :type="t.tagType" plain>{{ t.tag }}</van-tag>
<text class="ti-time">{{ t.time }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'TodoPanel',
props: {
stats: {
type: Object,
default: () => ({ approve: 0, pay: 0, alert: 0 })
},
items: { type: Array, default: () => [] }
},
emits: ['stat-click', 'item-click', 'more']
}
</script>