freight-web/src/pagesApp/receiveDetail.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" @click="handleAdd()"> 创建 </view>
    </view>
    <view class="filter">
      <!--  -->
      <view><text>本月</text><u-icon name="arrow-down"></u-icon></view>
      <view @click="state.isShowStatus = true"><text>单据状态</text><u-icon name="arrow-down"></u-icon></view>
      <view  @click="state.isShowSort = true"><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, index) in pageList.list" :key="index">
      <view class="base">
        <view>
          <view class="no"> 收货单号：{{ item.receiptNumber }} </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>
        <text v-if="item.repairTime">补单</text>
      </view>
      <view class="type">{{ item.productName }}</view>
      <view class="flex-box">
        <text>定价人：{{ item.userName }}</text>
        <text>创建时间：{{ item.createTime }}</text>
      </view>

      <view class="more">
        <view
          v-for="(cItem, index) in gridList1"
          :key="index"
          :style="cItem.isCustomStyle ? 'font-size: 22rpx;color:#999' : ''"
        >
          <block v-if="cItem.name === '扣杂'">
            <text v-if="cItem.name">
              {{ item.buttonType === 0 ? '扣杂' : '扣点' }}：
              </text
            ><text>
              {{ item.buttonType === 0 ? item[cItem.enName as string]  : item['points']  }}
              {{ item.buttonType === 0 ? cItem.unit : '%' }}
            </text>
          </block>
          <block v-if="cItem.name !== '扣杂'">
            <text v-if="cItem.name">{{ cItem.name }}：</text
            ><text
              >{{ cItem.isBefore ? cItem.unit : "" }}
              {{ item[cItem.enName as string] }}
              {{ cItem.isBefore ? "" : cItem.unit }}
            </text>
          </block>
        </view>
      </view>
    </view>
  </view>

  <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" :actions="state.statusList" :title="'单据状态'" :show="state.isShowStatus" @select="handleSelectStatus"></u-action-sheet>
  <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" :actions="state.sortList" :title="'排序'" :show="state.isShowSort" @select="handleSelectSort"></u-action-sheet>
</template>
<script setup lang="ts">
import { ReceiveApi } from "@/services";
import { ScaleStatus } from "@/utils/enum";
const state = reactive({
  currentScaleStatus: undefined,
  currentSortName: undefined,
  isShowStatus: false,
  statusList: [{
    name: '待定价',
    key: 0
  },{
    name: '待过皮',
    key: 1
  },{
    name: '待审核',
    key: 2
  },{
    name: '已审核待支付',
    key: 3
  },{
    name: '已支付',
    key: 4
  }],
  isShowSort: false,
  sortList: [{
    name: '按创建时间降序',
    key: 'create_time'
  },
  {
    name: '按更新时间降序',
    key: 'update_time'
  }]
})
const handleSelectStatus = (v: any) => {
  state.isShowStatus = false
  state.currentScaleStatus = v.key
  getOrderList()
}
const handleSelectSort = (v: any) => {
  state.isShowSort = false
  state.currentSortName = v.key
  getOrderList()
}

const keyword = ref("");
const gridList1 = reactive([
  {
    name: "毛重",
    enName: "grossWeight",
    num: 0,
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "tare",
    num: 0,
    unit: "KG",
    isBefore: false,
  },
  {
    name: "扣杂",
    enName: "buckleMiscellaneous",
    num: 0,
    unit: "KG",
    isBefore: false,
  },
  {},
  {
    name: "净重",
    enName: "netWeight",
    num: 0,
    unit: "KG",
    isBefore: false,
  },
  {
    name: "单价",
    enName: "price",
    num: 0,
    unit: "元/千克",
    isBefore: false,
  },
  {
    name: "结算总价",
    enName: "balanceTotalPrice",
    num: 0,
    unit: "元",
    isBefore: false,
  },
  {
    name: "实际总价",
    enName: "totalPrice",
    num: 0,
    unit: "元",
    isBefore: false,
  },
  {
    name: "过毛",
    enName: "grossTime",
    num: "",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
  {
    name: "过皮",
    enName: "tareTime",
    num: "",
    unit: "",
    isBefore: false,
    isCustomStyle: true,
  },
]);
const handleScenePhoto = (id: string) => {
  uni.navigateTo({
    url: "/pagesScenePhoto/index?orderType=1&id=" + id, // 要跳转到的页面路径
  });
};
const getScaleStatus = (type: number) => {
  if (type === ScaleStatus.ToBePriced) {
    return "待定价";
  } else if (type === ScaleStatus.ToBeTare) {
    return "待过皮";
  } else if (type === ScaleStatus.ToBeReview) {
    return "待审核";
  } else if (type === ScaleStatus.ToBePay) {
    return "待支付";
  } else if (type === ScaleStatus.Paid) {
    return "已支付";
  }
};

const handleAdd = () => {
  uni.navigateTo({
    url: "/pagesApp/receiveSpl", // 要跳转到的页面路径
  });
}
interface PageResult<T> {
  total: number;
  list: T[];
  pageNum: number;
  pageSize: number;
}
const pageList: PageResult<Order> = reactive({
  total: 0,
  list: [],
  pageNum: 1,
  pageSize: 10,
});
const getOrderList = () => {
  let params: any = { pageNumber: 1, pageSize: 10}
  if (state.currentScaleStatus !== undefined) {
    params.scaleStatus = state.currentScaleStatus
  }
  if (state.currentSortName !== undefined) {
    params.sortName = state.currentSortName
  }

  
  ReceiveApi.getOrderPage(params).then((res) => {
    if (res.code === 200) {
      (pageList as any).list = res.data.list;
    }
  });
};
onMounted(() => {
  getOrderList();
});
</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: 26rpx;
      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: 26rpx;
    color: #000000;
    > view {
      display: inline-block;
      display: flex;
      align-items: center;
      text {
        margin-right: 10rpx;
      }
    }
    .btn {
      font-size: 26rpx;
      color: #00dcee;
    }
  }
  .time {
    font-weight: 400;
    font-size: 26rpx;
    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: 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: 24rpx;
        color: #00dcee;
        line-height: 41rpx;
      }
    }
    .name {
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      margin: 15rpx 0rpx;
      text {
        background-color: #ffaf75;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        padding: 5rpx 20rpx;
        margin-left: 20rpx;
        border-radius: 10rpx;
      }
    }
    .type {
      font-weight: 400;
      font-size: 26rpx;
      color: #ec0f3e;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .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: 26rpx;
    color: #000000;
    padding: 25rpx 0rpx 0rpx 0rpx;
    > view {
      line-height: 50rpx;
    }
  }
}
</style>