feat: 持仓页交易历史

src/router/index.js

@@ -201,7 +201,7 @@ router.beforeEach((to, from, next) => {
       router.push("/login");
     } else {
       const userObject = JSON.parse(user);
-      console.log("userObject是什么", userObject);
+      console.log("userObject >>>", userObject);
       // 登录信息异常跳转登录页面
       if (!userObject) {
         router.push("/login");

src/styles/position/index.less

@@ -497,6 +497,19 @@ button:active {
     }
   }
 
+  .word13 {
+    // height: 14px;
+    width: 4.375rem;
+    overflow-wrap: break-word;
+    color: rgba(64, 77, 116, 1);
+    font-size: 14px;
+    line-height: 15px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
   .van-field__label {
     width: auto;
   }

src/views/position/PositionIndex.vue

@@ -72,17 +72,46 @@
       </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 v-if="hisLength === 0">
+        <van-empty image="search" description="暂无交易历史" />
+      </div>
+      <div v-else>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div v-for="item in orderHisList" :key="item.id">
+            <van-card>
+              <template #title>
+                <span class="word13">交易数量：{{ item.entrustNumber }} 股</span>
+              </template>
+              <template #desc>
+                <span class="word11">创建时间：{{ item.createTime }}</span>
+              </template>
+              <template #tags>
+                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag></div>
+                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
+                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
+              </template>
+              <template #price-top>
+                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
+                <div v-if="item.status === '0'">交易状态：<van-tag plain round type="danger">过期</van-tag></div>
+                <div v-else-if="item.status === '1'">交易状态：<van-tag plain round type="success">成交</van-tag></div>
+                <div v-else-if="item.status === '2'">交易状态：<van-tag plain round>撤单</van-tag></div>
+                <div v-else-if="item.status === '3'">交易状态：<van-tag plain round type="primary">全部成交</van-tag></div>
+                <div v-else-if="item.status === '4'">交易状态：<van-tag plain round type="warning">部分成交</van-tag></div>
+                <div v-else>交易状态：<van-tag plain round>未知状态</van-tag></div>
+              </template>
+              <template #price>
+                <span class="txt9">每股单价
+                  ：￥{{ item.price }}
+                </span>
+              </template>
+            </van-card>
+            <br>
+          </div>
+        </van-list>
+      </div>
     </div>
 
 
@@ -97,7 +126,7 @@
 <script setup>
 // 导入无数据组件
 import sHeader from "@/components/SimpleHeader"
-import { onMounted, ref } from "vue"
+import { onMounted, reactive, ref } from "vue"
 import SearchPop from './SearchPop.vue';
 import TestComp from './TestComp.vue'
 import { listMyOrderHis } from "@/service/position";
@@ -107,69 +136,40 @@ const showSearchPop = ref(false);
 const orderHisList = ref([]);
 const loading = ref(false)
 const finished = ref(false)
+const hisLength = ref(0)
 
-// 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;
+const onLoad = async () => {
+  if (!finished.value) {
+    loading.value = true
+    searchParams.current = searchParams.current + 1;
+    getList();
+  }
+};
 
-    // 数据全部加载完成
-    if (orderHisList.value.length >= 4) {
+let searchParams = reactive({
+  current: 1, // 当前页，默认1
+  size: 10, // 页大小，默认10条
+})
+
+const getList = async () => {
+  finished.value = false;
+  const params = Object.assign({}, searchParams);
+  const { data } = await listMyOrderHis(params);
+  if (data.code === "00000") {
+    orderHisList.value = data.data.records
+    hisLength.value = orderHisList.value.length
+    if (orderHisList.value.length >= data.data.total) {
       finished.value = true;
     }
-  }, 1000);
-};
-
+  }
+  // 加载状态结束
+  loading.value = false;
+}
 
-onMounted(async () => {
-  // getOrderHisListFunc()
+onMounted(
   onLoad
-});
+);
 
 const searchClick = () => {
   console.log("点击搜索");

src/views/taskMessage/index.vue

@@ -11,24 +11,22 @@
         </div>
       </div>
 
-      <!-- 挂单匹配通知 -->
+      <!-- 挂单匹配 -->
       <div class="taskListRow flex-col" @click="pushPageList('/orderMatchNotice')">
         <div class="taskIcon orderMatchIcon"></div>
         <div class="taskRight">
-          <div class="taskTitle">挂单匹配通知</div>
+          <div class="taskTitle">挂单匹配</div>
         </div>
       </div>
 
-      <!-- 成交通知 -->
+      <!-- 成交列表 -->
       <div class="taskListRow flex-col" @click="pushPageList('/closingNotice')">
         <div class="taskIcon closingIcon"></div>
         <div class="taskRight">
-          <div class="taskTitle">成交通知</div>
+          <div class="taskTitle">成交列表</div>
         </div>
       </div>
 
-      
-
     </div>
   </div>
 </template>

src/views/user/UserIndex.vue

@@ -100,11 +100,11 @@
         </div>
         <!-- TODO: 后面这里改成 Grid 宫格 -->
         <div class="operListBox">
-          <!-- 系统消息 -->
+          <!-- 系统管理 -->
           <div class="taskListRow flex-col" @click="pushPageList('/taskMessage')">
             <div class="taskIcon taskMessageIcon"></div>
             <div class="taskRight">
-              <div class="taskTitle">系统消息</div>
+              <div class="taskTitle">系统管理</div>
             </div>
           </div>
 
@@ -165,6 +165,7 @@
             </div>
           </div>
 
+          <div style="height: 100px;"></div>
         </div>
       </div>
     </div>