1

PC-20250623MANY\Administrator

2025-08-19 a1afa0d50f7eedcee09651785bcc9d1530b0f978

1

 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 {

 src/page/markets/markets.vue

@@ -12,6 +12,12 @@
      <div class="nav_item" v-for="item in sList" :key="item.id">
        <index-component :ids="'a' + item.id" :dataObj="item"></index-component>
      </div>
      <div class="nav_item" v-for="item in 3" :key="item" v-show="sList.length == 0">
        <van-skeleton
          :row="3"
          style="margin-top: 1em;"
        />
      </div>
    </div>

    <div class="tui_variety flex-between-start">
@@ -35,7 +41,6 @@
    </div>

    <new-list></new-list>

  </div>
</template>