其他人改的版本

李凌

2025-10-15 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65

 src/views/ICO/icoRecord.vue

@@ -1,134 +1,155 @@
<template>
    <div class="icoRecord">
        <fx-header>
            <template v-slot:title>
                <div>{{ $t('申购记录') }}</div>
            </template>
        </fx-header>
  <div class="icoRecord">
    <fx-header>
      <template v-slot:title>
        <div>{{ $t('申购记录') }}</div>
      </template>
    </fx-header>

        <van-tabs v-model:active="active">
            <van-tab name="0" :title="$t('all')"></van-tab>
            <van-tab name="1" :title="$t('已认购')"></van-tab>
            <van-tab name="2" :title="$t('未中签')"></van-tab>
            <van-tab name="3" :title="$t('已中签')"></van-tab>
            <van-tab name="4" :title="$t('已缴纳')"></van-tab>
            <van-tab name="5" :title="$t('已分发')"></van-tab>
        </van-tabs>
    <van-tabs type="card" color="#111" title-active-color="#FFF" title-inactive-color="#333" v-model:active="active">
      <van-tab name="0" :title="$t('all')"></van-tab>
      <van-tab name="1" :title="$t('已认购')"></van-tab>
      <van-tab name="2" :title="$t('未中签')"></van-tab>
      <van-tab name="3" :title="$t('已中签')"></van-tab>
      <van-tab name="4" :title="$t('已缴纳')"></van-tab>
      <van-tab name="5" :title="$t('已分发')"></van-tab>
    </van-tabs>

        <div class="icoRecord_list">
            <div class="icoRecord_item mb-5" v-for="(item, index) in recordLIst" :key="index">
                <div class="item_1">
                    {{ item.symbol }} ({{ item.name }})
                </div>
                <div class="item_2 flex justify-between">
                    <div>{{ $t('state') }}</div>
                    <div>{{ getStatus(item.status) }}</div>
                </div>
                <div class="item_2 flex justify-between">
                    <div>{{ $t('申购数量') }}</div>
                    <div>{{ item.subscribeNums }}</div>
                </div>
                <div class="item_2 flex justify-between">
                    <div>{{ $t('中签数量') }}</div>
                    <div>{{ item.ballotNumber }}</div>
                </div>
            </div>
    <div class="icoRecord_list">
      <div class="icoRecord_item mb-5" v-for="(item, index) in recordLIst" :key="index">
        <div class="item_1">
          <div>
            {{ item.symbol }}
          </div>
          <div class="item_1_1">
            {{ item.name }}
          </div>
        </div>
        <div class="item_2 flex justify-between">
          <div>{{ $t('state') }}</div>
          <div>{{ getStatus(item.status) }}</div>
        </div>
        <div class="item_2 flex justify-between">
          <div>{{ $t('申购数量') }}</div>
          <div>{{ item.subscribeNums }}</div>
        </div>
        <div class="item_2 flex justify-between">
          <div>{{ $t('中签数量') }}</div>
          <div>{{ item.ballotNumber }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { showToast } from 'vant'
import { _icoRecordList } from "@/service/ico.api.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n()
import {ref, watch} from "vue";
import {showToast} from 'vant'
import {_icoRecordList} from "@/service/ico.api.js";
import {useI18n} from "vue-i18n";

const {t} = useI18n()

// tab切换
const active = ref('0');
watch(active, (val) => {
    getList()
  getList()
})

// 获取记录列表
const recordLIst = ref([]) // 记录列表
const getList = () => {
    let opt = {
        status: active.value
    }
    if (opt.status == '0') delete opt.status
    _icoRecordList(opt).then((res) => {
        console.log(res);
        recordLIst.value = res.records
    })
  let opt = {
    status: active.value
  }
  if (opt.status == '0') delete opt.status
  _icoRecordList(opt).then((res) => {
    console.log(res);
    recordLIst.value = res.records
  })
}
getList()

// 根据状态转换对应的文字
const getStatus = (status) => {
    let str = ''
    switch (status) {
        case 1:
            str = t('已认购')
            break;
        case 2:
            str = t('未中签')
            break;
        case 3:
            str = t('已中签')
            break;
        case 4:
            str = t('已缴纳')
            break;
        case 5:
            str = t('已分发')
            break;
        default:
            break;
    }
    return str
  let str = ''
  switch (status) {
    case 1:
      str = t('已认购')
      break;
    case 2:
      str = t('未中签')
      break;
    case 3:
      str = t('已中签')
      break;
    case 4:
      str = t('已缴纳')
      break;
    case 5:
      str = t('已分发')
      break;
    default:
      break;
  }
  return str
}
</script>

<style lang="scss" scoped>
.icoRecord {
    padding: 0rem 1.2rem 2rem 1.2rem;
    font-size: 1.5rem;
  padding: 0rem 1.2rem 2rem 1.2rem;
  font-size: 1.5rem;

    .icoRecord_list {
        padding: 1rem 0rem;

        .icoRecord_item {
            padding: .5rem 1rem;
            border: #aaa solid 1px;
            border-radius: 1rem;
  .icoRecord_list {
    padding: 1rem 0rem;

            @include themify() {
                background-color: themed("input_background");
            }
    .icoRecord_item {
      padding: .5rem 1rem;
      color: #999;
      font-size: 1.6rem;
      border: #eee solid 1px;
      border-radius:6px;

            .item_1 {
                padding: 1rem .5rem;
                border-bottom: #ccc solid 1px;
                font-size: 2rem;
                font-weight: 700;
            }
      //@include themify() {
      //    background-color: themed("input_background");
      //}

            .item_2 {
                padding: 1rem .5rem;
                border-bottom: #ccc solid 1px;
                font-size: 1.6rem;
                font-weight: 500;
      .item_1 {
        padding: 1rem .5rem;
        border-bottom: #eee solid 1px;
        font-size: 2.5rem;
        color: black;
        margin-bottom:5px;

                &>div:last-child {
                    color: #999;
                }
            }

            .item_3 {
                padding: .5rem;
            }
        .item_1_1 {
          color: #999;
          font-size: 2rem;
        }
      }
      .item_2 {
        padding: 1rem .5rem;
        font-size: 1.4rem;
        font-weight: 500;

        & > div:last-child {
          font-size: 1.7rem;
          color: #333;
        }
      }

      .item_3 {
        padding: .5rem;
      }
    }
  }
}
</style>
</style>
<style>
.van-tabs__nav--card {
  border-radius: 90px;
}


</style>