zkxw/mobile-h5/components/TodoPanel.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>