freight-web/src/pages/review/index.vue

<template>
  <view class="c-card">
    <view class="box" v-for="item in 1" :key="item">
      <view class="base">
        <view>
          <view class="supplier"> 上海奉贤两网融合（大磅） </view>
        </view>
      </view>
      <view class="flex-box1">
        <view class="type">轻二</view>
        <view class="btn">
          <view
            ><u-tag
              text="现场照片"
              plain
              shape="circle"
              :bgColor="'rgba(237, 254, 255, 1)'"
            ></u-tag
          ></view>
          <view
            ><u-tag
              text="收货单作废"
              plain
              shape="circle"
              :borderColor="'rgba(255, 147, 68, 1) !important'"
              :bgColor="'rgba(255, 240, 229, 1)'"
              :color="'rgba(255, 157, 85, 1) !important'"
            ></u-tag
          ></view>
          <view
            ><u-tag
              text="编辑信息"
              plain
              shape="circle"
              :borderColor="'rgba(0, 238, 78, 1) !important'"
              :bgColor="'rgba(227, 255, 236, 1)'"
              :color="'rgba(0, 238, 78, 1) !important'"
            ></u-tag
          ></view>
        </view>
      </view>
      <view class="flex-box">
        <text>定价人：谭兵</text>
        <text>创建时间：2023-09-01 13:23:33</text>
      </view>

      <view class="more">
        <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 class="op-btn">
      <view class="c-btn-review">
        <view> 审核暂不支付 </view>
        <view class="active"> 审核立即支付 </view>
      </view>
      <view>
        <u-button
          text="重新过皮"
          plain
          :customStyle="{
            color: 'rgba(0, 220, 238, 1)',
            border: '1px solid #00DCEE',
            'border-radius': '43rpx',
          }"
        ></u-button>
      </view>
      <view>
        <u-button
          text="打印"
          type="primary"
          :customStyle="{ 'border-radius': '43rpx' }"
        ></u-button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const keyword = ref("");
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,
  },
  {},
  {
    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,
  },
]);
const handleScenePhoto = () => {
  uni.navigateTo({
    url: "/pages/scenePhoto/index", // 要跳转到的页面路径
  });
};
</script>
<style lang="scss" scoped>
.c-card {
  margin: 30rpx 25rpx;
  .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;
      }
    }

    .flex-box1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0rpx;
      .type {
        font-weight: 400;
        font-size: 27rpx;
        color: #ec0f3e;
      }
      .btn {
        display: flex;
        > view + view {
          margin-left: 10rpx;
        }
      }
    }
    .flex-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
      padding-bottom: 20rpx;
    }
  }
  .more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex: 1;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    padding: 25rpx 0rpx 0rpx 0rpx;
    > view {
      line-height: 50rpx;
    }
  }
  .op-btn {
    width: 80%;
    margin: 0px auto;
    margin-top: 100rpx;
    .c-btn-review {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f5f5f5;
      border-radius: 38rpx;
      text-align: center;
      margin-bottom: 80rpx;
      > view {
        width: 50%;
        text-align: center;
        font-weight: 500;
        font-size: 27rpx;
        color: #999999;
      }
      .active {
        background: #00dcee;
        border-radius: 38rpx;
        font-weight: 500;
        font-size: 27rpx;
        color: #ffffff;
        padding: 20rpx 30rpx;
      }
    }
    > view + view {
      margin-top: 30rpx;
    }
  }
}
</style>