From 9a9d832dbd364557e070abcd9a7779a2c6c07ffb Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Tue, 20 Jan 2026 17:35:13 +0800
Subject: [PATCH] 1
---
src/views/homePage/index.vue | 247 ++++++++++++++++++++++++++-----------------------
1 files changed, 132 insertions(+), 115 deletions(-)
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 423fe4d..9b2ccbe 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -40,40 +40,44 @@
<div id="cryptos" class="pt-10">
<list-quatation :listData="qList" :tabShow="false" />
</div> -->
- <van-notice-bar text="通知内容" left-icon="volume" color="orange" background="white"/>
+ <van-notice-bar text="通知内容" left-icon="volume" color="orange" background="white" />
<div style="margin: 0 10px">
<div class="flex-centerY">
<div style="font-size: 16px;margin-right: 5px">
- <van-icon v-if="showMoney" @click="showMoney=!showMoney" name="browsing-history" />
- <van-icon v-else @click="showMoney=!showMoney" name="closed-eye" />
+ <van-icon v-if="showMoney" @click="showMoney = !showMoney" name="browsing-history" />
+ <van-icon v-else @click="showMoney = !showMoney" name="closed-eye" />
</div>
<div style="font-size: 14px;color: black">
- {{$t("总资产")}}(USD)
+ {{ $t("总资产") }}(USD)
</div>
</div>
+
<div class="flex-centerY flex-position-between" style="margin-top: 15px">
- <div class="flex flex-justify-between">
- <div style="font-size: 33px;font-weight: bold;color: black">
- {{showMoney?myAssets.capital.toFixed(0):"*****" }}
- </div>
- <div style="font-size: 24px;font-weight: bold;color: black;margin-top: 3px">
- {{showMoney?myAssets.capital.toFixed(2).substring(myAssets.capital.toFixed(2).indexOf(".")):""}}
- </div>
- </div>
- <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px">
- {{$t("充值")}}
+ <div class="flex flex-justify-between">
+ <div style="font-size: 33px;font-weight: bold;color: black">
+ {{ showMoney ? todayMoney.money_contract : "*****" }}
+ </div>
+ </div>
+ <!-- <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"
+ @click="toPage('/cryptos/recharge/rechargeList?isForeign=true')"> -->
+ <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"
+ @click="toPage('/customerService')">
+ {{ $t("充值") }}
</div>
</div>
<div class="flex-centerY" style="font-size: 12px;color: #999;margin-top: 20px;">
<div>
- {{$t("今日盈亏")}}
+ {{ $t("今日盈亏") }}
</div>
- <div style="margin-left: 15px">
- {{showMoney? todayMoney.money_contract_profit_today:"****"}}
+ <div style="margin-left: 15px"
+ :style="todayMoney.money_contract_profit_today > 0 ? 'color: #0f0' : todayMoney.money_contract_profit_today < 0 ? 'color: #f00' : ''">
+ {{ showMoney ? todayMoney.money_contract_profit_today : "****" }}
</div>
- <div style="margin-left: 15px">
- {{showMoney?(Number(todayMoney.money_contract_profit_today+'')/(myAssets.capital==0?1:myAssets.capital)*100).toFixed(2)+'%':"****"}}
+ <div style="margin-left: 15px"
+ :style="todayMoney.money_contract_profit_today > 0 ? 'color: #0f0' : todayMoney.money_contract_profit_today < 0 ? 'color: #f00' : ''">
+ {{ showMoney ? (Number(todayMoney.money_contract_profit_today + '') / (todayMoney.money_contract == 0 ? 1 :
+ todayMoney.money_contract) * 100).toFixed(2) + '%' : "****" }}
</div>
</div>
</div>
@@ -85,69 +89,64 @@
</div>
</div>
<div style="position: relative;margin: 10px 00px;border-radius: 12px;border: 1px #eee solid">
-<!-- <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>-->
+ <!-- <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>-->
- <van-swipe @change="current=$event" indicator-color="#999" class="notice-swipe" :autoplay="2000"
- :show-indicators="false" style="border-radius: 8px;overflow: hidden">
- <van-swipe-item v-for="item in announceList" style="border-radius: 8px;overflow: hidden;border: #eee 1px solid" :key="item.id" @click="toAnnounceDetail(item.uuid)">
-<!-- <div class="flex justify-start items-center">-->
-<!-- <img :src="item.imgUrl" style="width:100%" alt="" class="notice_img mr-5">-->
-<!--<!– <div class="notice_content textColor">–>-->
-<!--<!– <div>{{ item.startTime }}</div>–>-->
-<!--<!– <div>{{ item.title }}</div>–>-->
-<!--<!– </div>–>-->
-<!-- </div>-->
- <img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px" >
- </van-swipe-item>
- </van-swipe>
-<!-- </van-notice-bar>-->
+ <van-swipe @change="current = $event" indicator-color="#999" class="notice-swipe" :autoplay="2000"
+ :show-indicators="false" style="border-radius: 8px;overflow: hidden">
+ <van-swipe-item v-for="item in announceList" style="border-radius: 8px;overflow: hidden;border: #eee 1px solid"
+ :key="item.id" @click="toAnnounceDetail(item.uuid)">
+ <img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px">
+ </van-swipe-item>
+ </van-swipe>
<div class="flex-center" style="position:absolute;bottom:5px;left:0;;z-index:999;width: 100%">
- <div v-for="(i,index) in announceList">
- <div v-if="current!=index" style="width:3px;height:3px;background:#bbb;margin-right:5px;border-radius: 3px"></div>
+ <div v-for="(i, index) in announceList" :key="index">
+ <div v-if="current != index" style="width:3px;height:3px;background:#bbb;margin-right:5px;border-radius: 3px">
+ </div>
<div v-else style="width:3px;height:3px;background:#333;;margin-right:5px;border-radius: 3px"></div>
</div>
</div>
</div>
-<!-- <div style="margin: 15 0px;align-items: stretch" class="flex-centerY">-->
-<!-- <div class="flex-centerY" style="flex: 1;margin-right: 20px;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->
-<!-- <div style="flex: 1" class="flexY">-->
-<!-- <div style="font-size: 14px;color: black;font-weight: bold">-->
-<!-- {{$t("信贷")}}-->
-<!-- </div>-->
-<!-- <div style="font-size: 12px;color: #999;flex: 1">-->
-<!-- {{$t("低利率，彈性強，助您持續擁有資金")}}-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div >-->
-<!-- <img src="../../assets/img/img_4.png" style="width: 55px;height: 55px">-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div class="flex-centerY" style="flex: 1;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->
-<!-- <div style="flex: 1;height: 100%" class="flexY">-->
-<!-- <div style="font-size: 14px;color: black;font-weight: bold">-->
-<!-- {{$t("OTC")}}-->
-<!-- </div>-->
-<!-- <div style="font-size: 12px;color: #999;;flex: 1">-->
-<!-- {{$t("200+支付方式")}}-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div >-->
-<!-- <img src="../../assets/img/img_5.png" style="width: 55px;height: 55px">-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
+ <!-- <div style="margin: 15 0px;align-items: stretch" class="flex-centerY">-->
+ <!-- <div class="flex-centerY" style="flex: 1;margin-right: 20px;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->
+ <!-- <div style="flex: 1" class="flexY">-->
+ <!-- <div style="font-size: 14px;color: black;font-weight: bold">-->
+ <!-- {{$t("信贷")}}-->
+ <!-- </div>-->
+ <!-- <div style="font-size: 12px;color: #999;flex: 1">-->
+ <!-- {{$t("低利率，彈性強，助您持續擁有資金")}}-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div >-->
+ <!-- <img src="../../assets/img/img_4.png" style="width: 55px;height: 55px">-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="flex-centerY" style="flex: 1;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->
+ <!-- <div style="flex: 1;height: 100%" class="flexY">-->
+ <!-- <div style="font-size: 14px;color: black;font-weight: bold">-->
+ <!-- {{$t("OTC")}}-->
+ <!-- </div>-->
+ <!-- <div style="font-size: 12px;color: #999;;flex: 1">-->
+ <!-- {{$t("200+支付方式")}}-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div >-->
+ <!-- <img src="../../assets/img/img_5.png" style="width: 55px;height: 55px">-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
<div class="tabs flex justify-start items-center textColor1">
- <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key" style="font-size: 16px;margin-top: 20px">
+ <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key"
+ style="font-size: 16px;margin-top: 20px">
{{ i.name }}
</div>
</div>
<div id="cryptos">
- <list-quatation :listData="qList" :tabShow="false" :tabActive="tab"/>
+ <list-quatation :listData="qList" :tabShow="false" :tabActive="tab" />
</div>
<div class="home_2" @click="toPage('/quotes/index')">
{{ $t("更多") }}
- <van-icon name="arrow-down"/>
+ <van-icon name="arrow-down" />
</div>
<div class="home_3 flex justify-start">
@@ -160,7 +159,7 @@
<template #title>
<div class="flex justify-start items-center">
<img src="@/assets/imgs/home/home_23a.png" alt="" class="border_icon"
- v-if="storeS.state.vant.theme == 'light'">
+ v-if="storeS.state.vant.theme == 'light'">
<img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else>
{{ $t('公司') }}
</div>
@@ -174,7 +173,7 @@
<template #title>
<div class="flex justify-start items-center">
<img src="@/assets/imgs/home/home_21a.png" alt="" class="border_icon"
- v-if="storeS.state.vant.theme == 'light'">
+ v-if="storeS.state.vant.theme == 'light'">
<img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else>
{{ $t('法律') }}
</div>
@@ -187,7 +186,7 @@
<template #title>
<div class="flex justify-start items-center">
<img src="@/assets/imgs/home/home_22a.png" alt="" class="border_icon"
- v-if="storeS.state.vant.theme == 'light'">
+ v-if="storeS.state.vant.theme == 'light'">
<img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else>
{{ $t('支援') }}
</div>
@@ -202,16 +201,16 @@
<script setup>
import Head from './components/head.vue'
-import {useI18n} from "vue-i18n";
-import {ref, computed, onBeforeUnmount} from 'vue';
-import {useRouter} from 'vue-router';
+import { useI18n } from "vue-i18n";
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
-import {_getHomeList} from '@/service/cryptos.api'
-import {_getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews} from '@/service/user.api'
-import {useStore} from "vuex";
-import {TIME_OUT, LOGO} from "@/config";
-import {useUserStore} from '@/store/user';
-import {setStorage, getStorage} from '@/utils/index.js';
+import { _getHomeList } from '@/service/cryptos.api'
+import { _getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews } from '@/service/user.api'
+import { useStore } from "vuex";
+import { TIME_OUT, LOGO } from "@/config";
+import { useUserStore } from '@/store/user';
+import { setStorage, getStorage } from '@/utils/index.js';
import storeS from '@/store/store'
let catchSymbol = getStorage('symbol')
@@ -219,14 +218,31 @@
setStorage('symbol', 'btcusdt');
}
const userStore = useUserStore()
-const {t} = useI18n()
+const { t } = useI18n()
const router = useRouter()
const store = useStore();
-const showMoney=ref(true)
-const myAssets=ref({})
- _getassets().then(res => {
- myAssets.value = res
+const showMoney = ref(true)
+
+const todayMoney = ref({
+ money_contract_profit_today: 0
+})
+
+// 获取资产信息
+function getAllAssets() {
+ _getContractBySymbolType().then(data => {
+ todayMoney.value = data
})
+}
+// 轮询获取资产信息
+let times1 = null;
+getAllAssets();
+times1 = setInterval(() => {
+ getAllAssets();
+}, 4000)
+// 停止获取资产计数器
+function timeOut1() {
+ clearInterval(times1)
+}
const tabbers = [
// { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
@@ -268,13 +284,13 @@
// icon2: new URL('@/assets/imgs/home/home_10b.png', import.meta.url),
// path: '/customerService'
// },
- {
- key: 9,
- name: t('申购'),
- icon: new URL('@/assets/img/img.png', import.meta.url),
- icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
- path: '/ICO/ico'
- },
+ // {
+ // key: 9,
+ // name: t('申购'),
+ // icon: new URL('@/assets/img/img.png', import.meta.url),
+ // icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
+ // path: '/ICO/ico'
+ // },
{
key: 9,
name: t('C2C'),
@@ -288,7 +304,7 @@
icon: new URL('@/assets/img/img_3.png', import.meta.url),
icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
path: '/customerService'
- },{
+ }, {
key: 9,
name: t('闪兑'),
icon: new URL('@/assets/img/img_2.png', import.meta.url),
@@ -299,33 +315,32 @@
// 手风琴选中
const activeName = ref('0')
-const todayMoney=ref({
- money_contract_profit_today:0
-})
// tab切换
const tab = ref(1)
const current = ref(0)
const tabList = [
- {name: t('永续合约'), key: 1},
- {name: t('现货'), key: 2},
+ { name: t('永续合约'), key: 1 },
+ { name: t('现货'), key: 2 },
]
// 获取公告数据
-const announceList = ref([])
-_getContractBySymbolType().then(data => {
- todayMoney.value = data
-})
-_getNewsList1({
- language: useI18n().locale.value,
-}).then(res => {
- announceList.value = res
-})
+const announceList = ref([
+ { imgUrl: new URL('@/assets/imgs/home/lbt_1.png', import.meta.url), id: 1, title: '公告标题1', content: '公告内容1', time: '2022-01-01' },
+ { imgUrl: new URL('@/assets/imgs/home/lbt_2.png', import.meta.url), id: 2, title: '公告标题2', content: '公告内容2', time: '2022-01-01' },
+ { imgUrl: new URL('@/assets/imgs/home/lbt_3.png', import.meta.url), id: 3, title: '公告标题3', content: '公告内容3', time: '2022-01-01' },
+ { imgUrl: new URL('@/assets/imgs/home/lbt_4.png', import.meta.url), id: 4, title: '公告标题4', content: '公告内容4', time: '2022-01-01' },
+ { imgUrl: new URL('@/assets/imgs/home/lbt_5.png', import.meta.url), id: 5, title: '公告标题5', content: '公告内容5', time: '2022-01-01' },
+])
+// _getNewsList1().then(res => {
+// announceList.value = res
+// })
// 跳转公告详情
const toAnnounceDetail = (announceId) => {
+ return
if (announceId) {
- router.push({path: '/cryptos/AnnounceDetail', query: {id: announceId}})
+ router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } })
}
}
@@ -348,14 +363,14 @@
// 轮播图数据
const swipe1 = ref([
- {key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url)},
- {key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url)},
- {key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url)},
+ { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
+ { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },
+ { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
])
const swipe2 = ref([
- {key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url)},
- {key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url)},
- {key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url)},
+ { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
+ { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },
+ { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
])
//#region 行情数据----------------------------------------
@@ -382,11 +397,13 @@
fetchQList()
onBeforeUnmount(() => {
+ timeOut1()
if (timeout.value) {
clearTimeout(timeout.value)
}
})
//#endregion----------------------------------------------
+
</script>
@@ -432,7 +449,7 @@
}
.notice_content {
- & > div:first-child {
+ &>div:first-child {
color: $text_color1;
}
}
@@ -441,7 +458,7 @@
.tabs {
font-size: 1.8rem;
- & > div {
+ &>div {
margin-right: 2rem;
}
}
--
Gitblit v1.9.3