cfc/cfc-frontend/components/BodyWealthAlert.vue

<template>
  <view class="body-wealth-alert" v-if="visible" :class="statusClass">
    <view class="alert-header">
      <text class="alert-icon">{{ icon }}</text>
      <text class="alert-title">{{ title }}</text>
    </view>
    <view class="alert-body">
      <text class="alert-message">{{ message }}</text>
    </view>
    <view class="alert-footer" v-if="showTip">
      <text class="alert-tip">{{ tip }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BodyWealthAlert',
  props: {
    status: {
      type: String,
      default: 'normal',  // normal / overdraw / penalty
      validator: function(val) {
        return ['normal', 'overdraw', 'penalty'].indexOf(val) !== -1
      }
    },
    message: {
      type: String,
      default: ''
    },
    showTip: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    visible() {
      return this.status !== 'normal'
    },
    statusClass() {
      return 'alert-' + this.status
    },
    icon() {
      if (this.status === 'overdraw') return '⚠️'
      if (this.status === 'penalty') return '🔒'
      return '✓'
    },
    title() {
      if (this.status === 'overdraw') return '健康透支警告'
      if (this.status === 'penalty') return '健康约束生效'
      return '健康状态正常'
    },
    tip() {
      if (this.status === 'overdraw') return '建议立即调整作息和饮食，恢复健康能量'
      if (this.status === 'penalty') return '健康能量不足将影响财富维度发展，请优先关注健康'
      return ''
    }
  }
}
</script>

<style scoped>
.body-wealth-alert {
  margin: 20rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  border-left: 6rpx solid;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.alert-normal {
  border-left-color: #52c41a;
  background: #f6ffed;
}
.alert-overdraw {
  border-left-color: #faad14;
  background: #fffbe6;
}
.alert-penalty {
  border-left-color: #ff4d4f;
  background: #fff1f0;
}
.alert-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}
.alert-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.alert-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.alert-body {
  margin-bottom: 12rpx;
}
.alert-message {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
.alert-footer {
  border-top: 1rpx solid rgba(0,0,0,0.1);
  padding-top: 12rpx;
  margin-top: 12rpx;
}
.alert-tip {
  font-size: 24rpx;
  color: #999;
  font-style: italic;
}
</style>