diff --git a/api/Salemain.js b/api/Salemain.js
new file mode 100644
index 0000000..dfc128f
--- /dev/null
+++ b/api/Salemain.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 查询财务审批列表
+export const financeList = (data, query) => {
+    return request({
+        url: '/bussiness/salemain/financeList',
+        method: 'post',
+        data: data,
+        params: query,
+    })
+}
diff --git a/pages/work/FinancialApproval/ListItem.vue b/pages/work/FinancialApproval/ListItem.vue
new file mode 100644
index 0000000..4452b72
--- /dev/null
+++ b/pages/work/FinancialApproval/ListItem.vue
@@ -0,0 +1,67 @@
+<template>
+    <uni-card
+        v-for="(item,index) in items"
+        :key="item.saleid"
+        :class="index % 2 === 0 ? 'card-even' : 'card-odd'"
+        :extra="item.contractcode"
+        :title="item.usernames"
+        style="margin: 0;margin-bottom: 20px"
+        @click="handleDetail(item)"
+    >
+        <view class="context">
+            <view class="label">
+                <text>状态:</text>
+                <text>{{ item.stateText }}</text>
+            </view>
+            <view class="label">
+                <text>下单日期:</text>
+                <text>{{ formatDate(item.adddate) }}</text>
+            </view>
+
+            <view class="label">
+                <text>支付方式:</text>
+                <text>{{ item.creditperiods > 0 ? '非现款' : '现款' }}</text>
+            </view>
+            <view class="label">
+                <text>区域:</text>
+                <text>{{ item.areaName }}</text>
+            </view>
+
+            <view class="label">
+                <text>订单金额:</text>
+                <text>{{ formatPrice(item.contractmoney) }}</text>
+            </view>
+            <view class="label">
+                <text>补差金额:</text>
+                <text>{{ formatPrice(item.disCount) }}</text>
+            </view>
+            <view class="label">
+                <text>商业公司剩余未核销金额:</text>
+                <text>{{ formatPrice(item.balance) }}</text>
+            </view>
+
+        </view>
+
+    </uni-card>
+</template>
+
+<script setup>
+import {defineOptions, defineProps, getCurrentInstance} from 'vue'
+import {formatDate} from "../../../uni_modules/uni-dateformat/components/uni-dateformat/date-format";
+import UniCard from "../../../uni_modules/uni-card/components/uni-card/uni-card.vue";
+import {formatPrice} from "../../../utils/utils";
+
+defineOptions({
+    name: "ListItem"
+})
+
+const {proxy} = getCurrentInstance()
+const props = defineProps(['items'])
+const handleDetail = (raw) => {
+    proxy.$tab.navigateTo(`/pages/work/FinancialApproval/OrderDetail?id=${raw}`)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/work/FinancialApproval/index.vue b/pages/work/FinancialApproval/index.vue
index 89b644b..e0e82b6 100644
--- a/pages/work/FinancialApproval/index.vue
+++ b/pages/work/FinancialApproval/index.vue
@@ -1,186 +1,63 @@
 <template>
     <view class="container">
-        <view class="example">
-            <uni-forms ref="baseForm" :modelValue="baseFormData" label-width="20vw">
+        <MBCard>
+            <uni-forms ref="baseForm" :modelValue="queryParams">
                 <uni-forms-item label="生产单位">
-                    <uni-data-select
-                        v-model="companyValue"
-                        :localdata="companyOptions"
-                        @change="filterContracts"
-                    ></uni-data-select>
+                    <ProductionUnit v-model="queryParams.companyId" @change="handleQuery"/>
                 </uni-forms-item>
             </uni-forms>
-        </view>
-
-        <view v-if="filteredContracts.length === 0" class="no-data">
-            <text>暂无匹配的合同数据</text>
-        </view>
+        </MBCard>
 
+        <MBLoading v-if="loading"/>
         <view v-else>
-            <uni-card
-                v-for="(contract, index) in filteredContracts"
-                :key="contract.saleid"
-                :class="index % 2 === 0 ? 'card-even' : 'card-odd'"
-                :title="contract.usernames"
-                @click="gotoDetail(contract)"
-            >
-                <uni-row class="demo-uni-row">
-                    <uni-col :span="12">
-                        <view class="demo-uni-col dark">生产单位: {{ contract.companyName }}</view>
-                    </uni-col>
-                    <uni-col :span="12">
-                        <view class="demo-uni-col light">合同编号: {{ contract.contractcode }}</view>
-                    </uni-col>
-                </uni-row>
-                <uni-row class="demo-uni-row">
-                    <uni-col :span="12">
-                        <view class="demo-uni-col dark">制单日期: {{ formatDate(contract.adddate) }}</view>
-                    </uni-col>
-                    <uni-col :span="12">
-                        <view class="demo-uni-col light">订单金额: {{ contract.contractmoney.toFixed(2) }}</view>
-                    </uni-col>
-                </uni-row>
-                <uni-row class="demo-uni-row">
-                    <uni-col :span="12">
-                        <view class="demo-uni-col dark">状态: {{ contract.stateText }}</view>
-                    </uni-col>
-                    <uni-col :span="12">
-                        <view class="demo-uni-col light">区域: {{ contract.areaName }}</view>
-                    </uni-col>
-                </uni-row>
-            </uni-card>
+            <ListItem :items="tableData"/>
+            <MBPagination
+                v-if="total > 0"
+                v-model:limit="paging.pageSize"
+                v-model:page="paging.pageNum"
+                :total="total"
+                @pagination="handleQuery"
+            />
         </view>
     </view>
 </template>
 
 <script setup>
+import {getCurrentInstance, onMounted, ref} from "vue"
+import UniForms from "../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
+import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
+import MBCard from "../../../components/MB/MBCard.vue";
+import ProductionUnit from "../../../components/ProductionUnit/ProductionUnit.vue";
+import MBLoading from "../../../components/MB/MBLoading.vue";
+import MBPagination from "../../../components/MB/MBPagination.vue";
+import ListItem from "./ListItem.vue"
+import {financeList} from "../../../api/Salemain";
 
-import {computed, getCurrentInstance, onMounted, ref} from "vue"
-import {contractData} from "./data.js" // 根据实际路径调整
 const {proxy} = getCurrentInstance()
-// 表单数据
-const baseFormData = ref({})
-const paymentValue = ref(0)
-const companyValue = ref(0)
 
-// 筛选选项
-const paymentOptions = ref([
-    {value: 0, text: "全部支付方式"},
-    {value: 1, text: "账期支付"},
-    {value: 2, text: "预付款"}
-])
+const queryParams = ref({
+    state: '2'
+})
+const loading = ref(true)
+const total = ref(0)
+const paging = ref({
+    pageNum: 1,
+    pageSize: 10,
+    isAsc: 'descending',
+    orderByColumn: 'adddate'
+})
+const tableData = ref([])
 
-const companyOptions = ref([
-    {value: 0, text: "全部生产单位"},
-    {value: 1, text: "浙江大冢制药有限公司"},
-    {value: 2, text: "广东大冢制药有限公司"}
-])
+const handleQuery = async () => {
+    loading.value = true
+    const data = await financeList(queryParams.value, paging.value)
+    total.value = data.total
+    tableData.value = data.rows
+    loading.value = false
+}
 
-// 合同数据
-const contracts = ref([])
-
-// 过滤后的合同数据
-const filteredContracts = computed(() => {
-    let result = contracts.value
-
-    // 根据生产单位筛选
-    if (companyValue.value === 1) {
-        result = result.filter(contract => contract.companyName.includes('浙江'))
-    } else if (companyValue.value === 2) {
-        result = result.filter(contract => contract.companyName.includes('广东'))
-    }
-
-    // 可以根据支付方式添加更多筛选逻辑
-
-    return result
+onMounted(async () => {
+    await handleQuery()
 })
 
-// 初始化数据
-onMounted(() => {
-    contracts.value = contractData.rows
-})
-
-// 格式化日期
-function formatDate(dateString) {
-    if (!dateString) return '未知日期'
-    return dateString.split(' ')[0]
-}
-
-// 筛选合同
-function filterContracts(e) {
-    console.log("筛选条件变化:", e)
-    // 计算属性会自动更新，无需额外操作
-}
-
-// 跳转到详情页
-function gotoDetail(contract) {
-    console.log("查看合同详情:", contract)
-    // proxy.$tab.navigateTo('/pages/work/yonghu/detail')
-    // proxy.$tab.navigateTo(`/pages/work/yonghu/detail?saleid=${contract.saleid}`)
-    proxy.$tab.navigateTo('/pages/work/FinancialApproval/OrderDetail')
-}
 </script>
-
-<style lang="scss" scoped>
-.container {
-    padding: 10px;
-    background-color: #f5f7fa;
-    min-height: 100vh;
-}
-
-.example {
-    padding: 10px;
-    background: #fff;
-    border-radius: 8px;
-    margin-bottom: 15px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-}
-
-:deep(.uni-section .uni-section-header) {
-    padding: 0;
-}
-
-:deep(.uni-card) {
-    padding: 0 !important;
-    margin: 10px 0 !important;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-:deep(.uni-card__content) {
-    padding: 12px !important;
-}
-
-.demo-uni-row {
-    padding: 5px 0;
-    font-size: 14px;
-}
-
-.demo-uni-col {
-    padding: 2px 0;
-
-    &.dark {
-        color: #333;
-        font-weight: 500;
-    }
-
-    &.light {
-        color: #666;
-    }
-}
-
-.card-even {
-    border-left: 4px solid #2979ff;
-}
-
-.card-odd {
-    border-left: 4px solid #19be6b;
-}
-
-.no-data {
-    text-align: center;
-    padding: 40px 0;
-    color: #999;
-    font-size: 16px;
-}
-</style>
\ No newline at end of file