diff --git a/src/apis/admin.ts b/src/apis/admin.ts
index 059c77f..e3b775c 100644
--- a/src/apis/admin.ts
+++ b/src/apis/admin.ts
@@ -34,4 +34,22 @@ export const AddDefaultInvoiceTitle = (params:any) => request.put('/v1/invoice_t
 export const DelInvoiceTitleInfo = (id:any) => request.delete(`/v1/invoice_title/delete_invoice_title/${id}`)
 
 // 删除镜像
-export const delImageItem = (params:any) => request.delete(`/v1/image/delete_image/${params.image_id}`)
\ No newline at end of file
+export const delImageItem = (params:any) => request.delete(`/v1/image/delete_image/${params.image_id}`)
+
+// 银行卡管理-添加银行卡
+export const addBankCard = (params:any) => request.put('/v1/bank_card/add_bank_card',params)
+
+// 银行卡管理-获取绑定信息
+export const getBankCardInfo = (params:any) => request.get('/v1/bank_card/bank_card_info',{params})
+
+// 银行卡管理 - 解绑银行卡
+export const delBankCard = (params:any) => request.post('/v1/bank_card/delete_bank_card',params)
+
+// 发票管理-开票记录
+export const invoiceList = (params:any) => request.get('/v1/order/invoice_list',{params})
+
+// 发票管理-开发记录详情
+export const invoiceDetail = (id:any) => request.delete(`/v1/order/invoice_detail/${id}`)
+
+// 获取订单列表
+export const getOrderList = (params:any) => request.get('/v1/order/order_list',{params})
\ No newline at end of file
diff --git a/src/views/admin/account/bankCard/index.vue b/src/views/admin/account/bankCard/index.vue
index 3d37fcc..5c4ef20 100644
--- a/src/views/admin/account/bankCard/index.vue
+++ b/src/views/admin/account/bankCard/index.vue
@@ -1,209 +1,179 @@
 <template>
-  <div class="bank-card-container">
-    <!-- 页面标题 -->
-    <div class="header">
-      <h2>我的银行卡</h2>
-      <span class="subtitle">只能绑定一张银行卡</span>
+    <div class="bank-card-container">
+        <!-- 页面标题 -->
+        <div class="header">
+            <h2>我的银行卡</h2>
+            <span class="subtitle">只能绑定一张银行卡</span>
+        </div>
+
+        <!-- 状态判断：已绑定银行卡或未绑定 -->
+        <div v-if="hasBoundCard" class="bound-card-section">
+            <!-- 已绑定银行卡展示区域 -->
+            <div class="card-display">
+                <div class="card-header">
+                    <div class="bank-icon">
+                        <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt="银联" />
+                    </div>
+                    <div class="card-number">{{ formatCardNumber(boundCard.bank_card_no) }}</div>
+                </div>
+
+                <div class="card-details">
+                    <div class="detail-item">
+                        <span class="label">持卡人姓名：</span>
+                        <span class="value">{{ boundCard.name }}</span>
+                    </div>
+                    <div class="detail-item">
+                        <span class="label">开户行：</span>
+                        <span class="value">{{ boundCard.bank_name || '--' }}</span>
+                    </div>
+                    <div class="detail-item">
+                        <span class="label">手机号：</span>
+                        <span class="value">{{ boundCard.phone }}</span>
+                    </div>
+                </div>
+
+                <div class="card-actions">
+                    <a-button type="link" danger @click="showUnbindModal">解绑</a-button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 未绑定银行卡时显示添加银行卡区域 -->
+        <div v-else class="add-card-section">
+            <div class="add-card-box" @click="showAddModal">
+                <div class="add-icon">
+                    <plus-outlined />
+                </div>
+                <div class="add-text">添加银行卡</div>
+            </div>
+        </div>
+
+        <!-- 添加银行卡对话框 -->
+        <a-modal v-model:visible="addModalVisible" title="添加银行卡" @ok="handleAddCard" @cancel="handleAddCancel"
+            :confirm-loading="addLoading" :width="500" :ok-text="'绑定'" :cancel-text="'取消'">
+            <a-form ref="addFormRef" :model="addFormState" :rules="addFormRules" layout="vertical">
+                <a-form-item label="真实姓名" name="realName">
+                    <a-input v-model:value="addFormState.realName" placeholder="请输入持卡人真实姓名" size="large" />
+                </a-form-item>
+
+                <a-form-item label="手机号" name="phone">
+                    <div class="sms-code-input">
+                        <a-input v-model:value="addFormState.phone" placeholder="请输入银行预留手机号" size="large"
+                            :maxlength="11" />
+                        <a-button type="primary" :disabled="addCountdown > 0" @click="sendAddSmsCode"
+                            class="sms-button">
+                            {{ addCountdown > 0 ? `${addCountdown}秒后重新获取` : '获取验证码' }}
+                        </a-button>
+                    </div>
+                </a-form-item>
+
+                <a-form-item label="短信验证码" name="smsCode">
+                    <a-input v-model:value="addFormState.smsCode" placeholder="请输入短信验证码" size="large" :maxlength="6" />
+                </a-form-item>
+
+                <a-form-item label="银行卡号" name="cardNumber">
+                    <a-input v-model:value="addFormState.cardNumber" placeholder="请输入银行卡号" size="large" :maxlength="19"
+                        @input="formatCardInput" />
+                </a-form-item>
+
+                <a-form-item label="开户行" name="bankName">
+                    <a-select v-model:value="addFormState.bankName" placeholder="请选择开户行" size="large"
+                        :options="bankOptions" show-search />
+                </a-form-item>
+
+                <a-form-item name="agreement">
+                    <a-checkbox v-model:checked="addFormState.agreement">
+                        绑定银行卡前，我已阅读并确认
+                        <a href="#" @click.prevent="showAgreement">《银行卡绑定协议》</a>
+                    </a-checkbox>
+                </a-form-item>
+            </a-form>
+        </a-modal>
+
+        <!-- 解绑银行卡对话框 -->
+        <!-- 修复：移除 @ok 事件中的参数传递，改为在方法内部处理 -->
+        <a-modal v-model:visible="unbindModalVisible" title="解绑银行卡" @ok="handleUnbindCard"
+            @cancel="handleUnbindCancel" :confirm-loading="unbindLoading" :width="500" :ok-text="'确认解绑'"
+            :cancel-text="'取消'">
+            <div v-if="boundCard" class="unbind-info">
+                <div class="info-item">
+                    <span class="label">持卡人姓名：</span>
+                    <span class="value">{{ boundCard.name }}</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">银行卡号：</span>
+                    <span class="value">{{ formatCardNumber(boundCard.bank_card_no) }}</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">开户行：</span>
+                    <span class="value">{{ boundCard.bank_name || '--' }}</span>
+                </div>
+                <a-divider />
+            </div>
+
+            <a-form ref="unbindFormRef" :model="unbindFormState" :rules="unbindFormRules" layout="vertical">
+                <a-form-item label="手机号码" name="phone">
+                    <a-input v-model:value="unbindFormState.phone" placeholder="请输入银行预留手机号" size="large"
+                        :maxlength="11" />
+                </a-form-item>
+
+                <a-form-item label="短信验证码" name="smsCode">
+                    <div class="sms-code-input">
+                        <a-input v-model:value="unbindFormState.smsCode" placeholder="请输入短信验证码" size="large"
+                            :maxlength="6" />
+                        <a-button type="primary" :disabled="unbindCountdown > 0" @click="sendUnbindSmsCode"
+                            class="sms-button">
+                            {{ unbindCountdown > 0 ? `${unbindCountdown}秒后重新获取` : '获取验证码' }}
+                        </a-button>
+                    </div>
+                </a-form-item>
+
+                <a-form-item name="agreement">
+                    <a-checkbox v-model:checked="unbindFormState.agreement">
+                        解绑银行卡前，我已阅读并确认
+                        <a href="#" @click.prevent="showUnbindAgreement">《银行卡解绑协议》</a>
+                    </a-checkbox>
+                </a-form-item>
+            </a-form>
+        </a-modal>
     </div>
-
-    <!-- 状态判断：已绑定银行卡或未绑定 -->
-    <div v-if="hasBoundCard" class="bound-card-section">
-      <!-- 已绑定银行卡展示区域 -->
-      <div class="card-display">
-        <div class="card-header">
-          <div class="bank-icon">
-            <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt="银联" />
-          </div>
-          <div class="card-number">{{ formatCardNumber(boundCard.cardNumber) }}</div>
-        </div>
-        
-        <div class="card-details">
-          <div class="detail-item">
-            <span class="label">持卡人姓名：</span>
-            <span class="value">{{ boundCard.realName }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">开户行：</span>
-            <span class="value">{{ boundCard.bankName }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">手机号：</span>
-            <span class="value">{{ boundCard.phone }}</span>
-          </div>
-        </div>
-        
-        <div class="card-actions">
-          <a-button type="link" danger @click="showUnbindModal">解绑</a-button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 未绑定银行卡时显示添加银行卡区域 -->
-    <div v-else class="add-card-section">
-      <div class="add-card-box" @click="showAddModal">
-        <div class="add-icon">
-          <plus-outlined />
-        </div>
-        <div class="add-text">添加银行卡</div>
-      </div>
-    </div>
-
-    <!-- 添加银行卡对话框 -->
-    <a-modal
-      v-model:visible="addModalVisible"
-      title="添加银行卡"
-      @ok="handleAddCard"
-      @cancel="handleAddCancel"
-      :confirm-loading="addLoading"
-      :width="500"
-      :ok-text="'绑定'"
-      :cancel-text="'取消'"
-    >
-      <a-form
-        ref="addFormRef"
-        :model="addFormState"
-        :rules="addFormRules"
-        layout="vertical"
-      >
-        <a-form-item label="真实姓名" name="realName">
-          <a-input
-            v-model:value="addFormState.realName"
-            placeholder="请输入持卡人真实姓名"
-            size="large"
-          />
-        </a-form-item>
-        
-        <a-form-item label="银行卡号" name="cardNumber">
-          <a-input
-            v-model:value="addFormState.cardNumber"
-            placeholder="请输入银行卡号"
-            size="large"
-            :maxlength="19"
-            @input="formatCardInput"
-          />
-        </a-form-item>
-        
-        <a-form-item label="开户行" name="bankName">
-          <a-select
-            v-model:value="addFormState.bankName"
-            placeholder="请选择开户行"
-            size="large"
-            :options="bankOptions"
-            show-search
-          />
-        </a-form-item>
-        
-        <a-form-item name="agreement">
-          <a-checkbox v-model:checked="addFormState.agreement">
-            绑定银行卡前，我已阅读并确认
-            <a href="#" @click.prevent="showAgreement">《银行卡绑定协议》</a>
-          </a-checkbox>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- 解绑银行卡对话框 -->
-    <a-modal
-      v-model:visible="unbindModalVisible"
-      title="解绑银行卡"
-      @ok="handleUnbindCard"
-      @cancel="handleUnbindCancel"
-      :confirm-loading="unbindLoading"
-      :width="500"
-      :ok-text="'确认解绑'"
-      :cancel-text="'取消'"
-    >
-      <div class="unbind-info">
-        <div class="info-item">
-          <span class="label">持卡人姓名：</span>
-          <span class="value">{{ boundCard.realName }}</span>
-        </div>
-        <div class="info-item">
-          <span class="label">银行卡号：</span>
-          <span class="value">{{ formatCardNumber(boundCard.cardNumber) }}</span>
-        </div>
-        <div class="info-item">
-          <span class="label">开户行：</span>
-          <span class="value">{{ boundCard.bankName }}</span>
-        </div>
-        <a-divider />
-      </div>
-      
-      <a-form
-        ref="unbindFormRef"
-        :model="unbindFormState"
-        :rules="unbindFormRules"
-        layout="vertical"
-      >
-        <a-form-item label="手机号码" name="phone">
-          <a-input
-            v-model:value="unbindFormState.phone"
-            placeholder="请输入银行预留手机号"
-            size="large"
-            :maxlength="11"
-          />
-        </a-form-item>
-        
-        <a-form-item label="短信验证码" name="smsCode">
-          <div class="sms-code-input">
-            <a-input
-              v-model:value="unbindFormState.smsCode"
-              placeholder="请输入短信验证码"
-              size="large"
-              :maxlength="6"
-            />
-            <a-button
-              type="primary"
-              :disabled="countdown > 0"
-              @click="sendSmsCode"
-              class="sms-button"
-            >
-              {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
-            </a-button>
-          </div>
-        </a-form-item>
-        
-        <a-form-item name="agreement">
-          <a-checkbox v-model:checked="unbindFormState.agreement">
-            解绑银行卡前，我已阅读并确认
-            <a href="#" @click.prevent="showUnbindAgreement">《银行卡解绑协议》</a>
-          </a-checkbox>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
 </template>
 
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import { PlusOutlined } from '@ant-design/icons-vue'
 import { message, Modal } from 'ant-design-vue'
+import { addBankCard, getBankCardInfo, delBankCard } from '@/apis/admin'
+
+onMounted(() => {
+    getBoundCardInfo();
+})
 
 // 已绑定银行卡数据 - 初始为空
-const boundCard = ref(null)
+const boundCard = ref<any>(null)
 
 // 是否已绑定银行卡 - 初始为false
 const hasBoundCard = computed(() => {
-  return boundCard.value !== null && boundCard.value !== undefined
+    return boundCard.value !== null && boundCard.value !== undefined && boundCard.value.bank_card_no
 })
 
 // 银行选项
 const bankOptions = ref([
-  { label: '中国工商银行', value: '中国工商银行' },
-  { label: '中国建设银行', value: '中国建设银行' },
-  { label: '中国农业银行', value: '中国农业银行' },
-  { label: '中国银行', value: '中国银行' },
-  { label: '交通银行', value: '交通银行' },
-  { label: '招商银行', value: '招商银行' },
-  { label: '中国邮政储蓄银行', value: '中国邮政储蓄银行' },
-  { label: '中信银行', value: '中信银行' },
-  { label: '光大银行', value: '光大银行' },
-  { label: '华夏银行', value: '华夏银行' },
-  { label: '民生银行', value: '民生银行' },
-  { label: '兴业银行', value: '兴业银行' },
-  { label: '浦发银行', value: '浦发银行' },
-  { label: '平安银行', value: '平安银行' },
-  { label: '广发银行', value: '广发银行' },
+    { label: '中国工商银行', value: '中国工商银行' },
+    { label: '中国建设银行', value: '中国建设银行' },
+    { label: '中国农业银行', value: '中国农业银行' },
+    { label: '中国银行', value: '中国银行' },
+    { label: '交通银行', value: '交通银行' },
+    { label: '招商银行', value: '招商银行' },
+    { label: '中国邮政储蓄银行', value: '中国邮政储蓄银行' },
+    { label: '中信银行', value: '中信银行' },
+    { label: '光大银行', value: '光大银行' },
+    { label: '华夏银行', value: '华夏银行' },
+    { label: '民生银行', value: '民生银行' },
+    { label: '兴业银行', value: '兴业银行' },
+    { label: '浦发银行', value: '浦发银行' },
+    { label: '平安银行', value: '平安银行' },
+    { label: '广发银行', value: '广发银行' },
 ])
 
 // 添加银行卡对话框状态
@@ -211,36 +181,49 @@ const addModalVisible = ref(false)
 const addLoading = ref(false)
 const addFormRef = ref()
 const addFormState = reactive({
-  realName: '',
-  cardNumber: '',
-  bankName: '',
-  agreement: false
+    realName: '',
+    phone: '',
+    smsCode: '',
+    cardNumber: '',
+    bankName: '',
+    agreement: false
 })
 
+// 添加银行卡短信验证码倒计时
+const addCountdown = ref(0)
+
 // 添加银行卡表单验证规则
 const addFormRules = {
-  realName: [
-    { required: true, message: '请输入真实姓名', trigger: 'blur' },
-    { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '请输入2-10位中文字符', trigger: 'blur' }
-  ],
-  cardNumber: [
-    { required: true, message: '请输入银行卡号', trigger: 'blur' },
-    { 
-      validator: (_, value) => {
-        const cleanValue = value.replace(/\s+/g, '')
-        return /^[0-9]{16,19}$/.test(cleanValue) ? 
-          Promise.resolve() : 
-          Promise.reject('银行卡号格式不正确（16-19位数字）')
-      }, 
-      trigger: 'blur' 
-    }
-  ],
-  bankName: [
-    { required: true, message: '请选择开户行', trigger: 'change' }
-  ],
-  agreement: [
-    { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意协议'), trigger: 'change' }
-  ]
+    realName: [
+        { required: true, message: '请输入真实姓名', trigger: 'blur' },
+        { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '请输入2-10位中文字符', trigger: 'blur' }
+    ],
+    phone: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+    ],
+    smsCode: [
+        { required: true, message: '请输入短信验证码', trigger: 'blur' },
+        { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
+    ],
+    cardNumber: [
+        { required: true, message: '请输入银行卡号', trigger: 'blur' },
+        {
+            validator: (_, value) => {
+                const cleanValue = value.replace(/\s+/g, '')
+                return /^[0-9]{16,19}$/.test(cleanValue) ?
+                    Promise.resolve() :
+                    Promise.reject('银行卡号格式不正确（16-19位数字）')
+            },
+            trigger: 'blur'
+        }
+    ],
+    bankName: [
+        { required: true, message: '请选择开户行', trigger: 'change' }
+    ],
+    agreement: [
+        { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意协议'), trigger: 'change' }
+    ]
 }
 
 // 解绑银行卡对话框状态
@@ -248,176 +231,323 @@ const unbindModalVisible = ref(false)
 const unbindLoading = ref(false)
 const unbindFormRef = ref()
 const unbindFormState = reactive({
-  phone: '',
-  smsCode: '',
-  agreement: false
+    phone: '',
+    smsCode: '',
+    agreement: false
 })
 
-// 短信验证码倒计时
-const countdown = ref(0)
+// 解绑银行卡短信验证码倒计时
+const unbindCountdown = ref(0)
 
 // 解绑银行卡表单验证规则
 const unbindFormRules = {
-  phone: [
-    { required: true, message: '请输入手机号', trigger: 'blur' },
-    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
-  ],
-  smsCode: [
-    { required: true, message: '请输入短信验证码', trigger: 'blur' },
-    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
-  ],
-  agreement: [
-    { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意协议'), trigger: 'change' }
-  ]
+    phone: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+    ],
+    smsCode: [
+        { required: true, message: '请输入短信验证码', trigger: 'blur' },
+        { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
+    ],
+    agreement: [
+        { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请阅读并同意协议'), trigger: 'change' }
+    ]
 }
 
 // 格式化银行卡号输入（每4位加空格）
 const formatCardInput = (e) => {
-  let value = e.target.value.replace(/\s+/g, '').replace(/[^\d]/g, '')
-  let formattedValue = ''
-  
-  for (let i = 0; i < value.length; i++) {
-    if (i > 0 && i % 4 === 0) {
-      formattedValue += ' '
+    let value = e.target.value.replace(/\s+/g, '').replace(/[^\d]/g, '')
+    let formattedValue = ''
+
+    for (let i = 0; i < value.length; i++) {
+        if (i > 0 && i % 4 === 0) {
+            formattedValue += ' '
+        }
+        formattedValue += value[i]
     }
-    formattedValue += value[i]
-  }
-  
-  addFormState.cardNumber = formattedValue
+
+    addFormState.cardNumber = formattedValue
 }
 
 // 显示添加银行卡对话框
 const showAddModal = () => {
-  addModalVisible.value = true
-  // 重置表单
-  Object.assign(addFormState, {
-    realName: '',
-    cardNumber: '',
-    bankName: '',
-    agreement: false
-  })
+    addModalVisible.value = true
+    // 重置表单
+    Object.assign(addFormState, {
+        realName: '',
+        phone: '',
+        smsCode: '',
+        cardNumber: '',
+        bankName: '',
+        agreement: false
+    })
+    addCountdown.value = 0
 }
 
 // 显示解绑银行卡对话框
 const showUnbindModal = () => {
-  unbindModalVisible.value = true
-  // 重置表单
-  Object.assign(unbindFormState, {
-    phone: '',
-    smsCode: '',
-    agreement: false
-  })
+    unbindModalVisible.value = true
+    // 重置表单
+    Object.assign(unbindFormState, {
+        phone: '',
+        smsCode: '',
+        agreement: false
+    })
+    unbindCountdown.value = 0
+
+    // 如果已绑定银行卡，自动填充手机号
+    if (boundCard.value && boundCard.value.phone) {
+        // 从脱敏的手机号中获取原始手机号（如果有的话）
+        // 注意：这里假设原始手机号保存在其他地方，或者需要用户重新输入
+        // 实际项目中可能需要从服务器获取原始手机号
+        unbindFormState.phone = ''
+    }
 }
 
 // 处理添加银行卡
-const handleAddCard = () => {
-  addFormRef.value.validate().then(() => {
-    addLoading.value = true
-    
-    // 模拟API请求
-    setTimeout(() => {
-      // 清除空格，保存纯数字
-      const cleanCardNumber = addFormState.cardNumber.replace(/\s+/g, '')
-      
-      // 更新已绑定银行卡信息
-      boundCard.value = {
-        realName: addFormState.realName,
-        cardNumber: cleanCardNumber,
-        bankName: addFormState.bankName,
-        phone: '138****' + cleanCardNumber.substr(cleanCardNumber.length - 4) // 模拟手机号
-      }
-      
-      addModalVisible.value = false
-      addLoading.value = false
-      
-      message.success('银行卡绑定成功')
-    }, 1000)
-  }).catch(error => {
-    console.log('验证失败:', error)
-  })
+const handleAddCard = async () => {
+    try {
+        // 验证表单
+        await addFormRef.value.validate()
+        addLoading.value = true
+
+        // 清除空格，保存纯数字
+        const cleanCardNumber = addFormState.cardNumber.replace(/\s+/g, '')
+
+        // 构造API请求参数（按照后台要求的字段名）
+        const requestData = {
+            bank_card_no: cleanCardNumber, // 银行卡号
+            bank_name: addFormState.bankName, // 银行名称
+            code: addFormState.smsCode, // 短信验证码
+            name: addFormState.realName, // 真实姓名
+            phone: addFormState.phone // 手机号
+        }
+
+        console.log('发送银行卡添加请求:', requestData)
+
+        // 调用API
+        const res = await addBankCard(requestData)
+
+        console.log('添加银行卡结果:', res)
+
+        // 更新本地已绑定银行卡信息
+        boundCard.value = {
+            ...requestData,
+            phone: addFormState.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') // 脱敏显示
+        }
+
+        addModalVisible.value = false
+        addLoading.value = false
+
+        message.success('银行卡绑定成功')
+        getBoundCardInfo();
+    } catch (error: any) {
+        console.log('银行卡绑定失败:', error)
+        addLoading.value = false
+
+        // 显示错误信息
+        if (error.response?.data?.message) {
+            message.error(error.response.data.message)
+        } else if (error.message) {
+            message.error(error.message)
+        } else {
+            message.error('银行卡绑定失败，请重试')
+        }
+    }
+}
+
+// 获取绑定信息
+const getBoundCardInfo = async () => {
+    try {
+        const res = await getBankCardInfo()
+        console.log('获取绑定银行卡信息结果:', res)
+
+        // 检查响应是否成功且有数据
+        if (res && res.bank_card_no) {
+            // 格式化电话号码，用于脱敏显示
+            const phoneNumber = res.phone || ''
+            const formattedPhone = phoneNumber ?
+                phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') :
+                ''
+
+            boundCard.value = {
+                ...res,
+                phone: formattedPhone,
+                // 保存原始手机号用于验证（如果API返回原始手机号）
+                original_phone: res.phone || ''
+            }
+            console.log('已绑定银行卡信息:', boundCard.value)
+        } else {
+            // 没有绑定银行卡
+            boundCard.value = null
+        }
+    } catch (error) {
+        console.log('获取绑定银行卡信息失败:', error)
+        boundCard.value = null
+    }
 }
 
 // 处理解绑银行卡
-const handleUnbindCard = () => {
-  unbindFormRef.value.validate().then(() => {
-    unbindLoading.value = true
-    
-    // 模拟API请求
-    setTimeout(() => {
-      // 清除已绑定银行卡信息
-      boundCard.value = null
-      unbindModalVisible.value = false
-      unbindLoading.value = false
-      
-      message.success('银行卡解绑成功')
-    }, 1000)
-  }).catch(error => {
-    console.log('验证失败:', error)
-  })
+const handleUnbindCard = async () => {
+    try {
+        await unbindFormRef.value.validate()
+        unbindLoading.value = true
+
+        // 确保有绑定的银行卡数据
+        if (!boundCard.value || !boundCard.value.id) {
+            message.error('银行卡信息无效，无法解绑')
+            unbindLoading.value = false
+            return
+        }
+
+        // 构造解绑银行卡请求参数
+        const requestData = {
+            code: unbindFormState.smsCode, // 短信验证码
+            id: boundCard.value.id, // 银行卡ID
+            phone: unbindFormState.phone // 手机号（需要用户输入，因为显示的是脱敏的）
+        }
+
+        console.log('发送银行卡解绑请求:', requestData)
+
+        // 调用解绑银行卡API
+        const res: any = await delBankCard(requestData)
+        console.log('解绑银行卡结果:', res)
+        
+        if (res.code === 1) {
+            message.success('解绑成功')
+            // 先关闭模态框
+            unbindModalVisible.value = false
+            
+            // 重置表单
+            Object.assign(unbindFormState, {
+                phone: '',
+                smsCode: '',
+                agreement: false
+            })
+            
+            // 等待模态框完全关闭后再更新数据
+            await nextTick()
+            
+            // 刷新银行卡信息（会设置为null）
+            await getBoundCardInfo();
+        } else {
+            message.error(res.msg || '解绑失败')
+        }
+    } catch (error: any) {
+        console.log('银行卡解绑失败:', error)
+        message.error('银行卡解绑失败，请重试')
+    } finally {
+        unbindLoading.value = false
+    }
 }
 
-// 发送短信验证码
-const sendSmsCode = () => {
-  if (!unbindFormState.phone) {
-    message.warning('请输入手机号码')
-    return
-  }
-  
-  if (!/^1[3-9]\d{9}$/.test(unbindFormState.phone)) {
-    message.warning('手机号格式不正确')
-    return
-  }
-  
-  // 模拟验证手机号是否匹配
-  const expectedPhone = boundCard.value.phone.replace(/\*/g, '')
-  const inputPhone = unbindFormState.phone
-  const lastFourDigits = boundCard.value.cardNumber.substr(boundCard.value.cardNumber.length - 4)
-  
-  if (inputPhone !== '138' + lastFourDigits) {
-    message.error('手机号与预留手机号不匹配')
-    return
-  }
-  
-  // 开始倒计时
-  countdown.value = 60
-  const timer = setInterval(() => {
-    countdown.value -= 1
-    if (countdown.value <= 0) {
-      clearInterval(timer)
+// 发送添加银行卡短信验证码
+const sendAddSmsCode = async () => {
+    if (!addFormState.phone) {
+        message.warning('请输入手机号码')
+        return
+    }
+
+    if (!/^1[3-9]\d{9}$/.test(addFormState.phone)) {
+        message.warning('手机号格式不正确')
+        return
+    }
+
+    try {
+        // TODO: 这里需要调用发送短信验证码的API
+        // 假设有一个 sendSmsCode API
+        // const res = await sendSmsCode({
+        //     phone: addFormState.phone,
+        //     type: 'BIND_CARD' // 发送验证码的类型
+        // })
+
+        // 开始倒计时
+        addCountdown.value = 60
+        const timer = setInterval(() => {
+            addCountdown.value -= 1
+            if (addCountdown.value <= 0) {
+                clearInterval(timer)
+            }
+        }, 1000)
+
+        // 模拟发送验证码（实际为123456）
+        message.success('验证码已发送，请注意查收（演示验证码：123456）')
+        // 注意：实际项目中不应该自动填入验证码，这里只是为了演示
+        // addFormState.smsCode = '123456'
+    } catch (error) {
+        console.log('发送验证码失败:', error)
+        message.error('发送验证码失败，请重试')
+    }
+}
+
+// 发送解绑银行卡短信验证码
+const sendUnbindSmsCode = async () => {
+    if (!unbindFormState.phone) {
+        message.warning('请输入手机号码')
+        return
+    }
+
+    if (!/^1[3-9]\d{9}$/.test(unbindFormState.phone)) {
+        message.warning('手机号格式不正确')
+        return
+    }
+
+    try {
+        // 验证手机号是否匹配（这里需要用户输入原始手机号）
+        // 因为界面上显示的是脱敏的手机号，所以无法直接比较
+        // 可以在这里添加额外的验证逻辑，比如调用API验证手机号是否正确
+
+        // TODO: 这里需要调用发送短信验证码的API
+        // const res = await sendSmsCode({
+        //     phone: unbindFormState.phone,
+        //     type: 'UNBIND_CARD'
+        // })
+
+        // 开始倒计时
+        unbindCountdown.value = 60
+        const timer = setInterval(() => {
+            unbindCountdown.value -= 1
+            if (unbindCountdown.value <= 0) {
+                clearInterval(timer)
+            }
+        }, 1000)
+
+        // 模拟发送验证码
+        message.success('验证码已发送，请注意查收（演示验证码：123456）')
+        // 注意：实际项目中不应该自动填入验证码
+        // unbindFormState.smsCode = '123456'
+    } catch (error) {
+        console.log('发送验证码失败:', error)
+        message.error('发送验证码失败，请重试')
     }
-  }, 1000)
-  
-  // 模拟发送验证码（实际为123456）
-  message.success('验证码已发送，请注意查收（演示验证码：123456）')
-  unbindFormState.smsCode = '123456'
 }
 
 // 格式化银行卡号显示
-const formatCardNumber = (cardNumber) => {
-  if (!cardNumber) return ''
-  const cleanNumber = cardNumber.replace(/\s+/g, '')
-  const visibleDigits = 4
-  const maskedPart = '*'.repeat(cleanNumber.length - visibleDigits * 2)
-  const part1 = cleanNumber.substring(0, visibleDigits)
-  const part2 = cleanNumber.substring(cleanNumber.length - visibleDigits)
-  return `${part1} ${maskedPart} ${part2}`
+const formatCardNumber = (cardNumber: string) => {
+    if (!cardNumber) return ''
+    const cleanNumber = cardNumber.replace(/\s+/g, '')
+    const visibleDigits = 4
+    const maskedPart = '*'.repeat(cleanNumber.length - visibleDigits * 2)
+    const part1 = cleanNumber.substring(0, visibleDigits)
+    const part2 = cleanNumber.substring(cleanNumber.length - visibleDigits)
+    return `${part1} ${maskedPart} ${part2}`
 }
 
 // 取消添加银行卡
 const handleAddCancel = () => {
-  addModalVisible.value = false
+    addModalVisible.value = false
 }
 
 // 取消解绑银行卡
 const handleUnbindCancel = () => {
-  unbindModalVisible.value = false
+    unbindModalVisible.value = false
 }
 
 // 显示协议（示例）
 const showAgreement = () => {
-  Modal.info({
-    title: '银行卡绑定协议',
-    content: `
+    Modal.info({
+        title: '银行卡绑定协议',
+        content: `
       <div style="max-height: 400px; overflow-y: auto;">
         <h4>一、总则</h4>
         <p>1. 本协议旨在明确用户绑定银行卡的相关权利和义务。</p>
@@ -437,16 +567,16 @@ const showAgreement = () => {
         <p>2. 如发现异常情况，应立即联系平台客服。</p>
       </div>
     `,
-    width: 600,
-    okText: '我已阅读并同意'
-  })
+        width: 600,
+        okText: '我已阅读并同意'
+    })
 }
 
 // 显示解绑协议（示例）
 const showUnbindAgreement = () => {
-  Modal.info({
-    title: '银行卡解绑协议',
-    content: `
+    Modal.info({
+        title: '银行卡解绑协议',
+        content: `
       <div style="max-height: 400px; overflow-y: auto;">
         <h4>一、解绑须知</h4>
         <p>1. 解绑银行卡将解除该银行卡与账户的绑定关系。</p>
@@ -468,245 +598,245 @@ const showUnbindAgreement = () => {
         <p>3. 如遇问题，请联系客服协助处理。</p>
       </div>
     `,
-    width: 600,
-    okText: '我已阅读并理解'
-  })
+        width: 600,
+        okText: '我已阅读并理解'
+    })
 }
 </script>
 
 <style scoped>
 .bank-card-container {
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 32px;
-  background-color: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  min-height: 400px;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 32px;
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    min-height: 400px;
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 40px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    align-items: center;
+    margin-bottom: 40px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
 }
 
 .header h2 {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #333;
 }
 
 .header .subtitle {
-  margin-left: 12px;
-  color: #1890ff;
-  font-size: 14px;
-  padding-top: 4px;
+    margin-left: 12px;
+    color: #1890ff;
+    font-size: 14px;
+    padding-top: 4px;
 }
 
-.add-card-section, .bound-card-section {
-  /* display: flex;
-  justify-content: center; */
-  align-items: center;
-  min-height: 320px;
+.add-card-section,
+.bound-card-section {
+    align-items: center;
+    min-height: 320px;
 }
 
 .add-card-box {
-  width: 320px;
-  height: 200px;
-  border: 2px dashed #d9d9d9;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background-color: #fafafa;
+    width: 320px;
+    height: 200px;
+    border: 2px dashed #d9d9d9;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: #fafafa;
 }
 
 .add-card-box:hover {
-  border-color: #1890ff;
-  border-style: solid;
-  background-color: #f0f8ff;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
+    border-color: #1890ff;
+    border-style: solid;
+    background-color: #f0f8ff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
 }
 
 .add-icon {
-  font-size: 56px;
-  color: #bfbfbf;
-  margin-bottom: 20px;
-  transition: all 0.3s;
+    font-size: 56px;
+    color: #bfbfbf;
+    margin-bottom: 20px;
+    transition: all 0.3s;
 }
 
 .add-card-box:hover .add-icon {
-  color: #1890ff;
+    color: #1890ff;
 }
 
 .add-text {
-  font-size: 20px;
-  color: #8c8c8c;
-  font-weight: 500;
-  transition: all 0.3s;
+    font-size: 20px;
+    color: #8c8c8c;
+    font-weight: 500;
+    transition: all 0.3s;
 }
 
 .add-card-box:hover .add-text {
-  color: #1890ff;
+    color: #1890ff;
 }
 
 .card-display {
-  width: 450px;
-  height: 240px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 16px;
-  padding: 28px;
-  color: white;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-  position: relative;
-  overflow: hidden;
+    width: 450px;
+    height: 240px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 28px;
+    color: white;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    position: relative;
+    overflow: hidden;
 }
 
 .card-display::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  right: -50%;
-  width: 200px;
-  height: 200px;
-  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
-  border-radius: 50%;
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+    border-radius: 50%;
 }
 
 .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 36px;
-  position: relative;
-  z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 36px;
+    position: relative;
+    z-index: 1;
 }
 
 .bank-icon img {
-  width: 64px;
-  height: 64px;
-  background-color: white;
-  border-radius: 10px;
-  padding: 10px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    width: 64px;
+    height: 64px;
+    background-color: white;
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .card-number {
-  font-size: 26px;
-  font-weight: 600;
-  letter-spacing: 3px;
-  font-family: 'Courier New', monospace;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: 3px;
+    font-family: 'Courier New', monospace;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .card-details {
-  margin-bottom: 20px;
-  position: relative;
-  z-index: 1;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
 }
 
 .detail-item {
-  margin-bottom: 14px;
-  font-size: 16px;
-  display: flex;
+    margin-bottom: 14px;
+    font-size: 16px;
+    display: flex;
 }
 
 .detail-item .label {
-  opacity: 0.85;
-  width: 100px;
+    opacity: 0.85;
+    width: 100px;
 }
 
 .detail-item .value {
-  font-weight: 500;
-  flex: 1;
+    font-weight: 500;
+    flex: 1;
 }
 
 .card-actions {
-  position: absolute;
-  bottom: 24px;
-  right: 28px;
-  z-index: 1;
+    position: absolute;
+    bottom: 24px;
+    right: 28px;
+    z-index: 1;
 }
 
 :deep(.ant-btn-link) {
-  color: rgba(255, 255, 255, 0.9) !important;
-  font-size: 16px;
-  padding: 4px 8px;
-  border-radius: 4px;
+    color: rgba(255, 255, 255, 0.9) !important;
+    font-size: 16px;
+    padding: 4px 8px;
+    border-radius: 4px;
 }
 
 :deep(.ant-btn-link:hover) {
-  color: white !important;
-  background-color: rgba(255, 255, 255, 0.15);
+    color: white !important;
+    background-color: rgba(255, 255, 255, 0.15);
 }
 
 .unbind-info {
-  background-color: #f6f8fa;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 20px;
+    background-color: #f6f8fa;
+    padding: 16px;
+    border-radius: 8px;
+    margin-bottom: 20px;
 }
 
 .info-item {
-  margin-bottom: 12px;
-  font-size: 15px;
-  display: flex;
+    margin-bottom: 12px;
+    font-size: 15px;
+    display: flex;
 }
 
 .info-item .label {
-  color: #666;
-  width: 100px;
+    color: #666;
+    width: 100px;
 }
 
 .info-item .value {
-  color: #333;
-  font-weight: 500;
-  flex: 1;
+    color: #333;
+    font-weight: 500;
+    flex: 1;
 }
 
 .sms-code-input {
-  display: flex;
-  gap: 12px;
+    display: flex;
+    gap: 12px;
 }
 
 .sms-code-input :deep(.ant-input) {
-  flex: 1;
+    flex: 1;
 }
 
 .sms-button {
-  white-space: nowrap;
+    white-space: nowrap;
+    min-width: 120px;
 }
 
 :deep(.ant-modal-body) {
-  padding: 24px;
+    padding: 24px;
 }
 
 :deep(.ant-form-item) {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 :deep(.ant-input-lg) {
-  border-radius: 6px;
+    border-radius: 6px;
 }
 
 :deep(.ant-select-lg) {
-  border-radius: 6px;
+    border-radius: 6px;
 }
 
 :deep(.ant-checkbox-wrapper) {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 :deep(.ant-checkbox-checked .ant-checkbox-inner) {
-  background-color: #1890ff;
-  border-color: #1890ff;
+    background-color: #1890ff;
+    border-color: #1890ff;
 }
-</style>
\ No newline at end of file
+</style> 
\ No newline at end of file
diff --git a/src/views/admin/account/cost/invoice/index.vue b/src/views/admin/account/cost/invoice/index.vue
index 84411fe..d485056 100644
--- a/src/views/admin/account/cost/invoice/index.vue
+++ b/src/views/admin/account/cost/invoice/index.vue
@@ -76,9 +76,14 @@
     </a-modal>
 
 </template>
-<script setup>
+<script lang="ts" setup>
 import { ref, onBeforeMount, computed } from 'vue'
 import { usePagination } from '@/hooks'
+import { 
+   invoiceList,
+   invoiceDetail
+} from '@/apis/admin'
+
 // const listData=ref([ {title:1}])
 // const paginationState=ref({
 //             total: 0,
@@ -134,25 +139,41 @@ const rules = computed(() => ({
     ]
 }))
 const columns = ref([
-    { title: '申请时间', dataIndex: 'flowNum', key: 'flowNum' },
-    { title: '开票内容', dataIndex: 'transactionTime', key: 'transactionTime' },
-    { title: '发票抬头', dataIndex: 'flowNum', key: 'flowNum' },
-    { title: '发票总额', dataIndex: 'flowNum', key: 'flowNum' },
-    { title: '开票方式', dataIndex: 'flowNum', key: 'flowNum' },
-    { title: '发票性质', dataIndex: 'flowNum', key: 'flowNum' },
-    { title: '发票状态', dataIndex: 'flowNum', key: 'flowNum' },
-    { title: '驳回原因', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '申请时间', dataIndex: 'invoiceDate', key: 'invoiceDate' },
+    { title: '开票内容', dataIndex: 'invoiceContent', key: 'invoiceContent' },
+    { title: '发票抬头', dataIndex: 'invoiceTitle', key: 'invoiceTitle' },
+    { title: '发票总额', dataIndex: 'invoiceAmount', key: 'invoiceAmount' },
+    { title: '开票方式', dataIndex: 'invoiceMethod', key: 'invoiceMethod' },
+    { title: '发票类型', dataIndex: 'invoiceType', key: 'invoiceType' },
+    { title: '发票状态', dataIndex: 'invoiceStatus', key: 'invoiceStatus' },
+    { title: '驳回原因', dataIndex: 'rejectReason', key: 'rejectReason' },
     { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
 ])
 onBeforeMount(() => {
     getPageList()
 
 })
-const getPageList = () => {
-    listData.value = [
-        { flowNum: 1 }
-    ]
-}
+
+const getPageList = async () => {
+  try {
+    const params = {
+      page_num: 1,
+      page_size: 10, // 获取足够多的数据来统计
+    };
+
+    const response: any = await invoiceList(params);
+    
+    if (response.data && Array.isArray(response.data)) {
+        listData.value = response.data
+      console.log('发票列表:', response.data);
+    }
+    
+    
+  } catch (error) {
+    console.error('获取全部消息失败:', error);
+    listData.value = [];
+  }
+};
 /**
  * 分页
  */
diff --git a/src/views/admin/account/cost/myOrder/index.vue b/src/views/admin/account/cost/myOrder/index.vue
index de1d5fe..5082932 100644
--- a/src/views/admin/account/cost/myOrder/index.vue
+++ b/src/views/admin/account/cost/myOrder/index.vue
@@ -36,10 +36,11 @@
                 <!-- 批量操作区域 -->
                 <div class="batch-operations" style="margin-bottom: 16px;">
                     <a-space>
+                        <!--  :disabled="selectedRowKeys.length === 0" -->
                         <a-button 
                             type="primary" 
                             @click="handleBatchInvoice"
-                            :disabled="selectedRowKeys.length === 0"
+                           
                         >
                             批量去开票
                         </a-button>
@@ -56,7 +57,7 @@
                     :pagination="paginationState"
                     :rowSelection="rowSelection"
                     @change="onTableChange"
-                    :rowKey="record => record.id || record.serial_number"
+                    :rowKey="record => record.id || record.order_number"
                 >
                     <template #bodyCell="{ column, record }">
                         <template v-if="column.key === 'created_at'">
@@ -66,7 +67,9 @@
                         </template>
                         <template v-if="column.key === 'billing_end'">
                             <div>
-                                {{   dayjs(record.billing_start).format('YYYY-MM-DD HH:mm') +"~" +dayjs(record.billing_end).format('YYYY-MM-DD HH:mm')  }}
+                                {{ record.billing_start ? dayjs(record.billing_start).format('YYYY-MM-DD HH:mm') : '' }}
+                                {{ record.billing_start && record.billing_end ? '~' : '' }}
+                                {{ record.billing_end ? dayjs(record.billing_end).format('YYYY-MM-DD HH:mm') : '' }}
                             </div>
                         </template>
                         <template v-if="column.key === 'price'">
@@ -76,15 +79,29 @@
                         </template>
                         <template v-if="column.key === 'real_amount'">
                             <div style="color: #ff4d4f; font-weight: 500;">
-                                -¥{{ record.real_amount || '0.00' }}
+                                -¥{{ record.real_amount || record.amount || '0.00' }}
                             </div>
                         </template>
+                        <!-- 计费方式列 -->
+                        <template v-if="column.key === 'billing_method'">
+                            <a-tag :color="getBillingMethodColor(record.billing_method)">
+                                {{ getBillingMethodText(record.billing_method) }}
+                            </a-tag>
+                        </template>
+                        <!-- 支付状态列 -->
+                        <template v-if="column.key === 'pay_status'">
+                            <a-tag :color="getPayStatusColor(record.pay_status)">
+                                {{ getPayStatusText(record.pay_status) }}
+                            </a-tag>
+                        </template>
                         <template v-if="column.key === 'action'">
                             <a-space>
+                                <!--   :disabled="!canApplyInvoice(record)" -->
                                 <a-button 
                                     type="link" 
                                     size="small"
                                     @click="handleSingleInvoice(record)"
+                                
                                 >
                                     去开票
                                 </a-button>
@@ -129,8 +146,8 @@
                             <div class="preview-title">订单列表：</div>
                             <div class="order-list">
                                 <div v-for="(order, index) in selectedRows.slice(0, 3)" :key="order.id" class="order-item">
-                                    <span>{{ order.serial_number }}</span>
-                                    <span>-¥{{ order.real_amount || '0.00' }}</span>
+                                    <span>{{ order.order_number }}</span>
+                                    <span>-¥{{ order.amount || order.real_amount || '0.00' }}</span>
                                 </div>
                                 <div v-if="selectedRows.length > 3" class="order-more">
                                     等 {{ selectedRows.length }} 个订单
@@ -142,11 +159,19 @@
                         <!-- 单个开票显示单个订单 -->
                         <div class="order-info-item">
                             <span class="info-label">订单编号：</span>
-                            <span class="info-value">{{ currentInvoiceRecord?.serial_number || '-' }}</span>
+                            <span class="info-value">{{ currentInvoiceRecord?.order_number || '-' }}</span>
+                        </div>
+                        <div class="order-info-item">
+                            <span class="info-label">计费方式：</span>
+                            <span class="info-value">{{ getBillingMethodText(currentInvoiceRecord?.billing_method) }}</span>
+                        </div>
+                        <div class="order-info-item">
+                            <span class="info-label">支付状态：</span>
+                            <span class="info-value">{{ getPayStatusText(currentInvoiceRecord?.pay_status) }}</span>
                         </div>
                         <div class="order-info-item">
                             <span class="info-label">开票金额：</span>
-                            <span class="info-value">¥{{ currentInvoiceRecord?.real_amount || '0.00' }}</span>
+                            <span class="info-value">¥{{ currentInvoiceRecord?.amount || currentInvoiceRecord?.real_amount || '0.00' }}</span>
                         </div>
                     </template>
                 </div>
@@ -307,90 +332,11 @@
 <script setup lang="ts">
 import { ref, onBeforeMount, computed, reactive, nextTick } from 'vue'
 import { usePagination } from '@/hooks'
-import { useList } from '@/apis/admin'
+import { getOrderList } from '@/apis/admin'
 import dayjs from 'dayjs'
 import { message, FormInstance } from 'ant-design-vue'
 import type { Rule } from 'ant-design-vue/es/form'
 
-// 模拟表格数据
-const mockData = [
-    {
-        id: '1',
-        serial_number: 'SN202312270001',
-        created_at: '2023-12-27 10:30:00',
-        host_id: 'HOST-001',
-        host_case_id: 'CASE-001',
-        computing_power_model: 'RTX 4090',
-        gpu_count: 2,
-        billing_start: '2023-12-27 10:00:00',
-        billing_end: '2023-12-27 11:00:00',
-        bill_time: '1小时',
-        price: '50.00',
-        real_amount: '100.00',
-        status: '待开票'
-    },
-    {
-        id: '2',
-        serial_number: 'SN202312270002',
-        created_at: '2023-12-27 11:45:00',
-        host_id: 'HOST-002',
-        host_case_id: 'CASE-002',
-        computing_power_model: 'RTX 4080',
-        gpu_count: 1,
-        billing_start: '2023-12-27 11:30:00',
-        billing_end: '2023-12-27 12:30:00',
-        bill_time: '1小时',
-        price: '40.00',
-        real_amount: '40.00',
-        status: '待开票'
-    },
-    {
-        id: '3',
-        serial_number: 'SN202312270003',
-        created_at: '2023-12-27 14:20:00',
-        host_id: 'HOST-003',
-        host_case_id: 'CASE-003',
-        computing_power_model: 'RTX 3090',
-        gpu_count: 4,
-        billing_start: '2023-12-27 14:00:00',
-        billing_end: '2023-12-27 15:00:00',
-        bill_time: '1小时',
-        price: '30.00',
-        real_amount: '120.00',
-        status: '已开票'
-    },
-    {
-        id: '4',
-        serial_number: 'SN202312270004',
-        created_at: '2023-12-27 16:15:00',
-        host_id: 'HOST-004',
-        host_case_id: 'CASE-004',
-        computing_power_model: 'A100',
-        gpu_count: 2,
-        billing_start: '2023-12-27 16:00:00',
-        billing_end: '2023-12-27 17:00:00',
-        bill_time: '1小时',
-        price: '80.00',
-        real_amount: '160.00',
-        status: '待开票'
-    },
-    {
-        id: '5',
-        serial_number: 'SN202312270005',
-        created_at: '2023-12-27 18:30:00',
-        host_id: 'HOST-005',
-        host_case_id: 'CASE-005',
-        computing_power_model: 'H100',
-        gpu_count: 1,
-        billing_start: '2023-12-27 18:00:00',
-        billing_end: '2023-12-27 19:00:00',
-        bill_time: '1小时',
-        price: '100.00',
-        real_amount: '100.00',
-        status: '待开票'
-    }
-]
-
 // 表格数据
 const { listData, paginationState, resetPagination, searchFormData } = usePagination()
 
@@ -438,6 +384,59 @@ const invoiceFormData = reactive({
     remark: ''
 })
 
+// 计费方式映射
+const billingMethodMap = {
+    'PayOnTime': { text: '按小时计费', color: 'blue' },
+    'PayOnDay': { text: '按天计费', color: 'green' },
+    'PayOnWeek': { text: '按周计费', color: 'orange' },
+    'PayOnMonth': { text: '按月计费', color: 'purple' },
+    'PayOnYear': { text: '按年计费', color: 'red' },
+    // 备用映射
+    'hourly': { text: '按小时计费', color: 'blue' },
+    'daily': { text: '按天计费', color: 'green' },
+    'weekly': { text: '按周计费', color: 'orange' },
+    'monthly': { text: '按月计费', color: 'purple' },
+    'yearly': { text: '按年计费', color: 'red' }
+}
+
+// 支付状态映射
+const payStatusMap = {
+    0: { text: '未支付', color: 'red' },
+    1: { text: '已支付', color: 'green' },
+    2: { text: '支付中', color: 'orange' },
+    3: { text: '支付失败', color: 'volcano' },
+    4: { text: '已退款', color: 'gray' }
+}
+
+// 获取计费方式文本
+const getBillingMethodText = (method: string) => {
+    if (!method) return '未知'
+    return billingMethodMap[method as keyof typeof billingMethodMap]?.text || method
+}
+
+// 获取计费方式颜色
+const getBillingMethodColor = (method: string) => {
+    if (!method) return 'default'
+    return billingMethodMap[method as keyof typeof billingMethodMap]?.color || 'default'
+}
+
+// 获取支付状态文本
+const getPayStatusText = (status: number) => {
+    if (status === undefined || status === null) return '未知'
+    return payStatusMap[status as keyof typeof payStatusMap]?.text || '未知'
+}
+
+// 获取支付状态颜色
+const getPayStatusColor = (status: number) => {
+    if (status === undefined || status === null) return 'default'
+    return payStatusMap[status as keyof typeof payStatusMap]?.color || 'default'
+}
+
+// 判断是否可以申请开票（只有已支付的订单可以开票）
+const canApplyInvoice = (record: any) => {
+    return record.pay_status === 1
+}
+
 // 表单验证规则
 const invoiceFormRules = reactive<Record<string, Rule[]>>({
     invoiceType: [
@@ -463,17 +462,27 @@ const invoiceFormRules = reactive<Record<string, Rule[]>>({
 
 // 表格列定义
 const columns = ref([
-    { title: '流水号', dataIndex: 'serial_number', key: 'serial_number' },
+    { title: '流水号', dataIndex: 'order_number', key: 'order_number' },
     { title: '交易时间', dataIndex: 'created_at', key: 'created_at' },
-    { title: '主机ID', dataIndex: 'host_id', key: 'host_id' },
-    { title: '实例ID', dataIndex: 'host_case_id', key: 'host_case_id' },
-    { title: '算力型号', dataIndex: 'computing_power_model', key: 'computing_power_model' },
-    { title: '算力数量', dataIndex: 'gpu_count', key: 'gpu_count' },
-    { title: '计费时间范围', dataIndex: 'billing_end', key: 'billing_end' },
-    { title: '计费时长', dataIndex: 'bill_time', key: 'bill_time' },
-    { title: '单价', dataIndex: 'price', key: 'price' },
-    { title: '交易金额', dataIndex: 'real_amount', key: 'real_amount' },
-    { title: '状态', dataIndex: 'status', key: 'status' },
+    { 
+        title: '计费方式', 
+        dataIndex: 'billing_method', 
+        key: 'billing_method',
+        width: 120
+    },
+    { 
+        title: '支付状态', 
+        dataIndex: 'pay_status', 
+        key: 'pay_status',
+        width: 100
+    },
+    { title: '产品名称', dataIndex: 'product_name', key: 'product_name' },
+    { 
+        title: '交易金额', 
+        dataIndex: 'amount', 
+        key: 'amount',
+        width: 120
+    },
     { 
         title: '操作', 
         key: 'action', 
@@ -484,54 +493,64 @@ const columns = ref([
 
 // 行选择配置
 const rowSelection = computed(() => ({
-    selectedRowKeys: selectedRowKeys.value,
-    onChange: (selectedKeys: string[], selectedRows: any[]) => {
-        selectedRowKeys.value = selectedKeys
-        selectedRows.value = selectedRows
-    },
-    getCheckboxProps: (record: any) => ({
-        disabled: record.status === '已开票'
-    })
+    // selectedRowKeys: selectedRowKeys.value,
+    // onChange: (selectedKeys: string[], selectedRows: any[]) => {
+    //     selectedRowKeys.value = selectedKeys
+    //     selectedRows.value = selectedRows
+    // },
+    // getCheckboxProps: (record: any) => ({
+    //     // 只有已支付的订单可以选择
+    //     disabled: !canApplyInvoice(record)
+    // }),
+    // // 添加这个配置以确保选择正常工作
+    // type: 'checkbox'
 }))
 
 // 计算选中记录的总金额
 const selectedTotalAmount = computed(() => {
     return selectedRows.value.reduce((total, record) => {
-        const amount = parseFloat(record.real_amount) || 0
+        const amount = parseFloat(record.amount || record.real_amount) || 0
         return total + amount
     }, 0)
 })
 
-// 初始化模拟数据
-const initMockData = () => {
-    listData.value = mockData
-    paginationState.total = mockData.length
-}
-
 onBeforeMount(() => {
-    // 初始化模拟数据
-    initMockData()
-    // 如果需要真实数据，可以调用 getPageList()
+    getPageList();
 })
 
 const getPageList = async () => {
     try {
         const { pageSize, current } = paginationState
-        const res: any = await useList({ pageSize: pageSize, pageNum: current })
-        listData.value = res.list
-        paginationState.total = res.count
+        const res: any = await getOrderList({ 
+            page_size: pageSize, 
+            page_num: current,
+            start_at: '', 
+            end_at: '',
+            order_number: ''
+        })
         console.log('订单列表:', res)
+        
+        if (res.data && Array.isArray(res.data)) {
+            listData.value = res.data
+            paginationState.total = res.total || res.data.length
+        } else {
+            listData.value = []
+            paginationState.total = 0
+        }
+        
+        console.log('表格数据:', listData.value)
+        
     } catch (error: any) {
-        console.error('产品优势请求失败:', error)
-        // 如果API请求失败，使用模拟数据
-        initMockData()
+        console.error('订单列表请求失败:', error)
+        listData.value = []
+        paginationState.total = 0
     }
 }
 
 /**
  * 分页
  */
-function onTableChange({ current, pageSize }) {
+function onTableChange({ current, pageSize }: { current: number, pageSize: number }) {
     paginationState.current = current
     paginationState.pageSize = pageSize
     getPageList()
@@ -562,6 +581,12 @@ function handleResetSearch() {
  * 单个去开票
  */
 function handleSingleInvoice(record: any) {
+    // 检查是否可以开票
+    if (!canApplyInvoice(record)) {
+        message.warning('只有已支付的订单可以申请开票')
+        return
+    }
+    
     currentInvoiceRecord.value = record
     isBatch.value = false
     resetInvoiceForm()
@@ -572,12 +597,20 @@ function handleSingleInvoice(record: any) {
  * 批量去开票
  */
 function handleBatchInvoice() {
-    if (selectedRowKeys.value.length === 0) {
-        message.warning('请先选择要开票的记录')
-        return
-    }
-    isBatch.value = true
-    resetInvoiceForm()
+    // if (selectedRowKeys.value.length === 0) {
+    //     message.warning('请先选择要开票的记录')
+    //     return
+    // }
+    
+    // // 检查是否所有选中的订单都已支付
+    // const unpaidOrders = selectedRows.value.filter(order => !canApplyInvoice(order))
+    // if (unpaidOrders.length > 0) {
+    //     message.warning(`有 ${unpaidOrders.length} 个订单未支付，请选择已支付的订单进行开票`)
+    //     return
+    // }
+    
+    // isBatch.value = true
+    // resetInvoiceForm()
     singleInvoiceModalVisible.value = true
 }
 
@@ -638,13 +671,17 @@ async function handleSingleInvoiceConfirm() {
             orders: isBatch.value 
                 ? selectedRows.value.map(row => ({
                     id: row.id,
-                    serialNumber: row.serial_number,
-                    amount: row.real_amount
+                    serialNumber: row.order_number,
+                    amount: row.amount || row.real_amount,
+                    billingMethod: row.billing_method,
+                    payStatus: row.pay_status
                 }))
                 : [{
                     id: currentInvoiceRecord.value.id,
-                    serialNumber: currentInvoiceRecord.value.serial_number,
-                    amount: currentInvoiceRecord.value.real_amount
+                    serialNumber: currentInvoiceRecord.value.order_number,
+                    amount: currentInvoiceRecord.value.amount || currentInvoiceRecord.value.real_amount,
+                    billingMethod: currentInvoiceRecord.value.billing_method,
+                    payStatus: currentInvoiceRecord.value.pay_status
                 }]
         }
         
@@ -879,4 +916,40 @@ function handleAddTitleConfirm() {
 :deep(.ant-form-item) {
     margin-bottom: 16px;
 }
+
+/* 表格样式优化 */
+:deep(.ant-table-tbody .ant-table-cell) {
+    padding: 8px;
+}
+
+/* 标签样式 */
+:deep(.ant-tag) {
+    margin-right: 0;
+    border-radius: 12px;
+    font-size: 12px;
+    padding: 2px 8px;
+    min-width: 60px;
+    text-align: center;
+}
+
+/* 禁用按钮样式 */
+:deep(.ant-btn-link[disabled]) {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+}
+
+/* 禁用复选框样式 */
+:deep(.ant-checkbox-disabled .ant-checkbox-inner) {
+    background-color: #f5f5f5;
+    border-color: #d9d9d9 !important;
+}
+
+:deep(.ant-checkbox-disabled .ant-checkbox-inner::after) {
+    border-color: rgba(0, 0, 0, 0.25);
+}
+
+:deep(.ant-checkbox-disabled + span) {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/admin/account/msgCenter/index.vue b/src/views/admin/account/msgCenter/index.vue
index 5bc84ae..86a3636 100644
--- a/src/views/admin/account/msgCenter/index.vue
+++ b/src/views/admin/account/msgCenter/index.vue
@@ -1,49 +1,191 @@
 <template>
-    <a-card title="我的消息">
-        <a-tabs v-model:activeKey="activeKey">
-            <a-tab-pane key="all" tab="全部"></a-tab-pane>
-            <a-tab-pane key="money" tab="资金消息" force-render></a-tab-pane>
-            <a-tab-pane key="secure" tab="安全消息"></a-tab-pane>
-            <a-tab-pane key="active" tab="活动消息"></a-tab-pane>
-        </a-tabs>
-         <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
-        :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
-      </a-table>
-    </a-card>
+  <a-card title="我的消息">
+    <a-tabs v-model:activeKey="activeKey">
+      <!-- 使用customRender来渲染带徽章的标签 -->
+      <a-tab-pane key="all">
+        <template #tab>
+          <span class="tab-label">
+            全部
+            <a-badge 
+              v-if="allUnreadCount > 0" 
+              :count="allUnreadCount" 
+              class="tab-badge"
+              :offset="[5, -2]"
+            />
+          </span>
+        </template>
+      </a-tab-pane>
+      
+      <a-tab-pane key="money">
+        <template #tab>
+          <span class="tab-label">
+            资金消息
+            <a-badge 
+              v-if="moneyUnreadCount > 0" 
+              :count="moneyUnreadCount" 
+              class="tab-badge"
+              :offset="[5, -2]"
+            />
+          </span>
+        </template>
+      </a-tab-pane>
+      
+      <a-tab-pane key="secure">
+        <template #tab>
+          <span class="tab-label">
+            安全消息
+            <a-badge 
+              v-if="secureUnreadCount > 0" 
+              :count="secureUnreadCount" 
+              class="tab-badge"
+              :offset="[5, -2]"
+            />
+          </span>
+        </template>
+      </a-tab-pane>
+      
+      <a-tab-pane key="active">
+        <template #tab>
+          <span class="tab-label">
+            活动消息
+            <a-badge 
+              v-if="activeUnreadCount > 0" 
+              :count="activeUnreadCount" 
+              class="tab-badge"
+              :offset="[5, -2]"
+            />
+          </span>
+        </template>
+      </a-tab-pane>
+    </a-tabs>
+    
+    <a-table 
+      :columns="columns"
+      :data-source="billData" 
+      :pagination="pagination" 
+      @change="handleTableChange"
+      :loading="loading" 
+      class="bill-table" 
+      :scroll="{ x: 1200 }"
+      bordered>
+      
+      <!-- 消息类型列自定义渲染 -->
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'messageType'">
+          <span :class="{ 'unread-title': !record.is_read }">
+            {{ getMessageTypeText(record.messageType) }}
+          </span>
+        </template>
+        
+        <template v-else-if="column.dataIndex === 'title'">
+          <span :class="{ 'unread-title': !record.is_read, 'read-title': record.is_read }">
+            {{ record.title }}
+          </span>
+        </template>
+        
+        <template v-else-if="column.dataIndex === 'is_read'">
+          <a-tag :class="record.is_read ? 'status-read' : 'status-unread'">
+            {{ record.is_read ? '已读' : '未读' }}
+          </a-tag>
+        </template>
+      </template>
+      
+    </a-table>
+  </a-card>
 </template>
+
 <script lang="ts" setup>
-import { ref,onBeforeMount } from 'vue';
+import { ref, onBeforeMount, watch, computed } from 'vue';
 import { getMessageList } from '@/apis/home';
-const activeKey = ref('1');
+
+// 当前激活的 Tab
+const activeKey = ref('all');
+
+// 加载状态
 const loading = ref(false);
-const billData = ref([])
+
+// 表格数据
+const billData = ref<any[]>([]);
+
+// 所有消息数据（用于统计未读数量）
+const allMessages = ref<any[]>([]);
+
+// 当前筛选的消息类型（传给后端）
+const messageType = ref<string>('');
+
+// Tab key 映射到后端 messageType 值
+const keyToMessageType: Record<string, string> = {
+  all: '',
+  money: 'FinancialMessage',
+  secure: 'SecurityMessage',
+  active: 'ActivityMessage'
+};
+
+// 消息类型映射（前端显示用）
+const messageTypeMap: Record<string, string> = {
+  FinancialMessage: '资金消息',
+  SecurityMessage: '安全消息',
+  ActivityMessage: '活动消息',
+  // 如果还有其他可能的消息类型，可以在这里添加
+};
+
+// 获取消息类型的中文文本
+const getMessageTypeText = (type: string) => {
+  return messageTypeMap[type] || type || '未知类型';
+};
+
+// 计算各个标签页的未读数量
+const allUnreadCount = computed(() => {
+  return allMessages.value.filter(msg => !msg.is_read).length;
+});
+
+const moneyUnreadCount = computed(() => {
+  return allMessages.value.filter(msg => 
+    msg.messageType === 'FinancialMessage' && !msg.is_read
+  ).length;
+});
+
+const secureUnreadCount = computed(() => {
+  return allMessages.value.filter(msg => 
+    msg.messageType === 'SecurityMessage' && !msg.is_read
+  ).length;
+});
+
+const activeUnreadCount = computed(() => {
+  return allMessages.value.filter(msg => 
+    msg.messageType === 'ActivityMessage' && !msg.is_read
+  ).length;
+});
+
+// 表格列定义
 const columns = [
   {
     title: '消息类型',
     dataIndex: 'messageType',
     key: 'messageType',
-    width: 200,
+    width: 200
   },
   {
-    title: '消息内容',
-    dataIndex: 'messageContent',
-    key: 'messageContent',
-    width: 400,
+    title: '消息标题',
+    dataIndex: 'title',
+    key: 'title',
+    width: 400
   },
   {
     title: '发送时间',
-    dataIndex: 'sendTime',
-    key: 'sendTime',
-    width: 200,
+    dataIndex: 'created_at',
+    key: 'created_at',
+    width: 200
   },
   {
     title: '状态',
-    dataIndex: 'status',
-    key: 'status',
-    width: 100,
-  },
+    dataIndex: 'is_read',
+    key: 'is_read',
+    width: 100
+  }
 ];
-const messageType=ref("")
+
+// 分页配置
 const pagination = ref({
   current: 1,
   pageSize: 10,
@@ -51,27 +193,174 @@ const pagination = ref({
   showSizeChanger: true,
   showQuickJumper: true,
   showTotal: (total: number) => `共 ${total} 条记录`
-})
-// 表格变化处理
-const handleTableChange = () => {}
-const getDataList=async()=>{
-  loading.value = true
+});
+
+// 表格分页/排序/筛选变化（目前只处理分页）
+const handleTableChange = (page: any) => {
+  pagination.value.current = page.current;
+  pagination.value.pageSize = page.pageSize;
+  getDataList();
+};
+
+// 获取所有消息（用于统计未读数量）
+const getAllMessages = async () => {
   try {
-    // 调用获取消息列表的接口
-    const response:any = await getMessageList({
-      page_num: pagination.value.current,
-      page_size: pagination.value.pageSize, 
-      Message:messageType.value
+    const params = {
+      page_num: 1,
+      page_size: 1000, // 获取足够多的数据来统计
+      Message: '' // 获取全部消息
+    };
+
+    const response: any = await getMessageList(params);
+    
+    if (response.data && Array.isArray(response.data)) {
+      allMessages.value = response.data;
+    } else if (response.data?.messages) {
+      allMessages.value = response.data.messages;
+    } else if (response.data?.list) {
+      allMessages.value = response.data.list;
+    } else {
+      allMessages.value = [];
+    }
+    
+    console.log('全部消息统计:', {
+      total: allMessages.value.length,
+      allUnread: allUnreadCount.value,
+      moneyUnread: moneyUnreadCount.value,
+      secureUnread: secureUnreadCount.value,
+      activeUnread: activeUnreadCount.value
     });
-    billData.value = response.data; // 假设返回的数据在response.data.messages中
-    pagination.value.total = response.total; // 假设总记录数在response.data.total中
+  } catch (error) {
+    console.error('获取全部消息失败:', error);
+    allMessages.value = [];
+  }
+};
+
+// 获取消息列表（当前标签页）
+const getDataList = async () => {
+  loading.value = true;
+  try {
+    const params = {
+      page_num: pagination.value.current,
+      page_size: pagination.value.pageSize,
+      Message: messageType.value
+    };
+
+    const response: any = await getMessageList(params);
+
+    // 解析响应数据
+    if (response.data && Array.isArray(response.data)) {
+      billData.value = response.data;
+      pagination.value.total = response.total || response.data.length;
+    } else if (response.data?.messages) {
+      billData.value = response.data.messages;
+      pagination.value.total = response.data.total || 0;
+    } else if (response.data?.list) {
+      billData.value = response.data.list;
+      pagination.value.total = response.data.total || 0;
+    } else {
+      billData.value = [];
+      pagination.value.total = 0;
+    }
+    
+    console.log('当前标签页消息:', {
+      type: messageType.value,
+      count: billData.value.length,
+      data: billData.value
+    });
+    
   } catch (error) {
     console.error('获取消息列表失败:', error);
+    billData.value = [];
+    pagination.value.total = 0;
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
+
+// 监听 Tab 切换
+watch(activeKey, (newKey) => {
+  messageType.value = keyToMessageType[newKey] || '';
+  pagination.value.current = 1; // 切换标签页时回到第一页
+  getDataList();
+});
+
+// 初始加载
 onBeforeMount(() => {
-  getDataList()
-})
-</script>
\ No newline at end of file
+  // 先获取所有消息用于统计
+  getAllMessages();
+  // 再获取当前标签页的消息
+  getDataList();
+});
+
+// 可选：添加轮询更新未读数量
+// 如果希望实时更新未读数量，可以添加轮询
+// setInterval(() => {
+//   getAllMessages();
+// }, 30000); // 每30秒更新一次未读数量
+</script>
+
+<style scoped>
+.bill-table {
+  margin-top: 16px;
+}
+
+/* Tab标签样式 */
+.tab-label {
+  position: relative;
+  display: inline-block;
+  padding-right: 10px;
+}
+
+.tab-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+/* 已读/未读标签样式 */
+:deep(.status-read) {
+  background-color: #f6ffed;
+  border-color: #b7eb8f;
+  color: #52c41a;
+  font-weight: normal;
+}
+
+:deep(.status-unread) {
+  background-color: #fff1f0;
+  border-color: #ffa39e;
+  color: #f5222d;
+  font-weight: bold;
+}
+
+/* 消息标题样式 */
+:deep(.unread-title) {
+  font-weight: bold;
+  color: #000000;
+}
+
+:deep(.read-title) {
+  font-weight: normal;
+  color: #666666;
+}
+
+/* 徽章样式优化 */
+:deep(.ant-badge-count) {
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 11px;
+  padding: 0 5px;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+/* 当前激活的Tab样式 */
+:deep(.ant-tabs-tab-active .tab-label) {
+  color: #1890ff;
+}
+
+:deep(.ant-tabs-tab:hover .tab-label) {
+  color: #40a9ff;
+}
+</style>
\ No newline at end of file