freight-web/src/PagesStatistics/receivePanel.vue

<template>
  <view class="layout-box">
    <view class="filter">
      <u-input
        v-model="params.startTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择开始时间"
      ></u-input>
      <text>-</text>
      <u-input
        v-model="params.endTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择结束时间"
      ></u-input>
      <u-icon name="arrow-down-fill" @click="handleDialog('showTime',true)"></u-icon>
      <text class="status">单据状态</text>
      <u-icon name="arrow-down-fill" @click="handleDialog('showStatus', true)"></u-icon>
      <text class="btn" @click="handleDialog('showFilter', true)">筛选</text>
    </view>

    <view class="box">
      <up-row>
        <up-col span="4">
          <view class="inner-box" style="border: none">
            <view class="num">892339.9</view>
            <view>收货总量/kg</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">892339.9</view>
            <view>已付/kg</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">892339.9</view>
            <view>未付/kg</view>
          </view>
        </up-col>
      </up-row>
    </view>

    <view class="box">
      <up-row>
        <up-col span="4">
          <view class="inner-box" style="border: none">
            <view class="num">892339.9</view>
            <view>结算金额/元</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">892339.9</view>
            <view>实收金额</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">892339.9</view>
            <view>应付金额</view>
          </view>
        </up-col>
      </up-row>
    </view>
    <view class="box">
      <up-row>
        <up-col span="6">
          <view class="inner-box" style="border: none">
            <view class="num">892339.9</view>
            <view>收货单</view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="inner-box">
            <view class="num">892339.9</view>
            <view>均价（元/kg）</view>
          </view>
        </up-col>
      </up-row>
    </view>

    <view class="box">
      <uni-table stripe emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th v-for="(item, index) in tableTitleList" :key="index">{{
            item.name
          }}</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in 10" :key="index">
          <uni-td>轻一</uni-td>
          <uni-td>1636.00</uni-td>
          <uni-td>5646.00</uni-td>
          <uni-td>5636.00</uni-td>
          <uni-td>5636.00</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>

  <!-- 时间弹框 -->
  <TimeDialog ref="timeDialog"  :show="showDialog.showTime" @handleDialog="(v:boolean) => {handleDialog('showTime', v)}"/>

  <!-- 单据弹框 -->
  <StatusDialog :show="showDialog.showStatus" @handleDialog="(v:boolean) => {handleDialog('showStatus', v)}"/>

  <!-- 筛选弹框 -->
  <FilterDialog :show="showDialog.showFilter" @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"/>

</template>
<script setup lang="ts">
import TimeDialog from './components/TimeDialog.vue'
import StatusDialog from './components/StatusDialog.vue'
import FilterDialog from './components/FilterDialog.vue'
const params = reactive({
  startTime: "2024-01-01",
  endTime: "2024-01-01",
});

const tableTitleList = reactive([
  {
    name: "收货产品",
  },
  {
    name: "收货总量/kg",
  },
  {
    name: "总金额",
  },
  {
    name: "收货单数",
  },
  {
    name: "均价（元/kg）",
  },
]);
const showDialog = <
  {
    [key: string]: boolean
  }
>reactive(
  {
    showTime: false,
    showStatus: false,
    showFilter: false
  }
)

const handleDialog = (key: string, v:boolean) => {
  showDialog[key] = v
}


</script>
<style lang="scss" scoped>
.layout-box {
  margin: 35.9rpx 25.64rpx;
  .filter {
    display: flex;
    align-items: center;
    justify-items: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 27rpx;
    color: #000000;
    ::v-deep .u-input {
      padding: 0rpx 16.03rpx !important;
      input {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 21rpx !important;
        color: #000000;
      }
    }
    text {
      margin: 0px 5rpx;
    }
    .status {
      margin-left: 40rpx;
    }
    .btn {
      color: $u-primary;
      margin-left: 40rpx;
      margin-right: 0rpx;
    }
  }
  .box {
    padding: 19.23rpx;
    // display: flex;
    // justify-content: space-between;
    align-items: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    text-align: center;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    margin-top: 30rpx;
  }
  .inner-box {
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    border-left: 1px solid #e9e9e9;
    .num {
      font-weight: bold;
      font-size: 27rpx;
    }
  }
  ::v-deep .uni-table {
    min-width: auto !important;
    .uni-table-th {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 22rpx;
      color: #000000;
      padding: 5px 5px;
    }
    .uni-table-td {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 21rpx;
      color: #000000;
    }
  }
}

</style>