66 lines
2.2 KiB
Vue
66 lines
2.2 KiB
Vue
<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"><VanIcon 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"><VanIcon 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"><VanIcon 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">
|
||
<VanIcon :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">
|
||
<VanTag :type="t.tagType" plain>{{ t.tag }}</VanTag>
|
||
<text class="ti-time">{{ t.time }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import VanIcon from './van-icon/van-icon.vue'
|
||
import VanTag from './van-tag/van-tag.vue'
|
||
|
||
export default {
|
||
name: 'TodoPanel',
|
||
components: { VanIcon, VanTag },
|
||
props: {
|
||
stats: {
|
||
type: Object,
|
||
default: () => ({ approve: 0, pay: 0, alert: 0 })
|
||
},
|
||
items: { type: Array, default: () => [] }
|
||
},
|
||
emits: ['stat-click', 'item-click', 'more']
|
||
}
|
||
</script>
|