stock-front/src/views/taskMessage/PendingOrderList.vue

<script setup>
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { postPagePendList } from "@/service/pendingOrder";
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";


const typeTexts = ['未知类型', '买', '卖'];
const showTypeText = (typeValue) => {
  return typeTexts[typeValue] || typeTexts[0];
};

const showStatusText = (statusVal) => {
  const statusMap = {
    0: '过期',
    1: '生效',
    2: '撤单',
    3: '全部成交',
    4: '部分成交',
  }
  return statusMap[statusVal] || '未知状态';
}


const user = getLoginUser();
const loading = ref(false); // 加载状态
const error = ref(false); // 错误状态
const finished = ref(false); // 结束翻页状态
const pendingOrderList = ref([]); // 列表集合
const pendingOrderTotal = ref(0); // 列表总数
let searchParams = reactive({
  current: 1, // 当前页，默认第一页
  size: 10, // 页大小，默认10条
});


// 查询列表
const searchGetList = () => {
  pendingOrderList.value = [];
  searchParams.current = 1;
  getList();
};

// 滚动加载
const onLoad = () => {
  if (!finished.value) {
    searchParams.current++;
    getList();
  }
};
// 获取所有挂单列表
const getList = async () => {
  finished.value = false;
  const params = Object.assign({}, searchParams);
  const { data } = await postPagePendList(params);

  if (data.code === "00000") {
    if (searchParams.current === 0) {
      pendingOrderList.value = [];
    }
    // 列表值叠加
    pendingOrderList.value = pendingOrderList.value.concat(
      data.data.records
    );
    pendingOrderTotal.value = data.data.total;
    if (pendingOrderList.value.length === data.data.total) {
      console.log("object", pendingOrderTotal.value);
      finished.value = true;
    }
    loading.value = false;
  } else {
    showFailToast(data.message);
  }
};

const showDateTime = (date) => {
  return date
    ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
    : "";
};


// 是否有操作的权限
const isOper = ref(true);
// 初始化页面获取列表
onMounted(async () => {
  // 加载样式
  styleUrl('pendingOrderList');
  if (user) {
    // searchParams.adminId = user.id;
    searchGetList();

    // 如果不是admin账号，不能有操作权限
    if (user.userName != 'admin') {
      isOper.value = false;
    }
  }
});

</script>

<template>
  <!-- 挂单匹配列表 -->
  <div class="pendingOrderList flex-col">
    <s-header name="挂单匹配" :noback="false"></s-header>

    <div class="pendingOrderBox flex-col">
      <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
        :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
        @load="onLoad">

        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <!-- 图标 -->
              <!-- <div class="flex-col outer4 proportionIcon"></div> -->
              <span class="flex-col txt2">{{ $t("taskMessage.total")
                }}<span class="discountNumber">{{ pendingOrderTotal }}</span>{{
                  $t("taskMessage.recordsInTotal") }}</span>
            </div>
          </div>
        </div>

        <div class="listBox">
          <div v-for="(item) in pendingOrderList" :key="item.id" class="listItem">
            <div class="itemBox">

              <div class="itemRow">
                <span class="itemTitle">挂单价格:&nbsp;</span>{{
                  item.price }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">委托数量:&nbsp;</span>{{
                  item.entrustNumber }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">挂单类型:&nbsp;</span>{{
                  showTypeText(item.type) }}
              </div>

              <!-- if 0，1 不显示其他 -->
              <!-- if 2 显示撤单时间 -->
              <div v-if="item.status === '2'" class="itemRow">
                <span class="itemTitle">撤单时间:&nbsp;</span>{{
                  item.cancelTime }}
              </div>
              <!-- if 3，4 显示成交数量 -->
              <div v-if="item.status === '3' || item.status === '4'" class="itemRow">
                <span class="itemTitle">成交数量:&nbsp;</span>{{
                  item.tradeNumber }}
              </div>

              <!-- 创建时间 -->
              <div class="itemRow">
                <span class="itemTitle">创建时间:&nbsp;</span>{{
                  showDateTime(item.createTime) }}
              </div>

              <!-- 卖家确认时间 -->
              <div class="itemRow" v-if="item.status === '1'">
                <span class="itemTitle">卖家确认时间:&nbsp;</span>{{
                  showDateTime(item.sellerConfirmTime)
                }}
              </div>

              <!-- 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
              <div class="itemRow" style="display: flex; justify-content: flex-end">
                <!-- 0过期 -->
                <span v-if="item.status === '0'" style="color: #B7B7B7">{{
                  showStatusText(item.status)
                }}</span>
                <!-- 1生效 -->
                <span v-if="item.status === '1'" style="color: #4BC38B">{{
                  showStatusText(item.status)
                }}</span>
                <!-- 2撤单 -->
                <span v-if="item.status === '2'" style="color: #D8553B">{{
                  showStatusText(item.status)
                }}</span>
                <!-- 3全部成交 -->
                <span v-if="item.status === '3'" style="color: #ff0000">{{
                  showStatusText(item.status)
                }}</span>
                <!-- 4部分成交 -->
                <span v-if="item.status === '4'" style="color: #9C3FC4">{{
                  showStatusText(item.status)
                }}</span>
              </div>

            </div>
          </div>
        </div>
      </van-list>
    </div>

  </div>
</template>



<style lang="less" scoped>
@import "../../common/style/common.less";
</style>