freight-web/src/PagesStatistics/customer/detail.vue

<template>
  <view class="c-card">
    <view class="top">
      <view class="left">
        <view>{{ state.order.deviceName || "-" }}</view>
        <view>{{ state.order.productName || "" }}</view>
      </view>
      <view>
        <text class="btn" @click="handleScenePhoto(state.order.id)"
          >现场照片</text
        >
      </view>
    </view>
    <view class="content">
      <view class="baseinfo">
        <view class="person">
          <view>审核人：{{ state.order.pricingUserName || "-" }}</view>
          <view class="time"> 过磅时间：{{ state.order.tareTime }} </view>
        </view>
      </view>
      <view style="padding: 30rpx 0rpx">
        <view>
          <text>出货单号：</text
          ><text>{{ state.order.orderNumber }} </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"> 收货时间：{{ state.order.updateTime }} </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 { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const gridList1 = reactive([
  {
    name: "毛重",
    enName: "grossWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "tare",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "净重",
    enName: "netWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
]);
const gridList2 = reactive([
  {
    name: "结算重量",
    enName: "settlementWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算单价",
    enName: "unitPrice",
    num: "",
    unit: "元/KG",
    isBefore: false,
  },
  {
    name: "预估总价",
    enName: "estimatePrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "货款金额",
    enName: "totalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "运费",
    enName: "freight",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "杂费",
    enName: "incidentals",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "实际收入",
    enName: "realIncome",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {},
  {
    name: "净重误差",
    enName: "netWeightError",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {},
  {
    name: "结算状态",
    enName: "scaleStatus",
    num: "",
    unit: "",
    isBefore: false,
  },
  {
    name: "应收金额",
    enName: "totalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
]);
const handleScenePhoto = (id: string) => {
  uni.navigateTo({
    url: "/pagesScenePhoto/index?orderType=2&imagesType=1&id=" + id, // 要跳转到的页面路径
  });
};
const state = reactive<any>({
  order: {},
});
onLoad((option: any) => {
  // 设置页面标题
  uni.setNavigationBarTitle({
    title: option.name,
  });
  const order = JSON.parse(option.obj);
  state.order = order;
  gridList1.map((item: any) => {
    item.num = order[item.enName as string];
  });
  gridList2.map((item: any) => {
    if (item.name === "结算状态") {
      item.num =
        ["待出货", "待过毛", "待审核", "已审未付", "已审已付"][
          order[item.enName as string]
        ] || "-";
    } else {
      item.num = order[item.enName as string];
    }
  });
});
</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: 26rpx;
  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: 28rpx;
        }
      }
    }
    .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: 24rpx;
        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>