stock-front/src/views/position/PositionIndex.vue

<template>
  <!-- 持仓 -->
  <div class="position flex-col">
    <div class="box1 flex-col">
      <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
      <div class="positionBox1 flex-col">
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4"></div>
              <span class="flex-col txt2">持仓情况</span>
            </div>
          </div>
        </div>
      </div>

      <img class="pic1" src="../../assets/device/line.png" />
    </div>

    <div>
      <div class="o-plr-15 o-ptb-20">
        <div class="bd1 flex-col">
          <div class="box2 l-f l-flex-c l-flex-j-a">
            <div class="TextGroup flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">11.5</span>
                <span class="word6">现价</span>
              </div>
            </div>

            <div class="TextGroup flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">100.8</span>
                <span class="word6">当日盈亏</span>
              </div>
            </div>

            <div class="TextGroup flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">2000.50</span>
                <span class="word6">总盈亏</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="positionBox">

    </div>

    <img class="img1" referrerpolicy="no-referrer" src="../../assets/line.png" />
    <div class="groove"></div>

    <div class="tradingHistory">
      <!-- 交易历史 -->
      <div class="searchRow flex-row justify-between">
        <div class="flex-col">
          <div class="flex-row justify-between bd3">
            <div class="flex-col outer4"></div>
            <span class="flex-col txt2">
              交易历史</span>
          </div>
        </div>
        <!-- 搜索 -->
        <div class="flex-col">
          <div class="main5 flex-row justify-between" @click="searchClick">
            <img class="label2" src="../../assets/position/searchIcon.png" />
          </div>
        </div>
      </div>
    </div>

    <!-- 历史记录明细 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in orderHisList" :key="item" :title="item" />
    </van-list>


    <van-empty image="search" description="暂无交易历史" />


    <div class="historyList">

    </div>


    <!-- 使用搜索弹窗组件 -->
    <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" />
    <div style="height: 50px;"></div>
    <TestComp param="哈哈哈" />
  </div>

</template>

<script setup>
// 导入无数据组件
import sHeader from "@/components/SimpleHeader"
import { onMounted, ref } from "vue"
import SearchPop from './SearchPop.vue';
import TestComp from './TestComp.vue'
import { listMyOrderHis } from "@/service/position";

const showSearchPop = ref(false);

const orderHisList = ref([]);
const loading = ref(false)
const finished = ref(false)

// const getOrderHisListFunc = async () => {
//   const params = {
//     current: 1,
//     size: 10
//   }
//   setTimeout(() => {
//     const { data } = listMyOrderHis(params).then((res) => {
//       orderHisList.value = res.data.data;
//     })
//     if (data.code === '00000') {
//       console.log("获取交易历史成功！");
//       console.log(data.data);
//       // 加载状态结束
//       loading.value = false;
//       // 数据全部加载完成
//       if (orderHisList.value.length >= 40) {
//         finished.value = true;
//       }

//     }
//   }, 1000);
// }

// TODO: 2024-04-12
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {

    const params = {
      current: 1,
      size: 10
    }
    const { data } = listMyOrderHis(params).then((res) => {
      orderHisList.value = res.data.data;
    })
    if (data.code === '00000') {
      console.log("获取交易历史成功！");
      console.log(data.data);
      // 加载状态结束
      loading.value = false;
      // 数据全部加载完成
      if (orderHisList.value.length >= 40) {
        finished.value = true;
      }

    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (orderHisList.value.length >= 4) {
      finished.value = true;
    }
  }, 1000);
};


onMounted(async () => {
  // getOrderHisListFunc()
  onLoad
});

const searchClick = () => {
  console.log("点击搜索");
  showSearchPop.value = true;
}

// 处理子组件传递回来的更新事件
const handleUpdateShowSearchPop = (val) => {
  showSearchPop.value = val;
}

</script>

<style lang="less" scoped>
@import "../../styles/position/index.less";
</style>