freight-web/src/pagesApp/shipmentCl.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'"
        @search="handleSearch()"
      ></u-search>
    </view>
    <page-view
      @loadList="
        (v) => {
          getList(v);
        }
      "
      :noMoreData="pageList.noMoreData"
      :list="pageList.list"
      :height="100"
      :isLoading="pageList.isLoading"
    >
    <view class="box" v-for="(item, index) in pageList.list" :key="index">
      <view class="base">
        <view>
          <view class="no"> 出货单号：{{ item.orderNumber }} </view>
          <view class="supplier"> {{ item.deviceName }} </view>
        </view>
        <view>
          <text class="btn" @click="handleScenePhoto((item as any).id)">现场照片</text>
        </view>
      </view>

      <view class="name">{{ item.userName }} <text>{{ getScaleStatus((item as any).scaleStatus) }}</text></view>
      <view class="type">{{ item.productName }}</view>

      <view class="more">
        <view
          v-for="(cItem, index) in gridList1"
          :key="index"
          :style="{
            width: `${cItem.name === '创建时间' ? 'max-content' : ''}`,
            'font-size': `${cItem.isCustomStyle ? '22rpx' : ''}`,
            color: `${cItem.isCustomStyle ? '#999' : ''}`,
          }"
        >
          <text v-if="cItem.name">{{ cItem.name }}：</text
          ><text
            >{{ cItem.isBefore ? cItem.unit : "" }}
            {{ cItem.num }}
            {{ cItem.isBefore ? "" : cItem.unit }}
          </text>
        </view>
      </view>
    </view>
    </page-view>
  </view>
</template>
<script setup lang="ts">
import { ReceiveApi, ShipmentApi } from "@/services";
import PageView from "@/components/PageView/index.vue";
import { ScaleStatus } from "@/utils/enum";

const keyword = ref("");
const gridList1 = reactive([
  {
    name: "卡号",
    enName: "cardNumber",
  },
  {},
  {
    name: "创建时间",
    enName: "createTime",
  },
  {},
  {
    name: "车牌号",
    enName: "carNumber",
    isBefore: false,
  },
  {
    name: "送货方式",
    enName: "deliveryMethod",
    isBefore: false,
  },
  {
    name: "毛重",
    enName: "grossWeight",
    num: "0",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "tare",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "净重",
    enName: "netWeight",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "数量",
    enName: "number",
    isBefore: false,
  },
  {
    name: "过毛",
    enName: "grossTime",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
  {
    name: "过皮",
    enName: "tareTime",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
  {
    name: "结算重量",
    enName: "settlementWeight",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "单价",
    enName: "unitPrice",
    unit: "元/千克",
    isBefore: false,
  },
  {
    name: "结算总价",
    enName: "estimatePrice",
    unit: "元",
    isBefore: false,
  },
  {
    name: "实结金额",
    enName: "totalPrice",
    unit: "元",
    isBefore: false,
  },
  {
    name: "作废人",
    enName: "updateUserName",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
  {
    name: "过皮",
    enName: "tareTime",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
]);
const handleScenePhoto = (id: string) => {
  uni.navigateTo({
    url: "/pagesScenePhoto/index?orderType=1&imagesType=1&id=" + id, // 要跳转到的页面路径
  });
};

const pageList: PageResult<Order> = reactive({
  isLoading: false,
  noMoreData: false,
  total: 0,
  list: [],
  pageNum: 1,
  pageSize: 10,
});
const resetPageList = () => {
  pageList.noMoreData = false;
  pageList.total = 0;
  pageList.list = [];
  pageList.pageNum = 1;
  pageList.pageSize = 10;
};

const handleSearch = () => {
  resetPageList();
  getList();
};
const getList = (v?: boolean) => {
  if (v) {
    if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
      pageList.pageNum++;
    } else {
      pageList.noMoreData = true;
      return;
    }
  }
  pageList.isLoading = true;
  ShipmentApi.getOrderPage({
    pageSize: pageList.pageSize,
    pageNumber: pageList.pageNum,
    userName: keyword.value,
    isDeleted: true,
  }).then((res: any) => {
    if (res.code === 200) {
      pageList.isLoading = false;
      (pageList as any).list = pageList.list.concat(
        res.data.list
      );
      pageList.total = (res.data as any).total;
    }
  });
};
const getScaleStatus = (type: number) => {
  if (type === ScaleStatus.ToBeShipment) {
    return "待出货";
  } else if (type === ScaleStatus.ToBeGrossWeight) {
    return "待过毛";
  } else if (type === ScaleStatus.ToBeShipmentReview) {
    return "待审核";
  } else if (type === ScaleStatus.ToBeShipmentPay) {
    return "待支付";
  } else if (type === ScaleStatus.ShipmentPaid) {
    return "已支付";
  }
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.c-card {
  margin: 30rpx 25rpx;

  .box {
    margin-top: 30rpx;
    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: 26rpx;
        color: #000000;
      }
      .supplier {
        font-weight: 400;
        font-size: 26rpx;
        color: #000000;
      }
      .btn {
        border-radius: 24rpx;
        border: 1px solid #00dcee;
        padding: 10rpx 30rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #00dcee;
        line-height: 41rpx;
      }
    }
    .name {
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      margin: 15rpx 0rpx;
      text {
        background-color: #ffaf75;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        padding: 5rpx 20rpx;
        margin-left: 20rpx;
      }
    }
    .type {
      font-weight: 400;
      font-size: 28rpx;
      color: #ec0f3e;
      margin-bottom: 20rpx;
    }
    .flex-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 26rpx;
      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: 26rpx;
    color: #000000;
    padding: 25rpx 0rpx 0rpx 0rpx;
    > view {
      line-height: 50rpx;
    }
  }
}
</style>