freight-web/src/PagesStatistics/supplierChecking.vue

<template>
  <Search :name="'供应商名称'" @handleSearch="handleSearch"/>
  <view class="c-card">
    <StatisticCard :list="list" />
    <view class="detail">
      <view v-for="(item, index) in billList" :key="index" @click="getDetail(item)">
        <text>{{ item.supplierName }}</text>
        <text class="num">¥{{ item.unPayTotalPrice }} <text class="tip">付</text></text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import Search from "@/components/Search/index.vue";
import StatisticCard from "@/components/StatisticCard/index.vue";
import { ReceiveApi } from "@/services";
const list = reactive([
  {
    num: 0,
    name: "应付供应商",
  },
  {
    num: 0,
    name: "应付金额",
  },
]);
const handleSearch = (v:string) => {
  getList(v)
}
const billList = ref<any>([])
const getDetail = (item: any) => {
  uni.navigateTo({
    url: "/pagesStatistics/billDetail?type=1&id="+ item.userId +`&name=${item.supplierName}`, // 要跳转到的页面路径
  });
};
const getList = (v: string) => {
  ReceiveApi.getReconciliation({userName: v}).then((res:any) => {
    if (res.code === 200) {
      list[0].num = res.data.supplierNum
      list[1].num = res.data.unPayTotalPrice
      billList.value = res.data.unPaySupplierVos
    }
  })
}
onMounted(() => {
  getList('')
})
</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;
}
.detail {
  border-top: 18rpx solid #f8f8f8;
  padding: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  > view {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 10rpx;
    .num {
      color: #ec0f3e;
    }
    .tip {
      color: $u-primary;
      margin-left: 20rpx;
      font-weight: 500;
      font-size: 24rpx;
    }
  }
  > view + view {
    border-top: 1px solid rgba(233, 233, 233, 0.76);
  }
}
</style>