From a1afa0d50f7eedcee09651785bcc9d1530b0f978 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Tue, 19 Aug 2025 13:55:08 +0800
Subject: [PATCH] 1
---
src/components/stock-list.vue | 114 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 60 insertions(+), 54 deletions(-)
diff --git a/src/components/stock-list.vue b/src/components/stock-list.vue
index fc578f4..f4d2af6 100644
--- a/src/components/stock-list.vue
+++ b/src/components/stock-list.vue
@@ -1,57 +1,55 @@
<template>
- <div class="stock_list">
+ <div class="stock_list flex-center">
<van-row class="markets_head">
<van-col span="14" class="flex-start head_item">{{ $t("Name") }}</van-col>
<van-col span="4" class="flex-start head_item">{{ $t("Price") }}</van-col>
<van-col span="6" class="flex-end head_item">{{ $t("Change") }}</van-col>
</van-row>
- <van-row
- class="markets_item"
- v-for="item in stockList"
- :key="item.id"
- @click="toDetails(item)"
+ <van-list
+ v-model="loading"
+ :finished="finished"
+ :finished-text="$t('沒有更多了')"
+ :loading-text="$t('加载中')"
+ style="height: 50vh;width: 100%;"
+ @load="onLoad"
>
- <van-col span="14" class="item_n">
- <div class="flex-start">
- <span class="i_icon">{{ item.stock_type }}</span>
- <span class="i_hint">{{ item.spell }}</span>
- </div>
- <div class="i_name">{{ item.name }}</div>
- </van-col>
- <van-col span="4" class="flex-start item_n">{{ item.nowPrice }}</van-col>
+ <van-row class="markets_item" v-for="item in stockList" :key="item.id">
+ <van-col span="14" class="item_n">
+ <div class="flex-start">
+ <span class="i_icon">{{ item.stock_type }}</span>
+ <span class="i_hint">{{ item.spell }}</span>
+ </div>
+ <div class="i_name">{{ item.name }}</div>
+ </van-col>
+ <van-col span="4" class="flex-start item_n">{{
+ item.nowPrice
+ }}</van-col>
- <van-col span="6" class="item_n flex-end">
+ <van-col span="6" class="item_n flex-end">
+ <div
+ class="flex-end"
+ :class="{ green: item.hcrate < 0, red: item.hcrate > 0 }"
+ >
+ {{ item.hcrateP }}
+ </div>
+ </van-col>
+
<div
- class="flex-end"
- :class="{ green: item.hcrate < 0, red: item.hcrate > 0 }"
+ class="edit flex-end"
+ v-show="editorShow"
+ @click.stop="deleteStock(item)"
>
- {{ item.hcrateP }}
+ <span>{{ $t("移除") }}</span>
</div>
- </van-col>
+ </van-row>
+ </van-list>
- <div
- class="edit flex-end"
- v-show="editorShow"
- @click.stop="deleteStock(item)"
- >
- <span>{{ $t("移除") }}</span>
- </div>
- </van-row>
-
- <div class="more-news" @click="getMore" v-if="stockList.length > 0">
- <span v-if="lod == 1">{{ $t("加载更多") }}</span>
- <span v-else-if="lod == 2">{{ $t("加载中") }}</span>
- <span v-else-if="lod == 3">{{ $t("沒有更多了") }}</span>
- </div>
-
- <!-- 无数据时显示 -->
- <div
- class="no_data flex-center"
- v-show="!stockList || stockList.length == 0"
- >
- <img src="@/assets/img/zhaobudao2.png" alt="" />
- </div>
+ <van-skeleton
+ :row="7"
+ v-if="stockList.length == 0"
+ style="margin-top: 1em;"
+ />
</div>
</template>
@@ -68,7 +66,8 @@
pageSize: 20,
total: 1,
stockList: [],
- lod: 1 // 1 加载更多 2 加载中 3 沒有更多了
+ loading: false,
+ finished: false
};
},
props: {
@@ -89,8 +88,7 @@
default: false
}
},
- watch: {
- },
+ watch: {},
mounted() {
this.init();
this.initWebSocket();
@@ -114,11 +112,16 @@
opt = { ...opt, ...this.propOption };
let data = await this.listApi(opt);
- this.stockList = [...this.stockList, ...data.data.list];
- this.total = data.data.total || 1;
+ if (data.status == 0) {
+ this.stockList = [...this.stockList, ...data.data.list];
+ // this.total = data.data.total || 1;
+ // 加载状态结束
+ this.loading = false;
- this.lod = 1;
- if (this.total <= this.stockList.length) this.lod = 3;
+ if (data.data.list.length <= 0) {
+ this.finished = true;
+ }
+ }
},
// 点击进入详情
toDetails(item) {
@@ -170,10 +173,9 @@
userToUpdate.hcrateP = result.pcp;
}
},
- // 加载更多
- getMore() {
- if (this.lod == 3) return;
- this.lod = 2;
+ onLoad() {
+ console.log("dddddddd");
+
this.pageNum++;
this.getStockList();
}
@@ -187,16 +189,20 @@
};
</script>
-<style lang="less" scoped>
+<style lang="less">
@green2: #f0f0f0;
@dark_green: #07c160;
@red: #ee0a24;
-
+#app {
+ padding-bottom: 1.4rem;
+}
.stock_list {
+ flex-direction: column;
.markets_head {
// background-color: @green2;
margin-top: 0.25em;
height: 1em;
+ width: 100%;
padding: 0 0.25em;
.head_item {
--
Gitblit v1.9.3