1

admin

2026-01-10 b719b3b66ec4893057df275e3871a6bd0029ac3c

 src/views/ipo/newStock.vue

@@ -1,44 +1,58 @@
<template>
  <div class="lotteryRecord">
      <div class="px-5">
          <div class="flex  py-10 border-b-color  border-t-color  justify-between ">
            <div class="text-center">
              <div class="text_color6">{{t('市值')}}</div>
              <div>{{ topData.marketValue }}</div>
            </div>
            <div class="text-center">
                <div class="text_color6">{{t('库存损益')}}</div>
                <div :class="topData.inventoryGainsLosses > 0 ? 'red' : 'green'">{{ topData.inventoryGainsLosses }}</div>
            </div>
            <div class="text-center">
                <div class="text_color6">{{t('可用额度')}}</div>
                <div>{{ topData.availableLimit }}</div>
            </div>
          </div>
          <div class="tab-header flex py-5 text_color6">
              <div class="td-1 text-left">{{t('名称/代码')}}</div>
              <div class="td-1 text-center">{{t('价格/申请量')}}</div>
              <div class="td-1 text-center">{{t("中签/认缴额")}}</div>
              <div class="td-1 text-right">{{t("状态")}}</div>
          </div>
          <van-list v-model:loading="loading" :finished="finished" :loading-text="$t('加载中') + '...'" :finished-text="$t('没有更多了')" @load="onLoad">
          <div v-for="(item, index) in list" :key="index" class="list-div flex">
              <div class="td-2 text-left">
                  <div class="list-title">{{ item.symbolName }}</div>
                  <div class="text_color6">{{ item.symbolCode}}</div>
              </div>
              <div class="td-2 text-center">{{ item.subPrice + '/' + item.subNumber }}</div>
              <div class="td-2 text-center">{{ item.requiredNumber + '/' + item.winningNumber }}</div>

              <div class="td-2 text-right" :class="item.status === 1 ? 'green' : item.status === 2 ? 'red' : ''">{{ item.status === 2 ? t('已认缴') : t('待确认') }}</div>
          </div>
      </van-list>
    <div class="px-5">
      <div class="flex  py-10 border-b-color  border-t-color  justify-between ">
        <div class="text-center">
          <div class="text_color6">{{ t('市值') }}</div>
          <div>{{ topData.marketValue }}</div>
        </div>
        <div class="text-center">
          <div class="text_color6">{{ t('库存损益') }}</div>
          <div :class="topData.inventoryGainsLosses > 0 ? 'red' : 'green'">{{ topData.inventoryGainsLosses }}</div>
        </div>
        <div class="text-center">
          <div class="text_color6">{{ t('中签数') }}</div>
          <div>{{ topData.availableLimit }}</div>
        </div>
      </div>
      <div class="tabWarp">
        <div class="tab-header flex py-5 text_color6">
          <div class="td-1 text-left">{{ t('名称/代码') }}</div>
          <div class="td-1 text-center">{{ t('价格/申请量') }}</div>

          <div class="td-1 text-center">{{ t("中签/认缴额") }}</div>

          <div class="td-1 text-center">{{ t("已认缴金额") }}</div>
          <div class="td-1 text-center">{{ t("需补缴金额") }}</div>

          <div class="td-1 text-right">{{ t("状态") }}</div>
        </div>
        <van-list v-model:loading="loading" :finished="finished" :loading-text="$t('加载中') + '...'"
          :finished-text="$t('没有更多了')" @load="onLoad">
          <div v-for="(item, index) in list" :key="index" class="list-div flex">
            <div class="td-1 text-left">
              <div class="list-title">{{ item.symbolName }}</div>
              <div class="text_color6">{{ item.symbolCode }}</div>
            </div>
            <div class="td-1 text-center">{{ item.subPrice + '/' + item.subNumber }}</div>

            <div class="td-1 text-center">{{ item.winningNumber + '/' + item.requiredNumber }}</div>

            <div class="td-1 text-center">{{ item.subscribedAmount }}</div>
            <div class="td-1 text-center">{{ ((item.requiredNumber || 0) - (item.subscribedAmount || 0)).toFixed(2) }}
            </div>

            <div class="td-1 text-right" :class="item.status === 1 ? 'green' : item.status === 2 ? 'red' : ''">{{
              item.status === 2 ? t('已认缴') : t('待确认') }}</div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import {inject, onMounted, provide, ref} from 'vue';
import { inject, onMounted, provide, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { sNewSharesOrderList, getNowTopData } from '@/service/ipo.api'
@@ -56,66 +70,78 @@
  getTopData()
})
const getTopData = () => {
   getNowTopData({type: 2,  symbolType: stockType || 'US-stocks'}).then((res)=>{
  getNowTopData({ type: 2, symbolType: stockType || 'US-stocks' }).then((res) => {
    topData.value = res
   })
  })
}

const stockType = inject('stockType')
console.log('stockType', stockType)
provide('stockType', stockType)
const onLoad = () => {
    let params = {
      current: index.value,
      size: 10,
      type: 2,
      symbolType: stockType || 'US-stocks'
  let params = {
    current: index.value,
    size: 10,
    type: 2,
    symbolType: stockType || 'US-stocks'
  }
  sNewSharesOrderList(params).then(res => {
    if (res.length) {
      list.value = list.value.concat(res)
    }
    sNewSharesOrderList(params).then(res => {
      if(res.length) {
        list.value = list.value.concat(res)
      }
      index.value++
      loading.value = false;
      if (res.length < 10) {
        finished.value = true;
      }
    })
    index.value++
    loading.value = false;
    if (res.length < 10) {
      finished.value = true;
    }
  })
}

</script>
<style lang="scss" scoped>
.lotteryRecord {
    font-size: 14px;
  font-size: 14px;

    .search-icon {
        width: 23px;
        height: 23px;
    }
  .search-icon {
    width: 23px;
    height: 23px;
  }

    .tab-header {
        gap: 0 5px;
        font-size: 12px;
        color: #747A8F;
    }
    .td-1{
      width: 25%;
    }
    .td-2{
      width: 23%;
    }
    .list-div {
        gap: 0 5px;
        padding: 15px 0;
        font-size: 12px;
        align-items: center;
        border-bottom: 1px solid $border_color;
  .tab-header {
    gap: 0 5px;
    font-size: 12px;
    color: #747A8F;
  }

        .list-title {
            text-overflow: ellipsis;
            // white-space: nowrap;
            overflow: hidden;
        }
  .td-1 {
    flex-shrink: 0;
    width: 80px;
  }

  .td-2 {
    flex-shrink: 0;
    width: 150px;
  }

  .tabWarp {
    width: 100%;
    padding: 10px 10px;
    overflow-x: scroll;
    box-sizing: border-box;
  }

  .list-div {
    gap: 0 5px;
    padding: 15px 0;
    font-size: 12px;
    align-items: center;
    border-bottom: 1px solid $border_color;

    .list-title {
      text-overflow: ellipsis;
      // white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>