10.10综合交易所原始源码_移动端
admin
2026-01-06 42faef34194c466f03e29d75a63ae502e4213044
src/views/ipo/lotteryRecord.vue
@@ -1,64 +1,49 @@
<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 ? 'red' : 'green'">{{ topData.inventoryGainsLosses }}</div>
        </div>
        <div class="text-center">
          <div class="text_color6">{{ t('认购数量(股)') }}</div>
          <div>{{ topData.availableLimit }}</div>
        </div>
        <!-- <div class="text-center">
          <div class="text_color6">{{ t('待补金额') }}</div>
          <div>{{ topData.amountToBeCovered }}</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("中签应认缴")}}/{{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 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 ? 'red' : 'green'">{{ topData.inventoryGainsLosses }}</div>
              </div>
              <div class="text-center">
                  <div class="text_color6">{{t('认购数量(股)')}}</div>
                  <div>{{ topData.availableLimit }}</div>
              </div>
            </div>
            <div class="td-1 text-center">{{ item.closePrice + '/' + item.subPrice }}</div>
            <div class="td-1 text-center">{{ item.winningNumber }} <span
                v-if="item.symbolType && symbolType[item.symbolType]">{{ '/' + t(symbolType[item.symbolType]) }}</span>
            <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.closePrice + '/' +  item.subPrice }}</div>
                  <div class="td-1 text-center">{{ item.winningNumber }} <span v-if="item.symbolType && symbolType[item.symbolType]">{{'/' + t(symbolType[item.symbolType])}}</span></div>
                  <div class="td-1 text-center">{{ item.inventoryGainsLosses }}</div>
                  <div class="td-1 text-center" :class="item.status === 2 ? 'red' : ''">{{ item.status === 1 ? t('申购中') : item.status === 2 ? t('已中签') : t('未中签') }}</div>
                  <div class="td-1 text-right">{{ getTime(item.createTime) }}</div>
              </div>
              </van-list>
            </div>
            <div class="td-1 text-center">{{ item.inventoryGainsLosses }}</div>
            <div class="td-1 text-center">{{ item.requiredNumber + '/' + item.subscribedAmount }}</div>
            <div class="td-1 text-center" :class="item.status === 2 ? 'red' : ''">{{ item.status === 1 ? t('申购中') :
              item.status === 2 ? t('已中签') : t('未中签') }}</div>
            <div class="td-1 text-right">{{ getTime(item.createTime) }}</div>
          </div>
        </van-list>
      </div>
        </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, inject, provide } from 'vue';
import {onMounted, ref, reactive, inject, provide} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { sNewSharesOrderList, getNowTopData } from '@/service/ipo.api'
@@ -69,41 +54,41 @@
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const index = ref(1)
const index= ref(1)
const topData = ref({})
onMounted(() => {
  getTopData()
})
const getTopData = () => {
  getNowTopData({ type: 1, symbolType: stockType || 'US-stocks' }).then((res) => {
   getNowTopData({type: 1, symbolType: stockType || 'US-stocks'}).then((res)=>{
    topData.value = res
  })
   })
}
const stockType = inject('stockType')
provide('stockType', stockType)
const onLoad = () => {
  let params = {
    current: index.value,
    size: 10,
    type: 1,
    symbolType: stockType || 'US-stocks'
  }
  sNewSharesOrderList(params).then(res => {
    console.log(res);
    if (res.length) {
      list.value = list.value.concat(res)
    let params = {
      current: index.value,
      size: 10,
      type: 1,
      symbolType: stockType || 'US-stocks'
    }
    index.value++
    loading.value = false;
    if (res.length < 10) {
      finished.value = true;
    }
  })
    sNewSharesOrderList(params).then(res => {
      console.log(res);
      if(res.length) {
        list.value = list.value.concat(res)
      }
      index.value++
      loading.value = false;
      if (res.length < 10) {
        finished.value = true;
      }
    })
}
const symbolType = reactive({
  'forex': '外汇',
  'forex' : '外汇',
  'indices': '指数',
  'commodities': '大宗商品',
  'cryptos': '虚拟货币',
@@ -125,49 +110,46 @@
</script>
<style lang="scss" scoped>
.lotteryRecord {
  font-size: 14px;
    font-size: 14px;
  .search-icon {
    width: 23px;
    height: 23px;
  }
  .tab-header {
    gap: 0 5px;
    font-size: 12px;
    color: #747A8F;
  }
  .td-1 {
    flex-shrink: 0;
    width: 80px;
  }
  .td-2 {
    flex-shrink: 0;
    width: 150px;
  }
  .tabWarp {
    width: 100%;
    padding: 10px 10px;
    overflow-x: scroll;
    // white-space: nowrap;
    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;
    .search-icon {
        width: 23px;
        height: 23px;
    }
  }
    .tab-header {
        gap: 0 5px;
        font-size: 12px;
        color: #747A8F;
    }
    .td-1{
      flex-shrink: 0;
      width: 80px;
    }
    .td-2{
      flex-shrink: 0;
      width: 150px;
    }
    .tabWarp{
      width: 100%;
      padding: 10px 10px;
      overflow-x: scroll;
      // white-space: nowrap;
      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>