freight-web/src/PagesStatistics/supplier/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="time"> 过磅时间：{{ state.order.grossTime }}</view>
        <view class="person">
          <view>定价人：{{ state.order.pricingUserName || "-" }}</view>
          <view>审核人：{{ state.order.reviewerUserName || "-" }}</view>
        </view>
      </view>
      <view style="padding: 30rpx 0rpx">
        <view>
          <text>收货单号：</text
          ><text> {{ state.order.receiptNumber }} </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>
    </view>
  </view>
</template>
<script setup lang="ts">
import { PaymentMethod } from "@/utils/enum";
import { onLoad } from "@dcloudio/uni-app";

const gridList1 = reactive<any>([
  {
    name: "毛重",
    enName: "grossWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "tare",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "扣杂",
    enName: "buckleMiscellaneous",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {},
  {
    name: "净重",
    enName: "netWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "单价",
    enName: "price",
    num: "",
    unit: "元/KG",
    isBefore: false,
  },
  {
    name: "预估总价",
    enName: "totalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "货款金额",
    enName: "balanceTotalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "付款状态",
    enName: "paymentMethod",
    num: "未支付",
    isBefore: false,
  },
  {
    name: "应付金额",
    enName: "balanceTotalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
]);
const handleScenePhoto = (id: any) => {
  uni.navigateTo({
    url: "/pagesScenePhoto/index?orderType=1&imagesType=1&id=" + id, // 要跳转到的页面路径
  });
};
const state = reactive<Order>({
  order: {},
});
onLoad((option: any) => {
  // 设置页面标题
  uni.setNavigationBarTitle({
    title: option.name,
  });
  const order = JSON.parse(option.obj);
  state.order = order;
  gridList1.map((item: any) => {
    if (item.name === "扣杂" || item.name === "扣点") {
      if (order.buttonType === 0) {
        item.name = "扣杂";
        item.enName = "buckleMiscellaneous";
        item.unit = "KG";
      } else if (order.buttonType === 1) {
        item.name = "扣点";
        item.enName = "points";
        item.unit = "%";
      }
    } else 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;
      }
    }
  }
}
</style>