f

src/views/AgentPromoteDetails.vue

@@ -12,16 +12,26 @@
                         {{ item.product_name }}
                     </span>
                 </div>
-                <div class="flex items-center">
-                    <h4>直接收益</h4>
-                    <span :class="item.status === 2 ? 'text-red-500' : 'text-green-500'" class="font-bold">
-                        {{ item.status === 2 ? '-' : '+' }}{{ item.amount.toFixed(2) }}
-                    </span>
+                <div class="flex items-center justify-between mb-2">
+                    <h4 class="text-gray-700 font-medium">直接收益</h4>
+                    <div class="flex flex-col items-end">
+                        <!-- 主金额：显示净佣金 -->
+                        <span :class="getAmountColor(item)" class="font-bold text-lg">
+                            {{ getAmountPrefix(item) }}{{ (item.net_amount || 0).toFixed(2) }}
+                        </span>
+                        <!-- 如果有部分退款，显示原始金额和已退金额 -->
+                        <span v-if="item.refunded_amount > 0 && item.net_amount > 0" class="text-gray-400 text-xs mt-1">
+                            原始 {{ item.amount.toFixed(2) }}，已退 {{ item.refunded_amount.toFixed(2) }}
+                        </span>
+                    </div>
                 </div>
-                <div class="flex items-center">
-                     <!-- 修改点 2: 使用 desen 函数处理 name -->
+                <div class="flex items-center justify-between">
                     <span class="text-gray-500 text-sm">{{ desen(item.query_params?.name) || '-' }}</span>
-                    <span v-if="item.status === 2" class="text-red-500 text-sm ml-2">已退款</span>
+                    <!-- 状态标签 -->
+                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
+                        :class="getStatusStyle(item)">
+                        {{ getStatusText(item) }}
+                    </span>
                 </div>
                 <div class="flex justify-between items-center mb-2">
                     <span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
@@ -88,6 +98,72 @@ const getDotColor = (name) => {
     return (typeColors[name] || typeColors.default).dot
 }
 
+// 获取金额颜色
+const getAmountColor = (item) => {
+    // 如果净佣金为0或状态为已退款，显示红色
+    if (item.net_amount <= 0 || item.status === 2) {
+        return 'text-red-500'
+    }
+    // 如果有部分退款，显示橙色
+    if (item.refunded_amount > 0) {
+        return 'text-orange-500'
+    }
+    // 正常情况显示绿色
+    return 'text-green-500'
+}
+
+// 获取金额前缀（+ 或 -）
+const getAmountPrefix = (item) => {
+    if (item.net_amount <= 0 || item.status === 2) {
+        return '-'
+    }
+    return '+'
+}
+
+// 获取状态文本
+const getStatusText = (item) => {
+    if (item.status === 2 || item.net_amount <= 0) {
+        return '已退款'
+    }
+    if (item.status === 1) {
+        // 冻结中
+        if (item.refunded_amount > 0) {
+            return '冻结中（部分退款）'
+        }
+        return '冻结中'
+    }
+    if (item.status === 0) {
+        // 已结算
+        if (item.refunded_amount > 0) {
+            return '已结算（部分退款）'
+        }
+        return '已结算'
+    }
+    return '未知状态'
+}
+
+// 获取状态样式
+const getStatusStyle = (item) => {
+    if (item.status === 2 || item.net_amount <= 0) {
+        return 'bg-red-100 text-red-800'
+    }
+    if (item.status === 1) {
+        // 冻结中
+        if (item.refunded_amount > 0) {
+            return 'bg-orange-100 text-orange-800'
+        }
+        return 'bg-yellow-100 text-yellow-800'
+    }
+    if (item.status === 0) {
+        // 已结算
+        if (item.refunded_amount > 0) {
+            return 'bg-blue-100 text-blue-800'
+        }
+        return 'bg-green-100 text-green-800'
+    }
+    return 'bg-gray-100 text-gray-800'
+}
+
 // 加载更多数据
 const onLoad = async () => {
     if (!finished.value) {