diff --git a/src/PagesStatistics/businessOverview.vue b/src/PagesStatistics/businessOverview.vue
index 8102581..a801adf 100644
--- a/src/PagesStatistics/businessOverview.vue
+++ b/src/PagesStatistics/businessOverview.vue
@@ -369,7 +369,19 @@ const getOverview = () => {
   getPaymentCount();
   getRevenueCount();
 };
+
+// 获取客户/供应商应收应付总额
+const getTotal = () => {
+  ReceiveApi.getTotal().then((res:any) => {
+    if(res.code === 200) {
+      const {unPayCustomerTotal, unPaySupplierTotal} = res.data
+      list[0].num = unPayCustomerTotal
+      list[1].num = unPaySupplierTotal
+    }
+  })
+}
 onMounted(() => {
+  getTotal()
   getOverview();
 });
 </script>
diff --git a/src/PagesStatistics/customerChecking.vue b/src/PagesStatistics/customerChecking.vue
index 48d0e6b..186efd9 100644
--- a/src/PagesStatistics/customerChecking.vue
+++ b/src/PagesStatistics/customerChecking.vue
@@ -7,6 +7,8 @@
         <text>{{ item.supplierName }}</text>
         <text class="num">¥{{ item.unPayTotalPrice }} <text class="tip">欠</text></text>
       </view>
+      <u-empty v-if="billList.length === 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+      </u-empty>
     </view>
   </view>
 </template>
diff --git a/src/PagesStatistics/supplierChecking.vue b/src/PagesStatistics/supplierChecking.vue
index a4c904a..fa1affa 100644
--- a/src/PagesStatistics/supplierChecking.vue
+++ b/src/PagesStatistics/supplierChecking.vue
@@ -7,6 +7,8 @@
         <text>{{ item.supplierName }}</text>
         <text class="num">¥{{ item.unPayTotalPrice }} <text class="tip">付</text></text>
       </view>
+      <u-empty v-if="billList.length === 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+      </u-empty>
     </view>
   </view>
 </template>
diff --git a/src/pages.json b/src/pages.json
index 3a7bd28..def9012 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -347,6 +347,18 @@
             "navigationBarTitleText": "权限管理"
           }
         },
+        {
+          "path": "paymentDetail",
+          "style": {
+            "navigationBarTitleText": "支付明细"
+          }
+        },
+        {
+          "path": "incomeDetail",
+          "style": {
+            "navigationBarTitleText": "收入明细"
+          }
+        },
         {
           "path": "components/addSupplierType",
           "style": {
@@ -406,6 +418,18 @@
           "style": {
             "navigationBarTitleText": "新增权限"
           }
+        },
+        {
+          "path": "components/addPayment",
+          "style": {
+            "navigationBarTitleText": "新增支付明细"
+          }
+        },
+        {
+          "path": "components/payContent",
+          "style": {
+            "navigationBarTitleText": "支付详情"
+          }
         }
       ]
     }
diff --git a/src/pagesApp/components/CustomFilterDialog.vue b/src/pagesApp/components/CustomFilterDialog.vue
new file mode 100644
index 0000000..d210277
--- /dev/null
+++ b/src/pagesApp/components/CustomFilterDialog.vue
@@ -0,0 +1,156 @@
+<template>
+  <u-popup :show="show" mode="left" :closeable="true" @close="handleClose">
+    <view class="c-dialog-filter">
+      <view class="title">筛选</view>
+      <u-list height="200">
+        <u-list-item>
+          <u-cell
+            :title="`类型`"
+            @click="state.isShowStatus = true"
+            :value="state.type.name"
+          >
+            <template #right-icon> </template>
+          </u-cell>
+        </u-list-item>
+        <u-list-item boder="none">
+          <u-cell
+            :title="`${state.type.key ? '供应商': '客户'}`"
+            @click="handleDialog('showSupplier', true)"
+            :value="state.user.name"
+          >
+            <template #right-icon> </template>
+          </u-cell>
+        </u-list-item>
+      </u-list>
+
+      <view class="btn-box1">
+        <u-button
+          text="重置"
+          color="#E8E8E8"
+          :customStyle="{ color: '#999' }"
+          shape="circle"
+          @click="resetState"
+        ></u-button>
+        <u-button
+          type="primary"
+          text="确定"
+          shape="circle"
+          @click="handleOk()"
+        ></u-button>
+      </view>
+    </view>
+  </u-popup>
+
+  <!-- 供应商选择弹框 -->
+  <SupplierDialog
+    ref="supplierDialog"
+    :show="showDialog.showSupplier"
+    @handleDialog="(v:boolean) => {handleDialog('showSupplier', v)}"
+    @changeUser="changeUser"
+    :isShipment="state.type.key === 2 ? true : false"
+  ></SupplierDialog>
+  <!-- 客户类型 -->
+  <u-action-sheet
+    :closeOnClickOverlay="true"
+    :closeOnClickAction="true"
+    :actions="state.statusList"
+    :title="'类型'"
+    :show="state.isShowStatus"
+    @select="handleSelectStatus"
+    @close="state.isShowStatus = false"
+  ></u-action-sheet>
+</template>
+<script setup lang="ts">
+import SupplierDialog from "./SupplierDialog.vue";
+
+const props = defineProps<{
+  show: boolean;
+}>();
+const emit = defineEmits(["handleDialog", "changeOther"]);
+const handleClose = () => {
+  emit("handleDialog", false);
+};
+const showDialog = <
+  {
+    [key: string]: boolean;
+  }
+>reactive({
+  showSupplier: false,
+});
+
+const state = <
+  {
+    [key: string]: any;
+  }
+>reactive({
+  type: {
+    key: 1,
+    name: "供应商",
+  },
+  user: {
+    id: -1,
+    name: "",
+  },
+  statusList: [
+    {
+      name: "供应商",
+      key: 1,
+    },
+    {
+      name: "客户",
+      key: 2,
+    },
+  ],
+});
+const supplierDialog = ref(null)
+const handleDialog = (key: string, v: boolean) => {
+  showDialog[key] = v;
+};
+const handleSelectStatus = (v: any) => {
+  resetState()
+  state.isShowStatus = false;
+  state.type = v;
+};
+const changeUser = (obj: any) => {
+  state.user = obj;
+};
+const resetState = () => {
+  state.user = {
+    id: -1,
+    name: "",
+  };
+};
+const handleOk = () => {
+  emit("changeOther", { userId: state.user.id, type:  state.type.key});
+  emit("handleDialog", false);
+};
+</script>
+<style lang="scss" scoped>
+.c-dialog-filter {
+  width: 95vw;
+  padding: 25rpx;
+  .title {
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #000000;
+    text-align: center;
+  }
+  ::v-deep .u-list {
+    height: 50vh !important;
+    .u-cell__title-text {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 27rpx !important;
+    }
+  }
+  .btn-box1 {
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    margin-top: 30rpx;
+    ::v-deep button + button {
+      margin-left: 50rpx;
+    }
+  }
+}
+</style>
diff --git a/src/pagesApp/components/SupplierDialog.vue b/src/pagesApp/components/SupplierDialog.vue
new file mode 100644
index 0000000..e2ffb8c
--- /dev/null
+++ b/src/pagesApp/components/SupplierDialog.vue
@@ -0,0 +1,241 @@
+<template>
+  <u-popup :show="show" mode="left" :closeable="true" @close="handleClose">
+    <view class="c-dialog-filter">
+      <view class="title">{{isShipment? '客户' : '供应商'}}筛选</view>
+      <view class="search">
+        <u-search
+          :placeholder="`请输入${isShipment? '客户' : '供应商'}名称 / 卡号搜索`"
+          v-model="keyword"
+          @search="handleSearch()"
+        ></u-search>
+      </view>
+      <view class="dialog-product-layout">
+        <!-- 自定义索引列表 -->
+        <view class="address-book-container">
+          <!-- 左侧通讯录 -->
+          <scroll-view
+            class="scroll-container"
+            :scroll-y="true"
+            :scroll-into-view="toView"
+            :scroll-with-animation="true"
+          >
+            <view
+              class="address-book"
+              v-for="(item, index) in addressBook"
+              :key="index"
+              :id="item.name"
+            >
+              <view class="address-book-index">{{ item.name }}</view>
+              <view
+                class="contact-container"
+                v-for="(cItem, index) in item.list"
+                :key="index"
+              >
+                <!-- <img
+                  class="contact-img"
+                  src="http://www.lixia.gov.cn/picture/0/s_97b76c734a6f40f8abba95615cbff1e1.jpg"
+                  alt=""
+                /> -->
+                <view
+                  class="contact-detail-container"
+                  @click="handleClick(cItem)"
+                >
+                  <view class="contact-name">{{ cItem.name }}</view>
+                  <view class="contact-address">{{ cItem.cardCode }}</view>
+                  <!-- <view class="contact-phone">{{ item.phone }}</view> -->
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+
+          <!-- 右侧字母导航条 -->
+          <view class="letter-nav">
+            <view
+              class="item"
+              :class="{ active: toView === item }"
+              v-for="(item, index) in indexList"
+              :key="index"
+              @click="toSelectIndex(item)"
+              >{{ item }}</view
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+<script setup lang="ts">
+import { CustomerApi, SupplierApi } from "@/services";
+
+const props = defineProps<{
+  show: boolean;
+  isShipment: boolean;
+}>();
+const emit = defineEmits(["handleDialog", "changeUser"]);
+const handleClose = () => {
+  emit("handleDialog", false);
+};
+
+const keyword = ref("");
+
+const indexList = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z",
+  "#",
+];
+const toView = ref("");
+const addressBook = ref();
+// [
+//   {
+//     id: "A",
+//     data: [
+//       {
+//         zh_title: "阿联酋迪拉姆",
+//         en_title: "aa",
+//         address: "910289591",
+//         phone: "111111",
+//       },
+//       {
+//         zh_title: "阿尔巴尼亚列克",
+//         en_title: "aaaaa",
+//         address: "ALL",
+//         phone: "222222",
+//       },
+//     ],
+//   }
+// ];
+
+const toSelectIndex = (item: any) => {
+  toView.value = item;
+};
+
+const handleClick = (item: any) => {
+  emit("changeUser", item);
+  emit("handleDialog", false);
+};
+
+const handleSearch = () => {
+  getList();
+};
+
+const getList = () => {
+  if (props.isShipment) {
+    CustomerApi.getCustomUserListLettera({ name: keyword.value }).then(
+      (res: any) => {
+        if (res.code === 200) {
+          addressBook.value = res.data.reduce((pre: any, curr: any) => {
+            if (curr.list.length > 0) {
+              pre.push(curr);
+            }
+            return pre;
+          }, []);
+        }
+      }
+    );
+  } else {
+    SupplierApi.getSupplierUserListLettera({ name: keyword.value }).then(
+      (res: any) => {
+        if (res.code === 200) {
+          addressBook.value = res.data.reduce((pre: any, curr: any) => {
+            if (curr.list.length > 0) {
+              pre.push(curr);
+            }
+            return pre;
+          }, []);
+        }
+      }
+    );
+  }
+};
+
+watch(
+  () => props.isShipment,
+  (newValue, oldValue) => {
+    getList();
+  }
+);
+onMounted(() => {
+  getList();
+});
+</script>
+<style lang="scss" scoped>
+.c-dialog-filter {
+  width: 95vw;
+  padding: 25rpx;
+  .title {
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #000000;
+    text-align: center;
+  }
+  .search {
+    margin: 30rpx 0px;
+  }
+}
+.dialog-product-layout {
+  height: 80vh;
+  .address-book-container {
+    height: 100%;
+  }
+  .address-book-index {
+    font-size: 24rpx;
+  }
+  .contact-img {
+    width: 20px;
+    height: 20px;
+  }
+  .scroll-container {
+    height: 100%;
+  }
+  .letter-nav {
+    position: fixed;
+    right: 25rpx;
+    top: 100px;
+    font-size: 22rpx;
+    text-align: center;
+    .item:hover,
+    .active {
+      color: $u-primary;
+    }
+  }
+  .contact-container {
+    display: flex;
+    align-items: center;
+    margin: 2%;
+  }
+  .contact-detail-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 80%;
+    font-size: 22rpx;
+    .contact-address {
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+</style>
diff --git a/src/pagesApp/components/addPayment.vue b/src/pagesApp/components/addPayment.vue
new file mode 100644
index 0000000..5a70099
--- /dev/null
+++ b/src/pagesApp/components/addPayment.vue
@@ -0,0 +1,505 @@
+<template>
+  <view class="c-card">
+    <u-form
+      labelPosition="left"
+      :model="model1"
+      :rules="model1.order.buttonType === 3 ? rules1 : rules2"
+      ref="form"
+      :labelWidth="80"
+      :labelStyle="{ padding: '0rpx 10rpx' }"
+      :errorType="'border-bottom'"
+    >
+      <u-form-item
+        :prop="`order.${item.key}`"
+        :label="item.name"
+        :required="item.required"
+        v-for="(item, index) in model1.order.buttonType === 3
+          ? formAttrList1
+          : formAttrList2"
+        :key="index"
+        @click="item.fn"
+      >
+        <u-textarea
+          v-if="item.type === 'textarea'"
+          v-model="(model1.order as any)[item.key]"
+          :placeholder="`请输入${item.name}`"
+        ></u-textarea>
+        <u-input
+          v-if="item.type === 'select' || item.type === 'input'"
+          v-model="(model1.order as any)[item.key]"
+          :placeholder="`请${item.type === 'select' ? '选择' : '输入'}${
+            item.name
+          }`"
+          :clearable="true"
+          :customStyle="{}"
+          border="none"
+          :disabled="item.disabled"
+        >
+          <template #suffix>
+            <text>
+              {{ item.unit }}
+            </text>
+          </template>
+        </u-input>
+        <!-- @afterRead="afterRead"
+          @delete="deletePic" -->
+        <uni-file-picker
+          v-if="item.type === 'upload'"
+          v-model="model1.order.fileLists"
+          limit="9"
+          title="最多可上传9张图片"
+          :auto-upload="false"
+          fileMediatype="image"
+          mode="grid"
+          ref="filesRef"
+          @delete="handleDelete"
+        ></uni-file-picker>
+        <u-radio-group
+          v-if="item.type === 'radio'"
+          v-model="(model1.order as any)[item.key]"
+          placement="row"
+        >
+          <u-radio activeColor="#00DCEE" label="供应商" :name="3"></u-radio>
+          &nbsp;&nbsp;&nbsp;
+          <u-radio activeColor="#00DCEE" label="客户" :name="2"></u-radio>
+        </u-radio-group>
+        <template #right v-if="item.type === 'select'">
+          <u-icon name="arrow-right"></u-icon>
+        </template>
+      </u-form-item>
+    </u-form>
+    <u-datetime-picker
+      :show="contrlModalParams.isShowSplTime"
+      v-model="contrlModalParams.settlementTime"
+      mode="datetime"
+      @confirm="(v: any) => {handleTime(v)}"
+      @cancel="contrlModalParams.isShowSplTime = false"
+    ></u-datetime-picker>
+    <block
+      v-for="(item, index) in model1.order.buttonType === 3
+        ? formAttrList1
+        : formAttrList2"
+      :key="index"
+    >
+      <u-action-sheet
+        v-if="item.type === 'select' && item.key !== 'settlementTime'"
+        :actions="contrlModalParams[item.childKey].list"
+        :title="contrlModalParams[item.childKey].title"
+        :show="contrlModalParams[item.childKey].isShow"
+        @select="(v: any) => handleSelect(item.childKey, v)"
+        @close="contrlModalParams[item.childKey].isShow = false"
+        :closeOnClickAction="true"
+      ></u-action-sheet>
+    </block>
+  </view>
+  <view class="btn-box">
+    <u-button type="primary" text="保存" @click="save()"></u-button>
+  </view>
+</template>
+<script setup lang="ts">
+import {
+  CustomerApi,
+  DeviceApi,
+  FinanceApi,
+  PictureApi,
+  ProfileApi,
+  ReceiveApi,
+  ReceiveProductApi,
+  SupplierApi,
+} from "@/services";
+import { formatDate } from "@/utils";
+import { DeviceType, ImagesType, OrderType } from "@/utils/enum";
+import _ from "underscore";
+
+const model1 = reactive<any>({
+  order: {
+    buttonType: 3,
+    fileLists: [],
+    settlementTime: "",
+  },
+  supplierList: [],
+  customerList: []
+});
+const rules1 = reactive({
+  "order.supCusName": {
+    type: "string",
+    required: true,
+    message: "请选择供应商",
+    trigger: ["blur", "change"],
+  },
+  "order.settlementTime": {
+    type: "string",
+    required: true,
+    message: "请选择结算时间",
+    trigger: ["blur", "change"],
+  },
+  "order.totalPrice": {
+    type: "string",
+    required: true,
+    message: "请输入金额",
+    trigger: ["blur", "change"],
+  },
+  "order.paymentMethodName": {
+    type: "string",
+    required: true,
+    message: "请选择结算方式",
+    trigger: ["blur", "change"],
+  },
+});
+const rules2 = reactive({
+  "order.supCusName": {
+    type: "string",
+    required: true,
+    message: "请选择客户",
+    trigger: ["blur", "change"],
+  },
+  "order.settlementTime": {
+    type: "string",
+    required: true,
+    message: "请选择结算时间",
+    trigger: ["blur", "change"],
+  },
+  "order.incidentals": {
+    type: "string",
+    required: true,
+    message: "请输入杂费",
+    trigger: ["blur", "change"],
+  },
+  "order.freight": {
+    type: "string",
+    required: true,
+    message: "请输入运费",
+    trigger: ["blur", "change"],
+  },
+  "order.paymentMethodName": {
+    type: "string",
+    required: true,
+    message: "请选择结算方式",
+    trigger: ["blur", "change"],
+  },
+});
+const contrlModalParams = reactive<any>({
+  isShowSplTime: false,
+  spltime: "",
+  user: {
+    isShow: false,
+    title: "标题",
+    list: [],
+  },
+  paySelect: {
+    isShow: false,
+    title: "标题",
+    list: [
+      {
+        name: "微信",
+        id: 3,
+      },
+      {
+        name: "现金",
+        id: 1,
+      },
+      {
+        name: "支付宝",
+        id: 4,
+      },
+      {
+        name: "转账",
+        id: 2,
+      },
+    ],
+  },
+});
+
+const formAttrList1 = reactive<any>([
+  {
+    name: "付款类型",
+    key: "buttonType",
+    required: true,
+    type: "radio",
+  },
+  {
+    name: "供应商",
+    key: "supCusName",
+    type: "select",
+    childKey: "user",
+    required: true,
+    unit: "",
+    fn: () => {
+      contrlModalParams.user.isShow = true;
+      contrlModalParams.user.title = "供应商";
+    },
+  },
+  {
+    name: "结算时间",
+    key: "settlementTime",
+    type: "select",
+    unit: "",
+    required: true,
+    fn: () => {
+      contrlModalParams.isShowSplTime = true;
+    },
+  },
+  {
+    name: "金额",
+    key: "totalPrice",
+    type: "input",
+    required: true,
+    unit: "元",
+  },
+  {
+    name: "结算方式",
+    key: "paymentMethodName",
+    type: "select",
+    childKey: "paySelect",
+    required: true,
+    unit: "",
+    fn: () => {
+      contrlModalParams.paySelect.isShow = true;
+      contrlModalParams.paySelect.title = "结算方式";
+    },
+  },
+  {
+    name: "备注",
+    key: "remakes",
+    type: "textarea",
+  },
+  {
+    name: "支付单据",
+    key: "photo",
+    type: "upload",
+  },
+]);
+
+const formAttrList2 = reactive<any>([
+  {
+    name: "付款类型",
+    key: "buttonType",
+    required: true,
+    type: "radio",
+  },
+  {
+    name: "客户",
+    key: "supCusName",
+    type: "select",
+    childKey: "user",
+    required: true,
+    unit: "",
+    fn: () => {
+      contrlModalParams.user.isShow = true;
+      contrlModalParams.user.title = "客户";
+    },
+  },
+  {
+    name: "结算时间",
+    key: "settlementTime",
+    type: "select",
+    unit: "",
+    required: true,
+    fn: () => {
+      contrlModalParams.isShowSplTime = true;
+    },
+  },
+  {
+    name: "杂费",
+    key: "incidentals",
+    type: "input",
+    required: true,
+    unit: "元",
+  },
+  {
+    name: "运费",
+    key: "freight",
+    type: "input",
+    required: true,
+    unit: "元",
+  },
+  {
+    name: "结算方式",
+    key: "paymentMethodName",
+    type: "select",
+    childKey: "paySelect",
+    required: true,
+    unit: "",
+    fn: () => {
+      contrlModalParams.paySelect.isShow = true;
+      contrlModalParams.paySelect.title = "结算方式";
+    },
+  },
+  {
+    name: "备注",
+    key: "remakes",
+    type: "textarea",
+  },
+  {
+    name: "支付单据",
+    key: "photo",
+    type: "upload",
+  },
+]);
+// 监听毛重 皮重
+watch(
+  [
+    () => model1.order.buttonType,
+  ],
+  ([buttonTypeNew]) => {
+    if (buttonTypeNew === 3) {
+      contrlModalParams.user.list = model1.supplierList;
+    } else if (buttonTypeNew === 2) {
+      contrlModalParams.user.list = model1.customerList;
+    }
+  }
+);
+
+const handleDelete = (e: any) => {
+  console.log(model1.order.fileLists);
+  if (e.tempFile.fileID) {
+    PictureApi.deleteById({ id: e.tempFile.fileID }).then((res) => {
+      if (res.code === 200) {
+        uni.showToast({ title: "已删除" });
+      }
+    });
+  }
+};
+
+const filesRef = ref();
+const handleUpload = () => {
+  // console.log(event.tempFilePaths)
+  return filesRef.value[0].filesList.map((item: any, index: number) => {
+    if (item.fileID) {
+      return;
+    }
+    return new Promise((resolve) => {
+      PictureApi.upload({
+        files: item,
+        path: item.path,
+      })
+        .then((res) => {
+          if (res.code === 200) {
+            resolve({
+              ...(res.data as any),
+              businessId: model1.order.id,
+              imagesType: ImagesType.NORMARL, // 普通资源
+              orderType: OrderType.Pay, // 收入明细
+            });
+          }
+        })
+        .catch((e) => {
+          return;
+        });
+    });
+  });
+};
+const handleSelect = (key: string, v: any) => {
+  contrlModalParams[key].isShow = false;
+  if (key === "user") {
+    model1.order.supCusName = v.name;
+    model1.order.supCusId = v.id;
+  } else if (key === "paySelect") {
+    model1.order.paymentMethodName = v.name;
+    model1.order.paymentMethod = v.id;
+  }
+};
+// 供应商信息
+SupplierApi.getSupplierUserList({}).then((res) => {
+  if (res.code === 200) {
+    model1.supplierList = res.data;
+    contrlModalParams.user.list = res.data;
+  }
+});
+// 客户信息
+CustomerApi.getCustomUserList({}).then((res) => {
+  if (res.code === 200) {
+    model1.customerList = res.data;
+  }
+});
+const upload = () => {
+  Promise.all(handleUpload()).then((res) => {
+    // 上传多个资源
+    if (res.length > 0) {
+      PictureApi.addListAnnex({ annexPos: res }).then((res1) => {
+        if (res1.code === 200) {
+          console.log("*** 资源文件更新成功");
+        }
+      });
+    }
+  });
+};
+
+/**
+ * 校验
+ */
+const form = ref();
+const check = () => {
+  return new Promise((resolve) => {
+    form.value
+      .validate()
+      .then((res: boolean) => {
+        resolve(res);
+      })
+      .catch((errors: any) => {
+        resolve(false);
+        uni.showToast({
+          icon: "none",
+          title: errors[0].message || "校验失败",
+        });
+      });
+  });
+};
+const save = () => {
+  check().then((res) => {
+    if (res) {
+      startSave();
+    }
+  });
+};
+
+const startSave = () => {
+  model1.order.paymentType = model1.order.buttonType
+  if (model1.order.buttonType === 2) {
+    model1.order.totalPrice = parseInt(model1.order.freight) + parseInt(model1.order.incidentals)
+  } 
+  FinanceApi.addPaymentDetails(model1.order).then((res) => {
+    if (res.code === 200) {
+      
+      model1.order.id = res.data;
+      upload();
+      uni.redirectTo({
+        url: "/pagesHome/index", // 要跳转到的页面路径
+      });
+    }
+  });
+};
+const handleTime = (v: any) => {
+  model1.order.settlementTime = formatDate(v.value, "{y}-{m}-{d} {h}:{i}:{s}");
+  contrlModalParams.isShowSplTime = false;
+};
+</script>
+<style lang="scss" scoped>
+.c-card {
+  background: #ffffff;
+  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
+  border-radius: 13rpx;
+  margin: 30rpx 25rpx;
+  padding: 0rpx 20rpx;
+  ::v-deep .u-form-item {
+    height: auto;
+  }
+  ::v-deep .u-form-item + .u-form-item {
+    border-top: 1rpx solid rgba(233, 233, 233, 0.76);
+  }
+}
+.btn-box {
+  margin-top: 60rpx;
+  display: flex;
+  background: #ffffff;
+  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
+  border-radius: 13rpx 13rpx 0rpx 0rpx;
+  padding: 25rpx 50rpx;
+  position: sticky;
+  bottom: 0rpx;
+  z-index: 999;
+  ::v-deep button {
+    border-radius: 43rpx;
+  }
+}
+</style>
diff --git a/src/pagesApp/components/payContent.vue b/src/pagesApp/components/payContent.vue
new file mode 100644
index 0000000..172230c
--- /dev/null
+++ b/src/pagesApp/components/payContent.vue
@@ -0,0 +1,80 @@
+<template>
+  <view class="box">
+    <view>{{ obj.supCusName }}</view>
+    <view
+      >结算时间：<text>{{ obj.settlementTime }}</text></view
+    >
+    <view
+      >单据编号：<text>{{ obj.paymentNumber }}</text></view
+    >
+    <view
+      >付款类型：<text>{{ getPayment(obj) }}</text></view
+    >
+    <view
+      >付款金额：<text v-if="obj.paymentType === 0 || obj.paymentType === 3"
+        >￥ {{ obj.totalPrice }}</text
+      >
+      <text v-else
+        >运费：￥ {{ obj.freight }}&nbsp;&nbsp;&nbsp;杂费：￥
+        {{ obj.incidentals }}</text
+      >
+    </view>
+    <view
+      >结算方式：<text>{{ getPaymentMethod(obj) }}</text></view
+    >
+    <view
+      >付款人：<text>{{ obj.paymentName }}</text></view
+    >
+    <view v-if="obj.paymentType === 0 || obj.paymentType === 1"
+      >{{ obj.paymentType === 0 ? "收货" : "出货" }}单号：
+      <text>{{ obj.orderNumber }}</text></view
+    >
+    <up-image :show-loading="true" v-for="(item, index) in obj.fileLists" :key="index" :src="item.url" width="80px" height="80px"></up-image>
+  </view>
+</template>
+<script setup lang="ts">
+import { FinanceApi, PictureApi } from "@/services";
+import { ImagesType, OrderType } from "@/utils/enum";
+import { onLoad } from "@dcloudio/uni-app";
+const obj = ref<any>({});
+const getPayment = (item: any) => {
+  return ["供应商付款", "客户付款", "客户(手动)", "供应商(手动)"][
+    item.paymentType
+  ];
+};
+const getPaymentMethod = (item: any) => {
+  return ["", "现金", "转账", "微信", "支付宝"][item.paymentType];
+};
+onLoad((option: any) => {
+  // 接收传递的标题参数
+  FinanceApi.getByPaymentId({ id: option.id }).then((res) => {
+    if (res.code === 200) {
+      obj.value = res.data;
+    }
+  });
+  PictureApi.getAnnex({
+      businessId: option.id,
+      orderType: OrderType.Pay,
+      imagesType: ImagesType.NORMARL,
+    }).then((res) => {
+      if (res.code === 200) {
+        obj.value.fileLists = res.data;
+      }
+    });
+});
+</script>
+<style lang="scss" scoped>
+.box {
+  background: #ffffff;
+  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
+  border-radius: 13rpx;
+  font-size: 26rpx;
+  margin: 26rpx;
+  padding: 26rpx;
+  line-height: 50rpx;
+  text {
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
+</style>
diff --git a/src/pagesApp/incomeDetail.vue b/src/pagesApp/incomeDetail.vue
new file mode 100644
index 0000000..c93cf48
--- /dev/null
+++ b/src/pagesApp/incomeDetail.vue
@@ -0,0 +1,5 @@
+<template>
+123
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/pagesApp/paymentDetail.vue b/src/pagesApp/paymentDetail.vue
new file mode 100644
index 0000000..161a0a6
--- /dev/null
+++ b/src/pagesApp/paymentDetail.vue
@@ -0,0 +1,343 @@
+<template>
+  <view class="search">
+    <u-search
+      placeholder="请输入收货/出货单号"
+      v-model="keyword"
+      :showAction="false"
+      :bgColor="'#fff'"
+      :borderColor="'rgba(0, 0, 0, 0.1)'"
+      :placeholderColor="'#C1C1C1'"
+      @search="handleSearch()"
+    ></u-search>
+    <view class="btn" @click="handleAdd()"> 创建 </view>
+  </view>
+  <view class="filter">
+    <!--  -->
+    <view @click="handleDialog('showTime', true)"
+      ><text>{{ state.name }}</text
+      ><u-icon name="arrow-down"></u-icon
+    ></view>
+    <view @click="state.isShowStatus = true"
+      ><text>费用类型</text><u-icon name="arrow-down"></u-icon
+    ></view>
+    <view class="btn" @click="handleDialog('showFilter', true)">筛选</view>
+  </view>
+  <view class="show-time">
+    <view v-if="state.name === '昨日' || state.name === '今日'">{{
+      state.startTime
+    }}</view>
+    <view v-else>{{ state.startTime }} - {{ state.endTime }}</view>
+  </view>
+  <page-view
+    @loadList="
+      (v) => {
+        getList(v);
+      }
+    "
+    :noMoreData="pageList.noMoreData"
+    :list="pageList.list"
+    :height="140"
+    :isLoading="pageList.isLoading"
+  >
+    <view class="list">
+      <u-swipe-action>
+        <u-swipe-action-item
+          :options="options1"
+          v-for="(item, index) in pageList.list"
+          :key="index"
+          @click="handleItem(item)"
+        >
+          <view
+            class="item"
+            :style="{ border: index === 0 ? 'none' : '' }"
+            @click="getDetail(item)"
+          >
+            <u-row justify="space-between">
+              <u-col span="9">
+                <view class="">
+                  <view class=""> {{ item.supCusName || "-" }} </view>
+                  <view class=""> {{ item.paymentNumber }} </view>
+                  <view class="time">
+                    结算时间：{{ item.settlementTime }}
+                  </view>
+                </view>
+              </u-col>
+              <u-col span="3">
+                <view class="amount">
+                  <view>￥ {{ item.totalPrice }}</view>
+                  <view class="tip">{{ getPayment(item) }}</view>
+                </view>
+              </u-col>
+            </u-row>
+          </view>
+        </u-swipe-action-item>
+      </u-swipe-action>
+    </view>
+  </page-view>
+
+  <!-- 时间弹框 -->
+  <TimeDialog
+    ref="timeDialog"
+    :show="showDialog.showTime"
+    @handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
+    @changeTime="changeTime"
+  />
+
+  <!-- 费用类型 -->
+  <u-action-sheet
+    :closeOnClickOverlay="true"
+    :closeOnClickAction="true"
+    :actions="state.statusList"
+    :title="'单据状态'"
+    :show="state.isShowStatus"
+    @select="handleSelectStatus"
+    @close="state.isShowStatus = false"
+  ></u-action-sheet>
+
+  <!-- 筛选弹框 -->
+  <FilterDialog
+    :show="showDialog.showFilter"
+    @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
+    @changeOther="changeOther"
+    :isShipment="false"
+  />
+</template>
+<script setup lang="ts">
+import { FinanceApi } from "@/services";
+import PageView from "@/components/PageView/index.vue";
+import { formatDate, getCurrentMonthStartAndEnd } from "@/utils";
+import TimeDialog from "./components/TimeDialog.vue";
+import FilterDialog from "./components/CustomFilterDialog.vue";
+
+const options1 = ref([
+  {
+    text: "删除",
+    style: {
+      backgroundColor: "rgba(217, 4, 30, 1)",
+      fontSize: "24rpx",
+    },
+  },
+]);
+const keyword = ref("");
+const state = reactive({
+  startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
+  endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
+  name: "本月",
+  currentPaymentType: -1,
+  isShowStatus: false,
+  statusList: [
+    {
+      name: "全部",
+      key: -1,
+    },
+    {
+      name: "供应商付款",
+      key: 0,
+    },
+    {
+      name: "客户付款",
+      key: 1,
+    },
+    {
+      name: "供应商(手动)",
+      key: 3,
+    },
+    {
+      name: "客户(手动)",
+      key: 2,
+    },
+  ],
+  userId: -1,
+  userType: -1,
+  params: {},
+});
+
+const getPayment = (item: any) => {
+  return ["供应商付款", "客户付款", "客户(手动)", "供应商(手动)"][
+    item.paymentType
+  ];
+};
+const showDialog = <
+  {
+    [key: string]: boolean;
+  }
+>reactive({
+  showTime: false,
+  showFilter: false,
+});
+
+const handleDialog = (key: string, v: boolean) => {
+  showDialog[key] = v;
+};
+const handleSelectStatus = (v: any) => {
+  state.isShowStatus = false;
+  state.currentPaymentType = v.key;
+  resetPageList();
+  getList();
+};
+const changeOther = (obj: any) => {
+  state.userId = obj.userId;
+  state.userType = obj.type;
+  resetPageList();
+  getList();
+};
+const pageList: PageResult<any> = reactive({
+  total: 0,
+  list: [],
+  pageNum: 1,
+  pageSize: 10,
+});
+const resetPageList = () => {
+  pageList.noMoreData = false;
+  pageList.total = 0;
+  pageList.list = [];
+  pageList.pageNum = 1;
+  pageList.pageSize = 10;
+};
+const handleSearch = () => {
+  resetPageList();
+  getList();
+};
+const handleAdd = () => {
+  uni.navigateTo({
+    url: "/pagesApp/components/addPayment", // 要跳转到的页面路径
+  });
+};
+// 删除
+const handleItem = (item: any) => {
+  FinanceApi.deletePaymentDs({ id: item.id }).then((res) => {
+    if (res.code === 200) {
+      uni.showToast({
+        title: "删除成功",
+      });
+      resetPageList();
+      getList();
+    }
+  });
+};
+// 获得详情
+const getDetail = (item: any) => {
+  uni.navigateTo({
+    url: "/pagesApp/components/payContent?id=" + item.id, // 要跳转到的页面路径
+  });
+};
+const changeTime = (obj: any) => {
+  state.startTime = obj.startTime;
+  state.endTime = obj.endTime;
+  state.name = obj.name;
+  resetPageList();
+  getList();
+};
+const getList = (v?: boolean) => {
+  if (v) {
+    if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
+      pageList.pageNum++;
+    } else {
+      pageList.noMoreData = true;
+      return;
+    }
+  }
+  let params: any = {
+    pageSize: pageList.pageSize,
+    pageNumber: pageList.pageNum,
+    startTime: state.startTime + " 00:00:00",
+    endTime: state.endTime + " 23:59:59",
+    oddNumbers: keyword.value,
+  };
+  if (state.currentPaymentType > -1) {
+    params.paymentType = state.currentPaymentType;
+  }
+  if (state.userId > -1) {
+    params.supCusId = state.userId;
+    params.userType = state.userType;
+  }
+
+  pageList.isLoading = true;
+  FinanceApi.getPaymentDetailsPage(params).then((res: any) => {
+    if (res.code === 200) {
+      pageList.isLoading = false;
+      (pageList as any).list = (pageList as any).list = pageList.list.concat(
+        res.data.list
+      );
+      pageList.total = (res.data as any).total;
+    }
+  });
+};
+onMounted(() => {
+  getList();
+});
+</script>
+<style lang="scss" scoped>
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 26rpx 26rpx 0rpx 26rpx;
+  .btn {
+    background: #00dcee;
+    border-radius: 24rpx;
+    border: 1px solid #00dcee;
+    font-weight: 500;
+    font-size: 26rpx;
+    color: #ffffff;
+    margin-left: 50rpx;
+    padding: 6rpx 30rpx;
+  }
+}
+
+.filter {
+  margin: 0rpx 26rpx 0rpx 26rpx;
+  padding: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #000000;
+  > view {
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    text {
+      margin-right: 10rpx;
+    }
+  }
+  .btn {
+    font-size: 26rpx;
+    color: #00dcee;
+  }
+}
+
+.show-time {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #000000;
+  margin: 0rpx 26rpx 20rpx 50rpx;
+}
+
+.list {
+  background: #ffffff;
+  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
+  border-radius: 13rpx;
+  margin: 0rpx 26rpx;
+  padding: 0rpx 18rpx;
+  .item {
+    font-size: 26rpx;
+    line-height: 40rpx;
+    border-top: 1px solid rgba(233, 233, 233, 0.76);
+    padding: 26rpx 26rpx;
+    .time {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+  .amount {
+    text-align: right;
+    .tip {
+      font-size: 24rpx;
+      color: #ff7e20;
+    }
+  }
+}
+</style>
+./components/CustomFilterDialog.vue
diff --git a/src/pagesHome/index.vue b/src/pagesHome/index.vue
index 73ab9cb..eb0c731 100644
--- a/src/pagesHome/index.vue
+++ b/src/pagesHome/index.vue
@@ -436,7 +436,7 @@ const appList = reactive([
     title: "支付明细",
     fn: () => {
       uni.navigateTo({
-        url: "/pagesApp/shipmentDetail", // 要跳转到的页面路径
+        url: "/pagesApp/paymentDetail", // 要跳转到的页面路径
       });
     },
   },
@@ -445,7 +445,7 @@ const appList = reactive([
     title: "收入明细",
     fn: () => {
       uni.navigateTo({
-        url: "/pagesApp/receiveCl", // 要跳转到的页面路径
+        url: "/pagesApp/incomeDetail", // 要跳转到的页面路径
       });
     },
   },
diff --git a/src/pagesShipment/form/settlementForm.vue b/src/pagesShipment/form/settlementForm.vue
index b5a10ec..a553a43 100644
--- a/src/pagesShipment/form/settlementForm.vue
+++ b/src/pagesShipment/form/settlementForm.vue
@@ -429,7 +429,7 @@ const handleUpload = () => {
             resolve({
               ...(res.data as any),
               businessId: model1.order.id,
-              imagesType: ImagesType.Settlement, // 单据资源
+              imagesType: ImagesType.NORMARL, // 单据资源
               orderType: OrderType.Shipment, // 出库单
             });
           }
@@ -553,7 +553,7 @@ onLoad((option) => {
     PictureApi.getAnnex({
       businessId: model1.order.id,
       orderType: OrderType.Shipment,
-      imagesType: ImagesType.Settlement,
+      imagesType: ImagesType.NORMARL,
     }).then((res) => {
       if (res.code === 200) {
         model1.order.fileLists = res.data;
diff --git a/src/services/finance.ts b/src/services/finance.ts
index e6bebab..014b2a1 100644
--- a/src/services/finance.ts
+++ b/src/services/finance.ts
@@ -27,6 +27,16 @@ export const addPaymentDetails = (data: any) => {
   })
 }
 
+// 删除
+export const deletePaymentDs = (data: any) => {
+  return http({
+    method: 'POST',
+    url: '/api/paymentdtails/deletePaymentDs',
+    data,
+  })
+}
+
+
 // 收入明细新增
 export const addRevenueDes = (data: any) => {
   return http({
diff --git a/src/services/receive.ts b/src/services/receive.ts
index 201cdc2..d33d65a 100644
--- a/src/services/receive.ts
+++ b/src/services/receive.ts
@@ -126,6 +126,15 @@ export const getReconciliation = (data: any) => {
   });
 };
 
+// 概况总应收应付
+export const getTotal = () => {
+  return http({
+    method: "GET",
+    url: "/api/orderIn/getTotal"
+  });
+};
+
+
 
 
 
diff --git a/src/utils/enum.ts b/src/utils/enum.ts
index 6592284..020b2a0 100644
--- a/src/utils/enum.ts
+++ b/src/utils/enum.ts
@@ -3,6 +3,8 @@
 export enum OrderType {
   Receive = 1,
   Shipment = 2,
+  Pay = 3,
+  Income = 4
 }
 // 扣杂状态：0扣杂1扣点
 export enum ButtonType {
@@ -20,12 +22,13 @@ export enum MultiCategory {
   Multiple = 1,
 }
 
-// 0:普通资源1：皮重 2毛重 3 结算单据
+// 0:普通资源1：皮重 2毛重
 export enum ImagesType {
   NORMARL = 0,
   Tare = 1,
   GROSSWEIGHT = 2,
-  Settlement = 3
+  // Settlement = 3,
+  // Payment = 4
 }
 //磅单状态:0：待定价1：待过皮2：待审核3：已审核待支付4：已支付
 // 磅单状态：0：待出货1:待过毛2：待审核3：已审未付4：已审已付