freight-web/src/pages/app/shipmentDetail.vue

<template>
  <view class="c-card">
    <view class="search">
      <u-search
        placeholder="请输入出货单号"
        v-model="keyword"
        :showAction="false"
        :bgColor="'#fff'"
        :borderColor="'rgba(0, 0, 0, 0.1)'"
        :placeholderColor="'#C1C1C1'"
      ></u-search>
      <view class="btn"> 创建 </view>
    </view>
    <view class="filter">
      <view><text>本月</text><u-icon name="arrow-down"></u-icon></view>
      <view><text>单据状态</text><u-icon name="arrow-down"></u-icon></view>
      <view><text>排序</text><u-icon name="arrow-down"></u-icon></view>
      <view class="btn">筛选</view>
    </view>

    <view class="time">2024-01-01</view>

    <view class="box" v-for="item in 10" :key="item">
      <view class="base">
        <view>
          <view class="no"> 出货单号：SHD20230901132333 </view>
          <view class="supplier"> 上海奉贤两网融合（大磅） </view>
        </view>
        <view>
          <text class="btn" @click="handleScenePhoto">现场照片</text>
        </view>
      </view>

      <view class="name">吴小勇 <text>已结算</text></view>
      <view class="type">轻二</view>

      <view class="more">
        <view
          v-for="(item, index) in gridList1"
          :key="index"
          :style="{'width': `${item.name === '创建时间' ? 'max-content' : ''}`, 'font-size': `${item.isCustomStyle ? '22rpx': ''}`, 'color': `${item.isCustomStyle ? '#999': ''}`}"
        >
          <text v-if="item.name">{{ item.name }}：</text
          ><text
            >{{ item.isBefore ? item.unit : "" }}
            {{ item.num }}
            {{ item.isBefore ? "" : item.unit }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const keyword = ref("");
const gridList1 = reactive([
  {
    name: "卡号",
    num: "123123",
  },
  {},
  {
    name: "创建时间",
    num: "2023-09-01   13:23:33",
  },
  {},
  {
    name: "车牌号",
    num: "123",
    isBefore: false,
  },
  {
    name: "送货方式",
    num: "自提",
    isBefore: false,
  },
  {
    name: "毛重",
    num: "4080.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    num: "3450.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "净重",
    num: "640.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "数量",
    num: "1",
    isBefore: false,
  },
  {
    name: "过毛",
    num: "2023-09-01   13:23:33",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
  {
    name: "过皮",
    num: "2023-09-01   13:23:33",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
  {
    name: "结算重量",
    num: "640.00",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "单价",
    num: "2.48",
    unit: "元/千克",
    isBefore: false,
  },
  {
    name: "结算总价",
    num: "2.48",
    unit: "元",
    isBefore: false,
  },
  {
    name: "实际金额",
    num: "2.48",
    unit: "元",
    isBefore: false,
  },
  {
    name: "实收金额",
    num: "2.48",
    unit: "元",
    isBefore: false,
  },
  
]);
const handleScenePhoto = () => {
  uni.navigateTo({
    url: "/pages/scenePhoto/index", // 要跳转到的页面路径
  });
};
</script>
<style lang="scss" scoped>
.c-card {
  margin: 30rpx 25rpx;
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      background: #00dcee;
      border-radius: 24rpx;
      border: 1px solid #00dcee;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      margin-left: 50rpx;
      padding: 6rpx 30rpx;
    }
  }

  .filter {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 27rpx;
    color: #000000;
    > view {
      display: inline-block;
      display: flex;
      align-items: center;
      text {
        margin-right: 10rpx;
      }
    }
    .btn {
      font-size: 27rpx;
      color: #00dcee;
    }
  }
  .time {
    font-weight: 400;
    font-size: 22rpx;
    color: #000000;
    margin: 30rpx 0rpx;
  }
  .box + .box {
    margin-top: 30rpx;
  }
  .box {
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    padding: 30rpx;
    .base {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .no {
        font-weight: 400;
        font-size: 21rpx;
        color: #000000;
      }
      .supplier {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
      .btn {
        border-radius: 24rpx;
        border: 1px solid #00dcee;
        padding: 10rpx 30rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #00dcee;
        line-height: 41rpx;
      }
    }
    .name {
      font-weight: 400;
      font-size: 27rpx;
      color: #000000;
      margin: 15rpx 0rpx;
      text {
        background-color: #ffaf75;
        font-weight: 500;
        font-size: 16rpx;
        color: #ffffff;
        padding: 5rpx 20rpx;
        margin-left: 20rpx;
      }
    }
    .type {
      font-weight: 400;
      font-size: 27rpx;
      color: #ec0f3e;
      margin-bottom: 20rpx;
    }
  }
  .more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex: 1;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    > view {
      line-height: 50rpx;
    }
  }
}
</style>