count-pass-app/substaticpages/cargoOperator/deliver/vehicleOrderList.vue

<template>
  <view class="order-list content">
    <view class="swiper-box">
      <template v-if="orderList.length">
        <u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5">
          <u-list-item v-for="(item, index) in orderList" :key="index">
            <view class="order-card">
              <view class="order-card-title">
                <span class="type" v-if="item.orderType == '1'">{{
                  $t("order.temp")
                }}</span>
                <span class="type fixed" v-if="item.orderType == '2'">{{
                  $t("order.fixed")
                }}</span>
                <span class="type fixed" v-if="item.orderType == '5'">{{
                  $t("order.plan")
                }}</span>
                <text class="info">{{ item.tenantName || "" }}</text>
                <!-- <text class="no">No {{ item.code || '' }}</text> -->
                <view class="out-type" v-if="item.backFlag == '1'">
                  {{
                    item.vehicleType == "101"
                      ? $t("order.isBackOut")
                      : $t("order.return")
                  }}
                </view>
                <template v-if="item.orderType != '4'">
                  <span class="status" v-if="item.orderStatus == '0'"
                    >未进厂</span
                  >
                  <span
                    class="status"
                    v-if="item.orderStatus == '1' && item.weighingStatus == '0'"
                    >已进厂</span
                  >
                  <span class="status" v-if="item.orderStatus == '2'"
                    >已完成</span
                  >
                  <span
                    class="status"
                    v-if="item.orderStatus == '1' && item.weighingStatus != '0'"
                    >已过磅</span
                  >
                  <span class="status bad-status" v-if="item.orderStatus == '4'"
                    >已作废</span
                  >
                </template>
                <template v-if="item.orderType == '4'">
                  <span class="status" v-if="item.orderStatus == '0'"
                    >未接单</span
                  >
                  <span class="status" v-if="item.orderStatus == '1'"
                    >接单中</span
                  >
                  <span class="status" v-if="item.orderStatus == '2'"
                    >已完成</span
                  >
                  <span
                    class="status bad-status"
                    v-if="
                      item.enabledMarkType == '1' || item.orderStatus == '4'
                    "
                    >已作废</span
                  >
                </template>
              </view>
              <view class="order-card-info">
                <view class="order-type">
                  <u-tag
                    :text="$t('order.suppOrder')"
                    type="error"
                    v-if="item.isMain == 1"
                  ></u-tag>
                  <u-tag
                    :text="$t('order.mixed')"
                    type="success"
                    v-if="item.isMain == 2"
                  ></u-tag>
                </view>
                <view class="row">
                  <p class="cell">
                    <!-- <text class="label">{{ $t('order.companyName') }}</text> -->
                    <text class="info">{{ item.companyName || "" }}</text>
                  </p>
                </view>
                <view class="row">
                  <p class="cell">
                    <!-- <text class="label">{{ $t('order.orderDate') }}</text> -->
                    <text class="info">{{ item.setDate || "" }}</text>
                  </p>
                  <p class="cell">
                    <text class="info" v-if="item.vehicleType == '101'">{{
                      $t("order.saleOrder")
                    }}</text>
                    <text class="info" v-if="item.vehicleType == '102'">{{
                      $t("order.purchaseOrder")
                    }}</text>
                    <text class="info" v-if="item.vehicleType == '103'">{{
                      $t("order.materialsOrder")
                    }}</text>
                    <text class="info" v-if="item.vehicleType == '104'">{{
                      $t("order.transferOrder")
                    }}</text>
                  </p>
                </view>
                <view class="row">
                  <p class="cell">
                    <!-- <text class="label">{{ $t('order.materialName') }}</text> -->
                    <text class="info">{{ item.materialName || "" }}</text>
                  </p>
                  <p class="cell">
                    <!-- <text class="label">{{ $t('order.orderNumber') }}</text> -->
                    <text
                      class="info"
                      :style="
                        'font-size: 9pt;font-weight: bold;' +
                        (item.companyClientType == '109'
                          ? 'color: green;'
                          : 'color: red;')
                      "
                      >{{ item.orderNumber || ""
                      }}{{
                        item.materialKind == "101" &&
                        item.companyClientType == "109"
                          ? $t("customer_meter.unitB")
                          : item.orderType == "4"
                          ? $t("customer_meter.unitN")
                          : $t("customer_meter.unitT")
                      }}</text
                    >
                  </p>
                </view>
                <view class="row">
                  <p class="cell">
                    <!-- <text class="label">{{ $t('order.driver') }}</text> -->
                    <text class="info"
                      >{{ item.driver || "" }}-{{ item.phone || "" }}</text
                    >
                  </p>
                  <p class="cell">
                    <!-- <text class="label">{{ $t('order.vehicle') }}</text> -->
                    <text class="info">{{ item.vehicle || "" }}</text>
                  </p>
                </view>
              </view>
              <view class="code">
                <view class="label">{{ $t("spare.orderCode") }}</view>
                <view class="info">{{ item.code || "" }}</view>
                <view class="label">{{ $t("order.source") }}</view>
								<view class="info"> {{$t('order.mini')}}</view>
                <!-- <view class="info">{{ getLabel(item.orderSource, orderSourceList) }}</view> -->
              </view>
              <view class="order-card-bottom">
                <view class="btn" v-if="item.orderStatus != 4">
                  <button
                    class="oper-btn"
                    type="primary"
                    shape="circle"
                    color="#CCCCCC"
                    size="small"
                    @click="onOrderInfoClick(item)"
                  >
                    {{ $t("settings.confirmText") }}
                  </button>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </template>
      <template v-else>
        <u-empty
          mode="orderTypeList"
          icon="https://cdn.uviewui.com/uview/empty/list.png"
        >
        </u-empty>
      </template>
    </view>
  </view>
</template>

<script>
import { getOrderPage, replaceVehicleOrder } from "../../../api/order";

import PopupSelect from "../../../components/popup-select/index";
import { getLabel } from "../../../utils/util.js";
import dayjs from "dayjs";
export default {
  components: {
    PopupSelect,
  },
  data() {
    return {
      getLabel,
      maxDate: dayjs().format("YYYY-MM-DD"),
      searchOption: {
        range: [
          dayjs().add(-30, "day").format("YYYY-MM-DD"),
          dayjs().format("YYYY-MM-DD"),
        ],
        vehicleTypeList: [
          {
            name: this.$t("mine.all"),
            disabled: false,
            value: "0",
          },
        ],
      },
      loading: true, //页面加载状态
      showQrcode: false, // 二维码展示
      currentOrder: {}, //订单id
      vehicleOption: [],
      form: {
        type: "0",
        orderType: "",
        orderStatus: 0,
        tenantId: "",
        tenantName: "",
        dealerId: "", //客商
        dealerName: "", //客商
        vehicle: "",
      },
      currentOrderType: 0,
      orderTypeList: [
        {
          name: this.$t("mine.all"),
          disabled: false,
          value: "",
          index: 0,
        },
        {
          name: this.$t("order.temp"),
          disabled: false,
          value: "1",
          index: 1,
        },
        {
          name: this.$t("order.fixed"),
          disabled: false,
          value: "2",
          index: 2,
        },
        {
          name: this.$t("order.share"),
          disabled: false,
          value: "4",
          index: 3,
        },
      ],
      orderStatusList: [
        {
          name: this.$t("mine.reviewed"),
          value: "0",
        },
        {
          name: this.$t("mine.unpaid"),
          value: "1",
        },
        {
          name: this.$t("mine.weigh"),
          value: "3",
        },
        {
          name: this.$t("mine.ongoing"),
          value: "2",
        },

        {
          name: this.$t("mine.invalid"),
          value: "4",
        },
      ],
      orderSourceList: [
        {
          name: this.$t("order.pc"), //PC端
          value: "1",
        },
        {
          name: this.$t("order.mini"), //小程序
          value: "2",
        },
        {
          name: this.$t("order.fixed"), //固定订单生成
          value: "3",
        },
        {
          name: this.$t("order.special"), //由特殊订单生成
          value: "4",
        },

        {
          name: this.$t("order.handWeigh"), //由手工过磅生成
          value: "5",
        },
        {
          name: this.$t("order.repair"), //由补录生成
          value: "6",
        },
        {
          name: this.$t("order.bath"), //由批量订单生成
          value: "7",
        },
        {
          name: this.$t("order.third"), //第三方生成
          value: "8",
        },
        {
          name: this.$t("order.share"), //共享订单
          value: "12",
        },
        {
          name: this.$t("order.plan"), //计划订单
          value: "13",
        },
      ],
      shareOrderStatusList: [
        {
          name: this.$t("order.waitOrderReceive"),
          value: "0",
        },
        {
          name: this.$t("order.orderReceiving"),
          value: "1",
        },
        {
          name: this.$t("order.orderReceiveComplete"),
          value: "2",
        },
        {
          name: this.$t("mine.invalid"),
          value: "4",
        },
      ],
      page: {
        pages: 1,
        size: 5,
      },

      currentOrderType: "",
      orderList: [],
      showSearch: false,
      keyword: "",
      hasMore: false,
      tenantOption: [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ], //企业选项
      companyOption: [], //客户选项
      materialOption: [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ], //物料选项
      //业务对应的客户信息
      vehicleTypeCompanyList: [],
      //客户对应的物料信息
      companyMaterialList: [],
      //业务类型对应的物料信息
      appAllMaterial: [],
      isAuditUser: false,
      isDealerUser: false,
      isDriverUser: false,
      isRefresh: false,
      vehicle: "",
      tenantId: "",
      orderId: "",
    };
  },
  mounted() {
    console.log("order list mounted");
  },
  onLoad(options) {
    this.vehicle = options.vehicle;
    this.tenantId = options.tenantId;
    this.orderId = options.orderId;
    this.searchList();
  },
  onShow() {},
  methods: {
    //搜索列表
    searchList() {
      this.page.pages = 1;
      this.hasMore = false;
      this.isRefresh = false;
      this.bindOrderList();
    },
    //获取订单列表
    bindOrderList() {
      var that = this;
      if (!that.tenantId) {
        uni.showToast({
          title:
            that.$t("base.common.placeholderS") + that.$t("base.common.tenant"),
          icon: "none",
          duration: 2000,
        });
        return;
      }
      that.showSearch = false;
      let data = {
        appUserType: "5",
        current: that.page.pages,
        size: that.page.size,
        // orderType: '1',
        tenantId: that.tenantId || "",
        vehicle: that.vehicle || "",
        orderStatus: "0",
      };
      getOrderPage(data).then((res) => {
        if (res.statusCode == 200) {
          // that.orderList = res.data.data.records;
          if (res.data.data.records.length == 0) {
            that.orderList = [];
          }
          if (that.hasMore) {
            that.orderList = [...that.orderList, ...res.data.data.records];
          } else {
            that.orderList = res.data.data.records;
          }
          that.total = res.data.data.total;
          if (that.orderList.length >= that.total) {
            that.hasMore = false;
          } else {
            that.hasMore = true;
          }
          console.log("当前订单信息、", that.orderList);
        }
        that.loading = false;
      });
    },
    //加载更多
    scrolltolower() {
      console.log("1111111111111111");
      if (this.hasMore) {
        this.page.pages += 1;
        this.bindOrderList();
      }
    },
    //确定更换
    onOrderInfoClick(item) {
        let that = this;
      console.log("item-----", JSON.stringify(item));
      //显示加载框
      uni.showLoading({
        title: that.$t('userinfo.setting')
        });
      let data = {
        tenantId: that.tenantId,
        orderId: that.orderId,
        newOrderId: item.id,
      };
      replaceVehicleOrder(data).then((res) => {
        if (res.statusCode == 200) {
          uni.showToast({
            title: that.$t("mine.operateOk"),
            icon: "none",
            duration: 2000,
          });
          uni.navigateTo({
            url: `/substaticpages/cargoOperator/deliver/orderDeliverList?isDeliver=1'`,
          });
          return;
        }
        //隐藏加载框
        uni.hideLoading();
      });
    },
    clear() {},
  },
};
</script>
<style>
/* #ifndef APP-NVUE */
page {
  background-color: #f5f7fa;
}

/* #endif */
</style>
<style lang="scss" scoped>
@import "../../../common/css/public.scss";
</style>