马铃薯app 1.客户往来、供应商往来查询展示修改 2.环境检测页面展示修改

gaoluyang

2026-06-04 a0535e42ebe01366d3bb83e00eb0180b34682a63

 src/pages/sales/receiptPaymentLedger/detail.vue

@@ -1,292 +1,285 @@
<template>
   <view class="receipt-payment-detail">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="客户往来详情" @back="goBack" />
		
      <!-- 统计信息 -->
      <view class="summary-info" v-if="tableData.length > 0">
         <view class="summary-item">
            <text class="summary-label">总记录数</text>
            <text class="summary-value">{{ tableData.length }}</text>
         </view>
         <view class="summary-item">
            <text class="summary-label">开票总金额</text>
            <text class="summary-value">{{ formatAmount(invoiceTotal) }}</text>
         </view>
         <view class="summary-item">
            <text class="summary-label">回款总金额</text>
            <text class="summary-value highlight">{{ formatAmount(receiptTotal) }}</text>
         </view>
         <view class="summary-item">
            <text class="summary-label">应收总金额</text>
            <text class="summary-value danger">{{ formatAmount(unReceiptTotal) }}</text>
         </view>
      </view>
		
      <!-- 回款记录明细列表 -->
      <view class="detail-list" v-if="tableData.length > 0">
         <view v-for="(item, index) in tableData" :key="index" class="detail-item">
            <view class="item-header">
               <view class="item-left">
                  <view class="record-icon">
                     <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                  </view>
                  <text class="item-index">{{ index + 1 }}</text>
               </view>
               <view class="item-date">{{ item.happenTime }}</view>
            </view>
            <up-divider></up-divider>
            <view class="item-details">
               <view class="detail-row">
                  <text class="detail-label">开票金额(元)</text>
                  <text class="detail-value">{{ formatAmount(item.invoiceAmount) }}</text>
               </view>
               <view class="detail-row">
                  <text class="detail-label">回款金额(元)</text>
                  <text class="detail-value highlight">{{ formatAmount(item.receiptAmount) }}</text>
               </view>
               <view class="detail-row">
                  <text class="detail-label">应收金额(元)</text>
                  <text class="detail-value danger">{{ formatAmount(item.unReceiptAmount) }}</text>
               </view>
            </view>
         </view>
      </view>
      <view v-else class="no-data">
         <text>暂无回款记录</text>
      </view>
   </view>
  <view class="receipt-payment-detail">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="客户往来详情"
                @back="goBack" />
    <!-- 发货台账明细 -->
    <view class="detail-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index"
            class="detail-item">
        <view class="item-header">
          <view class="item-left">
            <view class="record-icon">
              <up-icon name="file-text"
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-index">{{ item.salesContractNo }}</text>
          </view>
          <view class="item-status">
            <text class="status-tag"
                  :class="getStatusClass(item.status)">{{ item.status || '--' }}</text>
          </view>
        </view>
        <up-divider></up-divider>
        <view class="item-details">
          <view class="detail-row">
            <text class="detail-label">客户名称</text>
            <text class="detail-value">{{ item.customerName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">产品名称</text>
            <text class="detail-value">{{ item.productName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">规格型号</text>
            <text class="detail-value">{{ item.specificationModel }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">发货时间</text>
            <text class="detail-value">{{ item.shippingDate }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">发货数量</text>
            <text class="detail-value">{{ item.totalQuantity }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">出库单号</text>
            <text class="detail-value">{{ item.outboundBatches }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无发货记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { customerInteractions } from "@/api/salesManagement/receiptPayment.js";
  import { ref, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { deliveryLedgerListPage } from "@/api/salesManagement/deliveryLedger.js";

// 客户信息
const customerId = ref('');
  // 客户信息
  const customerId = ref("");

// 表格数据
const tableData = ref([]);
  // 表格数据
  const tableData = ref([]);

const invoiceTotal = computed(() => {
   return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.invoiceAmount) || 0);
   }, 0);
});
  // 返回上一页
  const goBack = () => {
    uni.removeStorageSync("customerId");
    uni.navigateBack();
  };

const receiptTotal = computed(() => {
   return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptAmount) || 0);
   }, 0);
});
  // 获取页面参数
  const getPageParams = () => {
    const storedCustomerId = uni.getStorageSync("customerId");
    if (storedCustomerId) {
      customerId.value = storedCustomerId;
    }
  };

const unReceiptTotal = computed(() => {
   return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.unReceiptAmount) || 0);
   }, 0);
});
  // 查询列表
  const getList = () => {
    if (!customerId.value) {
      uni.showToast({
        title: "客户信息缺失",
        icon: "error",
      });
      return;
    }

// 返回上一页
const goBack = () => {
   uni.navigateBack();
};
    showLoadingToast("加载中...");
    deliveryLedgerListPage({
      customerId: customerId.value,
      current: 1,
      size: 1000,
    })
      .then(res => {
        let orders = [];
        if (res.data) {
          if (Array.isArray(res.data)) {
            orders = res.data;
          } else if (res.data.records && Array.isArray(res.data.records)) {
            orders = res.data.records;
          }
        }
        tableData.value = orders;
        closeToast();
      })
      .catch(() => {
        closeToast();
        uni.showToast({
          title: "查询失败",
          icon: "error",
        });
      });
  };

// 获取页面参数
const getPageParams = () => {
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const options = currentPage.options;
	
   if (options.customerId) {
      customerId.value = options.customerId;
   }
};
  // 发货状态样式
  const getStatusClass = (status) => {
    const statusMap = {
      '已发货': 'status-success',
      '审核通过': 'status-success',
      '审核中': 'status-warning',
      '审核不通过': 'status-danger',
    };
    return statusMap[status] || 'status-info';
  };

// 查询列表
const getList = () => {
   if (!customerId.value) {
      uni.showToast({
         title: '客户信息缺失',
         icon: 'error'
      });
      return;
   }
	
   const param = {
      customerId: customerId.value,
      current: -1,
      size: -1
   };
	
   customerInteractions(param).then((res) => {
      tableData.value = res.data;
   }).catch(() => {
      uni.showToast({
         title: '查询失败',
         icon: 'error'
      });
   });
};
  // 显示加载提示
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// 格式化金额
const formatAmount = (amount) => {
   return amount ? parseFloat(amount).toFixed(2) : '0.00';
};
  // 关闭提示
  const closeToast = () => {
    uni.hideLoading();
  };

onShow(() => {
   // 页面显示时获取参数并刷新列表
   getPageParams();
   getList();
});
  onShow(() => {
    // 页面显示时获取参数并刷新列表
    getPageParams();
    getList();
  });

onMounted(() => {
   // 页面加载时获取参数并刷新列表
   getPageParams();
   getList();
});
  onMounted(() => {
    // 页面加载时获取参数并刷新列表
    getPageParams();
    getList();
  });
</script>

<style scoped lang="scss">
.receipt-payment-detail {
   min-height: 100vh;
   background: #f8f9fa;
   position: relative;
}
  .receipt-payment-detail {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
  }

.u-divider {
   margin: 0 !important;
}
  .u-divider {
    margin: 0 !important;
  }

.summary-info {
   background: #ffffff;
   margin: 20px 20px 0 20px;
   border-radius: 12px;
   padding: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
  .detail-list {
    padding: 20px;
  }

.summary-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
	
   &:last-child {
      margin-bottom: 0;
   }
}
  .detail-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
  }

.summary-label {
   font-size: 14px;
   color: #666;
}
  .item-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.summary-value {
   font-size: 14px;
   color: #333;
   font-weight: 500;
}
  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.summary-value.highlight {
   color: #2979ff;
   font-weight: 600;
}
  .record-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.summary-value.danger {
   color: #ff4757;
   font-weight: 600;
}
  .item-index {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.detail-list {
   padding: 20px;
}
  .item-date {
    font-size: 12px;
    color: #666;
  }

.detail-item {
   background: #ffffff;
   border-radius: 12px;
   margin-bottom: 16px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   padding: 0 16px;
}
  .item-status {
    display: flex;
    align-items: center;
  }

.item-header {
   padding: 10px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
  .status-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
  }

.item-left {
   display: flex;
   align-items: center;
   gap: 8px;
}
  .status-success {
    color: #67c23a;
    background: rgba(103, 194, 58, 0.1);
  }

.record-icon {
   width: 24px;
   height: 24px;
   background: #2979ff;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
}
  .status-warning {
    color: #e6a23c;
    background: rgba(230, 162, 60, 0.1);
  }

.item-index {
   font-size: 14px;
   color: #333;
   font-weight: 500;
}
  .status-danger {
    color: #f56c6c;
    background: rgba(245, 108, 108, 0.1);
  }

.item-date {
   font-size: 12px;
   color: #666;
}
  .status-info {
    color: #909399;
    background: rgba(144, 147, 153, 0.1);
  }

.item-details {
   padding: 16px 0;
}
  .item-details {
    padding: 16px 0;
  }

.detail-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 8px;
	
   &:last-child {
      margin-bottom: 0;
   }
}
  .detail-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;

.detail-label {
   font-size: 12px;
   color: #777777;
   min-width: 60px;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.detail-value {
   font-size: 12px;
   color: #000000;
   text-align: right;
   flex: 1;
   margin-left: 16px;
}
  .detail-label {
    font-size: 12px;
    color: #777777;
    min-width: 60px;
  }

.detail-value.highlight {
   color: #2979ff;
   font-weight: 500;
}
  .detail-value {
    font-size: 12px;
    color: #000000;
    text-align: right;
    flex: 1;
    margin-left: 16px;
  }

.detail-value.danger {
   color: #ff4757;
   font-weight: 500;
}
  .no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
  }

.no-data {
   padding: 40px 0;
   text-align: center;
   color: #999;
}
</style>