cfc/cfc-frontend/pages/wealth/insurance-list.vue

<template>
  <scroll-view class="container" scroll-y>
    <!-- 状态过滤 -->
    <view class="filter-tabs">
      <view
        v-for="(tab, index) in filterTabs"
        :key="index"
        class="filter-tab"
        :class="{ active: currentFilter === tab.value }"
        @click="currentFilter = tab.value; loadPolicies()">
        <text>{{ tab.label }}</text>
      </view>
    </view>

    <!-- 保单列表 -->
    <view v-if="policies.length === 0" class="empty-state">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无保单</text>
      <text class="empty-hint">点击下方按钮添加保单</text>
    </view>

    <view
      v-for="(item, index) in policies"
      :key="index"
      class="policy-card"
      @click="viewDetail(item)">
      <view class="policy-header">
        <text class="policy-name">{{ item.policyName }}</text>
        <text class="policy-status" :class="item.status === 'active' ? 'status-active' : item.status === 'expired' ? 'status-expired' : 'status-cancelled'">{{ getStatusLabel(item.status) }}</text>
      </view>
      <view class="policy-body">
        <view class="policy-row">
          <text class="policy-label">保险公司</text>
          <text class="policy-value">{{ item.insuranceCompany || '未知' }}</text>
        </view>
        <view class="policy-row">
          <text class="policy-label">被保人</text>
          <text class="policy-value">{{ item.insuredPerson }}</text>
        </view>
        <view class="policy-row">
          <text class="policy-label">保费</text>
          <text class="policy-value orange">{{ '¥' + (item.premium || '0.00') }}</text>
        </view>
        <view class="policy-row">
          <text class="policy-label">到期日</text>
          <text class="policy-value">{{ item.endDate ? item.endDate.substring(0, 10) : '长期' }}</text>
        </view>
      </view>
      <view class="policy-footer" @click.stop="deletePolicy(item)">
        <text class="delete-btn">删除</text>
      </view>
    </view>

    <!-- 新增按钮 -->
    <view class="add-btn-wrap">
      <button class="add-btn" @click="addPolicy">+ 新增保单</button>
    </view>
  </scroll-view>
</template>

<script>
import { getInsuranceList, deleteInsurance } from '../../utils/api'

export default {
  data() {
    return {
      filterTabs: [
        { label: '全部', value: '' },
        { label: '有效', value: 'active' },
        { label: '已过期', value: 'expired' },
        { label: '已取消', value: 'cancelled' }
      ],
      currentFilter: '',
      policies: []
    }
  },

  onShow() {
    this.loadPolicies()
  },

  methods: {
    async loadPolicies() {
      try {
        const res = await getInsuranceList({ status: this.currentFilter || undefined })
        if (res && res.code === 200) {
          this.policies = res.data || []
        }
      } catch (e) {
        console.error('加载保单失败', e)
      }
    },

    viewDetail(item) {
      uni.navigateTo({
        url: '/pages/wealth/insurance-add?id=' + item.id
      })
    },

    addPolicy() {
      uni.navigateTo({
        url: '/pages/wealth/insurance-add'
      })
    },

    deletePolicy(item) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确定删除该保单？',
        success: async function(res) {
          if (res.confirm) {
            try {
              const result = await deleteInsurance(item.id)
              if (result && result.code === 200) {
                uni.showToast({ title: '已删除', icon: 'success' })
                self.loadPolicies()
              }
            } catch (e) {
              console.error('删除失败', e)
            }
          }
        }
      })
    },

    getStatusClass(status) {
      return status === 'active' ? 'status-active' : status === 'expired' ? 'status-expired' : 'status-cancelled'
    },

    getStatusLabel(status) {
      return status === 'active' ? '有效' : status === 'expired' ? '已过期' : '已取消'
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx 30rpx 120rpx;
}

.filter-tabs {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 16rpx;
  padding: 12rpx;
  margin-bottom: 24rpx;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 12rpx 0;
  font-size: 26rpx;
  color: #666;
  border-radius: 12rpx;
}

.filter-tab.active {
  background: #F97316;
  color: #fff;
  font-weight: 600;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 30rpx;
  color: #999;
}

.empty-hint {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 8rpx;
}

.policy-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.policy-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.policy-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.policy-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.status-active {
  background: #DCFCE7;
  color: #16A34A;
}

.status-expired {
  background: #FEF2F2;
  color: #DC2626;
}

.status-cancelled {
  background: #F5F5F5;
  color: #999;
}

.policy-body {
  margin-bottom: 12rpx;
}

.policy-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8rpx 0;
}

.policy-label {
  font-size: 26rpx;
  color: #999;
}

.policy-value {
  font-size: 26rpx;
  color: #333;
}

.policy-value.orange {
  color: #F97316;
  font-weight: 600;
}

.policy-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 12rpx;
  border-top: 2rpx solid #f5f5f5;
}

.delete-btn {
  font-size: 24rpx;
  color: #DC2626;
  padding: 8rpx 20rpx;
}

.add-btn-wrap {
  padding: 20rpx 0 40rpx;
}

.add-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #F97316;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  border-radius: 44rpx;
  border: none;
}

.add-btn::after {
  border: none;
}
</style>