freight-web/src/pages/statistics/customer/detail.vue

<template>
  <view class="c-card">
    <view class="top">
      <view class="left">
        <view>上海奉贤两网融合（大磅）</view>
        <view>重一</view>
      </view>
      <view>
        <text class="btn" @click="handleScenePhoto()">现场照片</text>
      </view>
    </view>
    <view class="content">
      <view class="baseinfo">
        <view class="time"> 过磅时间：2023-09-01 13:23:33 </view>
        <view class="person">
          <view>定价人：谭兵</view>
          <view>审核人：谭兵</view>
        </view>
      </view>
      <view style="padding: 30rpx 0rpx">
        <view> <text>收货单号：</text><text> SHD20230901132333 </text></view>
        <view class="box">
          <view v-for="(item, index) in gridList1" :key="index">
            <text v-if="item.name">{{ item.name }}：</text
            ><text
              >{{ item.isBefore ? item.unit : "" }}
              {{ item.num }}
              {{ item.isBefore ? "" : item.unit }}
            </text>
          </view>
        </view>

        <view class="moreInfo">
          <view class="baseinfo">
            <view>客户收货</view>
            <view class="time"> 收货时间：2023-09-01 13:23:33 </view>
          </view>
          <view class="box">
            <view v-for="(item, index) in gridList2" :key="index">
              <text v-if="item.name">{{ item.name }}：</text
              ><text
                >{{ item.isBefore ? item.unit : "" }}
                {{ item.num }}
                {{ item.isBefore ? "" : item.unit }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from "vue";

const gridList1 = reactive([
  {
    name: "毛重",
    num: "4080.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    num: "3450.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "净重",
    num: "640.00",
    unit: "KG",
    isBefore: false,
  },
]);
const gridList2 = reactive([
  {
    name: "结算重量",
    num: "640.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算单价",
    num: "2.48",
    unit: "元/KG",
    isBefore: false,
  },
  {
    name: "预估总价",
    num: "1587.00",
    unit: "元",
    isBefore: false,
  },
  {
    name: "货款金额",
    num: "1587.00",
    unit: "元",
    isBefore: false,
  },
  {
    name: "杂费",
    num: "0",
    unit: "元",
    isBefore: false,
  },
  {
    name: "运费",
    num: "0",
    unit: "元",
    isBefore: false,
  },
  {
    name: "实际收入",
    num: "1587.00",
    unit: "元",
    isBefore: false,
  },
  {},
  {
    name: "净重误差",
    num: "0.00",
    unit: "KG",
    isBefore: false,
  },
  {},
  {
    name: "结算状态",
    num: "未结算",
    unit: "",
    isBefore: false,
  },
  {
    name: "应收金额",
    num: "1587.00",
    unit: "元",
    isBefore: false,
  },
  
]);
const handleScenePhoto = () => {
  uni.navigateTo({
    url: "/pages/scenePhoto/index", // 要跳转到的页面路径
  });
};
</script>
<style lang="scss" scoped>
.c-card {
  margin: 30rpx 25rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 18rpx solid #f8f8f8;
    .left {
      view {
        line-height: 40rpx;
        &:nth-child(2) {
          color: rgba(236, 15, 62, 1);
          font-weight: 400;
          font-size: 27rpx;
        }
      }
    }
    .btn {
      border-radius: 24rpx;
      border: 1px solid #00dcee;
      padding: 10rpx 30rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #00dcee;
      line-height: 41rpx;
    }
  }

  .content {
    margin: 30rpx;
    .baseinfo {
      .time {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 21rpx;
        color: #999999;
        line-height: 40rpx;
      }
      .person {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 40rpx;
      }
    }
    .box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      flex: 1;
      > view {
        line-height: 50rpx;
      }
    }

    .moreInfo {
      margin-top: 20rpx;
      padding: 20rpx 0rpx;
      border-top: 18rpx solid rgba(248, 248, 248, 1);
      .box {
        margin-top: 20rpx;
      }
    }
  }
}
</style>