1

李凌

2026-01-21 09cd59e111da050db1e26621a231c7e2eb7a415b

 src/views/ICO/ico.vue

@@ -2,154 +2,476 @@
    <div class="ico">
        <fx-header :showLeft="false">
            <template v-slot:title>
                <div>ICO</div>
                <div>{{ $t('ICO申购') }}</div>
            </template>
            <template v-slot:right>
            <!-- <template v-slot:right>
                <van-icon name="todo-list-o" @click="$router.push('/ICO/icoRecord')" />
            </template>
            </template> -->
        </fx-header>

        <div class="ico_list">
            <div class="ico_item mb-5" v-for="i in icoList" :key="i.id">
                <div class="item_1">
                    {{ i.name }}
                </div>
                <div class="item_2 flex justify-between">
                    <div class="mr-5">{{ $t('申购时间') }}</div>
                    <div>{{ i.startDate }} ~ {{ i.endDate }}</div>
                </div>
                <div class="item_2 flex justify-between">
                    <div>{{ $t('最低认购') }}</div>
                    <div>{{ i.minContribution }}</div>
                </div>
                <div class="item_2 flex justify-between">
                    <div>{{ $t('币种数量') }}</div>
                    <div>{{ i.maxContribution }}</div>
                </div>
                <div class="item_2 flex justify-between">
                    <div>{{ $t('IssuePrice') }}</div>
                    <div>{{ i.unitAmount }}</div>
                </div>
        <div class="ico-intro">
            {{ $t('发掘最热、最新币种,及时捕捉市场机会') }}
        </div>

                <div class="item_2 flex justify-between">
                    <div>{{ $t('listingDate') }}</div>
                    <div>{{ i.marketDate }}</div>
        <!-- ICO申购卡片 -->
        <div class="ico-card">
            <div class="card-header">
                <div class="token-info">
                    <div class="token-symbol">CLK</div>
                </div>
                <div class="item_2 flex justify-between align-center">
                    <div>{{ $t('进度') }}</div>
                    <div style="width: 70%;padding-top: 1rem;">
                        <van-progress :percentage="i.progressRate || 0" track-color="#ccc" />
            </div>

            <div class="card-content">
                <div class="price-row">
                    <div class="price-item">
                        <div class="price-label">{{ $t('募集价格') }}</div>
                        <div class="price-value green">{{ closePrice || '0' }} USDT</div>
                    </div>
                    <div class="price-item">
                        <div class="price-label">{{ $t('实际支付') }}</div>
                        <div class="price-value">{{ actualPayment }} USDT</div>
                    </div>
                </div>
                <div class="item_3 flex justify-center">
                    <van-button type="default" round size="large" @click="openBuy(i)">{{$t('申购')}}</van-button>

                <div class="input-row">
                    <div class="input-label">{{ $t('申购数量') }}</div>
                    <div class="input-wrapper">
                        <van-field v-model="sgNum" type="digit" :placeholder="$t('请输入申购数量')" class="subscribe-input" />
                        <van-button size="small" type="default" @click="setAll" class="all-btn">{{ $t('全部')
                        }}</van-button>
                    </div>
                </div>

                <div class="balance-row">
                    <div class="balance-label">{{ $t('可用余额') }}</div>
                    <div class="balance-value">{{ initOpen.volume || '0' }} USDT</div>
                </div>

                <van-button type="primary" block round class="buy-btn" @click="buy">
                    {{ $t('买入') }}
                </van-button>
            </div>
        </div>


        <!-- 购买弹窗 -->
        <van-popup v-model:show="show" round>
            <div class="buy_popup">
                <div class="buy_title flex justify-center">{{ itemObj.symbol }}</div>

                <van-field v-model="sgNum" type="digit" :label="$t('申购数量')" />

                <div class="flex justify-center mt-5">
                    <van-button type="default" size="large" round @click="buy">{{ $t('confirm') }}</van-button>
        <!-- 持仓信息卡片 -->
        <div class="holding-card" v-if="recordData">
            <div class="card-title">{{ $t('持仓信息') }}</div>
            <div class="card-header">
                <div class="token-info">
                    <div class="token-symbol">CLK</div>
                </div>
            </div>
        </van-popup>

            <div class="card-content">
                <div class="info-row">
                    <div class="info-label">{{ $t('限售时间') }}</div>
                    <div class="info-value">{{ recordData.lockingTime }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">{{ $t('申购数量') }}</div>
                    <div class="info-value">{{ recordData.purchaseQuantity || '0' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">{{ $t('现价') }}</div>
                    <div class="info-value">{{ recordData.currentPrice || '--' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">{{ $t('购买价') }}</div>
                    <div class="info-value">{{ recordData.purchasePrice || '--' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">{{ $t('持仓市值') }}</div>
                    <div class="info-value">{{ recordData.positionvalue || '0.00' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">{{ $t('购买总额') }}</div>
                    <div class="info-value">{{ (recordData.purchaseQuantity * recordData.purchasePrice).toFixed(4) ||
                        '--' }}
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">{{ $t('盈亏') }}</div>
                    <div class="info-value red">
                        {{ recordData.profitPercent ? (recordData.profitPercent + '%') : '--%' }}
                        ({{ recordData.profit || '0.00' }}USDT)
                    </div>
                </div>
                <div class="sell-btn-wrapper" v-if="canSell">
                    <van-button type="primary" block round class="sell-btn" @click="goToSell(recordData)">
                        {{ $t('卖出') }}
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { showToast } from 'vant'
import { _icoList, _icoSubscribe } from "@/service/ico.api.js";
import { _icoList, _ico_buy, _get_ico_position } from "@/service/ico.api.js";
import { _getBalance } from "@/service/user.api.js";
import { useI18n } from "vue-i18n";
import { useUserStore } from '@/store/user';
import { useRouter } from "vue-router";
import { setStorage } from "@/utils/index.js";
import trading from '@/service/trading'
import { WS_URL } from '@/config'
const { t } = useI18n()
const userStore = useUserStore()
const router = useRouter()

// 获取列表
const icoList = ref([])
_icoList().then(res => {
    icoList.value = res.records
}).catch(err => {
    // showToast(err.msg)
// 记录数据
const recordData = ref(null)
// 申购数量
const sgNum = ref('')
// 开仓数据
const initOpen = ref({})
// ws
const socket = ref(null)
// 价格
const closePrice = ref(0)

// 计算实际支付
const actualPayment = computed(() => {
    if (!sgNum.value || !closePrice.value) return '0'
    return (parseFloat(sgNum.value) * parseFloat(closePrice.value)).toFixed(4)
})

// 打开申购弹窗
const show = ref(false) // 控制弹窗显示
const itemObj = ref({}) // ico列表项
const sgNum = ref(0) // 申购数量
const openBuy = (i) => {
    show.value = true
    itemObj.value = i
// 判断是否可以卖出（限售时间是否已过）
const canSell = computed(() => {
    if (!recordData.value || !recordData.value.lockingTime) return false
    try {
        // 将 lockingTime 格式 "2026-02-09" 转换为 Date 对象（设置为当天的 00:00:00）
        const lockingDate = new Date(recordData.value.lockingTime + ' 00:00:00')
        const now = new Date()
        // 如果限售时间早于当前时间，则可以卖出
        return lockingDate < now
    } catch (error) {
        console.error('时间解析错误', error)
        return false
    }
})

// 获取持仓
const getRecordList = () => {
    _get_ico_position({
        session_token: initOpen.value.session_token,
    }).then(res => {
        recordData.value = res
    }).catch(err => {
        console.error('获取持仓失败', err)
    })
}

// 获取开仓数据
const getInitOpen = () => {
    if (userStore.userInfo && userStore.userInfo.token) {
        trading.tradeBuyToken().then(res => {
            initOpen.value = res || {}
            getRecordList()
        }).catch(err => {
            console.error('获取开仓数据失败', err)
        })
    }
}

// 设置全部
const setAll = () => {
    if (!closePrice.value || !initOpen.value.volume) {
        showToast(t('余额不足'))
        return
    }
    // 计算最大可申购数量（基于可用余额）
    const maxNum = Math.floor((parseFloat(initOpen.value.volume) / parseFloat(closePrice.value)) * 10000) / 10000
    sgNum.value = maxNum.toString()
}

// 最新价格获取
const handleQoutes = (data) => {
    if (data && data.length) {
        const cur = data[0]
        closePrice.value = cur.close
        // this.range = cur.change_ratio + ''
        // this.quote = cur
    }
}

// 行情socket
const startQuoteSocket = () => {
    socket.value = new WebSocket(`${WS_URL}/1/pendleusdt`)
    socket.value.onmessage = (evt) => {
        const { data } = evt
        const { code, data: _data } = JSON.parse(data)
        if (code / 1 === 0) {
            handleQoutes(_data)
        }
    }
}

// 关闭清空ws
const closeSocket = () => {
    socket.value && socket.value.close()
    socket.value = null
}

// 申购
const buy = () => {
    let opt = {
        icoProjectId: itemObj.value.id,
        subscribeNums: sgNum.value,
        subscriptionType: 1,
    if (!sgNum.value || parseFloat(sgNum.value) <= 0) {
        showToast(t('请输入申购数量'))
        return
    }
    _icoSubscribe(opt).then(res => {

    let opt = {
        volume: actualPayment.value,
        session_token: initOpen.value.session_token,
        symbol: "pendleusdt", // 币种
        price: closePrice.value,
        total: sgNum.value,
        order_price_type: "opponent", // 市价or限价
    }
    _ico_buy(opt).then(res => {
        showToast(t('submitSuccess'))
        show.value = false
        sgNum.value = ''
        getInitOpen()
    }).catch(err => {
        showToast(err)
        showToast(err.msg || err || t('申购失败'))
    })
}

// 卖出
const goToSell = (item) => {
    if (!item) {
        showToast(t('数据加载中，请稍候'))
        return
    }
    // 将卖出参数存储到 localStorage，供交易页面读取
    setStorage('tradeSellParams', {
        volume: item.purchaseQuantity || '0',
        mode: 'close' // 卖出模式
    })
    router.push(`/cryptos/trade/pendleusdt`)
}

onMounted(() => {
    getInitOpen()
    startQuoteSocket()
})

onBeforeUnmount(() => {
    closeSocket()

})
</script>

<style lang="scss" scoped>
.ico {
    padding: 0rem 1.2rem 5rem 1.2rem;
    font-size: 1.5rem;
    min-height: 100vh;
    background: #1a1a1a;

    .buy_popup {
        width: 40rem;
        padding: 1rem;

        .buy_title {
            font-size: 2.5rem;
            font-weight: 700;
            border-bottom: #aaa solid 1px;
            padding: 1rem;
        }
    .ico-intro {
        padding: 1.5rem 0;
        font-size: 1.4rem;
        color: #999;
        text-align: center;
    }

    .ico_list {
        padding: 1rem 0rem;
    .ico-card,
    .holding-card {
        background-color: #333;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        border: 1px solid #444;

        .ico_item {
            background-color: #333;
            padding: .5rem 1rem;
            border: #aaa solid 1px;
            border-radius: 1rem;
        .card-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #fff;
        }

            .item_1 {
                padding: 1rem .5rem;
                border-bottom: #ccc solid 1px;
                font-size: 2rem;
                font-weight: 700;
        .card-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #555;

            .token-info {
                display: flex;
                align-items: center;
                gap: 1rem;

                .token-logo {
                    width: 4rem;
                    height: 4rem;
                    border-radius: 50%;
                    background: #444;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .token-placeholder {
                        font-size: 2rem;
                        font-weight: 700;
                        color: #fff;
                    }
                }

                .token-symbol {
                    font-size: 2rem;
                    font-weight: 700;
                    color: #fff;
                }
            }
        }

            .item_2 {
                padding: 1rem .5rem;
                border-bottom: #ccc solid 1px;
                font-size: 1.6rem;
                font-weight: 500;
        .card-content {
            .price-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 1.5rem;

                &>div:last-child {
                    color: #999;
                .price-item {
                    flex: 1;

                    .price-label {
                        font-size: 1.4rem;
                        color: #999;
                        margin-bottom: 0.5rem;
                    }

                    .price-value {
                        font-size: 1.8rem;
                        font-weight: 600;
                        color: #fff;

                        &.green {
                            color: #06CDA5;
                        }
                    }
                }
            }

            .item_3 {
                padding: .5rem;
            .input-row {
                margin-bottom: 1.5rem;

                .input-label {
                    font-size: 1.4rem;
                    color: #999;
                    margin-bottom: 0.5rem;
                }

                .input-wrapper {
                    display: flex;
                    align-items: center;
                    gap: 1rem;

                    .subscribe-input {
                        flex: 1;
                        background: #222;
                        border-radius: 0.5rem;
                        padding: 0;

                        :deep(.van-field__control) {
                            color: #fff;
                            font-size: 1.6rem;
                            padding: 0 1rem;
                        }

                        :deep(.van-field__label) {
                            display: none;
                        }
                    }

                    .all-btn {
                        min-width: 6rem;
                        height: 3.5rem;
                        border-radius: 0.5rem;
                        background: #444;
                        color: #fff;
                        border: 1px solid #555;
                    }
                }
            }

            .balance-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1.5rem;
                padding: 1rem;
                background: #222;
                border-radius: 0.5rem;

                .balance-label {
                    font-size: 1.4rem;
                    color: #999;
                }

                .balance-value {
                    font-size: 1.6rem;
                    color: #fff;
                }
            }

            .buy-btn {
                height: 4.5rem;
                font-size: 1.8rem;
                font-weight: 600;
                background: #555;
                border: none;
                color: #fff;
            }

            .info-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem 0;
                border-bottom: 1px solid #444;

                &:last-child {
                    border-bottom: none;
                }

                .info-label {
                    font-size: 1.4rem;
                    color: #999;
                }

                .info-value {
                    font-size: 1.6rem;
                    color: #fff;
                    font-weight: 500;

                    &.red {
                        color: #f43368;
                    }
                }
            }

            .sell-btn-wrapper {
                margin-top: 1.5rem;
                padding-top: 1.5rem;
                border-top: 1px solid #444;
            }

            .sell-btn {
                height: 4.5rem;
                font-size: 1.8rem;
                font-weight: 600;
                background: #555;
                border: none;
                color: #fff;
            }
        }
    }