zkxw/mobile-h5/components/BizListCard.vue

<template>
  <view class="biz-card" :class="'status-' + item.tagType">
    <view class="card-inner">
      <view class="row-top">
        <view class="type-icon">
          <van-icon :name="item.icon" />
        </view>
        <view class="title-wrap">
          <view class="type-chip">{{ item.typeLabel }}</view>
          <view class="title">{{ item.title }}</view>
        </view>
        <text class="status-pill">{{ item.status }}</text>
      </view>

      <view class="body-row">
        <view class="desc-box">{{ item.desc }}</view>
        <view class="side-metric">
          <template v-if="item.amount">
            <text class="amt-label">金额</text>
            <text class="amt">¥{{ item.amount }}</text>
          </template>
          <template v-else>
            <text class="amt-label">进度</text>
            <text class="amt" style="font-size: 26rpx">{{ item.progress || '—' }}</text>
          </template>
          <text class="time">{{ item.time }}</text>
        </view>
      </view>

      <view class="meta-row">
        <text class="mi code-pill">{{ item.code }}</text>
        <text class="mi">{{ item.owner }}</text>
      </view>

      <view class="footer">
        <view class="left-hint">
          <view class="dot" />
          {{ item.hint || '点击操作处理' }}
        </view>
        <view class="ops">
          <van-button size="small" plain hairline type="default" @click.stop="$emit('view', item)">
            查看
          </van-button>
          <van-button size="small" type="primary" color="#22c55e" @click.stop="$emit('action', item)">
            处理
          </van-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'BizListCard',
    props: {
      item: { type: Object, required: true }
    },
    emits: ['view', 'action']
  }
</script>